es6扩展运算符的学习使用

简介: es6扩展运算符的学习使用

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

1. 先看看es5与es6的写法区别

    const arr1 = [1,2]
    const arr2 = [5,6,6]
    const newarr1 = [1,4,5]
    //es5语法数组合并
    // const arr3 = arr1.concat(arr2,newarr1)
    // console.log(arr3)//(8) [1, 2, 5, 6, 6, 1, 4, 5]
    //es6语法数组合并
    const arr3 =  [...arr1,...arr2,...newarr1]
    console.log(arr3)//(8) [1, 2, 5, 6, 6, 1, 4, 5]
    //注:两种方法均为浅拷贝
    const arr1 = [1,2]
    const arr2 = [5,6,6]
    //es5语法添加返回并数组长度
    // const arr3 = Array.prototype.push.apply(arr1,arr2)//5
    //es6语法添加返回并数组长度
    console.log(arr1.push(...arr2))//5

2.学习es6拓展运算符语法使用的好处

    //将字符串转为数组
    const arr1 = 'abcde'
    const arr2 = [...arr1]
    console.log(arr2)//(5) ["a", "b", "c", "d", "e"]
    //扩展运算符将数组转化为参数序列
    function fun(x,y){
      return x+y
    }
    const args = [1,3]
    console.log(fun(...args))//4
    //配合解构赋值的使用
    const [a1,...a2] = [1,2,3,4,5]
    console.log(a1)//1
    console.log(a2)//(4) [2, 3, 4, 5]
    //注:扩展运算符不能放在数组的第一位
相关文章
|
1月前
|
JavaScript
|
1月前
|
JavaScript 前端开发
扩展运算符详细使用方法
扩展运算符详细使用方法
22 2
|
1月前
|
存储 网络架构
ES6之rest参数、扩展运算符
ES6之rest参数、扩展运算符
16 1
|
1月前
|
JavaScript
js开发:请解释什么是ES6的扩展运算符(spread operator),并给出一个示例。
ES6的扩展运算符(...)用于可迭代对象展开,如数组和对象。在数组中,它能将一个数组的元素合并到另一个数组。例如:`[1, 2, 3, 4, 5]`。在对象中,它用于复制并合并属性,如`{a: 1, b: 2, c: 3}`。
20 3
|
6月前
ES6学习(三)—字符串的扩展
ES6学习(三)—字符串的扩展
|
6月前
|
网络架构
ES6学习(六)—函数的扩展
ES6学习(六)—函数的扩展
|
6月前
|
网络架构
ES6学习(五)—数组的扩展
ES6学习(五)—数组的扩展
|
JavaScript 网络架构
扩展运算符的学习与应用
扩展运算符是ES6新增的一种运算符,他可以帮助我们简化代码,简化操作,所以在开发中是非常常用的,下面我将从学习与应用两个方面来带掘友学习扩展运算符。
101 0
|
JavaScript 前端开发 安全
ES6入门之数值的扩展
ES6入门之数值的扩展
|
前端开发 网络架构
ES6 新特性 扩展运算符(...)详解
ES6 新特性 扩展运算符(...)详解
185 0