es6中改進的數組功能
0 Views 前端 with
本文字数:1,223 字 | 阅读时长 ≈ 5 min

es6中改進的數組功能

0 Views 前端 with
本文字数:1,223 字 | 阅读时长 ≈ 5 min

es6中改進的數組功能

Array.of()

原因:以前通过构造函数创建数组时存在怪异行为,如下:

1
2
3
4
var items = new Array(2);
console.log(items.length);
console.log(items[0]);
console.log(items[1]);

Array.of()方法:无论参数是什麼类型,Array.of()方法总会创建一个包含所有参数的数组

1
2
3
let item = Array.of(1, 2);
console.log(item[0]);
console.log(item[1]);

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

要用Array.of()方法创建数组,只需传入你希望在数组中包含的值。

Array.from()

Js中不支持直接将非数组对象转换成真实数组,arguments就是一种类数组对象,如果要把它当作数组来使用需要先转换该对象的类型。

比如:

1
2
3
4
5
6
7
8
function makeArray(arrayLike){
var result = [];
for(var i=0;i<arrayLike.length;i++){
result.push(arrayLike[i]);
}

return result;
}

这种方法先是手动创建一个result数组,再将arguments对象里的每一个元素复製给新的数组中

再比如:

1
2
3
function makeArray(arrayLike){
return Array.prototype.slice.call(arrayLike)
}

slice()方法执行时的this值设置为类数组对象,而slice()对象只需数值类型索引和length属性就能够正确运行

但是语义不够明确

Array.from()方法可以接受可迭代对象或类数组对象作为第一个参数,最终返回一个数组。

比如

1
2
3
4
5
6
7
8
9
let arrayLike = {
0: 'tom',
1: '65',
2: '男',
3: ['jane','john','Mary'],
'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

新添加的方法

find()方法和findIndex()方法

用法:接受两个参数,一个是回调函数,另一个是可选参数,用於指定回调函数中this的值。

执行回调函数时,传入的参数分别为:数组中的某个元素和该元素再数组中的索引及数组本身

1
2
let numbers = [25,30,35,40,45];
console.log(numbers.find(n => n >33)); /*35*/
1
2
let numbers = [25,30,35,40,45];
console.log(numbers.findIndex(n => n >33)); /*2*/

调用find()方法返回的是35,而调用findIndex()方法返回的是35numbers数组中的位置2.

如果要在数组中根据某个条件查找匹配的元素,那麼find()方法和findIndex()方法可以很好的完成任务

如果只是想查找与某个值匹配的元素,则indexof()方法和lastIndexof()方法是更好的选择

fill()方法

fill()方法可以用指定的值填充一至多个数组元素。当传入一个值时,fill()方法会用这个值重写数组中的所有值

比如:

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

修改某一部分的值:

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

传入开始索引和不包含结束索引这两个可选参数

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

copyWithin()方法

数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。

它接受三个参数。
target (必需):从该位置开始替换数据。
start (可选):从该位置开始读取数据,默认为 0 。如果为负值,表示倒数。
end (可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//  将 3 号位复制到 0 号位  
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2 相当于 3 号位, -1 相当于 4 号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
// 将 3 号位复制到 0 号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}
// 将 2 号位到数组结束,复制到 0 号位
var i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
// 对于没有部署 TypedArray 的 copyWithin 方法的平台
// 需要采用下面的写法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]
1
2
3
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
arr1.copyWithin(1, 3, 6)
console.log('%s', JSON.stringify(arr1))

结果:

[1,4,5,6,5,6,7,8,9,10,11]

Apr 15, 2018
Apr 14, 2018