二 Array 數組經常使用操做方法

數組連接

Array 構造上的方法

1、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

2、Array.isArray()

1.用於判斷是不是數組（推薦）

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

 

3、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 原型上的方法

 

1、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

2、 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

 

 3、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

4、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);
    /*
    null
    1
    undefined
    3
    undefined
    undefined
    undefined
    */
}

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 10
    return item >1;
});
console.log(newArr1); // [ 3, 10 ]

View Code

 

5、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 5
    return item >20;
});
console.log(val1); // undefined

View Code

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

 

6、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

7、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

 

 8、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

 

9、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

10、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

 11、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

 

12、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

十3、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

十4、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

 十5、reverse

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

View Code

十6、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