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];
}
...待续未完
