当前位置:首页 > 日记 > 正文

ES6解构赋值实例详解

ES6解构赋值实例详解

本文实例讲述了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 //undefinedfoo //"aaa"loc //"bbb"baz //ReferenceError: baz is not defined

2.变量以前声明过,使用let赋值会报错

3.可用于嵌套结构的对象

var node = {  loc: {    start: {      line: 1,      column: 5    }  }}var {loc:{start:{line}}} = nodeline //1loc //ReferenceError: loc is not definedstart //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//hlet {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的程序设计有所帮助。

相关文章

关于vue.js发布后路径引用的问题解

关于vue.js发布后路径引用的问题解

引用,路径,电脑软件,vue,js,本文主要给大家介绍了关于vue.js发布后路径引用问题的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:在发布到iis目录下时候,如果放在网站的根目录下的时候,是不会有什么问题的但是一旦放在了…

import与export在node.js中的使用

import与export在node.js中的使用

详解,电脑软件,export,import,js,简述import与export是es6中模块化的导入与导出,node.js现阶段不支持,需要通过babel进行编译,使其变成node.js的模块化代码。(关于node.js模块,可参考其他node.js模块化的文章)export 曝露使用export可以曝露出方…

ppt2010电脑版怎么安装动画大师

ppt2010电脑版怎么安装动画大师

动画,安装,步骤,大师,电脑软件,  为了方便我们在ppt中对动画的制作,我们可以在ppt中安装动画大师,那么,你知道怎样在ppt中安装动画大师吗?下面就让小编告诉你 如何在ppt中安装动画大师的方法,希望看完本教程的朋友都能学会并运用起来。在ppt…

在PPT2007中怎么对多个对象同时执

在PPT2007中怎么对多个对象同时执

对象,执行,多个,动作,中对,  在制作PPT演示文稿中,经常会需要对一张幻灯片中的多个对象同时执行一个动作,那么怎么在PPT2007中实现这一功能呢?以下是小编为您带来的关于在PPT2007中对多个对象同时执行一个动作,希望对您有所帮助。在PPT2007…

关于php 高并发解决的一点思路

关于php 高并发解决的一点思路

高并发,思路,电脑软件,php,我的思路如下(伪代码):sql1:查询商品库存if(库存数量 > 0){//生成订单...sql2:同时库存-1}当没有并发时,上面的流程看起来是再正常不过了,假设同时两个人下单,而库存只有1个了,在sql1阶段两个人查询到的库存都是>0的,于…

Javascript调试之console对象——

Javascript调试之console对象——

调试,对象,你不知道,小技巧,电脑软件,前言写过前端Javascript代码的同学肯定不会对console对象感到陌生,在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量。但是相信很多人也就只用过console.log()这一个方法,今天我们就…

Excel怎样设置输入数据自动变成数

Excel怎样设置输入数据自动变成数

输入,设置,数据,方法,数值,  在Excel编辑的时候,在添加数据后自动变成了日期,怎么修改?在Excel中,可以通过设置禁止将数据转换为日期。接下来小编举例简单的例子告诉大家Excel如何设置输入数据自动变成数字。Excel设置输入数据自动变成数值…

excel表格的筛选教程

excel表格的筛选教程

教程,筛选,表格,电脑软件,excel,  Excel的筛选功能如何筛选数据呢?接下来是小编为大家带来的excel表格的筛选教程,供大家参考。excel表格的筛选教程:  筛选步骤1:比如我们建立有三列数据的Excel表来进行说明,分别是商品类别、商品名称和商…

AI基础教程:手把手教你绘制萌萌的

AI基础教程:手把手教你绘制萌萌的

绘制,驯鹿,插画,基础教程,手把手教你,效果图:主要过程:12 3 4 5 阅读全文1 23 4 5 阅读全文1 2 34 5 阅读全文1 2 3 45 阅读全文教程结束,以上就是AI基础教程:手把手教你绘制萌萌的小驯鹿插画的全部内容,希望大家喜欢!相关教程推荐:Illustrat…

jquery 一键复制到剪切板的实例

jquery 一键复制到剪切板的实例

剪切板,一键,实例,电脑软件,jquery,今天做项目有一个功能,通过点击事件复制一段文本到剪切板,在网上找了一些,整理了一下,方便需要的朋友使用。<a id="copy" data-text="123456">复制文本</a>$(function(){ var clipboard = new Clipboa…

微信小程序-获得用户输入内容

微信小程序-获得用户输入内容

输入,用户,程序,内容,电脑软件,在微信小程序里,如何获得用户输入的内容??js: document.getElementById("Content").valuejq:$("#Content").val()在微信小程序中并不能这样写。可以通过组件的属性 bindchange 将用户输入的储存存起来test.wxm…

AngularJS实现上传和预览功能的方

AngularJS实现上传和预览功能的方

方法,上传,功能,电脑软件,AngularJS,本文实例讲述了AngularJS实现图片上传和预览功能的方法。分享给大家供大家参考,具体如下:html5原生方法先看一下html5原生方法上传和预览图片的实现:// <img id="img-preview">var imgPreview = document…