數組鏈接

Array 構造上的方法

一、Array.from()

Array.from方法用于將兩類對象轉為真正的數組：類似數組的對象（array-like object）和可遍歷（iterable）的對象（包括 ES6 新增的數據結構 Set 和 Map）。

// NodeList對象 let ps = document.querySelectorAll('p'); Array.from(ps).filter(p => {return p.textContent.length > 100; });// arguments對象 function foo() {var args = Array.from(arguments); } View Code

二、Array.isArray()

1.用于判斷是否是數組（推薦）

let arr= [1,2,3]; let str="12345"; console.log(Array.isArray(arr)); // true console.log(Array.isArray(str)); // false

?

三、Array.of() vs Array()

1.用于將一組數值轉化為數組

2.這個方法的主要目的，是彌補數組構造函數Array()的不足(因為參數個數的不同，會導致Array()的行為有差異，多個參數是相同)

console.log(Array.of(1)); // [ 1 ] console.log(Array.of(3)); // [ 3 ] console.log(Array.of(1,2,3)); // [ 1, 2, 3 ] console.log(Array(1)); // [ <1 empty item> ] console.log(Array(3)); // [ <3 empty items> ] console.log(Array(1,2,3)); // [ 1, 2, 3 ] View Code

?

Array 原型上的方法

?

一、concat() vs 擴展運算符...

concat?

1.不改變原來數組

2.可以打散數組

3.只能從后面插入

let arr = [1,2,3]; let newArr = arr.concat(4,5,6); console.log(arr); // [ 1, 2, 3 ] console.log(newArr); // [ 1, 2, 3, 4, 5, 6 ] let arr1 = [1,2,3]; let arr2= [1,2,3] let newArr1 = arr1.concat(arr2); console.log(arr1); // [ 1, 2, 3 ] console.log(newArr1); // [ 1, 2, 3, 1, 2, 3 ] View Code

數組解構（推薦）

1.可以在任何位置插入

let arr1= [1,2,3]; let arr2=[4,5,...arr1, 6]; console.log(arr1); // [ 1, 2, 3 ] console.log(arr2); // [ 4, 5, 1, 2, 3, 6 ] View Code

二、 keys values entries vs for of

let letter = ['a', 'b', 'c']; let entries = letter.entries(); console.log(entries.next().value); // [0, 'a'] console.log(entries.next().value); // [1, 'b'] console.log(entries.next().value); // [2, 'c'] View Code let arr = ['a', 'b', 'c']; for(let key of arr.keys()){console.log(key); // 0 1 2 } View Code

?

?三、some() vs every()

1.共同點：都返回boolean

2.some--一真為真；every--一假為假；

let arr = [1,2,3,4,5]; let bool1 = arr.some(item=>item>=5); console.log(bool1); // true let arr1 = [1,2,3,4,5]; let bool2 = arr1.every(item=>item>=5); console.log(bool2); // false View Code

四、map() forEach() vs filter?

共同點： 都不會循環empty; for of 會變量

1.forEach 用于循環變量 沒有返回值;

