ES6學習筆記之數組的擴充

✏️1. 擴充運算符

擴充運算符（spread）是三個點（

...

）,将一個數組轉為用逗号分隔的參數序列。

• 普通用法

console.log(...[1,2,3]);//1 2 3

           

• 數組拷貝(普通類型深拷貝,複雜類型淺拷貝)

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [...arr1];
arr2[0] = 666;
console.log('arr2:', arr2);//[666,2,3,4,5]
console.log('arr1:', arr1);//[1,2,3,4,5]
           

• 分割數組(解構指派)

const arr1=[1,'2','3','4'];
const [,...arr2]=arr1;
console.log('arr2 :', arr2);//arr2 : ["2", "3", "4"]
           

• 合并數組

let arr1=[1,2,3],
arr2=[4,5,6];
let arr3=[...arr1,...arr2];//[1,2,3,4,5,6]
           

• 傳遞參數

function add(x,y) {
    return x+y;
}
const arr=[1,2];
console.log(add(...arr));//3
           

• 替代函數的 apply 方法

// ES5 的寫法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6的寫法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);
           

// ES5 的寫法
Math.max.apply(null, [14, 3, 77])//77

// ES6 的寫法
Math.max(...[14, 3, 77])//77

// 等價于
Math.max(14, 3, 77);//77
           

• 字元串轉數組

[..."abcdefg"];//[a,b,c,d,e,f,g]
           

✏️2. 擴充的執行個體方法

1.Array.from

将類數組轉換為數組 (①帶有length屬性的,②可周遊)

轉換自定義對象

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
           

Array.from('hello')
           

Set轉數組

let set=new Set(['name','age']);
    console.log(Array.from(set));//["name", "age"]
           

Array.from還可以接受第二個參數，作用類似于數組的map方法，用來對每個元素進行處理，将處理後的值放入傳回的數組。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
           

2.Array.fill()

fill方法使用給定值，填充一個數組。

{
    // 1參數
    const arr1 = [1, 2, 3, 4, 5];
    let arr2 = [...arr1].fill(3);

    // 三參數:用6從下标0開始填充直到下标3之前
    console.log(arr2);//333333
    console.log([...arr1].fill(6, 0, 3))//66645

    const arr3 = [];
    console.log(arr3.fill(0, 0, 10));//[]

    // 初始化數組
    let arr=new Array(5).fill(0);
    console.log(arr);//[0,0,0,0,0]
}
           

3.Array.find(),Array.findIndex

數組執行個體的find方法，用于找出第一個符合條件的數組成員。它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個傳回值為true的成員，然後傳回該成員。如果沒有符合條件的成員，則傳回undefined。

數組執行個體的findIndex方法的用法與find方法非常類似，傳回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則傳回-1。

• 查找數組中第一個大于5的成員

let arr=[1,3,4,2,8,4,8];
let res=arr.find(v=>{
    return v>5;
})
let resIndex=arr.findIndex(v=>{
    return v>5;
})
console.log(res,resIndex);//8 4
           

• find,findIndex方法的回調有三個參數,依次為目前值,目前的位置,原數組

let res=[1,2,3,4,5].find((v,i,arr)=>{
    return arr[i]===v;
})
console.log(res);//1
           

4.Array.includes() 和 Array.indexOf()

Array.prototype.includes方法傳回一個布爾值，表示某個數組是否包含給定的值，與字元串的includes方法類似。ES2016 引入了該方法。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
           

該方法的第二個參數表示搜尋的起始位置，預設為0。如果第二個參數為負數，則表示倒數的位置，如果這時它大于數組長度（比如第二個參數為-4，但數組長度為3），則會重置為從0開始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
           

在此之前用indexOf判斷是否包含目标值,indexOf方法有兩個缺點，1.不夠語義化，它的含義是找到參數值的第一個出現位置，是以要去比較是否不等于-1，表達起來不夠直覺。2.它内部使用嚴格相等運算符（===）進行判斷，這會導緻對NaN的誤判。

[NaN].indexOf(NaN)//-1
[NaN].includes(NaN)//true
           

5.Array.flat()

數組的成員有時還是數組，Array.prototype.flat()用于将嵌套的數組展開，變成一維的數組。該方法傳回一個新數組，對原資料沒有影響。

[1,2,[3,4],5,[6]].flat();
// [1, 2, 3, 4, 5, 6]
           

flat()預設隻會展開一層，如果想要展開多層的嵌套數組，可以将flat()方法的參數寫成一個整數，表示想要展開的層數，預設為1。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
           

如果不管有多少層嵌套，都要轉成一維數組，可以用Infinity關鍵字作為參數。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]
           

如果有空,則會自動跳過空處

[1,2,,3,4,[5]].flat();
//[1,2,3,4,5]
           

"你的指尖,擁有改變世界的力量! "

歡迎關注我的個人部落格:https://sugarat.top