ES6数组常用方法

经历了几天并不开心的日子，应试教育的无奈又一次摆在我眼前。哦，对了，我还是个非985&211大学的学生。
废话不应该那么多？

还是说一说ES6的数组吧...

首先我们应该了解一下扩展运算符

扩展运算符...，可以将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3]); // 1 2 3

• 将函数转换为参数

function test(a,b,c) {
    console.log(a+b+c);
}
var arr = [1,2,3];

/*es5中*/
test.apply(this,arr);

/*es6中*/
test(...arr);

• 合并数组
• 数组赋值
  扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错

var [...arr, arr1] = [1, 2, 3, 4, 5];//报错

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

var [arr, ...arr1] = [];
console.log(arr) // undefined
console.log(arr1) // []

var [arr, ...arr1] = ["foo"];
console.log(arr) // foo
console.log(arr1)   // []

• 将字符串转换为数组

console.log([...'hello']);// [ "h", "e", "l", "l", "o" ]

Array.from()方法

用于将类数组和可遍历的对象转换为真正的数组

• 类数组：就是类似数组的对象，本质上要有length属性，说到底，任何拥有length属性的对象，都可以通过Array.from()方法转换为数组。
  可遍历的对象：ES6新增的数据结构set和map。

let myArray = {'0':'a','1':'b','2':'c'};
let arr = Array.from(myArray);
console.log(arr);   //[]由于没有length属性打印结果为一个空数组

let myArray = {'0':'a','1':'b','2':'c',length:3};
let arr = Array.from(myArray);
console.log(arr);  //["a", "b", "c"]

console.log(Array.from({length:2}));  //[undefined, undefined]

• 如果参数是一个真正的数组，Array.from()会返回一个一模一样的新数组

var arr = [1,2,3];
var myArr = Array.from(arr);
console.log(myArr);  //[1, 2, 3]
myArr[0] = 4;
console.log(myArr); //[4, 2, 3]

• Array.from()可以接受第二个参数，用来对每个元素进行处理然后放入返回的数组之中

var obj = {0:1,1:2,2:3,length:3};
var arr = Array.from(obj,x => x*x);
console.log(arr);

• Array.from()的另一个应用是，将字符串转化成数组，然后返回字符串的长度
  因为它能够正确处理各种Unicode字符，可以避JavaScript将大于\uFFFF的Unicode字符算成两个字符的bug

function countSymbols(string) {
  return Array.from(string).length;
}

Array.of()方法

用于将一组值，转换为数组

console.log(Array.of(1,2,3)); //[1, 2, 3]
console.log(Array.of(undefined)); //[undefined]
console.log(Array.of()); //[]没有参数时，返回一个空数组。

• 这个方法的主要目的是弥补数组构造函数Array()的不足
  在数组的构造函数中，如果只有一个值，那么这个值被认作为是数组的长度而不是数组的第一个值。

console.log(Array.of(2));
console.log(Array(2));

copyWithin()方法

将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回该数组

• 它接受三个参数：
  target（必填）：从该位置开始替换数据。
  start（可选）：从该位置开始读取数据，默认为0。如果是负值，表示倒数。
  end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
• 举个🌰大家就明白了

var arr = [1,2,3,4,5,6,7,8,9];
arr.copyWithin(0,3,6);
console.log(arr); //[4, 5, 6, 4, 5, 6, 7, 8, 9]

find()和findIndex()方法

• find()用于找出第一个符合条件的数组成员,返回该成员。如果没有符合条件的成员，返回undefined

var arr = [1,5,10,15];
var num = arr.find(function(value) {
    return value > 9;
});
console.log(num); //10

var arr = [1,5];
var num = arr.find(function(value) {
    return value > 9;
});
console.log(num); //undefined

• findIndex()返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

var arr = [1,5];
var num = arr.findIndex(function(value) {
    return value > 9;
});
console.log(num); //-1

回调函数可以接受三个参数，以此为当前的值、当前的位置和原数组。

fill()方法

• 填充一个数组，一般用于数组的初始化

var arr = ['a','b','c'];
console.log(arr.fill(1)); // [1, 1, 1]

• 可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置

var arr = ['a','b','c'];
console.log(arr.fill(1,1,2)); // ["a", 1, "c"]

keys()，valueOf()，entries()方法

• keys()遍历出所有的索引值

for (let index of ['a', 'b'].keys()) {
    console.log(index);
}  //0  1

• valueOf()遍历所有的值

for (let index of ['a', 'b'].valueOf()) {
    console.log(index);
}  //a  b

• entries()遍历值和索引

for (let index of ['a', 'b'].entries()) {
    console.log(index);
}  //[0, "a"] [1, "b"]

include()方法

判断数组是否包含给定的值，有返回true，没有返回false，第二个参数表示搜索的起始位置

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

• includes不是利用严格等于判断，所以可判断是否有NaN

var arr = [1,2,3,NaN];
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(1));//0
console.log(arr.indexOf(NaN));//-1
console.log(arr.includes(NaN));//true