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 相关文章推荐
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
详解angular应用容器化部署
Aug 14 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
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中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
php中filter_input函数用法分析
2014/11/15 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
php fread函数使用方法总结
2019/05/28 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
python str与repr的区别
2013/03/23 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
python drf各类组件的用法和作用
2021/01/12 Python
详解Python中的文件操作
2021/01/14 Python
性能服装:HYLETE
2018/08/14 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
初级Java程序员面试题
2016/03/03 面试题
员工自我鉴定范文
2013/10/06 职场文书
中层竞聘演讲稿
2014/01/09 职场文书
党风廉政承诺书
2014/03/27 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
VUE递归树形实现多级列表
2022/07/15 Vue.js