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

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

《深入理解ES6》笔记 目录

创建数组

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

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

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

Array.of() 方法

调用 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() 方法

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() 方法

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

fill() 方法

用新元素替换掉数组内的元素，可以指定替换下标范围：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

copyWithin() 方法

选择数组的某个下标，从该位置开始复制数组元素，默认从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