...扩展运算符(展开运算符和合并运算符)

扩展运算符又叫三点运算符,可以用来展开与合并

- 展开:

使用方式1,利用展开运算符进行拼接数组

var arr = [1,2,3,4,5]

var changeArr = [...arr,7,8,9]
console.log(arr)			//[1,2,3,4,5]
console.log(changeArr)		//拼接为[ 1, 2, 3, 4, 5, 7, 8, 9 ]
  • 使用方式2,利用展开运算符进行拼接对象
let obj1 = { a: 1, b: 2, c: {changeName: 'd'}};
let obj2 = { ...obj1,d:4,f:789};
console.log(obj1); 		//{ a: 1, b: 2, c: { nickName: 'd' } }
console.log(obj2); 		{ a: 1, b: 2, c: { nickName: 'd' }, d: 4, f: 789 }

如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性

let obj1 = { a: 1, b: 2, c: {changeName: 'd'}};
let obj2 = { ...obj1,c:{changeName:"被改变的内容"}};
console.log(obj1); 		//{ a: 1, b: 2, c: { changeName: 'd' } }
console.log(obj2); 		//{ a: 1, b: 2, c: { changeName: '被改变的内容' } }  ,同名所以后面覆盖前面
  • 使用方式3:可以用在给函数传递参数
var arr3 = [1,2,3]
function fn (a,b,c){
    console.log(a,b,c);
}
fn(...arr3)			//等价于fn(1,2,3)
  • 使用方式4:展开数组获取最大值
var arr4 = [123,456,333,999]
var maxNumber = Math.max(...arr4)
console.log(maxNumber);     //获取最大值,999
  • 使用方式5:把字符串转为数组
let stringData ='hello world'
let newArray =  [...stringData]
console.log(newArray);      //[ 'h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd' ]

javaScript数据类型分为基本数据类型引用数据类型
基本数据类型NumberStringBooleanUndefinedNull
引用数据类型ObjectArrayFunction

但是需要注意的是,修改对象的部分属性,要注意数据类型
因为扩展运算符对对象实例的拷贝属于一种浅拷贝,这基本数据类型的拷贝会完整的复制一份;当类型是引用数据Object,如果拷贝的时候拷贝的是对象的引用,当原对象发生变化的时候,拷贝对象也会跟着变化,比如:

let obj1 = { a: 1, b: 2, c: {changeName: 'd'}};
let obj2 = { ...obj1};
obj2.b = 888;
console.log(obj1)			//{ a: 1, b: 2, c: { changeName: 'd' } }
console.log(obj2); 			//{ a: 1, b: 888, c: { changeName: 'd' } }	没有影响原对象


let obj1 = { a: 1, b: 2, c: {changeName: 'd'}};
let obj2 = { ...obj1};
obj2.c.changeName = "Excubile"
console.log(obj1)		//{ a: 1, b: 2, c: { changeName: 'Excubile' } }
console.log(obj2); 		//{ a: 1, b: 888, c: { changeName: 'Excubile' } }	影响了原对象

- 合并

  • 使用方式1:可以将传入的参数合并为数组
// 这是将传入add函数的参数合并为数组
function add(...arr){
    console.log(arr);
}
add(9,9)     //[ 9, 9 ]
add(1,2,3)      //[ 1, 2, 3 ]
add(4,5,6,7)        //[ 4, 5, 6, 7 ]
  • 使用方式2:与解构赋值结合起来,用于生成数组
let oldArr = ["海绵宝宝","派大星","章鱼哥","珊迪","蟹老板","痞老板"]
let [First,Second,...newArr] = oldArr;
console.log(First);         //海绵宝宝
console.log(Second);        //派大星
console.log(newArr);        //[ '章鱼哥', '珊迪', '蟹老板', '痞老板' ]		

注意点:扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

let oldArr = ["海绵宝宝","派大星","章鱼哥","珊迪","蟹老板","痞老板"]
let [First,...newArr,Second] = oldArr;
// 或者:let [...newArr,First,Second] = oldArr;
console.log(First);         //报错
console.log(Second);        //报错
console.log(newArr);        //报错
  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值