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

Posted 寻找石头鱼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入理解ES6之—增强的数组功能相关的知识,希望对你有一定的参考价值。

创建数组

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]

类型化数组

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

数值数据类型

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

  1. 8位有符号整数(int8)
  2. 8位无符号整数(uint8)
  3. 16位有符号整数(int16)
  4. 16位无符号整数(uint16)
  5. 32位有符号整数(int32)
  6. 32位无符号整数(uint32)
  7. 32位浮点数(float32)
  8. 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);
}

以上是关于深入理解ES6之—增强的数组功能的主要内容,如果未能解决你的问题,请参考以下文章

深入理解ES6之《改进的数组功能》

《深入理解ES6》之扩展对象的功能性

深入理解ES6之《用模块封装代码》

深入理解ES6之《用模块封装代码》

理解数据结构之Set,只要5分钟!

深入理解ES6之《ES6中较小的改动》