JavaScript ES6 - 解构赋值

ES6 语法: 解构赋值

本文主要讲解 '解构赋值' 相关内容, 从两个方面入手: 1. 什么是结构赋值; 2. 解构赋值的分类 。

如图所示:

3-2-解构赋值.png

1. 什么是 ES6 解构赋值

1. ES6 入门标准一书中的定义是: 允许按照一定的模式从数组和对象中取值, 然后对变量进行赋值, 这被称为解构 。
2. 左边一种结构、右边一种结构, 然后左右按照一定的对应关系进行赋值 。

2. 解构赋值的分类

1. 数组的解构赋值 ⭐️
2. 对象的解构赋值 ⭐️
3. 字符串解构赋值
4. 布尔值解构赋值
5. 数值解构赋值
6. 函数参数解构赋值

3. 变量赋值

/**
 * 1. 变量赋值
 * 1-1. ES6 数组结构赋值写法
 *      1. 这种写法属于 '匹配模式', 只要等号两边的模式相同, 左边的变量就会被赋予对应的值
 */
{
  let num1, num2, num3;
  [num1, num2] = [1, 2]
  console.log('ES6 数组结构赋值写法: ', 'num1 = ', num1, 'num2 = ', num2);
  // 打印结果:
  // ES6 数组结构赋值写法:  num1 =  1 num2 =  2
}

/**
 * 1-2. ES5 写法
 */
{
  let num1 = 1, num2 = 2, num3;
  console.log('ES5 赋值写法: ', 'num1 = ', num1, 'num2 = ', num2);
  // 打印结果:
  // ES5 赋值写法:  num1 =  1 num2 =  2
}

4. 数组结构赋值

/**
 * 2. 数组结构赋值
 *    1. 配合 ... 语法
 *       1. ...num3 它的记过最终是 [3, 4, 5, 6],
 *       2. ...num3 它能够截取 [3, 4, 5, 6] 这个数组呢? 这个就是解构赋值的一个重要特性 。
 */
{
  let num1, num2, num3;
  [num1, num2, ...num3] = [1, 2, 3, 4, 5, 6]
  console.log('ES6 数组解构赋值配合 ... 语法: ', 'num1 = ', num1, 'num2 = ', num2, 'num3 = ', num3);
  // 打印结果:
  // ES6 数组解构赋值配合 ... 语法:  num1 =  1 num2 =  2 num3 =  (4) [3, 4, 5, 6]
}

5. 对象的解构赋值:

{
  let str1, str2;
  ({str1, str2} = {str1: 1, str2: 2}) // 注意: () 跟 ES6 解析有关系, ES6默认会将 {} 这种当做一个代码块, 而不是解析成走解构赋值 。
  console.log('ES6 对象的解构赋值: ', 'str1 = ', str1, 'str2 = ', str2);
  // 打印结果:
  // ES6 对象的解构赋值:  str1 =  1 str2 =  2
}

5.1 对象的解构赋值--实现变量赋值

{
  let obj1 = {str1: 111, str2: 2222};
  let {str1, str2} = obj1;
  console.log('ES6 对象结构赋值 -- 实现变量赋值: ', 'str1 = ', str1, 'str2 = ', str2);
  // 打印结果:
  // ES6 对象结构赋值 -- 实现变量赋值:  str1 =  111 str2 =  2222
}

5.2 对象的解构赋值--服务器返回 JSON 格式的数据处理

// 要求我们将 '大标题' 与 '小标题' 取出来 。
{
  let resData = {
    title: '大标题 - 111111',
    cont: [
      {
        title: '小标题 - sssss',
        desc: '描述内容'
      }
    ]
  }
  // 给 title <大/小 标题> 指定一个接收的变量 'receTitle' 'receTitleSmal'
  let {title: receTitle, cont: [{title: receTitleSmal}]} = resData
  console.log('取出指定内容: ', '大标题 - receTitle = ', receTitle, '; 小标题 - receTitleSmal = ', receTitleSmal);
  // 打印结果:
  // 取出指定内容:  大标题 - receTitle =  大标题 - 111111 ; 小标题 - receTitleSmal =  小标题 - sssss
}

6. 解构赋值设置默认值

6.1 默认值: 结构赋值允许指定默认值

{
  let num1, num2, num3;
  [num1, num2, num3 = 3] = [1, 2]
  console.log('ES6 数组结构赋值 -- 默认值: ', 'num1 = ', num1, 'num2 = ', num2, 'num3 = ', num3);
  // 打印结果:
  // ES6 数组结构赋值 -- 默认值:  num1 =  1 num2 =  2 num3 =  3
}

