扩展运算符和剩余参数rest

-加油

已于 2022-06-15 19:25:25 修改

阅读量101

点赞数

分类专栏：前端 ES6 文章标签： javascript 前端 typescript

于 2022-06-12 19:10:00 首次发布

本文链接：https://blog.csdn.net/weixin_51040174/article/details/125247792

版权

前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

ES6

1 篇文章 0 订阅

订阅专栏

本文介绍了ES6中的扩展运算符在函数调用、数组合并、数组拷贝以及伪数组转换为真数组等方面的应用，并通过实例详细讲解了浅拷贝与深拷贝的区别，特别是对于包含引用类型的数组如何实现深拷贝的方法。同时，还探讨了剩余参数rest的使用规则及其与ES6中rest参数的对比。

摘要由CSDN通过智能技术生成

扩展运算符
1、将数组转换为逗号分隔的参数序列

let boys = ['王俊凯','王源','易烊千玺']
function fun(){
    console.log(arguments);
}
fun(boys);//[Arguments] { '0': [ '王俊凯', '王源', '易烊千玺' ] }
fun(...boys);//[Arguments] { '0': '王俊凯', '1': '王源', '2': '易烊千玺' }
fun('王俊凯','王源','易烊千玺')//[Arguments] { '0': '王俊凯', '1': '王源', '2': '易烊千玺' }

let a = [15,10,2,3,4,]
console.log(Math.max(...a));//15
console.log(Math.min(...a));//2
console.log(Math.max.apply(null,a));//15
console.log(Math.min.apply(null,a));//2
console.log(Math.max(a));//NAN
console.log(Math. min(a));//NAN

2、数组合并

let boy1 = ['王俊凯','王源']
let boy2 = ['易烊千玺']
let boys = [...boy1,...boy2]
console.log(boys);

3、数组拷贝

let boys = ['王俊凯','王源','易烊千玺']
//数组元素里面为简单数据类型
let boysCopy1 = [...boys]
console.log(boysCopy1);//[ '王俊凯', '王源', '易烊千玺' ]
boysCopy1.push('tfboys')
//不会改变boys的值
console.log(boysCopy1);//[ '王俊凯', '王源', '易烊千玺', 'tfboys' ]
console.log(boys);//[ '王俊凯', '王源', '易烊千玺' ]


//另外两种数组拷贝的方法    同理修改boysCopy2、boysCopy3不会影响到boys
let boysCopy2 = boys.slice()
console.log(boysCopy2);//[ '王俊凯', '王源', '易烊千玺' ]

let boysCopy3 = Array.from(boys)
console.log(boysCopy3);//[ '王俊凯', '王源', '易烊千玺' ]

数组深浅拷贝：

//把数组里面的元素改为引用类型     这样后两个变量的指向是同一个地址
let boys = [ {boy1:'王俊凯'},{boy2:'王源'},{boy3:'易烊千玺'}]
let boysCopy = [...boys]
console.log(boys)//[ { boy1: '王俊凯' }, { boy2: '王源' }, { boy3: '易烊千玺' } ]
console.log(boysCopy)//[ { boy1: '王俊凯' }, { boy2: '王源' }, { boy3: '易烊千玺' } ]
boysCopy[0].boy1 = '庄文杰'
//浅拷贝     boys的值一起被修改了
console.log(boysCopy);//[ { boy1: '庄文杰' }, { boy2: '王源' }, { boy3: '易烊千玺' } ]
console.log(boys)//[ { boy1: '庄文杰' }, { boy2: '王源' }, { boy3: '易烊千玺' } ]

实现深拷贝：

//实现深拷贝：
let tfboys = [ {boy1:'王俊凯'},{boy2:'王源'},{boy3:'易烊千玺'}]
//JSON.stringify把js对象变为json字符串    JSON.parse再转为js对象   这是全新的js对象 
//数组的map、filter、reduce等方法会造成浅拷贝，可以用json来解决。json还可以解决object的深拷贝
//json方法缺点：有些类型的值是不支持的，
let tfboysCopy = JSON.parse(JSON.stringify(tfboys))
tfboysCopy[0].boy1 = '庄文杰'
//深拷贝  不会影响原数组  
console.log(tfboysCopy);//[ { boy1: '庄文杰' }, { boy2: '王源' }, { boy3: '易烊千玺' } ]
console.log(tfboys);//[ { boy1: '王俊凯' }, { boy2: '王源' }, { boy3: '易烊千玺' } ]

4、将伪数组转为真正的数组

<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        const divs = document.querySelectorAll('div');
        const divArr = [...divs];
        console.log(divArr);
    </script>
</body>

剩余参数rest

function data(){ 
    console.log(arguments);//对象
    //{ '0': '大哥', '1': '二哥', '2': '三哥', '3': '四哥' }
}
data("大哥","二哥","三哥","四哥");

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments 。

function Data(...args){
    console.log(args);//数组   [ '大哥', '二哥', '三哥', '四哥' ]
    //这样就可以使用 数组的方法
}
Data("大哥","二哥","三哥","四哥");

含有其他参数 rest参数必须放在最后面

//剩余参数
function fun(a,b,...args){
    console.log(a,b);// 大哥  二个哥
    console.log(args);//数组    [ '三哥', '四哥' ]
}
fun("大哥","二哥","三哥","四哥")

-加油

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录