ES6中数组新增的方法

新增的静态方法

数组新增的静态方法有如下：

Array.from()

基本使用

• Array.from()可以将类数组或者ES6新增的Set和Map转换为数组对象。

const arrLike = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
}

console.log(Array.from(arrLike));
// [ 'a', 'b', 'c' ]

• 同时，Array.from()还可以接收第二个回调函数参数，用以对每个元素进行预处理。

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

简单实现

function MyArray() {}

MyArray.form = function(arrLike, cb) {
    var res = [];
    for (var i = 0; i < arrLike.length; i++) {
        res.push(arrLike[i]);
    }

    return cb ? res.map(cb) : res;
}

const arrLike = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
}

console.log(MyArray.form(arrLike));
// [ 'a', 'b', 'c' ]

console.log(MyArray.form(arrLike, (item) => item.toUpperCase()));
// [ 'A', 'B', 'C' ]

Array.of()

用于将一组值，转换为数组，没有参数的时候，返回一个空数组

基本使用

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

简单实现

MyArray.of = function() {
    return MyArray.form(arguments);
}

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

实例对象新增的方法

关于数组实例对象新增的方法有如下：

• copyWithin()
• find()
• findIndex()
• fill()
• entries()
• keys()
• values()
• includes()
• flat()
• flatMap()

copyWithin()

将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组，不会修改数组的长度

参数：

• target目标位置，必需
• start被复制内容的起始位置，可选，默认为0
• end被复制内容的结束位置，可选，默认为数组长度

基本使用

console.log([1, 2, 3, 4, 5].copyWithin(0, 3));
// 将从 3 号位直到数组结束的成员（4 和 5），复制到从 0 号位开始的位置，结果覆盖了原来的 1 和 2
// [4, 5, 3, 4, 5] 

简单实现

Array.prototype.copyWithinDemo = function(target, start, end) {
    target = target > this.length - 1 ? this.length - 1 : target;
    start = start || 0;
    end = end ? end > this.length ? this.length : end : this.length;

    for (var i = start; i < end; i++) {
        this[target] = this[i];
        ++target;
    }
    return this;
}

console.log([1, 2, 3, 4, 5].copyWithinDemo(0, 3));
// [4, 5, 3, 4, 5] 

find()

• find()用于找出第一个符合条件的数组成员，接收一个回调函数作为参数

基本使用

console.log([1, 2, 3].find((item) => item < 2));
// 1

简单实现

Array.prototype.findDemo = function(cb) {
    for (var i = 0; i < this.length; i++) {
        if (cb(this[i], i, this)) {
            return this[i];
        }
    }
}
console.log([1, 2, 3].findDemo((item) => item < 2));
// 1

findIndex()

• findIndex()与find()的使用方式 相同，不过返回值为第一个符合条件的数组成员的索引值

console.log([1, 2, 3].findIndex((item) => item < 2));
// 0

fill()

• fill()可以填充一个数组

基本使用

console.log(new Array(3).fill(6));
// [ 6, 6, 6 ]
console.log(['a', 'a', 'a'].fill(6));
// [ 6, 6, 6 ]

• 还可以通过第二个start和第三个参数end限制填充的范围

console.log(['a', 'a', 'a'].fill(6, 1, 2));
// [ 'a', 6, 'a' ]

如果填充的类型是引用数据类型，则是浅拷贝

简单实现

Array.prototype.fillDemo = function(val, start, end) {
    start = start || 0;
    end = end ? end > this.length ? this.length : end : this.length;

    for (var i = start; i < end; i++) {
        this[i] = val;
    }
    return this;
}

console.log(new Array(3).fillDemo(6));
// [ 6, 6, 6 ]
console.log(['a', 'a', 'a'].fillDemo(6));
// [ 6, 6, 6 ]
console.log(['a', 'a', 'a'].fillDemo(6, 1, 2));
// [ 'a', 6, 'a' ]

entries()、keys()、values()

• 这三个方法返回的都是ES6新增的迭代器对象Iterator
• entries()返回的每个元素都是一个包含索引值和元素值的数组
• keys()返回的每个元素是所操作数组的索引值
• values()返回的每个元素是所操作数组的元素值

基本使用

for (const key of [1, 2, 3].keys()) {
    console.log(key);
}
// 0 1 2

for (const val of [1, 2, 3].values()) {
    console.log(val);
}
// 1 2 3

for (const [key, val] of [1, 2, 3].entries()) {
    console.log(key, val);
}
// 0 1
// 1 2
// 2 3

简单实现

Array.prototype.keysDemo = function * () {
    for (let i = 0; i < this.length; i++) {
        yield i;
    }
}

Array.prototype.valuesDemo = function * () {
    yield * this;
}

Array.prototype.entriesDemo = function * () {
    for (let i = 0; i < this.length; i++) {
        yield [i, this[i]];
    }
}

for (const key of [1, 2, 3].keysDemo()) {
    console.log(key);
}
// 0 1 2

for (const val of [1, 2, 3].valuesDemo()) {
    console.log(val);
}
// 1 2 3

for (const [key, val] of [1, 2, 3].entriesDemo()) {
    console.log(key, val);
}
// 0 1
// 1 2
// 2 3

includes()

基本使用

• 用于判断数组是否包含给定的值

console.log([1, 2, NaN].includes(1));
// true
console.log([1, 2, NaN].includes(3));
// false
console.log([1, 2, NaN].includes(NaN));
// true

• 第二个参数表示搜索的起始位置，默认为0

console.log([1, 2, NaN].includes(1, 1));
// false

简单实现

Array.prototype.includesDemo = function(val, start) {
    start = start || 0;

    for (var i = start; i < this.length; i++) {
        if(Object.is(val, this[i])) {
            return true;
        }
    }
    return false;
}

console.log([1, 2, NaN].includesDemo(1));
// true
console.log([1, 2, NaN].includesDemo(3));
// false
console.log([1, 2, NaN].includesDemo(NaN));
// true
console.log([1, 2, NaN].includesDemo(1, 1));
// false

flat()

数组打平，返回一个新数组，对原数据没有影响。flat()默认只会打平一层，可以传递一个整数参数，表示打平的层次。如果想全部打平，传递Infinity即可。

基本使用

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

简单实现

Array.prototype.flatDemo = function (depth) {
    depth = depth || 1;
    let res = this;
    for (let i = 0; i < depth; i++) {
        res = res.reduce((a, b) => a.concat(b), []);
        if (!res.some(function(item) {
            return Array.isArray(item);
        })) break;
    }
    return res;
}

console.log([1, [2, [3, [4, [5]]]], 6].flatDemo());
// [ 1, 2, [ 3, [ 4, [5] ] ], 6 ]
console.log([1, [2, [3, [4, [5]]]], 6].flatDemo(2));
// [ 1, 2, 3, [ 4, [ 5 ] ], 6 ]
console.log([1, [2, [3, [4, [5]]]], 6].flatDemo(Infinity));
// [ 1, 2, 3, 4, 5, 6 ]

flatMap()

• flatMap()方法对原数组的每个成员执行一次map()方法，然后对返回值组成的数组执行flat()方法（只打平一个层次）。

基本使用

console.log([1, 2, 3, 4].flatMap(x => [x * 2]));
// [2, 4, 6, 8]

// 先map
// [[2], [4], [6], [8]]
// 再打平
// [2, 4, 6, 8]

简单实现

Array.prototype.flatMapDemo = function (cb) {
    return this.map(cb).flatDemo();
}
console.log([1, 2, 3, 4].flatMapDemo(x => [x * 2]));
// [2, 4, 6, 8]