【读书笔记】【深入理解ES6】#10-改进的数组功能

2017-11-23 17:00 佳佳的博客阅读(273) 评论(0) 编辑收藏举报

创建数组

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

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

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

Array.of()
Array.from()

Array.of() 方法

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

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() 方法总会创建一个包含所有参数的数组。

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

将对象转化为数组。

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

    console.log(args);
}

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

映射转换

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

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]

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

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() 方法返回查找到的值的索引。

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

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

fill() 方法

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

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); // 从索引2开始填充数组
console.log(numbers.toString()); // 1,2,1,1
numbers.fill(0， 1， 3); // 从索引1开始填充到索引2
console.log(numbers.toString()); // 1,0,0,1

Note

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

copyWithin() 方法

从数组复制元素的值。

参数：

开始填充值的索引位置；
开始复制值的索引位置；
指定停止复制值的位置（不包含结束索引）（可选参数）（默认情况下会一直复制到数组末尾的值）

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

Note

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

定型数组

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

在JavaScript中，数字是以64位浮点格式存储的，并按需转换为32位整数，所以运算非常慢。
在ES6中引入定型数组来解决这个问题，并提供更高性能的算术运算。

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

刷新页面返回顶部

佳佳的博客 LIUJIAJIA.ME