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]
    //注:扩展运算符不能放在数组的第一位
目录
打赏
0
相关文章
利用ES6中的...扩展运算符来合并数组
本文介绍了使用ES6的新特性简化JavaScript编程的多种方法。其中包括使用扩展运算符`...`优雅地合并数组,解构赋值快速提取数组和对象值,`for...of`循环及箭头函数提升数组遍历效率,`find`方法简化数组搜索,`+`号与短路运算符优化数据类型转换及默认值设置,以及模板字符串和扩展运算符增强的对象合并技巧,这些方法让代码更加简洁高效。
66 0
es6 扩展运算符
【8月更文挑战第20天】
48 0
|
6月前
|
ES6新增语法 扩展运算符
ES6新增语法 扩展运算符
35 0
|
9月前
|
js开发:请解释什么是ES6的扩展运算符(spread operator),并给出一个示例。
ES6的扩展运算符(...)用于可迭代对象展开,如数组和对象。在数组中,它能将一个数组的元素合并到另一个数组。例如:`[1, 2, 3, 4, 5]`。在对象中,它用于复制并合并属性,如`{a: 1, b: 2, c: 3}`。
64 3
扩展运算符的学习与应用
扩展运算符是ES6新增的一种运算符,他可以帮助我们简化代码,简化操作,所以在开发中是非常常用的,下面我将从学习与应用两个方面来带掘友学习扩展运算符。
142 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等