【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
}