ES6 新特性 扩展运算符(...)详解

简介: ES6 新特性 扩展运算符(...)详解

扩展操作符(…)可在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;

还以在构造对象时, 将对象表达式按key-value的方式展开;

1. 数组

1.1 构造数组

没有扩展运算符的时候,只能组合使用 push,splice,concat 等方法,将已有数组元素变成新数组的一部分。

有了扩展运算符, 构造新数组会变得更简单、更优雅:

扩展运算符(spread)就是我们知道的三个点(…),它就好像 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

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

1.2 数组拷贝

展开语法和 Object.assign() 行为一致, 执行的都是浅拷贝

let arr = [1, 2, 3];
let arr2 = [...arr]; // [1, 2, 3]
arr2.push(4); 
console.log(arr2); // [1, 2, 3, 4]
// 数组含空位
let arr3 = [1, , 3],
    arr4 = [...arr3];
console.log(arr4); // [1, undefined, 3]

1.3 合并数组

本质:将一个数组转为用逗号分隔的参数序列,然后置于数组中

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];// 将 arr2 中所有元素附加到 arr1 后面并返回
//等同于
var arr4 = arr1.concat(arr2);
console.log(arr3,arr4) // [0,1,2,3,4,5] [0,1,2,3,4,5] 

2. 对象

扩展运算符(…)用于取出 参数对象 所有 可遍历属性 然后拷贝到当前对象。

2.1 克隆对象

当 String,Number,Boolean 时,属于深拷贝;

当 Object,Array时,属于浅拷贝;

var obj1 = { foo: 'bar', x: 42 };
var clonedObj = { ...obj1 };
console.log(clonedObj); // { foo: "bar", x: 42 } 

2.2 合并对象

let age = {age: 15};
let name = {name: "Amy"};
let person = {...age, ...name};
console.log(person);  // {age: 15, name: "Amy"}

注意:

自定义的属性在拓展运算符后面,则拓展运算符对象内部同名的属性将被覆盖掉;

自定义的属性在拓展运算度前面,则自定义的属性将被覆盖掉;

let person = {name: "Amy", age: 15};
let someone = { ...person, name: "Mike", age: 17};
let someone1 = {  name: "Mike", age: 17,...person};
console.log(someone);  // {name: "Mike", age: 17}
console.log(someone1);  // {name: "Amy", age: 15}

扩展运算符后面是空对象、null、undefined,没有任何效果也不会报错。

//空对象
let a = {...{}, a: 1, b: 2};
console.log(a);  //{a: 1, b: 2}
// null 、 undefined
let b = {...null, ...undefined, a: 1, b: 2};
console.log(b);  //{a: 1, b: 2}

3. 函数

函数调用中,扩展运算符(…)将一个数组,变为参数序列

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
//不使用延展操作符
console.log(sum.apply(null, numbers));
//使用延展操作符
console.log(sum(...numbers)); // 6

扩展运算符与的函数参数可以结合使用,非常灵活:

function f(x,y,z,v,w,u){
  console.log(x,y,z,v,w,u)
}
var args = [0,1,5];
f(-1,...args,2,...[3]); // -1, 0, 1, 5, 2 ,3

4. 在 react 中的运用

通常我们在封装一个组件时,会对外公开一些 props 用于实现功能,大部分情况下在外部使用都应显示的传递 props ,

但是当传递大量的props时,会非常繁琐,这时我们可以使用 …(扩展操作符,用于取出参数对象的所有可遍历属性) 来进行传递。

之前的写法:

<CustomComponent name ='Jine' age ={21} />

使用 … ,等同于上面的写法

const params = {name: 'Jine', age: 21}
<CustomComponent {...params} />

配合解构赋值避免传入一些不需要的参数

var params = {
  name: '123',
  title: '456',
  type: 'aaa'
}
var { type, ...other } = params;
<CustomComponent type='normal' number={2} {...other} />
//等同于
<CustomComponent type='normal' number={2} name='123' title='456' />



相关文章
|
6月前
|
JavaScript
ES6新特性(基础常用)
文章介绍了ES6的常用新特性,包括let和const命令、对象解构赋值、模板字符串、Map和Set对象。通过示例代码详细解释了它们的用法和与传统ES5语法的区别,以及如何利用这些特性编写更简洁和高效的代码。
ES6新特性(基础常用)
|
3月前
|
存储 JavaScript 前端开发
es6 扩展运算符
【8月更文挑战第20天】
19 0
|
3月前
|
存储 API
ES6新增语法 扩展运算符
ES6新增语法 扩展运算符
26 0
|
6月前
|
存储 网络架构
ES6之rest参数、扩展运算符
ES6之rest参数、扩展运算符
38 1
|
网络架构
es6扩展运算符的学习使用
es6扩展运算符的学习使用
48 0
|
网络架构
ES9 新特性 ------ 扩展运算符
ES9 新特性 ------ 扩展运算符
|
前端开发 JavaScript
【ES6丨前端进阶基础 】ES6的关键字,新特性以及解构赋值
【ES6丨前端进阶基础 】ES6的关键字,新特性以及解构赋值
140 0
【ES6丨前端进阶基础 】ES6的关键字,新特性以及解构赋值
|
存储 JavaScript 前端开发
ES6入门之字符串的扩展
ES6入门之字符串的扩展
|
网络架构
ES6入门之函数的扩展
ES6入门之函数的扩展