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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
js常用代码段收集
Oct 28 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
javascript无刷新评论实现方法
May 13 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
详解React Native网络请求fetch简单封装
Aug 10 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
vue中keep-alive、activated的探讨和使用详解
Jul 26 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缓存机制Output Control详解
2014/07/14 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
Python中的引用知识点总结
2019/05/20 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
中软Java笔试题
2012/11/11 面试题
机电工程学生自荐信范文
2013/12/07 职场文书
个人简历自我评价
2014/01/06 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
python如何进行基准测试
2021/04/26 Python
移除Selenium中window.navigator.webdriver值
2022/06/10 Python