【ES6入門05】：數組擴展

數組擴展

Array.of()

{
    // 把一組數據(number/string/boolean...)轉換成數組
    let arr = Array.of(3, 'abc', true, {a:'a'}, 11);
    console.log(arr); // [3, "abc", true, {a: "a"}, 11]
    let empty = Array.of();
    console.log(empty); // []
}

Array.from()

{
    // 把僞數組、集合轉換成真正的數組
    // <p>hello</p>
    // <p>beautiful</p>
    // <p>girl!</p>
    let p = document.querySelectorAll('p');
    let pArr = Array.from(p); // 把集合轉換成數組
    pArr.forEach(function (item) {
        console.log(item.textContent);
    });
    // hello
    // beautiful
    // girl!

    // 相似map映射的功能
    // from接收兩個參數，Array.from(arr, fn)。fn的返回值組成了最終的數組
    console.log(Array.from([1, 3, 5], item => item * 2)); // [2, 6, 10]
}

Array.fill()

{
    // fill把數組元素都變爲指定的值，有三個參數 arr.fill(value, start, end)
    // value：填充值
    // start：填充起始位置，能夠省略
    // end：填充結束位置，能夠省略，實際結束位置是end-1
    console.log([1, 'a', undefined].fill(7)); // [7, 7, 7]
    console.log(['a', 'b', 'c', 'd'].fill(7, 1, 3)); // ["a", 7, 7, "d"]
}

Array.copyWithin()

{
    // copyWithin數組元素拷貝
    // 有三個參數 arr.copyWithin(target, start, end)
    // target：目的起始位置
    // start：複製源的起始位置，能夠省略，能夠是負數
    // end：複製源的結束位置，能夠省略，能夠是負數，實際結束位置是end-1
    console.log([1, 2, 3, 4, 5, 6].copyWithin(1, 2, 4)); // [1, 3, 4, 4, 5, 6]
}

數組的遍歷

{
    // ES6引入了for...of循環，做爲遍歷全部數據結構的統一方法
    let arr = [1, 'aha', 'why'];
    // 數組的keys方法，返回數組全部下標的集合
    for (let index of arr.keys()) {
        console.log('keys', index); // 0 1 2
    }
    // 數組的values方法，返回數組全部元素的集合
    for (let value of arr.values()) {
        console.log('values', value); // 1 'aha' 'why'
    }
    // 數組的entries方法，返回數組的下標和元素的集合
    for (let [index, value] of arr.entries()) {
        console.log('entries', index, value); // 0 1  1 'aha'  2 'why'
    }
    // 如下寫法功能相似於values
    for (let value of arr) {
        console.log('value', value); // 1 'aha' 'why'
    }
}

Array.find() 和 Array.findIndex()

{
    // find找出第一個知足條件的值，就不日後找了
    console.log([1, 2, 3, 4, 5, 6].find(item => item > 3)); // 4
    console.log([1, 2, 3, 4, 5, 6].find(item => item > 8)); // undefined
    // findIndex找出第一個知足條件的值的下標，就不日後找了
    console.log([1, 2, 3, 4, 5, 6].findIndex(item => item > 3)); // 3
    console.log([1, 2, 3, 4, 5, 6].findIndex(item => item > 8)); // -1
}

Array.includes()

{
    // 數組是否包含某個元素
    console.log([1, 2, NaN].includes(1)); // true
    console.log([1, 2, NaN].includes(NaN)); // true
}