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 CSS菜单功能 改进版
Dec 20 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
jquery 选取方法都有哪些
May 18 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
ES6函数实现排它两种写法解析
May 13 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使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
JavaScript模板入门介绍
2012/09/26 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
python发送伪造的arp请求
2014/01/09 Python
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
师范生实习的个人自我鉴定
2013/10/20 职场文书
幼教个人求职信范文
2013/12/02 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
运动会入场解说词
2014/02/07 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
学校安全责任书
2014/04/14 职场文书
材料化学专业求职信
2014/07/15 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
火烧圆明园观后感
2015/06/03 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
浅析Python OpenCV三种滤镜效果
2022/04/11 Python