1. 程式人生 > >es6陣列新方法

es6陣列新方法

es6給我們帶來了更多更便利的陣列方法,開薰!!

1Array.from

Array.from方法用於將兩類物件轉為真正的陣列:類似陣列的物件(array-like object)和可遍歷(iterable)的物件(包括 ES6 新增的資料結構 Set 和 Map)。
比如我們在獲取標籤時如果使用的是document.getElementByClassName獲取到的就是一組偽陣列,這裡用from就很方便轉化了

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']

2.Array.map

map 方法
        var arr=[60,55,78,88,56,99];
        var arr2=arr.map(
            (val,index,array)=>{
                if(val>=60){
                    return 1
                }else{
                    return 0
                }
            }
        )
        console.log(arr2);

        var arr3=arr.map(
            (val)=>{
                return val*2
            }
        )
        console.log(arr3);

3.Array.filter

        var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
        //1.返回值
        //2.引數
        //3.他的判斷邏輯
        const result = words.filter(
            function (val, index, arr) {
                //檢視引數的作用
                // console.log(arguments);
                return val
            }
        );
        // const result = words.filter(word => word.length > 6);
    console.log(result);

4.Array.reduce

   var arr = [55, 55, 66, 45, 78, 99];
       //返回值 數字 return===>結果
       //item  累加值  val index 一樣
       //在彙總裡面可以處理 最後值的返回
       var num= arr.reduce(
            (item, val, index, array) => {
                console.log(item + '.' + val + '.' + index+'.'+array);            
                if (index < array.length-1) {
                    return item + val;
                }else{
                    return (item + val)/arr.length;
                }
               
            }
        )
      console.log(num);

        var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
            return accumulator + currentValue;
        }, 0);
        console.log(sum)
    //[{},{},{},]

5.Array.prototype.copyWithin

陣列例項的copyWithin方法,在當前陣列內部,將指定位置的成員複製到其他位置(會覆蓋原有成員),然後返回當前陣列。也就是說,使用這個方法,會修改當前陣列。

Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三個引數。

target(必需):從該位置開始替換資料。如果為負值,表示倒數。
start(可選):從該位置開始讀取資料,預設為 0。如果為負值,表示倒數。
end(可選):到該位置前停止讀取資料,預設等於陣列長度。如果為負值,表示倒數。

eg:
// 將3號位複製到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相當於3號位,-1相當於4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

// 將3號位複製到0號位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 將2號位到陣列結束,複製到0號位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// 對於沒有部署 TypedArray 的 copyWithin 方法的平臺
// 需要採用下面的寫法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

6.陣列例項的 find() 和 findIndex()

陣列例項的find方法,用於找出第一個符合條件的陣列成員。它的引數是一個回撥函式,所有陣列成員依次執行該回調函式,直到找出第一個返回值為true的成員,然後返回該成員。如果沒有符合條件的成員,則返回undefined。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

陣列例項的findIndex方法的用法與find方法非常類似,返回第一個符合條件的陣列成員的位置,如果所有成員都不符合條件,則返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

7.fill

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

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

指定位置填充
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
注意,如果填充的型別為物件,那麼被賦值的是同一個記憶體地址的物件,而不是深拷貝物件。
eg:
let arr = new Array(3).fill({name: "Mike"});
arr[0].name = "Ben";
arr
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

let arr = new Array(3).fill([]);
arr[0].push(5);
arr
// [[5], [5], [5]]

8.陣列例項的 entries(),keys() 和 values()

ES6 提供三個新的方法——entries(),keys()和values()——用於遍歷陣列。它們都返回一個遍歷器物件(詳見《Iterator》一章),可以用for...of迴圈進行遍歷,唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷,entries()是對鍵值對的遍歷。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b

9.陣列例項的 includes()

Array.prototype.includes方法返回一個布林值,表示某個陣列是否包含給定的值,與字串的includes方法類似。ES2016 引入了該方法

該方法的第二個引數表示搜尋的起始位置,預設為0。如果第二個引數為負數,則表示倒數的位置,如果這時它大於陣列長度(比如第二個引數為-4,但陣列長度為3),則會重置為從0開始
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

沒有該方法之前,我們通常使用陣列的indexOf方法,檢查是否包含某個值。

10.陣列例項的 flat(),flatMap()

陣列的成員有時還是陣列,Array.prototype.flat()用於將巢狀的陣列“拉平”,變成一維的陣列。該方法返回一個新陣列,對原資料沒有影響。
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]
flatMap()方法對原陣列的每個成員執行一個函式(相當於執行Array.prototype.map()),然後對返回值組成的陣列執行flat()方法。該方法返回一個新陣列,不改變原陣列。
flatMap()只能展開一層陣列。
// 相當於 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

// 相當於 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]
依然返回巢狀陣列

阮一峰老師賽高!!