佳佳的博客

Appearance

深入理解 ES6 #10-改进的数组功能 ​

创建数组 ​

在 ES6 之前，创建数组的方式主要有两种：

  • 调用 Array 构造函数
  • 用数组字面量语法

为了简化数组的创建过程，ES6 新增了两个方法：

  • Array.of()
  • Array.from()

Array.of() 方法 ​

ES6 之所以向 JS 添加新的数组创建方法，是要帮助开发者们规避通过 Array 构造函数创建数组时的怪异行为。

js
let items = new Array(2);
console.log(items.length); // 2
console.log(items[0]);
console.log(items[1]);

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"

当传入一个参数时，如果是数值型，那个数组的 length 属性就会设置为该值；如果传入多个值，此时无论这些值是不是数值型的，都会变为数组的元素。这个特性让人感到困惑，你不可能总是注意传入数据的类型。

ES6 通过引入 Array.of() 方法来解决这个问题。Array.of() 与 Array 构造函数类似，只是不存在单一数值型参数的特例。无论有多少参数，无论参数是什么类型，Array.of() 方法总会创建一个包含所有参数的数组。

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

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

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

Array.from() 方法 ​

将对象转化为数组。

js
function doSomething() {
    var args = Array.from(arguments);

    console.log(args);
}

doSomething(1, 2, 3, 4); // [1, 2, 3, 4]

映射转换 ​

可以提供一个映射函数作为 Array.from() 的第二个参数，这个函数用来将类数组对象中的每一个值转换成其它形式，最后将这些结果储存在结果数组的相应索引中。

js
function translate() {
    return Array.from(arguments, (value) => value + 1);
}

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

如果用映射函数处理对象，也可以给 Array.from() 方法传入第三个参数来表示映射函数的 this 值。

js
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]

用 Array.from() 转换可迭代对象 ​

js
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 值，可选参数

执行回调函数时，传入的参数为：

  • 数组中的某个元素
  • 该元素在数组中的索引
  • 数组本身

如果给定的值满足定义的标准，回调函数应返回 true，一旦回调函数返回 true，find() 方法和 findIndex() 方法都会立即停止搜索数组剩余的部分。

find() 方法返回查找到的值；findeIndex() 方法返回查找到的值的索引。

js
let numbers = [25, 30, 35, 40, 45];

console.log(numbers.find(n => n > 33)); // 35
console.log(numbers.findIndex(n => n > 33)); // 2

fill() 方法 ​

可以用指定的值填充一至多个数组元素。

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

如果只想改变数组某一部分的值，可以传入开始索引和不包含结束索引（不包含结束索引当前值）这两个可选参数。

js
let numbers = [1, 2, 3, 4];
numbers.fill(1， 2); // 从索引 2 开始填充数组
console.log(numbers.toString()); // 1,2,1,1
numbers.fill(0， 1， 3); // 从索引 1 开始填充到索引 3
console.log(numbers.toString()); // 1,0,0,1

NOTE

如果开始索引或结束索引为负值，name 这些值会与数组的 length 属性相加来作为最终位置。

copyWithin() 方法 ​

从数组复制元素的值。

参数：

  1. 开始填充值的索引位置；
  2. 开始复制值的索引位置；
  3. 指定停止复制值的位置（不包含结束索引）（可选参数）（默认情况下会一直复制到数组末尾的值）
js
let numbers = [1, 2, 3, 4];

// 从数组的索引 2 开始粘贴值
// 从数组的索引 0 开始复制值
numbers.copyWithin(2, 0);

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

// 从数组的索引 2 开始粘贴值
// 从数组的索引 0 开始复制值
// 当位于索引 1 时停止复制值
numbers.copyWithin(2, 0, 1);

console.log(numbers.toString()); // 1,2,1,4

NOTE

同 fill() 方法一样，copyWithin() 方法的所有参数都接受负数值，并且会自动与数组长度相加来作为最终使用的索引。

定型数组 ​

定型数组时一种用于处理数值类型（不是所有类型）数据的专用数组。

在 JavaScript 中，数字是以 64 位浮点格式存储的，并按需转换为 32 位整数，所以运算非常慢。

在 ES6 中引入定型数组来解决这个问题，并提供更高性能的算术运算。

定型数组与普通数组最重要的差别是：定型数组不是普通数组。它不继承自 Array。