ES6解构赋值实例详解


Posted in Javascript onOctober 31, 2017

本文实例讲述了ES6解构赋值。分享给大家供大家参考,具体如下:

基本用法

let [x, y, ...z] = ['a']
//"a", undefined, []

1.等号右边如果不是数组,将会报错(不是可遍历结构)
2.解构赋值 var, let, const命令声明均适用
3.set结构也可解构赋值(具有Iterator接口,可采用数组形式结构赋值)

set解构:任何类型的单个值的集合

let [x, y, z] = new Set(["a", "b", "c"])
x //"a"

默认值

1.数组成员的值不严格等于undefined,默认值不生效(null的话相应值依然为null)

[x=1, y=2, z=3, o=4] = ['a', , undefined, null]
//"a", 2, 3, null

2.如果默认值是表达式,表达式惰性求值,只有在用到的时候才会去执行

3.默认值可以引用结构赋值的其他变量,但该变量必须已声明

对象结构赋值

1.数组按次序排列,对象变量必须与属性同名

var {bar, foo, baz: loc} = {foo: 'aaa', baz: 'bbb'}
bar //undefined
foo //"aaa"
loc //"bbb"
baz //ReferenceError: baz is not defined

2.变量以前声明过,使用let赋值会报错

3.可用于嵌套结构的对象

var node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
}
var {loc:{start:{line}}} = node
line //1
loc //ReferenceError: loc is not defined
start //ReferenceError: start is not defined

line是变量,loc,start都是模式

4.对象结构可以指定默认值

(生效条件是对象属性值严格等于undefined,null不会生效,解构失败值为undefined)

5.解构模式是嵌套对象,且子对象父属性不存在,报错

6.已声明的变量解构赋值

var x;
{x}={x:1} //SyntaxError: Unexpected token =
({x}={x:1}) //正确

js会将{x}理解成代码块,不将大括号写在行首即可

7.可以将现有对象的方法赋值到某个变量

let { sin, cos, log } = Math(Math对象的名为sin的方法直接赋值给sin变量)

字符串解构赋值

const [a,b] = 'hello' a//h
let {length:len} = 'hello' len//5(字符串本身包含length属性)

数值&布尔值

解构赋值规则:

① 只要等号右边不是对象先将其转化为对象,
② undefined和null无法转换为对象,报错

let a = true
{b} = {a}
//Object {a: true}

函数参数解构

[[1,2],[3,4]].map((a,b)=>a+b) //[3,7]
function({x=0,y=0}={}){
  return [x,y]
}

undefined会触发函数参数默认值

圆括号问题

1.变量声明语句中,模式不能带有圆括号 let {x:(c)} = {}
2.函数参数中,模式不能带有圆括号(函数参数也属于变量声明)
3.整个模式或嵌套模式中的一层,不可放入圆括号

赋值语句的非模式部分可使用

用途

1.[x, y] = [y, x]
2.函数返回的多个值分别赋值
3.函数参数与变量名对应
4.提取json数据(ajax请求返回数据处理中可用到)

({
  needServicePwd: this.needServicePwd,
  needImgCode: this.needImgCode,
  needSmsCode: this.needSmsCode
} = data)

5.函数参数的默认值,避免在函数内写var foo = config.foo || ”

6.遍历Map结构

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
  console.log(key + " is " + value);
}

7.引用模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

更多相关内容可查看本站专题:《ECMAScript6(ES6)入门教程》、《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《javascript面向对象入门教程》

希望本文所述对大家基于ECMAScript的程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 指导方针
Apr 05 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
js 获取json数组里面数组的长度实例
Oct 31 #Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 #jQuery
canvas绘制爱心的几种方法总结(推荐)
Oct 31 #Javascript
ES6扩展运算符用法实例分析
Oct 31 #Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 #Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 #Javascript
帝国cms首页列表页实现点赞功能
Oct 30 #Javascript
You might like
PHP初学入门
2006/11/19 PHP
php预定义常量
2006/12/25 PHP
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
Sublime开发python程序的示例代码
2018/01/24 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
python opencv调用笔记本摄像头
2019/08/28 Python
python字符串的index和find的区别详解
2020/06/20 Python
财务经理岗位职责
2013/11/09 职场文书
酒店管理专业毕业生推荐信
2013/11/10 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
会计人员岗位职责
2015/02/03 职场文书
校长师德表现自我评价
2015/03/04 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
Python极值整数的边界探讨分析
2021/09/15 Python