ES6-数组的解构赋值

一、数组的解构赋值的规律

复制代码
- 只要等号两边的模式相同,左边的变量就会被赋予对应的值

二、数组的解构赋值的例子讲解

1)简单的示例(完整的解构赋值)

  • 示例
js 复制代码
//基本的模式匹配
// a,b,c依次和1,2,3对应
      let [a, b, c] = [1, 2, 3];
      console.log("a=" + a);
      console.log("b=" + b);
      console.log("c=" + c);
  • 效果

2)简单的示例(部分的解构赋值)

  • 示例一(逗号占位符)
javascript 复制代码
      let [, , c] = [1, 2, 3];
      console.log("c=" + c);
  • 效果
  • 示例二(前者部分赋值)
javascript 复制代码
      let [a, b] = [1, 2, 3];
      console.log("a=" + a);
      console.log("b=" + b);
  • 效果

3)过度解构赋值

  • 如果解构不成功,一般变量的值就等于undefined
javascript 复制代码
      let [a, b, c, d] = [1, 2, 3];
      console.log("a=" + a);
      console.log("b=" + b);
      console.log("c=" + c);
      console.log("d=" + d);
  • 效果

4)较为复杂的解构赋值

  • 嵌套示例
js 复制代码
      //模式匹配
      //令arr_end=[[b],c],arr_init=[[2],3]
      //则[a,[[b],c]]=[a,arr_end]=[1,[[2],3]]=[1,arr_init]
      //即[a,arr_end]=[1,arr_init]
      //即a和1对应,arr_end和arr_init对应
      //同理b和2对应,c和3对应
      let [a, [[b], c]] = [1, [[2], 3]];
      console.log("a=" + a);
      console.log("b=" + b);
      console.log("c=" + c);
  • 效果

5)剩余运算符

  • 示例
javascript 复制代码
      let [first, ...other] = [1, 2, 3, 4];
      console.log("first=" + first);
      console.log("other=" + other);
  • 效果

6)默认值

复制代码
- 解构赋值允许指定默认值
  • 示例
js 复制代码
      //有对应的值
      let [a, b = 1] = [1, 2, 3];
      console.log("a=" + a + ",b=" + b);
      //无对应的值
      let [a1, b1 = 1] = [1];
      console.log("a1=" + a1 + ",b1=" + b1);
      //对应的值为null
      let [a2 = 1] = [null];
      console.log("a2=" + a2);
      //对应的值为undefined
      let [a3 = 1] = [undefined];
      console.log("a3=" + a3);
  • 效果
  • 问题
java 复制代码
- 大家可能有个疑惑
- 问题:为什么语句let [a3 = 1] = [undefined];中a3对应的值为undefined,为什么运行结果a3=1?
- 答案:ES6 内部使用严格相等运算符(===),判断一个位置是否有值,
	    当一个数组成员严格等于undefined,默认值就会生效
  • 注意

    • 默认值可以引用解构赋值的其他变量,但该变量必须已经声明
js 复制代码
let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined
相关推荐
半点寒12W1 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端2 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~2 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程2 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏2 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083163 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头4 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫4 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim4 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim4 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron