深入理解ES6之—增强的数组功能

2023-02-21 19:55:52

创建数组

Array.of()方法

ES6为数组新增创建方法的目的之一，是帮助开发者在使用Array构造器时避开js语言的一个怪异点。Array.of()方法总会创建一个包含所有传入参数的数组，而不管参数的数量与类型。

let arr = Array.of(1, 2);

console.log(arr.length);//2

let arr1 = Array.of(3);

console.log(arr1.length);//1

console.log(arr1[0]);//3

let arr2 = Array.of('2');

console.log(arr2.length);//1

console.log(arr2[0]);//'2'

在使用Array.of()方法创建数组时，只需将想要包含在数组内的值作为参数传入。

Array.from()方法

在js中将非数组对象转换为真正的数组是非常麻烦的。在ES6中，将可迭代对象或者类数组对象作为第一个参数传入，Array.from()就能返回一个数组。

function arga(...args) {

    let arg = Array.from(arguments);

    console.log(arg);

}

arga('cc', 26, 'man');//['cc',26,'man']

映射转换

如果你想实行进一步的数组转换，你可以向Array.from()方法传递一个映射用的函数作为第二个参数。此函数会将数组对象的每一个值转换为目标形式，并将其存储在目标数组的对应位置上。

function arga(...args) {

    return Array.from(arguments, value => value + 1);

}

let arr = arga('cc', 26, 'man');

console.log(arr);//['cc1',27,'man1']

如果映射函数需要在对象上工作，你可以手动传递第三个参数给Array.from()方法，从而指定映射函数内部的this值

let helper = {

    diff: 1,

    add(value) {

        return value + this.diff;

    }

}

function translate() {

    return Array.from(arguments, helper.add, helper);

}

let arr = translate('cc', 26, 'man');

console.log(arr);

可迭代对象上使用

Array.from()方法不仅可以用于类数组对象，也可用于迭代对象。（Set，Map）

数组上的新方法

find()与findIndex()方法

find()与findIndex()方法均接受两个参数：一个回调函数，一个可选值用于指定回调函数内部的this。该回调函数可接受三个参数：数组的某个元素，该元素对应的索引位置，以及该数组本身。该回调函数应当在给定的元素满足你定义的条件时返回true，而find()和findIndex()方法均会在回调函数第一次返回true时停止查找。

二者唯一的区别是：find()方法返回匹配的值，而findIndex()返回匹配位置的索引。

let arr = [1, 2, 3, 'cc', 5, 1, 9];

console.log(arr.find((value, keys, arr) => {

    return value > 2;

}))//3

console.log(arr.findIndex((value, keys, arr) => {

    return value > 2;

}))//2

fill()方法

fill()方法能使用特定值填充数组中的一个或多个元素。当只是用一个参数时，该方法会用该参数的值填充整个数组。

let arr = [1, 2, 3, 'cc', 5];

arr.fill(1);

console.log(arr);//[1,1,1,1,1];

如果不想改变数组中的所有元素，而只是想改变其中一部分，那么可以使用可选的起始位置参数与结束位置参数（不包括结束位置的那个元素）

let arr = [1, 2, 3, 'cc', 5];

arr.fill(1, 2);

console.log(arr);//[1,2,1,1,1]

arr.fill(0, 1, 3);

console.log(arr);//[1,0,0,1,1];

copyWithin()方法

copyWithin()方法与fill()类似，可以一次性修改数组的多个元素。不过，与fill()使用单个值来填充数组不同，copyWithin()方法允许你在数组内部复制自身元素。为此你需要传递两个参数给copyWithin()方法：从什么位置开始填充，以及被用来复制的数据的起始位置索引。

//将数组的前两个元素复制到数组的最后两个位置

let arr = [1, 2, 3, 'cc', 5];

arr.copyWithin(3, 0);

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

默认情况下，copyWithin()方法总是会一直复制到数组末尾，不过你还可以提供一个可选参数来限制到底有多少元素会被覆盖。这第三个参数指定了复制停止的位置（不包含该位置本身）。

let arr = [1, 2, 3, 'cc', 5, 9, 17];

//从索引3的位置开始粘贴

//从索引0的位置开始复制

//遇到索引3时停止复制

arr.copyWithin(3, 0, 3);

console.log(arr);//[1,2,3,1,2,3,17]

类型化数组

类型化数组是有特殊用途的数组，被设计用来处理数值类型数据。

数值数据类型

类型化数组允许存储并操作八种不同的数值类型：

8位有符号整数（int8）
8位无符号整数（uint8）
16位有符号整数（int16）
16位无符号整数（uint16）
32位有符号整数（int32）
32位无符号整数（uint32）
32位浮点数（float32）
64位浮点数（float64）

所有与类型化数组相关的操作和对象都围绕着这八种数据类型。为了使用它们，你首先需要创建一个数组缓冲区用于存储数据。

数组缓冲区

数组缓冲区（array buffer）是内存中包含一定数量字节的区域，而所有的类型化数组都基于数组缓冲区。你可以使用下例这样使用ArrayBuffer构造器来创建一个数组缓冲区：

let buffer = new ArrayBuffer(10);//分配了10个字节

也可以使用slice()方法来创建一个新的，包含已有缓冲区部分内容的数组缓冲区。该slice()方法类似于数组上的同名方法，可以使用起始位置与结束位置参数，返回由原缓冲区元素组成的一个新的ArrayBuffer实例。

let buffer1 = buffer.slice(2, 5);

console.log(buffer1.byteLength);//3

仅仅创建一个缓冲区而不能写入数据没有什么意义。为了写入数据，你需要创建一个视图。

使用视图操作数组缓冲区

数组缓冲区代表了一块内存区域，而视图则是你操作这块区域的接口。视图工作在数组缓冲区或者其子集上，可以读写某种数值数据类型的数据。DataView类型是数组缓冲区的通用视图，允许你对前述所有八种数值数据类型进行操作。

使用DataView首先需要创建ArrayBuffer的一个实例，再在上面创建一个新的ArrayBuffer视图

循环数组元素的几种方法

在我们的开发过程中都有遇到这样的问题：逐个取出数组中的元素。那么在js中有哪些方法可以完成这个工作呢？

for循环

可能我们最先能想到的是for循环了，这也是我们最常用的。

let arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {

    console.log(arr[i]);

}

for-in

通过键值（索引）来对数组进行遍历

let arr = [1, 2, 3, 4, 5];

for (let i in arr) {

    console.log(arr[i]);

}

forEach()

forEach()方法是数组对象的原生方法，用于对数组进行遍历，传入的参数是一个回调函数，该回调函数接收三个参数元素值，元素索引和数组对象

let arr = [1, 2, 3, 4, 5];

arr.forEach((value, key, arr) => console.log(`索引${key}的值是${value}`));

for-of

for-of循环在循环每次执行时会调用可迭代对象的next()方法，并将结果对象的value储存在一个变量上。循环过程会持续到结果对象的done属性编程true为止。

let arr = [1, 2, 3, 4, 5];

for (let num of arr) {

    console.log(num);

}

码农公寓