ES6 展开语法

电玩女神 2021-09-18 07:58 353阅读 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 条评论，353人围观）

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

相关阅读

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

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

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

相关 ES6模板语法

一.模板语法 1.换行 let str3 = ` <div>王昭君</div> <div>貂蝉</div>

男娘i/ 2022年08月28日 07:57/ 0 赞/ 193 阅读

相关 ES6新语法

0.let const > 局部变量,不允许重复声明.const只读常量，一旦声明就无法改变. -------------------- 1. for…of >

朴灿烈づ我的快乐病毒、/ 2022年05月31日 03:59/ 0 赞/ 185 阅读

相关 es6 展开运算符 ...

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

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

相关 Es6语法

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

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

相关 es6基本语法

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

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

相关 ES6语法基础

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

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

相关 ES6 展开语法

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

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

相关 ES6之展开运算符

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

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

相关 ES6语法

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

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