javascript destruction

1. Object destruction

const response = {
  code: 200,
  status: 'success',
  data: {
    name: 'zdd',
    age: 18
  }
}

const { code, status, data: { name, age } } = response;
console.log(code); // 200
console.log(status); // "success"
console.log(name); // "zdd"
console.log(age); // 18

2. String destruction

const [a, b, c, d, e] = 'hello';
console.log(a); // "h"
console.log(b); // "e"

3. rename on destruction

const person = {
  name: 'zdd',
  age: 18
}
const { name: myName } = person;
console.log(myName); // "zdd"

4. default value on destruction

const person = {
  name: 'zdd',
  age: 18,
};

const { name, age = 20, gender = 'male' } = person;
console.log(name); // 'zdd'
console.log(age); // 18
console.log(gender); // 'male'

Note: Each destructed property can have a default value if and only if the property is not present or its value is undefined.

const person = {
  name: 'zdd',
  age: 18,
  address: null
};

const { name, address = 'Dalian', gender = 'male' } = person;
console.log(name); // zdd
console.log(address); // null
console.log(gender); // male

In the above code, address is present in the person object, but its value is null, so the default value Dalian is not used.

如果解构中的属性值为null，则无法进行嵌套解构，会报错。

const person = {
  name: 'zdd',
  address: null
};

const { name, address: { city = 'Dalian', street = 'Jiefang Road' } = {} } = person;
console.log(name); // zdd
console.log(city); // Cannot read properties of null (reading 'city')
console.log(street); // Cannot read properties of null (reading 'street')

注意，以上代码会报错，虽然我们给了address一个默认值{}，但是address的原始值是null，所以默认值无法生效，这导致了city和street的解构报错。（相当于在null值中读取city和street）

要想解决这个问题，只能将嵌套解构变为二次解构。

const person = {
  name: 'zdd',
  address: null
};

const { name, address = {} } = person;
const { city = 'Dalian', street = 'Jiefang Road' } = address || {};
console.log(name); // zdd
console.log(city); // Dalian
console.log(street); // Jiefang Road

第一次解构后，address的值为null，所以我们给address一个默认值{}，然后再次解构city和street，这样就不会报错了。

5. rename and default value at the same time

const person = {
  name: 'zdd',
  age: 18,
};

const { name: myName, age: myAge = 20, gender: myGender = 'male'} = person;
console.log(myName); // 'zdd'
console.log(myAge); // 18
console.log(myGender); // 'male'

6. Array destruction

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

数组解构与对象解构不同，不需要指定属性名，只需要按照顺序解构即可。

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors;
console.log(firstColor); // 'red'
console.log(secondColor); // 'green'

7. get element at specific position

The following code get the color at the third position, ignore the first two colors.

const colors = ['red', 'green', 'blue'];
const [, , thirdColor] = colors;
console.log(thirdColor); // 'blue'

8. ignore some elements

Get all elements in array except the first two.

const colors = ['red', 'green', 'blue', 'yellow'];
const [, , ...restColors] = colors;
console.log(restColors); // ['blue', 'yellow']

注意：数组解构中，不定元素必须放在最后，如果不定元素后面还有其他元素，会报错。

const colors = ['red', 'green', 'blue', 'yellow'];
const [...restColors, lastColor] = colors; // SyntaxError: Rest element must be last element

9. Copy array

ES5

const colors = ['red', 'green', 'blue'];
const newColors = colors.slice(); // or colors.concat();
console.log(newColors); // ['red', 'green', 'blue']

ES6

const colors = ['red', 'green', 'blue'];
const [...newColors] = colors;
console.log(newColors); // ['red', 'green', 'blue']

9. swap two variables

Before ES6, we must introduce a temporary variable to swap two variables. But with destruction, we can swap two variables easily.

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

10. Nested array destruction

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