JS--解构赋值&&展开语法

结构赋值

变量声明并赋值时的解构

    var a = [1, 2, 3, 4]
    var [b, c, d] = a
    console.log(b);//1
    console.log(c);//2
    console.log(d);//3

变量先声明后赋值时的解构

   var b, c, d
    [b, c, d] = [1, 2, 3, 4]
    console.log(b);//1
    console.log(c);//2
    console.log(d);//3
//可以先给声明的变量赋值   防止解构的值为undefined
    var b, c, d
    [b, c=6, d=8] = [1]
    console.log(b);//1
    console.log(c);//6
    console.log(d);//8
//如果不给c&&d赋值的话解构出来的值为undefined

交换两个变量的值

let x = 1;
let y = 2;
[x,y] = [y,x]
console.log(x,y);//2  1

 将剩余数组赋值给一个变量

当解构一个数组时，可以使用剩余模式，将数组剩余部分赋值给一个变量。

var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

从函数返回多个值

  //返回一个数组
    function fun() {
      return [1, 2, 3];
    }
    let [a, b, c] = fun();
   console.log([a, b, c]); //[1,2,3]

//返回一个对象
function fn(){
    return {
        foo:1,
        bar:2
    };
}
let {foo,bar} = fn();
foo;   //1   
bar;   //2

 忽略某些返回值

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

函数参数

//参数是一组有次序的值
function f([x,y,z]){
    console.log(x,y,z);
}
f([1,2,3]);  //1,2,3
//参数是一组无次序的值
function func({x,y,z}){
    console.log(x,y,z);
}
func({z:3,y:2,x:1}); //1,2,3

JSON数据

let jsonData = {
      id: 42,
      status: "OK",
      data: [123, 456]
    };
    // let { id, status, data:number } = jsonData;
    let { id, status, data }= jsonData;
    // console.log(id, status,number);   //42 "OK"  [123, 456]
    console.log(id, status,data);   //42 "OK"  [123, 456]

JavaScript展开语法

关键字是：... 

可以在函数调用/数组构造时，将数组表达式或者 string 在语法层面展开；还可以在构造字面量对象时，将对象表达式按 key-value 的方式展开。(译者注: 字面量一般指 [1, 2, 3] 或者 {name: "mdn"} 这种简洁的构造方式)

示例:

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

合并数组

1.一般用concat进行

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 将 arr2 中所有元素附加到 arr1 后面并返回
var arr3 = arr1.concat(arr2);

2.用...合并数据

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];

数组拷贝 (copy)

var arr = [1, 2, 3];
var arr2 = [...arr]; 
arr2.push(4);

// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响

函数传参

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

对象

  let obj={a:1,b:2}
    let obj1={...obj}
    console.log(obj1,'拷贝');//{a:1,b:2}
    obj1.a=3//修改拷贝值
    obj1.b=6//修改拷贝值
    console.log(obj,'原始');//{a:1,b:2}
    console.log(obj1,'修改拷贝');//{a:3,b:6}
    let obj2={...obj1,...obj}//合并
    let obj3={...obj,...obj1}//合并
    console.log(obj2,'合并的对象');
    console.log(obj3,'合并的对象');
    //合并时相同的属性变为同一个,然后后面的值会覆盖前面的值,合并顺序不同产生的合并对象的值也不同,

// 构造字面量对象时使用展开语法
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// 克隆后的对象: { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象: { foo: "baz", x: 42, y: 13 }

//对象合并时相同的属性变为同一个,然后后面的值会覆盖前面的值,合并顺序不同产生的合并对象的值也不同