扩展运算符在数组和对象中的应用

… 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});//{}