ES6中的(...)扩展运算符

很简单啊,我就是想一下啊啊啊啊啊啊啊.


扩展运算符(spread)...

1.(...)相当于rest参数的逆运算,将一个数组转为用逗号分割的参数序列.

2.作用:

  • 用于函数调用.
  • 替代函数方法apply:因为扩展运算符可以展开数组,所以不需要再使用apply方法,将数组转为函数的参数.
  • 用于数组字面量

eg1:

//将items的数组转换为参数序列,再进行push操作.
function push(array, ...items) {
    array.push(...items);
}

eg2:扩展运算符后面还可以放置表达式

const arr = [...(x > 0) ? ['a'] : [], 'b'];

eg3:代替函数的apply方法:因为扩展运算符可以展开数组,所以不需要用apply方法,将数组转为函数的参数.

let args=[0,1,2];
function fun(x,y,z) {
    //...
}
//es5
fun.apply(null,args);
//es6
fun(...args);
//es5
Math.max.apply(null,[14,3,77]);
//es6
Math.max(...[14,3,77])

3.应用

  • 复制数组:数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组.
const a1=[1,2];
//第一种
const a2=[...a1];
//第二种
const [...a2]=a1;
  • 合并数组
let arr1=[1,2,3];
let arr2=["a","b"];
let arr3=["weiqiujuan","liuxiaotian"];
//es5
arr1.concat(arr2,arr3);
//es6
[...arr1,...arr2,...arr3];
  • 与解构赋值结合:注(只能将扩展运算符用于数组赋值的参数的最后一位,否则报错)
//es5
a = list[0], rest = list.slice(1);
//es6
[a, ...rest] = list;

const [first, ...rest] = [];
first // undefined
rest  // []
  • 将字符串转换为真正的数组(:有一个重要的好处,那就是能够正确识别四个字节的 Unicode 字符。)JavaScript 会将四个字节的 Unicode 字符,识别为 2 个字符,采用扩展运算符就没有这个问题
[...'hello']//['h','e','l','l','o']
  • 实现来Iterator接口的对象(任何 Iterator 接口的对象,都可以用扩展运算符转为真正的数组。)

    对于没有部署Iterator接口的,可以使用Arrayfrom将其转化为真正的数组.

let nodeList=document.querySelectorAll("div");//返回的是一个对象
let array=[...nodeList];//将其转换为真正的数组,NodeList对象实现了 Iterator 。
  • Map和Set结构,Generator函数(扩展用算符内部调用的是数据结构的Iterator接口,因此只要具有Iterator接口的对象,都可以使用它)

map:

let map = new Map([
    [1, 'weiqiujuan'],
    [2, 'liuxiaotian'],
    [3, 'liudishizhu']
]);

let arr = [...mao.keys()];//[1,2,3]

Generator:函数运行后,返回一个遍历器对象,所以可以使用

const go=function *() {
    yield 1;
    yield 2;
    yield 3;
};

[...go()];//[1,2,3]

猜你喜欢

转载自blog.csdn.net/qq_39083004/article/details/80299737