创建数组
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);
}