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 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
react 组件传值的三种方法
Jun 03 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
JavaScript中的几种继承方法示例
Dec 06 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获取中文拼音首字母类和函数分享
2014/04/24 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
php发送与接收流文件的方法
2015/02/11 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
python三引号输出方法
2019/02/27 Python
python设置随机种子实例讲解
2019/09/12 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
python实现吃苹果小游戏
2020/03/21 Python
10个顶级Python实用库推荐
2021/03/04 Python
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
自习课吵闹检讨书范文
2014/09/26 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
后进生评语大全
2015/01/04 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
同意报考证明
2015/06/17 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL