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 相关文章推荐
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 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设计模式 Proxy (代理模式)
2011/06/26 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
一分钟理解js闭包
2016/05/04 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
Python反射用法实例简析
2017/12/22 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
个人自荐信
2013/12/05 职场文书
老师对学生的评语
2014/04/18 职场文书
python实现过滤敏感词
2021/05/08 Python
python中的装饰器该如何使用
2021/06/18 Python
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js