ES6解构赋值实例详解

 更新时间:2017年10月31日 09:38:32   作者:花花小兔子  
这篇文章主要介绍了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 //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的程序设计有所帮助。

相关文章

  • Typescript文件被识别为视频的问题解决

    Typescript文件被识别为视频的问题解决

    这篇文章主要为大家介绍了Typescript文件被识别为视频的问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • Bootstrap框架动态生成Web页面文章内目录的方法

    Bootstrap框架动态生成Web页面文章内目录的方法

    这篇文章主要介绍了Bootstrap框架动态生成Web页面文章内目录的方法,利用Bootstrap中的Affix和ScrollSpy插件便可以实现,需要的朋友可以参考下
    2016-05-05
  • JS中type=

    JS中type="button"和type="submit"的区别

    Submit是专门用于提交表单的Button,与Button的区别主要有两点:type=button 就单纯是按钮功能,type=submit 是发送表单 。下面通过本文给大家分享JS中type="button"和type="submit"的区别,感兴趣的的朋友一起看看吧
    2017-07-07
  • JS搜狐面试题分析

    JS搜狐面试题分析

    这篇文章主要介绍了JS搜狐面试题,涉及javascript数组、字符串及面向对象程序设计相关技巧,需要的朋友可以参考下
    2016-12-12
  • JavaScript 格式字符串的应用

    JavaScript 格式字符串的应用

    在使用JavaScript中的Date对象时,有一个常用的操作就是输出。但Date对象自带的toString()方法输出的格式并不能满足用户多样化的需求。我在想,是不是可以将C#中DateTime.ToString(string format)方法的形式引入到JavaScript中呢?
    2010-03-03
  • JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例

    JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例

    这篇文章主要介绍了JS与jQuery实现ListBox上移,下移,左移,右移操作功能,涉及javascript与jQuery的事件响应、页面元素动态操作等相关实现技巧,需要的朋友可以参考下
    2018-05-05
  • Bootstrap CSS布局之代码

    Bootstrap CSS布局之代码

    这篇文章主要介绍了Bootstrap CSS布局之代码的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 详解PHP后期静态绑定分析与应用

    详解PHP后期静态绑定分析与应用

    这篇文章给大家总结了PHP后期静态绑定分析与应用的相关知识点,对此有兴趣的朋友可以学习下。
    2018-03-03
  • layui prompt 设置允许空白提交的方法

    layui prompt 设置允许空白提交的方法

    今天小编就为大家分享一篇layui prompt 设置允许空白提交的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 用iframe实现不刷新整个页面上传图片的实例

    用iframe实现不刷新整个页面上传图片的实例

    下面小编就为大家带来一篇用iframe实现不刷新整个页面上传图片的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11

最新评论