解构赋值

介绍

按照一定的模式，从数组和对象中提取值，对变量进行赋值

let arr = [1, 2, 3];
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a, b, c);
// 解构赋值后
let [A, B, C] = [1, 2, 3];
console.log(A, B, C);

核心思想—-模式匹配

解构赋值最核心的 思想 就是 模式匹配

数组解构

数组的解构赋值通过 下标顺序进行对应赋值

let [a,b,c] = [1,2,[3,4]];
console.log(a, b, c);
let [A, B, [C, D]] = [1, 2, [3, 4]];
console.log(A, B, C, D);

对象解构

对象通过 key-value 的方式 进行 解构赋值

对象是 key-value 结构，key 是唯一的，所以使用解构赋值的时候不需要在意，key的位置，这与数组不同，数组的下标相当于 key，所以数组的解构赋值顺序不能颠倒

let user = {
  name: 'simpleSky12',
  age: 24
}
/*
let { name, age} = user
console.log(name, age);
"simpleSky12" 24 
*/
let {age1, name1} = user;
console.log(age1, name1)
// undefined undefined
let {age, name} = user
console.log(age, name);
// 24 "simpleSky12"

从这个示例代码中可以看出=定义的变量名一定要和 对象中的 key也就是属性名 保持一致

别名

解构赋值的时候我们还可以使用别名

let user = {
  name: 'simpleSky12',
  age: 24
}

let {name: username, age: userage} = user
console.log(username, userage);
// simpleSky12 24

字符串解构

let str = 'imooc'
for (let i = 0; i < str.length; i++) {
  console.log(str[i]);
}

因为 字符串可以通过遍历循环输出，所以我们可以仿照对 数组的解构赋值的方式 对其进行操作

let [a, b, c, d, e] = str;
console.log(a, b, c, d, e);
// i m o o c

实际应用

对默认值的赋值

默认值的赋值是惰性的

let [a, b, c = 8] = [4, 5];
console.log(a, b, c);
// 4,5,8

let [a1, b1, c1 = 8] = [4, 5, 6];
console.log(a1, b1, c1);
// 4 5 6

function foo() {
  console.log(123)
}

let [a1 = foo()] = []
console.log(a1)

let [a = foo()] = [1]
console.log(a)

如果等号右边的数组为空，a1 就会被 赋值 默认值，foo() 没有返回值，所以只会执行 打印功能，返回值为undefined

对于方法参数的解构赋值

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

foo(arr); // 1  2  3

参数的解构赋值与 默认值的结合

let user = {
  name: 'simpleSky12',
  age: 24
}

function foo({name, age, school = 'imooc'}) {
  console.log(name, age, school)
}

foo(user);
// simpleSky12 24 imooc

对于方法返回值的解构赋值

function foo() {
  let user = {
    name: 'simpleSky12',
    age: 24,
    school: 'imooc'
  }
  return user;
}
let {name, age} = foo()
console.log(name, age);
// simpleSky12 24

对于json数据的解构赋值

let json = '{"a":"hello", "b":"world"}'
let {a, b} = JSON.parse(json);
console.log(a, b);
// hello world