一些js陣列操作

2021-10-01 16:23:05 字數 2860 閱讀 8232

雖然很基礎,但是還是想總結一下,總有時候用到的時候想不起來需要文件幫助。

1.sort()它會改變原來的陣列。

操作例子

但是sort()又是常用的陣列操作,特別是一些管理系統當中,我說乙個實際專案中的例子,我做過乙個公告列表,後台給的列表的排序是置頂的排前,然後再是時間排序,然而我需要得到這個陣列中時間最新的訊息顯示在系統頂部,排序是個簡單有效的辦法,但是不能改變列表排序。不重新排序的方法:

解決方法

不對原來的陣列排序,[...arr]就形成了乙個新的陣列,和arr一致的陣列。

2.push()改變原陣列,unshift()改變原數,reverse()改變原數,concat(),push()是在陣列末尾增加,unshift()在陣列頭部增加。又乙個實際組合起來用的例子,日期元件:

資料操作

這個例子比較複雜,包括了日期的各種巧妙用法,其實簡單的對應陣列來說可以這樣理解:

日曆陣列簡單化思想

當然如果不是在這個日曆環境下,就截圖裡的陣列和期望而言還可以又很多簡單的方法,例如:

reverse() and concat()

可以看出reverse()改變了原來的陣列,功能是反序,concat()功能拼接陣列,不會改變原來陣列。concat()可以拼接多個陣列。

3.tostring(),這個我也沒有在實際專案中用到過。來看下例子。

tostring()例子

可以看出不改變原來的陣列,會展開陣列中的陣列,不會展開陣列裡的obj。

jion(), 和tostring()相似。但是可以在每個元素後新增需要的元素。最常見的是日期格式的顯示。

join()日期格式

對得到的字串切片成陣列再jion()連線的符號形成想要的格式是很常見的用法。

4.splice()改變原來的陣列,slice(),這文件裡都講很清楚,有一點要注意都是,這兩個操作都可以填負數,代表從尾部算起,但是尾部第乙個是-1,頭部第乙個是0,容易愣一下。

splice()

可以看出它不僅改變了原來都陣列還產生了「切片」,返回了即將被替代都部分。

slice()

可以看出它不改變原有陣列,而是產生了一段切片,包括前乙個下標不包括下乙個下標,相當於擷取[a,b)。

5.pop(),shift()。

!例子改變原來的陣列,會產生被刪掉的元素的「切片」,當陣列為空是不會報錯。

總結一下:

改變原陣列的是:sort(),push(),unshift(),splice(),reverse(),pop(),shift(), fill(),

再補乙個陣列去重:(es6)

var arr = [...new set([2,"12",2,12,1,2,1,6,12,13,6])]

得到的就是沒有重複元素的陣列了,注意的是[...new set([2,"12",2,12,1,2,1,6,12,13,6,'我','我',,,])]這樣的複雜陣列中{}和是都代表不同的元素。得到:[2, "12", 12, 1, 6, 13, "我", , , ]。

fill():

a = array(9).fill('1') //乙個引數則全部填充!

a(9) ["1", "1", "1", "1", "1", "1", "1", "1", "1"]

a.fill(2)

(9) [2, 2, 2, 2, 2, 2, 2, 2, 2]

a.fill(1,2)

(9) [2, 2, 1, 1, 1, 1, 1, 1, 1]

a.fill(3,3)

(9) [2, 2, 1, 3, 3, 3, 3, 3, 3]

a.fill(3,1,2)

(9) [2, 3, 1, 3, 3, 3, 3, 3, 3]

a.fill('3',1,2)

(9) [2, "3", 1, 3, 3, 3, 3, 3, 3]

a.fill('3',1,3)

(9) [2, "3", "3", 3, 3, 3, 3, 3, 3]

a.fill('4',1,1) //間隔0 則不會改變

(9) [2, "3", "3", 3, 3, 3, 3, 3, 3]

a.fill('4',1,5)

(9) [2, "4", "4", "4", "4", 3, 3, 3, 3]

fill(value,start,end)

區間:[start,end)

find() :

a = [1,2,3]

(3) [1, 2, 3]

a.find(num => num === 1)

1a.find(num => num === '1')

undefined //不存在則返回 undefined

a.findindex(num => num === 1)

0a.findindex(num => num === 2)

1a.findindex(num => num === '2')

-1 //不存在則返回 -1

a.find(num => num === 2)

2a.fill(2,1,4)

(3) [1, 2, 2]

a.findindex(num => num === 2)

1 //存在則返回找到的第乙個符合的元素的下標

a.find(num => num === 2)

2 //存在則返回本身

reduce()

a = [0,1,2].reduce((count,i) => count + i)   // 累加

a = [0,1,2].reduce((count,i) => count * i) //累乘

a = [0,1,2].reduce((count,i) => count - i) //累減

js陣列的一些基本操作

var arrayobj new array 建立乙個陣列 var arrayobj new array size 建立乙個陣列並指定長度,注意不是上限,是長度 var arrayobj new array element0 element1 elementn 建立乙個陣列並賦值 var testg...

JS中有關陣列的一些操作

本篇文章主要記錄有關js陣列的一些操作方法。型別判斷。陣列轉字串。翻轉陣列。陣列排序。陣列鏈結。陣列擷取,替換。索引位置。every遍歷,每次為true,結果為true。filter過濾器。foreach迴圈。some遍歷,一次為true,結果為true。陣列清空。concat陣列鏈結 consol...

JS中的陣列(關於陣列的一些基本操作與一些騷操作)

本次筆記記錄一下個人關於陣列沒掌握好的一些知識點 arra.of用來建立單個陣列 當我們想建立陣列中只有乙個元素,且元素值為1的時候 let arr1 new array 1 console.log arr1 很顯然,列印出的卻是長度為1的空陣列 正確方法來了 let arr2 array.of 1...