当前位置：首页 > 资讯 > 技术文档

ES6解构赋值实例详解

时间：2021-10-18 06:14 编辑：来源：阅读：
扫一扫，手机访问

摘要：ES6解构赋值实例详解

本文实例讲述了ES6解构赋值。分享给大家供大家参考，具体如下： [b]基本用法[/b]

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"

[b]默认值[/b] 1.数组成员的值不严格等于undefined，默认值不生效(null的话相应值依然为null)

[x=1, y=2, z=3, o=4] = ['a', , undefined, null]
//"a", 2, 3, null

2.如果默认值是表达式，表达式惰性求值，只有在用到的时候才会去执行 3.默认值可以引用结构赋值的其他变量，但该变量必须已声明 [b]对象结构赋值[/b] 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变量) [b]字符串解构赋值[/b]

const [a,b] = 'hello' a//h
let {length:len} = 'hello' len//5(字符串本身包含length属性)

[b]数值&布尔值[/b] 解构赋值规则： ① 只要等号右边不是对象先将其转化为对象， ② undefined和null无法转换为对象，报错

let a = true
{b} = {a}
//Object {a: true}

[b]函数参数解构[/b]

[[1,2],[3,4]].map((a,b)=>a+b) //[3,7]
function({x=0,y=0}={}){
  return [x,y]
}

undefined会触发函数参数默认值 [b]圆括号问题[/b] 1.变量声明语句中，模式不能带有圆括号 let {x:(c)} = {} 2.函数参数中，模式不能带有圆括号(函数参数也属于变量声明) 3.整个模式或嵌套模式中的一层，不可放入圆括号赋值语句的非模式部分可使用 [b]用途[/b] 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");

更多相关内容可查看本站专题：《[url=http://www.1sucai.cn/Special/939.htm]ECMAScript6(ES6)入门教程[/url]》、《[url=http://www.1sucai.cn/Special/278.htm]JavaScript数组操作技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/933.htm]JavaScript字符与字符串操作技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/297.htm]JavaScript数据结构与算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/439.htm]JavaScript错误与调试技巧总结[/url]》及《[url=http://www.1sucai.cn/Special/85.htm]javascript面向对象入门教程[/url]》希望本文所述对大家基于ECMAScript的程序设计有所帮助。

全部评论(0)

上一篇：深入浅出讲解ES6的解构
下一篇：JS Array对象入门分析

资讯排行榜
更多>>