ES6中数组的新方法

在ES6中为数组(Array)添加了很多新方法,它让数组的操作变得更加简单。


一. 静态方法

所谓静态方法就是针对构造函数的方法,和实例化的对象的方法是不同的。
(1)Array.from()
from()方法可以将一个类数组对象转化为真正的数组,方法如下:

//首先定义几个dom标签
var tags = document.getElementsByTagName("div");
var arr = Array.from(tags);
arr.forEach(function(elem, index, array){
    console.log(elem, index, array);//分别打印出元素本身,下标,数组本身
}); 
<!-- more -->

这样就可以将dom元素转化为数组,数组的方法去操作。

(2)Array.of()
of()方法可以将传入的单个参数转化为数组

var arr = Array.of(1, 2, 3);
console.log(arr); //[1, 2, 3]

由打印结果可以看出,成功将单个元素添加到一个数组中。

二. 数组对象的方法

(1)fill(value, start, end)

该方法有三个参数,意思是用value去覆盖从start到end之间的所有元素,包含start,不包含end,end为可选参数,不指明end的值表示从start开始到数组结尾处;

var arr = [1, 2, 3, 4];
console.log(arr.fill(5, 1, 3)); //[1, 5, 5, 4]
console.log(arr.fill(4,0)); //[4, 4, 4, 4]
console.log(arr); //[4, 4, 4, 4]

由结果可以看出,该方法是对原数组进行操作的,会使原数组发生改变。

(2)find(callback, context)

find的参数为一个回调函数和一个执行上下文环境(可选参数),指向callback,
返回值为找到的第一个满足回调函数条件的值,如果没找到返回undefined;

var arr = [1, 2, 3, 4];
var s = arr.find(function(elem, index, array){
    console.log(elem, index, array);  //1, 0, [1, 2, 3, 4]
    return elem < 4;
});
console.log(s); //1

该方法的回调函数为3个值,分别是当前元素,下标,数组本身,写一个表示当前元素。

(3)findIndex(callback, context)

该函数与find函数的调用方法相同,返回满足回调函数条件的第一个值的下标,如果没找到返回-1

var arr = [1, 2, 3, 4];
var s = arr.findIndex(function(elem, index, array){
    console.log(elem, index, array);
    return elem > 1;
});
console.log(s); //1

(4)copyWithin(target, start, end)

  • 该函数有三个参数,意思是复制start到end之间的所有元素(不包含end),去覆盖由target下标开始处到所复制的元素的长度之间的所有元素。
  • start和end为可选参数,如果只有target,意思是用数组的第一个元素覆盖target处的元素;
  • 有两个参数意思是,复制start到数组结尾处的所有元素;
  • 另外start和end可为负值,为负值则最后一个元素位置为-1,其他为-2, -3类推。
var arr1 = [1, 2, 3, 4, 5];
console.log(arr1.copyWithin(0, 1, 4)); //[2, 3, 4, 4, 5]

var arr2 = [1, 2, 3];
console.log(arr2.copyWithin(2)); //[1, 2, 1]

var arr3 = [1, 2, 3];
console.log(arr3.copyWithin(2, 1)); //[1, 2, 2]

var arr4 = [1, 2, 3, 4, 5];
console.log(arr4.copyWithin(-2, -3, -1)); //[1, 2, 3, 3, 4]

该方法针对数组本身操作,会影响原数组。

(5)includes(elem)

该函数只有一个参数,返回值为Boolean类型;

var arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3));  //true
console.log(arr.includes(6));  //false

(6)entries(),keys(),values()

这三个函数都返回一个数组的迭代器对象,可以用object.next().value去访问,也可以用for…of去遍历;

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

var s = arr.entries();
console.log(s.next().value); //[0, 1]
for (var i of s){
    console.log(i); //输出为键值对,如[key, value]
}

var k = arr.keys();
console.log(k.next().value); //0
for (var i of k){
    console.log(i); //输出为key
}

var v = arr.values();
console.log(v.next().value); //1
for (var i of v){
    console.log(i); //输出为value
}
-------------本文结束感谢您的阅读-------------