es6 数组扩展

数组扩展

1. …可以扩展为数组，也可以取出数组中的所有元素(数组拆分)

let [a,...b]=[1,2,3,4];
console.log(a, b);//1 (3) [2, 3, 4]
console.log( ...[9, 8, 7, 6]);//9 8 7 6

还可以拆分dom元素集合

console.log(document.querySelectorAll(".press"));//NodeList(4) [button.press, button.press, button.press, button.press]
console.log(...document.querySelectorAll(".press"));//<button class="press">按钮1</button>……

2. …f可以替换apply 将数组转为函数的参数。
   ps:call和apply

call和apply都是调用一个对象的一个方法，用另一个对象替换当前对象。而不同之处在于传递的参数，apply最多只能有两个参数——新this对象和一个数组argArray，如果arg不是数组则会报错TypeError；

call则可以传递多个参数，第一个参数和apply一样，是用来替换的对象，后边是参数列表。

3. 通过push函数，将一个数组添加到另一个数组的尾部。
   之前要想连接两个数组

let a=[1,2,3];
let b=[4,5,6];
console.log(a.concat(b));

或者

console.log(Array.prototype.push.apply(a, b));//6
 console.log(a);//[1,2,3,4,5,6]

不能直接Push

console.log(a.push(b));//新数组长度 4
   console.log(a);//(4) [1, 2, 3, Array(3)]

Push函数的底层源码——返回值为新数组的长度

function ArrayPush () {
 var n = TO_UNIT32(this.length);//原数组长度
 var m = %_ArgumentsLength();//追加数组元素长度
 for (var i = 0; i < m; i++) { // 逐个复制元素
 this[i + n ] = %_Arguments(i);//将追加数组添加到原数组后面
 }
 this.length = n + m; // 修改数组的length
 return this.length;//返回新数组长度
 }

而在es6中，则可以直接和解构赋值结合使用

a.push(...b);//6
console.log(a);//(6) [1, 2, 3, 4, 5, 6]

4. 数组的复制

数组是引用类型，不是值类型；

此时只是修改了指针，两个指针指向同一地址空间，所以会修改原值

此时不会修改，因为方法已经改变了指针（不是同一个指针就不会影响原数组）

es6中，这样也不会修改原数组，原理相同，其实是将a数组克隆了一份给b,此时已经不是同一地址

5） 合并数组

   /*合并数组*/
    let a=[1,2];
    let b=[3,4];
    let c=[5,6];
//    es5
    console.log(a.concat(b, c));//[1, 2, 3, 4, 5, 6]
//    es6
    let d= [...a,...b,...c];
    console.log(d);//[1, 2, 3, 4, 5, 6]

6） 将字符串转换为数组

/*字符串转数组*/
let str="abcdefg";
console.log([...str]);//(7) ["a", "b", "c", "d", "e", "f", "g"]

7） Array.from
将类数组转化为数组;类数组中除了内容外还必须有length:n的属性，否则为空数组

//    类数组转数组
    console.log(Array.from(document.querySelectorAll(".press")));//(4) [button.press, button.press, button.press, button.press]
//    自定义
    let obj={
        0:"张三",
        length:1
    }
    console.log(Array.from(obj));

8）Array.of;将值转化为数组

其中，数组没有参数就生成空数组，一个参数为数组长度（但是在测试中一个参数输出的是数组值），多个参数为数组值

//    将值转化为数组
    console.log(Array.of(1,2,3,4));//(4) [1, 2, 3, 4]
    console.log(Array.of());//[]
    console.log(Array.of(3));//[3]

9）查找元素find和findindex，都返回满足条件的第一个值/索引
find方法

用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

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

find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
改写为es6

let arr=[1, 5, 10, 15];
console.log(arr.find( (value)=>value>9)); // 10

findIndex方法的用法与find方法非常类似

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

let a=[1,2,3,4,5];
console.log( a.findIndex(val=> val>3));//3

10）fill填充数组
参数可以是一个（值）或者三个（补充起始和结束位置——取小不取大）

   let a=[1,2,3,4,5];
    /*1个参数*/
    a.fill("a");
    console.log(a);//(5) ["a", "a", "a", "a", "a"]
    /*3个参数 说明起始和结束位置*/
    a.fill("a",1,3);
    console.log(a);//(5) [1, "a", "a", 4, 5]