当前位置：网站首页>扩展运算符和剩余参数rest

扩展运算符和剩余参数rest

2022-08-11 05:17:00 【-加油】

扩展运算符
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("大哥","二哥","三哥","四哥")
原网站

版权声明
本文为[-加油]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_51040174/article/details/125247792

边栏推荐

猜你喜欢

随机推荐