ES6扩展运算符数组和对象的用法

扩展运算符的作用

数组

1遍历数组

var arr = [1, 2, 3, 4, 5]
console.log(...arr);

2、可以当做数组的参数

var numArr = ['a', ...arr, 'b']
console.log(numArr);

3、深拷贝 传值

var arrA = [...arr]
console.log(arrA);
arrA.unshift(0)
console.log(arrA);
console.log(arr);

4、可以作为函数中的参数

function fn(x, ...y) {
    console.log(x);
    console.log(...y);
}
fn(...arr)

5、可以和解构赋值连用

let [a, ...b] = [1, 2, 3, 4]
console.log(a);
console.log(b);

6、可以将伪数组，转换成真正的数组

var str = '纯爱战士'
console.log(Array.of(1, 2, 3));
console.log(Array.from(str));
console.log([...str]);

对象

1、对象的遍历

var obj = {
    name: 'name',
    age: 18,
    sex: '男'
}
console.log(obj.name = 'zs');
console.log({ ...obj, name: 'zs', age: 20 });

2、对象的合并

var obj_1 = {
    a: 1,
    b: 2
}
var obj_2 = {
    b: 3,
    ...obj_1,
}
console.log(obj_2);

3、 如果扩展运算符后面是一个字符串，它会自动转成一个类数组对象，因此返回的不是空对象

console.log({...'hello'});//{ '0': 'h', '1': 'e', '2': 'l', '3': 'l', '4': 'o' }

4、如果扩展运算符后面不是对象，则会自动将其转为对象。由于该对象没有自身属性，所以返回一个空对象。

console.log({...1});//{}
console.log({...true});//{}
console.log({...undefined});//{}
console.log({...null});//{}