美文网首页
扩展运算符

扩展运算符

作者: hhh_hhhhhh | 来源:发表于2019-03-22 16:56 被阅读0次

扩展运算符是三个点(...)。个人认为是对于数组操作的简化版。(千万不要因为漏打一个点报错啊!!)

简化apply方法

一、展开数组

function doSth(a,b,c){
    return a+b+c
}

这里我们传参一般为

doSth(1,2,3)    //6。

参数为数组let arr = [1,2,3],那么可能我们要手动展开传参,但扩展运算符可以简化这部操作。

doSth(...[1,2,3])    //6

或者

doSth(...arr)    //6    (后面就不展示这种方式了!)

二、取最大值

Math.max.apply(null,[11,5,20])    //20

Math.max(...[11,5,20])    //20

Math.max(11,5,20)    //20

扩展运算符就是展开数组成为参数序列。

三、push一个数组到另一数组尾部

let arr1 = [1,2]
let arr2 = [3,4]
Array.prototype.push.apply(arr1,arr2)    //[1,2,3,4]

//用到扩展运算符:

arr1.push(...arr2)    //[1,2,3,4]

是不是方便到家!(前者是因为ES5中push参数无法是数组)

四、复制数组

数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。

let arr1 = [1,2]
let arr2 = arr1
arr2[0] = 2
arr1    //[2, 2]

我们改变了arr2,arr1也改变了。说明arr2并不是arr1的克隆,而是指向同一份数据的另一个指针。修改arr2,会直接导致arr1的变化。我们可以这样:

let arr1 = [1,2]
let arr2 = arr1.concat()
arr2[0] = 2
arr1    //[1, 2]

这样就不会影响arr1了。我们用扩展运算符呢?

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

//或

let [...arr2] = arr1

两种写法都可以。

五、合并数组

let arr1 = [0,1,2]
let arr2 = [3,4,5]
let arr3 = [6,7,8]
arr1.concat(arr2,arr3)    //[0,1,2,3,4,5,6,7,8]

//扩展运算符:

[...arr1,...arr2,...arr3]    //[0,1,2,3,4,5,6,7,8]

以上两种方法都是浅拷贝,修改一个数组中的值都会影响合并数组中的值。

权威参考ES6:http://es6.ruanyifeng.com/?search=%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6&x=0&y=0#docs/array

相关文章

  • [转载]扩展运算符...

    原文:JavaScript 扩展运算符 扩展运算符格式 扩展运算符格式很简单,就是三个点(...) 扩展运算符作用...

  • es6之扩展运算符 三个点(...)

    es6之扩展运算符 三个点(...)对象的扩展运算符数组的扩展运算符总结es6之扩展运算符 三个点(…)对象的扩展...

  • 内置对象扩展(Array)

    Array 的扩展方法 扩展运算符(展开语法) 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列 扩展运算符可...

  • ES6学习笔记(五):轻松了解ES6的内置扩展对象

    Array的扩展方法 扩展运算符(展开语法) 扩展运算符可以将数组或者对象转换为用逗号分隔的参数序列 扩展运算符可...

  • ES6之解构赋值/剩余运算符/箭头函数

    扩展运算符(对象) 扩展运算符(数组) 扩展运算符和Object.assign对对象进行合并的行为,是属于浅拷贝 ...

  • ES6学习之- 数组的扩展

    Part3 数组的扩展 3.1 扩展运算符和数组的解构赋值 (1)扩展运算符是三个点 ...,扩展运算符主要用于函...

  • es6学习笔记整理(七)对象扩展

    简洁表示法 属性表达式 扩展运算符 扩展运算符 babel-polyfill对扩展运算符的支持不是很友好,所以这里...

  • ES6 的内置对象扩展

    Array 的扩展方法(★★) 扩展运算符(展开语法) 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列 扩展...

  • 解构赋值,函数扩展默认值

    扩展运算符 对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。 对象的扩展运算符等同...

  • es6新增的数组方法

    扩展运算符 1.扩展运算符的使用方法 2.扩展运算符的应用(1)复制数组 (2)合并数组 (3)与解构赋值结合 (...

网友评论

      本文标题:扩展运算符

      本文链接:https://www.haomeiwen.com/subject/ksurvqtx.html