再ES6中新增了一些API接口。
Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）
Array.of方法用于将一组值，转换为数组。

数组的拓展

新增了一些内置的API的接口

Array.of() 方法

1
2
3
4
5
6
7
8
9
{
    // 把一组数据变量转换成数组
    let array1 = Array.of(1, 2, 3, 4, 5);
    console.log(array1); // [1,2,3,4,5]
    // 为空的情况下创建空数组
    let array2 = Array.of();
    console.log(array2); // []
}

Array.from() 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
    // 获取一组数组节点，
    let array1 = document.querySelectorAll('p');
    //传统方法下用for 循环可以遍历
    for (let i = 0; i < array1.length; i++) {
        console.log(array[i].textContent);
    }
    // 使用 Array.from()方法 后可以使用遍历方法
    let array2 = Array.from(array1);
    array2.forEach(function (item) {
        console.log(item.textContent);
    });
    // Array.from()方法 外带有 map 功能
    let array3 = Array.from([1, 2, 3], function (item) {
        return item * 2;
    })
    console.log(array3); // [2,4,6]
}

fill 方法

1
2
3
4
5
6
7
8
9
10
11
12
{
    // 一个参数 ： 将里面的内容全部替换成指定的内容
    let array1 = [1, 'a', {}, undefined];
    console.log(array1.fill(5)); // [5,5,5,5]
    // 三个参数: 
    // 参数一：要替换成的内容
    // 参数二：起始位置
    // 参数三: 结束位置（不包括）
    let array2 = [1, 2, 3, 4, 5, 6];
    console.log(array2.fill(5, 1, 3)); // [1,5,5,4,5,6]
}

keys values entries 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
    // keys() 获取数组的下标
    let array = ['a', 'b', 'c', 'd', 'e'];
    for (let index of array.keys()) {
        console.log(index); // 0,1,2,3,4
    }
    // values() 获取数组的值  会存在兼容性问题
    for (let value of array.values()) {
        console.log(value); // a,b,c,d,e
    }
    // entries() 获取数组键和值
    for (let [index, value] of array.entries()) {
        console.log(index, '=>', value); // 0=>a,1=>b,2=>c,3=>d,4=>e
    }
    // 数组形式
    for (let entries of array.entries()) {
        console.log(entries); // [0,'a'],[1,'b'],[2,'c'],[3,'d'],[4,'e']
    }
}

copyWithin() 方法

1
2
3
4
5
6
7
8
{
    // 替换元素
    // 参数一： 从哪里开始
    // 参数二： 读取位置
    // 参数三： 截至位置（不包含）
    let array = ['a', 'b', 'c', 'd', 'e'];
    console.log(array.copyWithin(0, 3, 5)); // ['d', 'e', 'c', 'd', 'e']
}

find() 方法 findIndex() 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    // 找到第一个符合条件的元素
    let array = [1, 2, 3, 4, 5, 6];
    let n = array.find(function (item) {
        return item > 4;
    });
    console.log(n); // 5
    //找到第一个符合条件的元素的下标
    let s = array.findIndex(function (item) {
        return item > 4;
    });
    console.log(s); // 4
}

includes() 方法

1
2
3
4
5
6
7
8
{
    // 检测数组中是否包含参数项目
    let array = ['a', 'b', NaN];
    console.log(array.includes('b'));  // true
    // 可以检测NaN
    console.log(array.includes(NaN));  // true
}