8. 数组的拓展

Posted 2022-03-06 mapengfei247

目录

• 数组的拓展
  • 一.扩展运算符
  • 二.数组实例的方法
    • 1. Array.from()
    • 2. Array.of()
    • 3. find（）和findIndex（）
    • 4. fill（）
    • 5. entries（），keys（），values（）
    • 6. includes方法
    • 7. flat（）,flatMap（）
    • 8. copyWithin（）
    • 9. 数组的空位
  • 总结

数组的拓展

一.扩展运算符

1. 含义：扩展运算符是三个点(...)，作用是将数组转换为用逗号分隔的参数序列

   console.log(1,...[2,3,4],5);
   
   //等价于
   console.log(1,2,3,4,5);

2. 用法：

   • 该运算符主要用于函数的调用
   • 扩展运算符与正常的函数参数可以结合使用
   • 扩展运算符后面可以放置表达式
   • 如果扩展运算符是空数组，不产生任何效果

   function func(a,b,c,d,e)
   //调用
   func(1,...[2,3],4,...[5])
   
   func(1,...(x > 0 ? [2,3,4,5] : [6,7,8,9]))

3. 扩展运算符的应用

   • 复制数组

   const a1 = [2,3,4];
   
   //如下两种方式都可以实现数组的复制
   const b1 = [...a1];
   const [...b2] = a1;

   • 合并数组

   const a1 = [1,2,3];
   const a2 = [4,5,6];
   
   const b1 = [...a1,...a2];

   • 与解构赋值结合，生成数组

   let [a,...list] = [1,2,3,4,5,6];

   • 如果将扩展运算符用于数组赋值，只能放在最后一位，否则报错

   let [a,...nums,c] = [1,2,3,4,5];     //报错

   • 将字符串转为数组

   [...'hello']     //['h','e','l','l','o']

二.数组实例的方法

1. Array.from()

1. Array.from用于将两类对象转化为真正的数组

   • 类似数组的对象
   • 可遍历的对象

2. 任何有length属性的对象， 都可以通过Array.from转换为数组

3. 如果参数是一个数组，Array.form会返回一个一模一样的新数组

4. 如果参数是一个字符串，Array.from方法会将字符串拆分为字符数组

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

   Array.from(arrList,x => x * x);
   //等价于
   Array.from(arrList).map(x => x * x)
   
   Array.from(...[1,2,3],x => x * x);
   //  ----> [1,4,9]

2. Array.of()

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

2. 如果没有参数，则返回一个空数组

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

3. find（）和findIndex（）

1. find方法用来找出数组中一个符合条件的元素，参数是一个回调函数

   [1,2,3,4,5].find(n => n > 1);        // 2

2. findIndex方法返回第一个符合条件的数组成员的位置，参数是一个回调函数

   [1,2,3,4,5].findIndex(n => n > 0)    //返回0，即第一一个符合条件元素的下标

4. fill（）

1. 用指定的值，填充数组

2. fill方法还可以拥有第二个和第三个参数，用来指定开始位置和结束位置

   [1,2,3].fill(7);     //[7,7,7]
   [1,2,3,4,5].fill(8,0,3)  //[8,8,8,4,5]

5. entries（），keys（），values（）

1. entries用来遍历键值对

2. keys用来遍历键名

3. values用来遍历值

4. 可用for...of来进行循环遍历

   for(let index of ['a','b'].keys())
       console.log(index);
   
   
   for(let ele of ['a','b'].values())
       console.log(ele);
   
   
   for(let [index,ele] of ['a','b'].entries())
       console.log(index,ele);
   

6. includes方法

1. 数组的includes方法用来某个数组是否包含给定的值，返回布尔值

2. 该方法的第二个参数表示搜索的起始位置

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

7. flat（）,flatMap（）

1. flat函数用于将嵌套的数组拉平，变成一维数组

   [1,2,[3,4,5]].flat();        // [1,2,3,4,5]

2. flat默认只会拉平一层内嵌数组，可通过传参的方式制定拉平的层数，参数默认为1

3. 不管多少层嵌套，可以通过传入 Infinity关键字作为参数，统一转为一维数组

8. copyWithin（）

1. 数组实例的copyWithin方法，用来在当前数组内部，将指定位置的成员复制到其他位置，然后返回当前数组

2. 它接受三个参数

   • target：从该位置开始替换数组
   • start：可选，从位置开始读取数组
   • end：可选，到该位置停止读取数组

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

9. 数组的空位

1. 数组的空位即数组中仅仅使用逗号分隔开，并没有设值的位置
2. 由于各个方法对空位的处理不同，所以应该尽量避免出现空位

总结

1. ES6中，新增了数组的扩展运算符，扩展运算符类似于rest参数，作用是将数组转换为逗号分隔的参数列表
2. ES6中，新增了数组实例对象的一些方法