let arr = [1,2,3,4,5]; arr.forEach((val,index)=>{console.log(val + '-' + index); // 1-0// 2-1// 3-2// 4-3// 5-4 }); View Code let arr = Array(5); arr[0]= null; arr[1]= 1; arr[3] = 3; arr[6]= undefined; arr.forEach((val,index)=>{console.log(val + '-' + index); // null-0// 1-1// 3-3// undefined-6 }); for(let val of arr){console.log(val);/*null1undefined3undefinedundefinedundefined*/ } View Code

2.map 根據返回值返回一個新的數組，沒有返回值，返回undefined;?

let arr = ['a', 'b', 'c']; let newArr=arr.map((item,index)=>{return item+1; }); console.log(newArr); // [ 'a1', 'b1', 'c1' ] let arr1 = Array(5); arr1[1]=1; arr1[3]=3; arr1[10]=10; let newArr1 = arr1.map((item,index)=>{return item; }); console.log(newArr1); // [ <1 empty item>, 1, <1 empty item>, 3, <6 empty items>, 10 ] View Code

3.filter 返回為true的值組成新數組；

let arr = [1, 2, 3, 4, 5]; let newArr=arr.filter((item,index)=>{return item % 2 === 0; // [ 2, 4 ] }); console.log(newArr); let arr1 = Array(5); arr1[1]=1; arr1[3]=3; arr1[10]=10; let newArr1 = arr1.filter((item,index)=>{console.log(item,index); //1 1 3 3 10 10return item >1; }); console.log(newArr1); // [ 3, 10 ] View Code

?

五、find vs findIndex

1.find 返回第一次找到的值，沒有找到返回undefined；會遍歷每一個，知道條件滿足就停止

// let arr = [1, 2, 3, 4, 5]; let val=arr.find((item,index)=>{return item >6; }); console.log(val); let arr1 = Array(5); arr1[1]=1; arr1[3]=3; arr1[5]=5; let val1 = arr1.find((item,index)=>{console.log(item,index); //undefined 0 1 1 undefined 2 3 3 undefined 4 5 5return item >20; }); console.log(val1); // undefined View Code

2.findIndex?返回第一次找到的值的下標，沒有找到返回-1；會遍歷每一個，知道條件滿足就停止

?

六、fill?

1.arr.fill(val,startIndex,endIndex);

let arr = Array(5); arr.fill(1); console.log(arr); // [ 1, 1, 1, 1, 1 ] let arr1 = Array(1,2,3); arr1.fill('a',1,2); console.log(arr1); // [ 1, 'a', 3 ] View Code

七、flat? vs? flatMap

1.flat用于將嵌套的數組“拉平”, 默認拉平一層，用Infinity 拉平任意層

let arr = [1,2,3]; let arr1= [5,4,6,arr]; let arr2=[arr1, 7,8,9]; console.log(arr2); // [ [ 5, 4, 6, [ 1, 2, 3 ] ], 7, 8, 9 ] console.log(arr2.flat(1)); // [5, 4, 6, Array(3), 7, 8, 9] console.log(arr2.flat(2)); // [5, 4, 6, 1, 2, 3, 7, 8, 9] console.log(arr2.flat(Infinity)) // [5, 4, 6, 1, 2, 3, 7, 8, 9] View Code

2.flat 清除empty

let arr =Array(5); arr[1]=1; arr[2]=2; arr[6]=null; arr[8]= undefined; arr[10] =false; console.log(arr); console.log(arr.flat()); View Code

3.flatMap 先map 后flat 只能flat一層

let arr =Array(); arr[1]=1; arr[2]=2; arr[6]=6; let newArr = arr.flatMap((item, index, arr)=>{ console.log(item, index, arr); return [item,item*2]; }); console.log(newArr); // [1, 2, 2, 4, 6, 12] View Code

?

?八、indexOf? vs? lastIndexOf

indexOf 從左邊開始，第一個參數是要查找的值（區分數據類型）；第二個參數是開始查找的位置

lastIndexOf 從右邊開始，第一個參數是要查找的值（區分數據類型）；第二個參數是開始查找的位置

let arr = [1,2,2,2,5]; console.log(arr.indexOf(2,1)); console.log(arr.lastIndexOf(2,-3)); View Code

?

九、includes

arr.includes(searchElement, fromIndex)
let arr = [1,2,2,2,5]; console.log(arr.includes(2,5)); // false console.log(arr.includes(10)); // false View Code

十、join

1.默認以，連接

let arr = ['a','b', 'c']; let str= arr.join(); console.log(arr); // [ 'a', 'b', 'c' ] console.log(str); // a,b,c let arr1 = ['a','b', 'c']; let str1= arr1.join('|'); console.log(arr1); // [ 'a', 'b', 'c' ] console.log(str1); // abc View Code

?十一、push 、pop、 shift、unshift

共同點： 改變數組，用于進出棧，不打散

let arr=[1]; arr.push(1,2); // 后面進入（可以進入多個） console.log(arr);arr.pop(); console.log(arr); // 后面出去（只能出去一個） arr.unshift(5,6); console.log(arr); // 前面進入（可以進入多個） arr.shift(); console.log(arr); // 前面出去（只能出去一個） View Code

?

十二、reduce vs reduceRight

1.reduce 從左到右

1.reduceRight 從右到左

arr.reduce(callback,[initialValue]) // 有初始化值 let arr=[10,20, 30, 40]; let value=arr.reduce((pre,cur,index,array)=>{console.log(pre,cur,index,array);return cur; },1); console.log(value); // 1 10 0 [ 10, 20, 30, 40 ] // 10 20 1 [ 10, 20, 30, 40 ] // 20 30 2 [ 10, 20, 30, 40 ] // 30 40 3 [ 10, 20, 30, 40 ] // 40// 有初始化值 let value1=arr.reduce((pre,cur,index,array)=>{console.log(pre,cur,index,array);return cur; }); console.log(value1); // 10 20 1 [ 10, 20, 30, 40 ] // 20 30 2 [ 10, 20, 30, 40 ] // 30 40 3 [ 10, 20, 30, 40 ] // 40 View Code // 有初始化值 let arr=[10, 20, 30, 40]; let value=arr.reduceRight((pre,cur,index,array)=>{console.log(pre,cur,index,array);return cur; },1); console.log(value);// 有初始化值 let value1=arr.reduceRight((pre,cur,index,array)=>{console.log(pre,cur,index,array);return cur; }); console.log(value1); View Code

十三、sort()

改變原來數組，默認排序順序是根據字符串Unicode碼點。 let arr=[10, 5, 60, 40]; arr.sort(); console.log(arr); // [ 10, 40, 5, 60 ] 改變原來數組，默認排序順序是根據字符串Unicode碼點。 let arr1=[10, 5, 60, 40]; arr1.sort((a,b)=>{return a-b; }); console.log(arr1); // [ 5, 10, 40, 60 ] let arr2=[10, 5, 60, 40]; arr2.sort((a,b)=>b-a); console.log(arr2); // [ 60, 40, 10, 5 ] View Code

十四、splice

1.改變原來數組

2.要添加進數組的元素,從start?位置開始

let arr=[1,2,3,4,5,6]; arr.splice(1); console.log(arr); // [1] 刪除后面的所有 let arr1=[1,2,3,4,5,6]; arr1.splice(1, 3); // fromIndex count console.log(arr1); // [ 1, 5, 6 ] let arr2=[1,2,3,4,5,6]; arr2.splice(1, 3, 10, 20, 30); // fromIndex count console.log(arr2); // [ 1, 10, 20, 30, 5, 6 ] 從刪除的位置加 let arr3=[1,2,3,4,5,6]; arr3.splice(1, 3, [10,50]); // fromIndex count console.log(arr3); // [ 1, [ 10, 50 ], 5, 6 ] 不打散數組 View Code

?十五、reverse

let arr=[1,2,3,4,5,6]; arr.reverse(); console.log(arr); // [ 6, 5, 4, 3, 2, 1 ] View Code

十六、toString

返回用逗號連接的字符串

let arr=[1,2,3,4,5,6]; let str = arr.toString(); console.log(arr); // [ 1, 2, 3, 4, 5, 6 ] console.log(str); // 1,2,3,4,5,6 View Code

?

轉載于:https://www.cnblogs.com/shangyueyue/p/9988188.html

總結

以上是生活随笔為你收集整理的二 Array 数组常用操作方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。