6.2 默认值: 当没有设置默认值的情况

{
  let num1, num2, num3;
  [num1, num2, num3] = [1, 2]
  console.log('ES6 数组结构赋值 -- 默认值: ', 'num1 = ', num1, 'num2 = ', num2, 'num3 = ', num3);
  // 打印结果:
  // S6 数组结构赋值 -- 默认值:  num1 =  1 num2 =  2 num3 =  undefined
}

6.3 默认值: ES6 内部使用严格相等运算符 '===' 判断一个位置是否有值 。所以, 如果一个数组成员的不严格等于 undefiend, 默认值是不会生效的 。

{
  let num1, num2, num3;
  [num1, num2, num3 = 3] = [1, 2, null]
  console.log('ES6 数组结构赋值 -- 默认值: ', 'num1 = ', num1, 'num2 = ', num2, 'num3 = ', num3);
  // 打印结果:
  // ES6 数组结构赋值 -- 默认值:  num1 =  1 num2 =  2 num3 =  null
}

6.4 默认值: 对象的默认值设置

{
  let {str1 = 1, str2 = 2} = {str1: '默认值是否会被设置值覆盖'}
  console.log('对象的默认值设置: ', 'str1 = ', str1, 'str2 = ', str2);
  // 打印结果:
  // 对象的默认值设置:  str1 =  默认值是否覆盖设置值 str2 =  2
}

7. 解构赋值的使用场景

解构赋值的使用场景: 以前在 ES5 中不好实现的代码, 通过 '解构赋值' 可以轻松的实现 。
1. 变量的交换
2. 接收后台数据处理方式
3. 选择我们需要的数据
4. 剔除无用数据

7.1 解构赋值的使用场景--变量的交换

// ES6 写法
{
  let num1 = 1, num2 = 2;
  [num1, num2] = [num2, num1]
  console.log('ES6 结构赋值-变量的交换: ', 'num1 = ', num1, 'num2 = ', num2);
  // 打印结果:
  // ES6 结构赋值-变量的交换:  num1 =  2 num2 =  1
}

// ES5 写法 (使用一个中间变量做存储)
{
  let num1 = 1, num2 = 2, mid;
  mid = num1
  num1 = num2
  num2 = mid
  console.log('ES5 -变量的交换: ', 'num1 = ', num1, 'num2 = ', num2);
  // 打印结果:
  // ES5 -变量的交换:  num1 =  2 num2 =  1
}

7.2 解构赋值的使用场景--接收后台数据处理方式

// ES6 实现
{
  function fn1() {
    return [1, 2]
  }
  let num1, num2;
  [num1, num2] = fn1()
  console.log('ES6 实现接收数据处理方式: ', 'num1 = ', num1, 'num2 = ', num2);
  // 打印结果:
  // ES6 实现接收数据处理方式: num1 =  1 num2 =  2
}

// ES5 实现
{
  function fn1() {
    return [1, 2]
  }
  let num1, num2, res;
  res = fn1()
  num1 = res[0]
  num2 = res[1]
  console.log('ES5 实现接收数据处理方式: ', 'num1 = ', num1, 'num2 = ', num2);
  // 打印结果:
  // ES5 实现接收数据处理方式:  num1 =  1 num2 =  2
}

7.3 解构赋值的使用场景--当返回多个值的情况下, 我可以选择性的去接受我需要的变量 (要自己想要的, 其余的都是多余的)

// ES6 实现
{
  function fn1() {
    return [1, 2, 3, 4, 5, 6]
  }
  let num1, num2, num3;
  [num1,,,num2] = fn1()
  console.log('ES6: ', 'num1 = ', num1, 'num2 = ', num2);
  // 打印结果:
  // ES6:  num1 =  1 num2 =  4
}

7.4 解构赋值的使用场景--不知道函数返回的数组的长度是多少, 我们只关心第一个, 其余的返回为一个数组就可以了 (需要使用就去遍历这个数组, 不需要就放置在那里无需多管)

// ES6 实现
{
  function fn1() {
    return [1, 2, 3, 4, 5, 6]
  }
  let num1, num2, num3;
  [num1, ...num2] = fn1()
  console.log('ES6: ', 'num1 = ', num1, 'num2 = ', num2);
  // 打印结果:
  // ES6:  num1 =  1 num2 =  (5) [2, 3, 4, 5, 6]
}

各个示例代码执行结果图片如下所示:

3-1-解构赋值.png