详解ES6新增的数组方法

之前有汇总js中数组的属性和常用方法，链接地址为：https://blog.csdn.net/Freya_yyy/article/details/84780003，同时有对js中Array map()与forEach()的用法进行了对比，链接地址为：https://blog.csdn.net/Freya_yyy/article/details/81637169。

下面详细介绍一下ES6新增的部分其他数组方法：

Array.from(),Array.of(),find/findIndex,fill,includes,copyWithin,entries/keys/values

1.Array.from():

Array.from()方法是用于 将其他对象转换为数组：

• 部署了Iterator接口的对象，如Map、Set、Array
• 类数组的对象（即有length属性的对象）

比如，使用Array.from()方法，可以将JSON对象转为数组。

let json ={
    '0':'hello',
    '1':'123',
    '4':'world',
    length:3  //需要有length属性，否则转化出来数组为空[]
}
let arr = Array.from(json);
console.log(arr);

控制台打印结果：(3) ["hello", "123", undefined]

var map = new Map();
map.set(0, "hello");
map.set(1,"world");
map.set(2,"name")
var arr = Array.from(map);
console.log(arr);

控制台打印结果：二维数组

1. (3) [Array(2), Array(2), Array(2)]
   1. 0: (2) [0, "hello"]
   2. 1: (2) [1, "world"]
   3. 2: (2) [2, "name"]
   4. length: 3

2.Array.of():

Array.of()方法是将一组值转变为数组。

let empty = Array.of();
console.log(empty);     //[]

let arr = Array.of(3,4,5,6);
console.log(arr);      //[3,4,5,6]

3.find()/findIndex():

数组实例的find方法用于找出第一个符合条件的数组成员。参数是个回调函数，所有数组成员依次执行该回调函数，直到找到第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，就返回undefined； 
如：回调函数可以接收3个参数，依次为当前的值（value）、当前的位置（index）、原数组（arr）

let arr = [1,2,3,5,7];
console.log(arr.find(function(item,index,arr){
    return item> 3;
}))

控制台打印结果：5

数组实例的findIndex方法用于找出第一个符合条件的数组成员的索引。 

let arr = [1,2,3,5,7];
console.log(arr.findIndex(function(item,index,arr){
    return item> 3;
}))

控制台打印结果：3 

4.fill()：

使用fill（）方法用给定的值来填充数组。可以填充一个空数组（初始化）或者改变已有元素的值 。
fill方法还可以接收第二个和第三个参数，用于指定填充的起始位置和结束位置（不包含）： 

new Array(3).fill(7);//[7,7,7] 

let arr = [0,1,2,3,4,5,6,7];
arr.fill('error',2,4);
console.log(arr);//[0,1,"error","error",4,5,6,7]

5.includes():

 includes()方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

console.log([1,2,NaN].includes(NaN)) //true(ES6之前NaN不等于自身。includes可包含)

6.copyWithin(target, start, end):

从数组的指定位置拷贝元素到数组的另一个指定位置中。

target必需。复制到指定目标索引位置。

start可选。元素复制的起始位置。

end可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

console.log([1,2,3,4,NaN].copyWithin(1,2,4)) //[1, 3, 4, 4, NaN]

7.遍历数组的方法：entries/keys/values 

entries方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。迭代对象中数组的索引值作为 key， 数组元素作为 value。

keys方法用于从数组创建一个包含数组键的可迭代对象。如果对象是数组返回 true，否则返回 false。

values方法用于从数组创建一个包含数组值的可迭代对象。

for(let item of ['a','b'].keys()){
    console.log(item);
    //0
    //1
}
for(let item of ['a','b'].values()){
    console.log(item);
    //'a'
    //'b'
}
let arr = ["a","b"];
for(let item of arr.entries()){
    console.log(item);  
    //  [0, "a"]
    //  [1, "b"]
}
for(let [index,item] of arr.entries()){
    console.log(index+':'+item);
    //0:"a"
    //1:"b"
}

note:由于entries/keys/values 返回的都是一个迭代对象，如果不用for...of进行遍历，可用使用next()方法手动跳到下一个值。

let arr5 =['a','b','c']
let entries = arr5.entries();
console.log(entries.next().value);//[0, "a"]
console.log(entries.next().value);//[1, "b"]
console.log(entries.next().value);//[2, "c"]
console.log(entries.next().value);//undefined

let values = arr5.values();
console.log(values.next().value);//a
console.log(values.next().value);//b
console.log(values.next().value);//c
console.log(values.next().value);//undefined

let keys= arr5.keys();
console.log(keys.next().value);//0
console.log(keys.next().value);//1
console.log(keys.next().value);//2
console.log(keys.next().value);//undefined