深入理解ES6笔记（十）增强的数组功能

摘要：在可迭代对象上使用所有数组上的新方法与方法与方法均接受两个参数一个回调函数一个可选值用于指定回调函数内部的。回调函数可接收三个参数数组的某个元素该元素对应的索引位置以及该数组自身。

主要知识点：创建数组、数组上的新方法、类型化数组

《深入理解ES6》笔记 目录

ES5中创建数组的方式：数组字面量、new一个数组。

const arr1 = [] //数组字面量
const arr2 = new Array() //new构建

ES6创建数组：Array.of()、Array.from()

调用 new Array() 构造器时，根据传入参数的类型与数量的不同，实际上会导致一些不同的结果：

let items = new Array(2);
console.log(items.length); // 2
console.log(items[0]); // undefined
console.log(items[1]); // undefined
items = new Array("2");
console.log(items.length); // 1
console.log(items[0]); // "2"
items = new Array(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
items = new Array(3, "2");
console.log(items.length); // 2
console.log(items[0]); // 3
console.log(items[1]); // "2"

ES6 引入了 Array.of() 方法来解决这个怪异问题：
Array.of() 方法创建一个包含所有传入参数的数组，而不管参数的数量与类型：

let items = Array.of(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
items = Array.of(2);
console.log(items.length); // 1
console.log(items[0]); // 2
items = Array.of("2");
console.log(items.length); // 1
console.log(items[0]); // "2"

Array.from()是将类数组转换成数组。
ES5 中，将非数组对象转换为真正的数组需要编写一个函数，类似下面这样：

function makeArray(arrayLike) {
    var result = [];
    for (var i = 0, len = arrayLike.length; i < len; i++) {
        result.push(arrayLike[i]);
    }
    return result;
}
function doSomething() {
    var args = makeArray(arguments);
    // 使用 args
}

也可以调用数组原生的 slice() 方法来减少代码量，就像这样：

function makeArray(arrayLike) {
    return Array.prototype.slice.call(arrayLike);
}
function doSomething() {
    var args = makeArray(arguments);
    // 使用 args
}

Array.from()是将类数组转换成数组：

function doSomething() {
    var args = Array.from(arguments);
    // 使用 args
}

Array.from(arg1, arg2)，我们可以给该方法提供2个参数，第二个参数作为第一个参数的转换：

function translate() {
    return Array.from(arguments, (value) => value + 1);
}
let numbers = translate(1, 2, 3);
console.log(numbers); // 2,3,4

Array.from还可以设置第三个参数，指定this。

let helper = {
    diff: 1,
    add(value) {
        return value + this.diff;
    }
};
function translate() {
    return Array.from(arguments, helper.add, helper);
}
let numbers = translate(1, 2, 3);
console.log(numbers); // 2,3,4

let numbers = {
    *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
    }
};
let numbers2 = Array.from(numbers, (value) => value + 1);
console.log(numbers2); // 2,3,4

find() 与 findIndex() 方法均接受两个参数：一个回调函数、一个可选值用于指定回调函数内部的 this 。
回调函数可接收三个参数：数组的某个元素、该元素对应的索引位置、以及该数组自身。
二者唯一的区别是： find() 方法会返回匹配的值，而 findIndex() 方法则会返回匹配位置的索引。

let numbers = [25, 30, 35, 40, 45];
console.log(numbers.find(n => n > 33)); // 35
console.log(numbers.findIndex(n => n > 33)); // 2

用新元素替换掉数组内的元素，可以指定替换下标范围：arr.fill(value, start, end)

let numbers = [1, 2, 3, 4];
numbers.fill(1);
console.log(numbers.toString()); // 1,1,1,1
let numbers = [1, 2, 3, 4];
numbers.fill(1, 2);
console.log(numbers.toString()); // 1,2,1,1
numbers.fill(0, 1, 3);
console.log(numbers.toString()); // 1,0,0,1

选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围：

let numbers = [1, 2, 3, 4];
// 从索引 2 的位置开始粘贴
// 从数组索引 0 的位置开始复制数据
numbers.copyWithin(2, 0);
console.log(numbers.toString()); // 1,2,1,2

let numbers = [1, 2, 3, 4];
// 从索引 2 的位置开始粘贴
// 从数组索引 0 的位置开始复制数据
// 在遇到索引 1 时停止复制
numbers.copyWithin(2, 0, 1);
console.log(numbers.toString()); // 1,2,1,4