ES6扩展运算符和剩余参数运算符

简介: 该文章讲解了ES6中扩展运算符和剩余参数运算符的用法,包括展开数组、浅拷贝、将伪数组转换为真数组,以及如何将函数调用时的参数收集到一个数组中。

扩展运算符

主要是为了扩展、展开,看下面例子

          let Arr = [1, 2, 3, 4, 5,6, 7, 8, 9]
        console.log(...Arr)//扩展运算符 
        //1, 2, 3, 4, 5,6, 7, 8, 9 
         //相当于打印Arr [0] Arr[1] Arr[2] Arr[3].......
        console.log(Arr[0],Arr[1],Arr[2],Arr[3],Arr[4],Arr[5],Arr[6],Arr[7],Arr[8])
       //1, 2, 3, 4, 5,6, 7, 8, 9 
       两个结果相同
AI 代码解读

扩展运算符是一个浅拷贝的过程

        let Arr = [1, 2, 3, 4, 5,6, 7, 8, 9,{
   name:"zjq"}]
        let Brr =[...Arr]
        Brr[9].name = 'ZJQ'
        console.log(Arr) //
        console.log(Brr) //
         //两个打印的结果相同 name都为ZJQ 所以扩展运算符是浅拷贝
AI 代码解读

扩展运算符可以将伪数组转成真数组

    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <script>
        let btn = document.getElementsByTagName('button')
        console.log(btn)
        //是一个元素集合 伪数组 
        //HTMLCollection(4) [button, button, button, button]  
        let btn2 = [...btn]
        console.log(btn2)
        //转换成真数组
        // [button, button, button, button]
    </script>
AI 代码解读

将伪数组转成真数组的方式:
1.Array.from()
2.扩展运算符
3.for循环配合push

剩余参数运算符

将所有参数集合到一个数组里面

        function zjq(...list) {
    //剩余参数运算符
            console.log(list) //[1,2,3]
            //可以对参数进行处理
            for (let i=0; i < list.length; i++) {
   
                console.log(list[i])
                //1  2  3
            }
        }
        zjq(1, 2, 3)
AI 代码解读

Object.assign() 合并可枚举对象 浅复制

目录
打赏
0
3
3
0
95
分享
相关文章
利用ES6中的...扩展运算符来合并数组
本文介绍了使用ES6的新特性简化JavaScript编程的多种方法。其中包括使用扩展运算符`...`优雅地合并数组,解构赋值快速提取数组和对象值,`for...of`循环及箭头函数提升数组遍历效率,`find`方法简化数组搜索,`+`号与短路运算符优化数据类型转换及默认值设置,以及模板字符串和扩展运算符增强的对象合并技巧,这些方法让代码更加简洁高效。
60 0
es6 扩展运算符
【8月更文挑战第20天】
41 0
|
6月前
运算符有哪些?优先级是怎么样的?转换数据类型的方法?(最少4种)
运算符有哪些?优先级是怎么样的?转换数据类型的方法?(最少4种)
51 0
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
69 1
|
9月前
|
C#
赋值组合运算符
赋值组合运算符
55 1
运算符分为哪几类? 哪些运算符常用作判断?简述运算符的优先级?
运算符分为哪几类? 哪些运算符常用作判断?简述运算符的优先级?
es6扩展运算符、concat方法合并多个数组
es6扩展运算符、concat方法合并多个数组
62 0
形成新数组的方式扩展运算符
形成新数组的方式扩展运算符
49 0

热门文章

最新文章

AI助理

你好,我是AI助理

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