JavaScript解构赋值详解

[a, b] = [50, 100];
console.log(a);
// expected output: 50
console.log(b);
// expected output: 100
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// expected output: [30, 40, 50]

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

// 声明变量
let a, b;
// 然后分别赋值
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

let a, b;
// 设置默认值
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

//交换ab
c = a;
a = b;
b = c;

let a = 1;
let b = 3;
//交换a和b的值
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

function c() {
  return [10, 20];
}
let a, b;
[a, b] = c();
console.log(a); // 10
console.log(b); // 20

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

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

let [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// Use nested destructuring to assign red, green and blue
// 使用嵌套解构赋值 red, green, blue
const [hex, [red, green, blue]] = color;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

let [a, b, c, d, e] = 'hello';
/*
a = 'h'
b = 'e'
c = 'l'
d = 'l'
e = 'o'
*/

let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = x;的简写
console.log(y); // 22
console.log(z); // true

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

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

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

const props = [
  { id: 1, name: 'Fizz' },
  { id: 2, name: 'Buzz' },
  { id: 3, name: 'FizzBuzz' },
];
const [, , { name }] = props;
console.log(name); // "FizzBuzz"

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;//不解构x
// x = undefined
// y = 'world'

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;//忽略y
// x = 'hello'

let x;
{x} = {x: 1};

let x;
({x} = {x: 1});

function add([x, y]) {
	return x + y;
}
add([1, 2]);

let x = 1;
let y = 2;
[x, y] = [y, x];

// 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

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