ES6 展开语法

电玩女神 2021-09-18 07:58 452阅读 0赞

> **展开语法(Spread syntax), **可以在函数调用/数组构造时,  将 **数组表达式 **或者 **字符串**在语法层面展开.
> 
> 还可以在**构造字面量对象**时, 将对象表达式按key-value的方式展开。

### 语法 :  ###

函数调用：

myFunction(...iterableObj)

字面量数组构造或字符串：

[...iterableObj, '4', ...'hello', 6]

构造字面量对象时,进行克隆或者属性拷贝（ECMAScript 2018规范新增特性）：

let objClone = { ...obj }

## ##

### 使用 : ###

### 1.  参数使用 ###

方法传入3个参数然后计算和

function sum(x, y, z) {
      return x + y + z;
    }

传入一个数组

const args= [1, 2, 3];

作参数, 我们可以用 apply 实现

sum.apply(null, args);

为了让代码更简洁,可以用延展符

sum(...args);

### 2.  数组使用 ###

**数组合并**

合并数组的方法有很多，常用的是 `concat()`

var arr1 = [1,2]
    var arr2 = [3,4]

arr1 = arr1.concat(arr2)

需要注意的是，`concat`是返回一个新的数组，并非修改原数组，所以还需要去接收返回值。

然而用 `push` （向数组的末尾添加一个或多个元素）结合展开运算符是能直接修改原数组的，

arr1 = arr1.push(...arr2)
    // 等同于
    arr1 = [...arr1, ...arr2]

或者追加到数组的开头

arr1.unshift(...arr2)

把新数组添加到任意位置

var arr2 = [3, ...arr1, 4]

非常灵活方便。

> 上面提到的 `push()` 方法实际上是属于一类可接收任意数量参数的方法，而此类方法均可以使用展开运算符

比如 `Math.min()`

var nums = [4, 5, 3, 1]
    Math.min(...nums)

**数组拷贝**

var arr1 = [1,2]
    var arr2 = [...arr1]

注意，这里实际上只拷贝了一层，属于浅拷贝，数组中的对象仍然是拷贝的引用。

### 3.  对象 ###

var obj1 = { foo: 'bar', x: 42 };
    var obj2 = { foo: 'baz', y: 13 };
    
    var clonedObj = { ...obj1 };
    // 克隆后的对象: { foo: "bar", x: 42 }
    
    var mergedObj = { ...obj1, ...obj2 };
    // 合并后的对象: { foo: "baz", x: 42, y: 13 }

发表评论取消回复

表情：

评论列表（有 0 条评论，452人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6展开运算符(...)

看到一道面试题里面，有 `const newBooks = [...this.state.books]` 用了展开运算符，顺便来记录一下 > 展开运算符,将一个数组转为用逗号

向右看齐/ 2022年10月29日 07:48/ 0 赞/ 203 阅读

相关【笔记】es6语法

es6 1. Symbol:唯一性，相同的也是唯一的。 2. 声明变量 3. 解构赋值

àì夳堔傛蜴生んèń/ 2022年10月04日 14:55/ 0 赞/ 247 阅读

相关 es6 展开运算符 ...

好记性不如烂笔头，在学习的过程中，越来越明白这句话的含义； ES6的展开运算符使用三个点来表示 ... 使用展开运算符的前提：对象具有 Iterator 遍历器

柔情只为你懂/ 2022年05月25日 10:27/ 0 赞/ 225 阅读

相关 Es6语法

1.var要比let的位高,作用域要大 2.let的作用范围很小很小 3.若果在函数内定义一个var变量,在函数外是不能被访问的. function user()

素颜马尾好姑娘i/ 2022年05月09日 06:20/ 0 赞/ 412 阅读

相关 es6基本语法

> 为了更好地学习语法和之后的vue，es6是必不可少的一步！ <!DOCTYPE html> <html lang="en"> <head

傷城~/ 2022年03月06日 02:44/ 0 赞/ 371 阅读

相关 ES6语法基础

一，let 与 const ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。 let 声明的变量只在 let 命令所

布满荆棘的人生/ 2021年09月21日 09:44/ 0 赞/ 591 阅读

相关 ES6相关语法

[es6.ruanyifeng.com/\docs/intro][es6.ruanyifeng.com_docs_intro] 1、let和const命令 let

逃离我推掉我的手/ 2021年09月20日 08:30/ 0 赞/ 465 阅读

相关 ES6 展开语法

> 展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者字符串在语法层面展开. > > 还可以在构造字面量对象时, 将对象表达式按

电玩女神/ 2021年09月18日 07:58/ 0 赞/ 453 阅读

相关 ES6之展开运算符

var user2={ age:22, address:"中国北京",

矫情吗；*/ 2021年09月17日 02:06/ 0 赞/ 406 阅读

相关 ES6语法

ES6语法 Tags: javascript const 与 let 变量使用`var`带来的麻烦: function getClothing(isC

野性酷女/ 2021年06月24日 16:09/ 0 赞/ 651 阅读