ES6数组新增的方法

ES6数组方法

1.JSON数组格式转换Array.from()方法:

let people={
    0:'zhangsan', 
    '1':24,     //key值必须是0,1,2......可以是数字或者字符串
    length:2    //必须有length这个特殊的属性
};
let trans=Array.from(people);//Array.from()方法
console.log(trans); //['zhangsan',24]

     这就是一个标准的JSON数组格式，跟普通的JSON对比是key值是数组下标并且在最后多了一个length属性。只要是这种特殊的json格式都可以轻松使用ES6的语法转变成数组。在ES6中绝大部分的Array操作都存在于Array对象里。我们就用Array.from(xxx)来进行转换。我们把上边的JSON代码转换成数组，并打印在控制台。

2.Array.of()方法：

     它负责把一堆文本或者变量转换成数组。在开发中我们经常拿到了一个类似数组的字符串，需要使用eval来进行转换，eval的效率是很低的，它会拖慢我们的程序。这时候我们就可以使用Array.of方法。

let arr =Array.of(3,4,5,'zhang','li');
console.log(arr);  //[3, 4, 5, "zhang","li"]

3.find( )实例方法:

    所谓的实例方法就是并不是以Array对象开始的，而是必须有一个已经存在的数组，然后使用的方法，这就是实例方法（不理解请看下边的代码）。这里的find方法是从数组中查找。在find方法中我们需要传入一个匿名函数，函数需要传入三个参数：

• value：表示当前查找的值。
• index：表示当前查找的数组索引。
• arr：表示当前数组。

let arr=[1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
    return value > 5;
})) //输出6  注意:在函数中如果找到符合条件的数组元素就return，并停止查找

4.fill( )实例方法：

    fill()也是一个实例方法，它的作用是把数组进行填充，它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置。

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

5.数组的遍历

5.1 for…of

 let arr=['js','java','python','c','c++'];
 for (let item of arr){
    console.log(item);//j java python c c++
}

for..of数组索引:有时候开发中是需要数组的索引的，那我们可以使用下面的代码输出数组索引。

 let arr=['js','java','python','c','c++'];
 for (let index of arr.keys()){
    console.log(index);//0 1 2 3 4
}

• arr.keys()方法是对key值得遍历
• arr.values()方法是对value值的遍历
• arr.entries()方法是对键值对的遍历

同时输出数组的内容和索引：我们用entries()这个实例方法，配合我们的for…of循环就可以同时输出内容和索引了。

 let arr=['js','java','python','c','c++'];
 for (let [index,val] of arr.entries()){
    console.log(index,val);   //0 'js' 1 'java' 2 'python' 3 'c' 4 'c++'
}

entries( )实例方法：
entries()实例方式生成的是Iterator形式的数组，那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。我们来看下面的代码：

let arr=['js','java','jquery']
let list=arr.entries();
console.log(list.next().value); //[0, "js"]
console.log(list.next().value); //[1, "java"]
console.log(list.next().value); //[0, "jquery"]

5.2 forEach()方法(ES5)

let arr=['js','java','jquery'];
arr.forEach((val,index)=>console.log(index,val));//0 'js' 1 'java' 2 'jquery'

forEach循环的特点是会自动省略为空的数组元素，相当于直接给我们筛空了。但是有时候也会给我们帮倒忙。

5.3 filter()方法(ES5)

返回值:返回一个子集

//eg:1
let arr=['js','java','jquery'];
arr.filter(x=>console.log(x));//js java jquery   返回一个空数组

//eg:2
a = [5,4,3,2,1];
values = a.filter(function(x){return x<3});// [2,1]

filter也有循环的功能

5.4 some()或every()方法(es5)

作用：对数组元素进行指定函数的逻辑判断。
返回值:boolean

//some方法
let arr=['js','java','jquery'];
arr.some(x=>console.log(x));     //js java jquery   返回false
let a = [1,2,3,4,5];
a.some((x)=>{return x<5}) // true 存在一个满足条件返回true

//every方法
let arr=['js','java','jquery'];
arr.every(x=>{console.log(x)});     //js   返回false
let a = [1,2,3,4,5];
a.every((x)=>{return x<10}) // true 所有的满足条件返回true

5.5 map()方法(es5)

返回值:为一个新数组,不改变原来数组

//eg:1
let arr=['js','java','jquery'];
console.log(arr.map(x=>'web'));   //["web", "web", "web"]
//eg:2
a = [1,2,3];
b = a.map(function(x){return x*x;}); //[1,4,9]

map在这里起到一个替换的作用

6. copyWithin方法

作用:在当前数组内部，将指定位置的成员复制到其他位置，返回当前数组。
参数:

• 第一个参数（从该位置开始替换数据）；
• 第二个参数（可选 从该位置开始读取数据，默认为0，负值表示倒数）；
• 第三个参数（可选 到该位置前停止读取，默认为数组长度）

返回替换后的数组(改变了数组)

[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]

7. find()和findIndex()

作用:找到第一个符合条件的数组成员。
接受的为一个回调函数，所有数组成员依次执行该函数，直到找到第一个返回值为true的成员。回调函数可以接受三个参数，依次为值，位置，原数组。
返回值：find()返回找到的成员；findIndex()返回成员的位置。

[1,5,10,15].find(function(value,index,arr){
    return value > 9;
})//10

8. includes() 方法

作用:查看某个数组是否包含给定的值
参数:

• 第一个参数必选（待检查的给定值）
• 第二个参数可选，表示搜索的起始位置，默认为0，负数表示倒数的位置

返回值:Boolean
注意：和indexOf的区别，indexOf进行了运算符的强比对，会导致对NaN误判。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, NaN].includes(NaN); // true