ES6 数组的扩展

image.png

扩展运算符

含义

扩展运算符(spread)是三个点... 它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列

//该运算符主要用于函数调用
function push(array,...items){
  array.push(...items)
}
var a = [];
push(a,1,2,3);

//扩展运算符与正常额函数参数结合使用
function fo(a,b,c,d,e) {}
var args = [2,3]
fo(1,...args,4,...[5,6])

//扩展运算符如果放在括号中,JavaScript引擎就会认为这是函数调用.否则就会报错
(...[1,2]) // 报错
console.log((...[1,2])) // 报错
console.log(...[1,2]) // 1,2

.

---

替代apply方法

由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了

function fo(x,y,z) {}                                 function fo(){}
var args = [1,2,3]          <=ES5    ES6=>            var args = [1,2,3]        
fo.apply(null,args);                                  fo(...args)

//使用Math.max()求最大值
Math.max.apply(null,[12,79,34])     <=ES5      ES6=>       Math.max(...[12,79,34])

//通过push函数,将一个数组添加到另一个数组的尾部
var arr1 = [1,2,3];                                      var arr1 = [1,2,3]
var arr2 = [4,5,6];              <=ES5         ES6=>     var arr2 = [4,5,6]
Array.prototype.push.apply(arr1,arr2);                   arr.push(...arr2)

.

---

扩展运算符的应用

1.复制数组
数组是复合的数据类型,直接复制的话,只是复制了指向底层数据解构的指针,而不是克隆一个全新的数组

const a1 = [1,2];
const a2 = a1;
a2[0] = 2;
a1 = [2,2]

//ES5通过变通方法来复制数组                   //ES6复制数组的方法
const a1 = [1,2];                            const a1 = [1,2];
const a2 = a1.concat();                      写法一:const a2 = [...a1]
a2[0] = 2;                                   写法二:const [...a2] = a1;
a1 // 1,2                                  

2.合并数组
扩展运算符提供了数组合并的新写法

const arr1 = [1,2,3];
const arr2 = [4];             
const arr3 = [5,6];
arr.concat(arr2,arr3);        <=ES5      ES6=>      [...arr1,...arr2,...arr3]

不过,这两种方式都是浅拷贝

const arr1 = [{foo:1}];
const arr2 = [{bar:2}]
const arr3 = arr1.concat(arr2);
const arr4 = [...arr1,...arr2];
arr1[0] === arr3[0]  // true
arr1[0] === arr4[0] // true
//上面代码中,arr3和arr4都是

3.与解构赋值结合使用,用于生成数组

const [first,...rest] = [1,2,3,4,5];
first,rest // 1,[2,3,4,5];
const [first,...rest] = []; 
first,rest // undefined,[]
const [first,...rest] = ['foo']
first,rest) // 'foo',[]

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

const [...first,rest] = [1,2,3,4,5];
//报错
const [first,...middle,last] = [1,2,3,4,5];
//报错

4.扩展运算符作用于字符串

扩展运算符可以将字符串转为真正的数组

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

上面的写法,有一个重要的作用,就是可以识别4个字节的Unicode字符

''x\uD83D\uDE80y''.length // 4
[...''x\uD83D\uDE80y''].length // 3

5.有遍历器(Iterator)接口的对象,都可以用扩展运算符转为真正的数组

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];

对于没有实现Iterator接口的类似数组的对象,扩展运算符无法转为真正的数组
可以使用Array.from()将其转为真正的数组

let arrayLike = {
  '0':'name',
  '1':'age',
  '2':'sex',
  length:3
}
let array = [...arrayLike] // 报错
let array = Array.from(arrayLike);

Array.from()

次方法用于将两类对象转为真正的对象:
① 类似数组的对象(所谓类似数组的对象,其本质特征只有一点,即必须具有lengh属性.因此任何有length 属性的对象,都可以用Array.from()转为真正的数组,而此时...就无法转换)

• 实际操作中,类似数组的对象有两类,Array.from都可以把它们转为真正的数组
  ①Dom操作返回的nodeList集合(类数组)
  ②函数中的arguments

② 可遍历的对象(即内置Iterator遍历接口的对象,包括ES6的新增的数据解构Map和Set)

• 扩展运算符的本质也是调用Iterator遍历接口,所以也可以用...来转换数组

let arrayLike = {
  '0':'name',
  length:3
}
let arr = Array.from(arrayLike); // ['name',undefined,undefined]

let ps = document.querySelectorAll('p');
Array.from(ps) 

function foo() {
  var args = Array.from(arguments) // 或者 var args = [...arguments]
}

Array.from('hello') // ['h','e','l','l','o']
[...'hello'] // ['h','e','l','l','o']

Array.of() 用于将一组值转为真正的数组

此方法的目的是为了弥补构造函数Array的不足.因为Array参数个数的不同,会导致Array()的行为有差异

Array() // []
Array(3) // [ , , ,]
Array(3,4,5) // [3,4,5]

//而Array.of()方法的行为非常统一
Array.of() // []
Array.of(3) // [3] 
Array.of(undefined) // [undefined]
Array.of(3,4,5) // [3,4,5]

//下面是模拟Array.of()方法的实现
function ArrayOf() {
  return [].slice.call(arguments); // 或者 return [...arguments];
}

...待续未完