4. 数组的拓展

扩展运算符

扩展运算符是三个...,该运算父会将一个数组转化为用逗号分隔的参数序列，例如：

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

扩展运算符后面可以放置表达式

  const x=1;
  const arr = [
    ...(x > 0 ? ["a"] : []),
    "b"
  ]
  console.log(arr);

如果扩展运算符后是一个空数组，那么不会产生任何效果

[...[],1];//[1]

该方法主要用于函数调用

  const args = [0, 1];
  function f(v, w, x, y, z) {
    console.log(v + w + x + y + z);
  }
  f(-1, ...args, 2, ...[3]);//5

使用该方法可以极大的简化我们之前的写法，例如

  //es5
  Math.max.apply(null, [1, 2, 3]);

  var arr1 = [1, 2, 3],
      arr2 = [4, 5, 6];
  Array.prototype.push.apply(arr1, arr2);
  //es6
  Math.max(...[1, 2, 3]);

  arr1.push(...arr2);

实现数组的深拷贝

//在数组中我们实现数组的复制，如
var arr1=[1,2,3];
    arr2=arr1;
//这种方式只是复制了指向底层数据结构的指针，而不是克隆了一个全新的数组
arr2[0]=0;
console.log(arr1[0]);//0

//如果我们想要在底层再开辟一块空间来克隆一个新数组，
//es5
const arr2=arr1.concat();
//es6
const arr2=[...arr1];

合并数组

//es5
const arr2=arr1.concat(arr3);
//es6
const arr2=[...arr1,...arr3];

其它一些例子

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

注意如果将扩展运算符应用于数组的赋值，只能发在参数的最后一位，否则会报错

const [first,...arr,last]=[1,2,3,4]//报错

Array.from（）

Array.from方法用于将两类对象转化为真正的数组：类数组对象和可遍历的对象

类数组对象如document.querySelectorAll获取到的对象(object NodeList类型)，以及arguments对象

var arrayLike = document.querySelectorAll("div"); 
//NodeList(2) [div#block1, div#block2]
console.log(Array.from(arrayLike)); 
//(2) [div#block1, div#block2]，此时可以正常使用数组的方法 
Array.from(arrayLike).push(2);

//ES5
arrayLike=[].slice.call(arrayLike)

Array.from方法还可以接受第二个参数，该参数的作用类似于数组的map方法，用来对每一个元素进行处理将处理后返回的值放入返回的数组

var arr={
        0:"name",
        1:"age",
        length:2
    };
    console.log(Array.from(arr, t => t + "i"));
    //["namei", "agei"]

该方法也可以用来处理字符串，将字符串转换为数组，同时可以避免javascript将大于/uFFFF的Unicode字符算作两个字符的bug

var str="12345";
console.log(Array.from(str));
// ["1", "2", "3", "4", "5"]

Array.of()

Array.of方法用于将一组值转换为数组

Array.of(1, 2, 1);
//[1, 2, 1]

相比于之前的Array方法，该方法不会出现下面的情况

Array(3)
//[empty × 3] || [ , , ,]
console.log(Array.of(3));
//[3]

我们可以模拟实现该方法

function ArrayOf() {
    return [].slice.call(arguments);
}

copyWithin()

该方法用来在数组内部将指定位置的成员复制到其他位置，该位置的原有成员会被覆盖，数组将会被修改，然会返回修改后的数组

Array.prototype.copyWithin(target,start,end)

该方法接受三个参数

• target，必需参数，从该位置开始替换数据
• start，可选参数，从该位置开始读取数据，默认为0，如果为负值，表示倒数
• end，可选参数，表示到该位置停止读取数据，默认等于数组长度，如果为负值，表示倒数

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

注意的一个事项，从开始位置替换原数组是指将我们截取的等长度的数组从target位置开始的等长度的数组替换为我们通过start和end截取的字符

find()、findIndex()

find()方法用于查找数组中是否包含符合条件的成员，它的参数是一个回调函数，所有的数组成员依次执行该回调函数，直到找到符合该回调函数条件的成员，返回第一个符合条件的成员，如果没有找到那么返回undefined

var arr=[1,2,3,4,-5];
arr.find((n) => n < 0);
//-5

find中传入的回调函数也可以接受三个参数，分别是当前的值，当前的位置和原数组，这些值都可以做为条件来筛选我们要查找的数组成员

var arr=[1,2,3,4,-5];
arr.find((val, index, arr) => {
    return index != 4 && value >2;
    //返回位置不为4并且值大于2的第一个成员
});
//3

findIndex方法的用法与find方法非常相似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，那么返回-1

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

fill()

[ ].fill(val,start,end)

该方法用于使用给定的值填充一个数组

[1,2,3,4].fill("hi",0,2);
//["hi", "hi", 3, 4]

该方法可以接收3个参数

• val，表示用来填充数组的字符
• start，表示填充开始的位置
• end，表示填充结束的位置

如果不传入参数，会将原数组中的成员都替换为undefined

includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组中是否包含给定的值，与字符串的includes方法类似，该方法其实可以看作是es6在自己的规范中实现了$.inArray();

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

//JQuery
$.inArray(1, arr, 0) //存在返回位置，不存在返回-1

该方法可以接收第二个参数来表示从什么位置开始检索，默认为0，负数表示倒数位置，如果大于数组长度，那么会重置检索位置为0，比起之前我们常用的indexof，返回布尔值相比-1更加直观