ES6-解构赋值基本用法

定义：解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

1. 数组解构赋值

{
  let a,b,rest;
  [a,b]=[1,2];
  console.log(a,b); //1 2
}
//块级作用域分隔开
{
  let a,b,rest;
  [a,b,...rest]=[1,2,3,4,5,6];
  console.log(a,b,rest); //1 2 [3,4,5,6]
}

2. 对象解构赋值

{
  let a,b;
  ({a,b}={a:1,b:2});
  console.log(a,b); // 1 2
}

3. 解构赋值默认参数

{
  let a,b,c,rest;
  [a,b,c=3]=[1,2];
  //c报undefined
  //[a,b,c]=[1,2];
  console.log(a,b,c); // 1 2 3
}

4. 解构赋值适用场景——变量交换

{
  let a=1;
  let b=2;
  [a,b]=[b,a];//ES6中无需借助第三个变量
  console.log(a,b);//2，1
}

5. 解构赋值适用场景——取得函数返回值

{
  function f(){
    return [1,2];
  }
  let a,b;
  [a,b]=f();
  console.log(a,b);//1，2
}

6. 解构赋值适用场景——取指定数组参数

{
	function f(){
		return [1,2,3,4,5];
	}
	let a,b,c,d;
	[a,,,b] = f();
	console.log(a,b); // 1 4
	
	[c,,,,d] = f();
	console.log(c,d); // 1 5
}

7. 对象解构赋值

{
  let o={p:42,q:true};
  let {p,q}=o;
  console.log(p,q);//42,true
}

8. 对象解构赋值–默认参数

{
  let {a=10,b=5}={a:3};
  console.log(a,b);//3，5
}

9. 对象解构赋值–模拟服务端JSON格式数据存取

{
  let metaDate={
    title:'abc',
    test:[{
      title:'test',
      desc:'description'
    }]
  }
  let {title:esTitle,test:[{title:cnTitle}]}=metaDate;//重点格式
  console.log(esTitle,cnTitle); //abc test
}

10. 函数参数解构赋值–对象形式

{
  function sayName({firstName,lastName}){
    console.log(firstName+","+lastName);
  }
  let person={
    firstName:'Jack',
    lastName:'Mike'
  }
  sayName(person); //jack,Mike
}

11. 函数参数解构赋值–数组形式

{
  function f3([x,y,...z],...w){
    console.log(x,y,z,w);
  }
  f3([]);//undefined,undefined,[],[]
  f3([1,2,3,4,5,6],7,8)//1,2,[3,4,5,6],[7,8]
}