数组的扩展

时间 2019-11-16

标签数组扩展繁體版

原文原文链接

1：扩展运算符

主要做用就是展开当前数组；通常应用于浅拷贝、合并数组、解构node

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

...[2, 3, 4]
// VM71: 1 Uncaught SyntaxError: Unexpected token...

[...[2, 3, 4]]
// (3)[2, 3, 4]

浅拷贝数组

const arr1 = [1,2];
   const arr2 = [...arr1];
   // arr2 --> [1,2]
   
   
   // 状况二
   const arry1 = [3, 4];
   const arry2 = [...arry1, ...arry1];
   // arry2 --> [3,4,3,4]

合并数组函数

const arr1 = [1, 2];
   const arr2 = [2, 2];
   const arr3 = [3, 2];
   [...arr1, ...arr2, ...arr3];
   // (6)[1, 2, 2, 2, 3, 2]

解构this

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

拆分字符串prototype

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

转换Iterator接口的对象rest

[...'abcabcabc'.matchAll('ab')]; //matchAll返回一个迭代器
  // [Array(1), Array(1), Array(1)]
  
  
  let nodeList = document.querySelectorAll('div');
  let array = [...nodeList];
  // [Array(1), Array(1), Array(1)]

2：Array.from，从类数组(包含length)的对象和迭代器对象转换为数组

用法1code

let arrayLike = {
 '0': 'a',
 '1': 'b',
 '2': 'c',
 length: 3
 };
 
 Array.from(arrayLike);
 // ['a', 'b', 'c'] 
 // 若是去掉 '0': 'a',这一行，那么也是会返回一个数组只是去掉的位置换成了undefined。

用法2 querySelectorAll对象

Array.from([...'abcabcabc'.matchAll('ab')]);
 // [Array(1), Array(1), Array(1)]
 
 Array.from([1, 2, 3]);
 // [1, 2, 3] 
 
 Array.from({length: 3});
 // [ undefined, undefined, undefined ] 
 
 
 Array.from({
   length: 100
 }).fill(0);
 
 // (100) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]    fill表明返回的值
 
 
 // 接收函数
 Array.from([1, 2, 3], (x) => x * x);
 //  [1, 4, 9]

3：Array.of，将一组值, 转换为数组

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

4：copyWithin ，将指定位置的成员复制到其余位置

也就是说在当前数组里面它会把指定位置的元素或者数复制到其余地方，它会修改当前数组。它接收三个参数：token

Array.prototype.copyWithin(target, start = 0, end = this.length);
target(必需)：从该位置开始替换数据(负值表示倒数)，也就是说从哪里开始替换
start(可选)：从该位置开始读取数据(默认为 0), 负值表示从末尾开始计算

end(可选)：到该位置前中止读取数据(默认为数组长度), 负值表示从末尾开始计算 start - end 决定了一个范围，而后范围里面的成员复制到target里面开始接口

[1, 2, 3, 4, 5].copyWithin(0, 3);
 // [4, 5, 3, 4, 5] 
 
 [1, 2, 3, 4, 5].copyWithin(0, 3, 4);
 // [4, 2, 3, 4, 5] 
 
  
 [1, 2, 3, 4, 5].copyWithin(0, -2, -1);
 // 等于：-2 + length = 3 ，-1 + length = 4 
 // [4, 2, 3, 4, 5]

5：find，找出第一个符合条件的数组成员

[1, -24, -5, 10].find((value, index, arr) => value < 0);
 //  -24

6：findIndex，找出第一个符合条件的数组成员位置下标

[-11, 4, -5, 10].findIndex((value, index, arr) => value < 0);
 // 0

7：fill，使用给定值填充一个数组(处理模式和copywithin同样)

fill的第一个参数是填充的值，第二个参数和第三个参数相似于copywithin的start end。

['a', 'b', 'c'].fill(7);
 // [7, 7, 7] 
 
 new Array(3).fill(7);
 // [7, 7, 7]
 
 ['a', 'b', 'c'].fill(7, 1, 2);
 // ['a', 7, 'c']
 
 ['a', 'b', 'c'].fill(7, 1);
 // ['a', 7, 7]

8：entries、keys、values，遍历数组, 返回一个遍历器对象。

['a', 'b'].keys() 返回一个迭代器Array Iterator {}，[...['a', 'b'].keys()]扩展一下返回一个数组[0,1]

keys：返回一个下标

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

values：返回字符自己值

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

entries：返回既包含下标也包含值

for (let [index, elem] of ['a', 'b'].entries()) {
     console.log(index, elem);
   }
   // 0 "a" 
   // 1 "b" 
   
   let letter = ['a', 'b', 'c'];
   let entries = letter.entries();
   
   // 依次遍历
   console.log(entries.next().value);
   // [0, 'a'] 
   console.log(entries.next().value);
   // [1, 'b']
   console.log(entries.next().value);
   // [2, 'c']

9：includes，某个数组是否包含给定的值，第二个参数表示起始位置。

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

10：flat，数组下降维度

[1, 2, [3, 4]].flat(); //[1, 2, [3, 4]]数组里面嵌套一个数组是一个二维数组，使用flat下降维度
 // [1, 2, 3, 4]
 
 [1, 2, [3, [4, 5]]].flat(2);
 // [1, 2, 3, 4, 5] 
 
 // 若是不知道维度，能够给一个无限大Infinity
 [1, [2, [3]]].flat(Infinity);
 // [1, 2, 3] 
 
 // 若是有一个空对象，flat会默认过滤处理掉空元素
 [1, 2, , 4, 5].flat();
 // [1, 2, 4, 5]

11：flatMap，执行map函数再执行flat，也就是说把里面自己值先处理一遍输出而后再展开运算下一个值。

[2, 3, 4].flatMap((x) => [x, x * 2]);
 
 // [2, 4, 3, 6, 4, 8]

12：数组空位，ES6将空位转为undefined, ES5不一样方法处理方式不一致。

Array(3);
 // [, , ,] 或者 [empty × 3]
 
 Array.from(['a', , 'b']);
 // [ "a", undefined, "b" ] 
 
 [...['a', , 'b']];
 // [ "a", undefined, "b" ]