当前位置: 首页 > news >正文

ES6系列(二)变量的解构赋值

ES6变量的解构赋值

ES6允许按照一定的默认,从数组、对象等具有Iterator接口(后面系列会介绍到)的数据中提取值,对变量进行赋值,这称为解构赋值。

解构赋值有几点要求:

  1. 等号两边的模式相同。
  2. 等号右边的数据要具备Iterator接口。
  3. 解构不成功,变量的值等于undefined
  4. 解构赋值允许指定默认值,不过ES6内部使用严格相等运算符(===),来判断一个位置是否有值,如果某个位置的值不严格等于undefined, 那么默认值是不会生效的。默认值也可以引用解构赋值的其它变量,但是该变量必须已经声明。如下所示

    let [a=1] = [null];
     console.log(a); //null 不严格相等,其实就是对应位置的值必须是undefined
    let [b=2]=[undefined] || [];
    console.log(b); //2
    //引用解构赋值的其它变量,
     let [x=y, y=2] = []; //error y未声明
     let [x=2, y=x] = []; //x=2, y=2
  5. 如果在同一个作用域,某个变量被声明过,直接使用同一个变量名解构赋值,会报错。此时需要在首尾加一个(),解析器将认为这是另一个块作用域,解构赋值可以理解为声明变量并赋值。

    let a,b;
    {a} = {a:1}; //error a has already exited
    ({b} = {b: 2});  //2
  6. 解构赋值的规则是,如果等号右边不是对象,也不具备Iterator接口,会将其转换为对象,由于undefinednull无法转换为对象,对这两个解构赋值时,会报错。

数组的解构赋值

数组的解构赋值在于,左右的顺序严格对应

对象的解构赋值

1.对象的解构赋值在,左右的属性名称要严格对应

    let {some,anther } = { some: 1, anther:2 }

2.如果名字不对应(往往需要重命名)

    let {some: anther} = {some: 1};
    console.log(some); //ReferenceError: some is not defined
    console.log(anther); //

3.嵌套结构对象的解构

let pbj = {
    p: [
        x,
        {y:2}
    ]
};
let {p: [x, {y}]} = obj;
// 需要注意的是这里的p是模式,不是变量,因此不会被赋值,因为:的关系

字符串的解构赋值

1.字符串用于解构赋值时,字符串会被转换成为一个类似数组的对象

let [a,b,c,d] = "abcd";

2.类似数组的对象都有一个length属性,因此,也可以对这个属性解构赋值

let {length} = "hello"; //5

数值和布尔值的解构赋值

数组与布尔值进行解构赋值时,会先转换为对象。 如下所示:

    let {toString: s} = 123;
    s === Number.prototype.toString; //true
    
    let {toString: t} = true;
    t === Boolean.prototype.toString; //true

函数参数的解构赋值

函数参数的解构赋值特点:
1.省略掉了let const等关键字
2.如果以数组,对象作为模式时,注意默认参数其实是模式,如下所示

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

function move({x,y}={x:1, y:2}) {
  return [x, y]
}
move({x:1, y:3}); //[1,3]
move({x:1}); //[1, undefined]
move(); //[1, 3]
// 注意 
move({});  //[undefined, undefined] 这是因为,对象才是默认参数,是对该对象解构赋值得到x、y。
而不是为x,y指定默认值

圆括号问题

不可以使用圆括号的情况:
1.声明变量时,不能带有圆括号 : let [(e)] = [1]
2.函数参数中,模式不能带有圆括号 : function add([(a)]){}
3.赋值语句中,不能将整个模式,或嵌套模式中的一层,放在圆括号中: ([a]) = [5]

用途

1.交换变量值

[x,y]=[x,y]

2.从函数中返回多个值(伪)

function add() {
    return {
        a:1,
        b:2,
        c:3
    }
}
let {a,b,c} = add();

3.遍历Map解构

let map = new Map();
// 只取key,注意Map遍历返回的是[key,value]结构
for(let [key] of map){
    
}
//只取value
for(let [,value] of map){
    // some code
}

相关文章:

  • 超简单的视频对象提取程序
  • [Java并发编程实战] 共享对象之可见性
  • Java实用类库
  • MySQL常见的两种存储引擎:MyISAM与InnoDB的爱恨情仇
  • 『TensorFlow』线程控制器类变量作用域
  • Git漏洞导致攻击者可在用户电脑上运行任意代码
  • [译] 不用祖传秘方 - 写好代码的几个小技巧
  • el-input获取焦点 input输入框为空时高亮 el-input值非法时
  • 安装Cassandra数据库和访问客户端配置
  • CSS中background-position使用技巧
  • java调用IPFS去中心化体系
  • Scrapy 1.5.0之基础入门
  • OSChina 周一乱弹 —— 你老婆和闺蜜总用奇怪的眼神看着你
  • Linux 进程后台运行的几种方式 screen
  • ES6系列--4. 对象的扩展
  • angular学习第一篇-----环境搭建
  • gf框架之分页模块(五) - 自定义分页
  • javascript 总结(常用工具类的封装)
  • JavaScript新鲜事·第5期
  • Java编程基础24——递归练习
  • Linux gpio口使用方法
  • MyEclipse 8.0 GA 搭建 Struts2 + Spring2 + Hibernate3 (测试)
  • web标准化(下)
  • win10下安装mysql5.7
  • 从0到1:PostCSS 插件开发最佳实践
  • 解决iview多表头动态更改列元素发生的错误
  • 离散点最小(凸)包围边界查找
  • 目录与文件属性:编写ls
  • 前端面试之CSS3新特性
  • 如何合理的规划jvm性能调优
  • 如何实现 font-size 的响应式
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • 关于Android全面屏虚拟导航栏的适配总结
  • 交换综合实验一
  • 新年再起“裁员潮”,“钢铁侠”马斯克要一举裁掉SpaceX 600余名员工 ...
  • ​iOS实时查看App运行日志
  • #NOIP 2014#Day.2 T3 解方程
  • #传输# #传输数据判断#
  • $ git push -u origin master 推送到远程库出错
  • $.each()与$(selector).each()
  • (echarts)echarts使用时重新加载数据之前的数据存留在图上的问题
  • (阿里云万网)-域名注册购买实名流程
  • (十一)手动添加用户和文件的特殊权限
  • (五)c52学习之旅-静态数码管
  • (原创)boost.property_tree解析xml的帮助类以及中文解析问题的解决
  • *p++,*(p++),*++p,(*p)++区别?
  • *上位机的定义
  • .java 指数平滑_转载:二次指数平滑法求预测值的Java代码
  • .net core 实现redis分片_基于 Redis 的分布式任务调度框架 earth-frost
  • .Net MVC + EF搭建学生管理系统
  • .net mvc部分视图
  • .NET 反射的使用
  • .Net 知识杂记
  • .php文件都打不开,打不开php文件怎么办
  • ??在JSP中,java和JavaScript如何交互?