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 07 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 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中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
理解Koa2中的async&await的用法
2018/02/05 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
python中Flask框架简单入门实例
2015/03/21 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
python文件路径操作方法总结
2020/12/21 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
为什么UNION ALL比UNION快
2016/03/17 面试题
大学生入党思想汇报
2014/01/14 职场文书
婚前财产公证书
2014/04/10 职场文书
群众路线专项整治方案
2014/10/27 职场文书
英文升职感谢信
2015/01/23 职场文书
投资合作意向书范本
2015/05/08 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
Log4j.properties配置及其使用
2021/08/02 Java/Android
Golang 对es的操作实例
2022/04/20 Golang