文章目录
… ES6的扩展运算符
1、扩展运算符可以将数据展开
2、不能单独使用扩展运算符展开数组,可以在参数中使用,将参数数组转成参数列表。
3、如果扩展运算符后面跟的是变量,那么接受单独多余的数组放置到数组中。
一、扩展运算符在数组中的应用
一、遍历数组
var arr = [1, 2, 3, 4]
console.log(...arr);
二、可以当做数组的参数
var arr = [1, 2, 3, 4]
var numArr = ['a', ...arr, 'b']
console.log(numArr);
三、可以对数组进行深拷贝
var arr = [1, 2, 3, 4]
var arrA = [...arr]
console.log(arrA);
arrA.unshift(0) // 给arrA数组添加元素
console.log(arrA);
console.log(arr);
四、可以作为函数中的参数
var arr = [1, 2, 3, 4]
function fn(x, ...y) {
console.log(x);
console.log(...y);
}
fn(...arr)
五、和解构赋值连用
let [a, ...b] = [1, 2, 3, 4]
console.log(a);
console.log(b);
六、可以将伪数组转化为真正的数组
var str = '我们真好'
console.log(Array.from(str)); // Array.from()也可以将伪数组转化为真正的数组
console.log([...str]);
二、扩展符在对象中的应用
一、遍历对象
var obj = {
name: 'name',
age: 18,
sex: '男'
}
console.log({ ...obj});
二、给对象赋默认值
var obj_1 = {
a: 1,
b: 2
}
var obj_2 = {
...obj_1,
b: 3
}
console.log(obj_2);
合并的对象中有相同的属性会覆盖
三、合并对象
let obj1 = {a:1)
let obj2 = {b:2},
let obj3 ={...obj1,...obj2);
console.log(obj3)
四、 如果扩展运算符后面是一个字符串,它会自动转成一个类数组对象,因此返回的不是空对象
console.log({...'hello'});//{ '0': 'h', '1': 'e', '2': 'l', '3': 'l', '4': 'o' }
三、如果扩展运算符后面不是对象,则会自动将其转为对象。由于该对象没有自身属性,所以返回一个空对象。
console.log({...1});//{}
console.log({...true});//{}
console.log({...undefined});//{}
console.log({...null});//{}