摘要:数组的解构赋值允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。如果变量名与属性名不一致,必须写成下面这样。
1 数组的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
基本用法
{ var [a,[b,c],d,,...f] = [1,[2,3],4,5,6,7]; console.log(a); //1 console.log(b); //2 console.log(c); //3 console.log(d); //4 console.log(f); //[6,7] }
另一种情况是不完全解构,解构赋值不仅适用于var命令,也适用于let和const命令
let [a,[b],c] = [1,[2,3],4]; console.log(a,b,c); //1 2 4
默认值
解构赋值允许指定默认值,必须严格等于undefined时才会生效
let [a,b = 1] = [1,undefined]; console.log(a,b); //1 1
如果默认值是一个表达式,那么这个表达式是默认求值的
let [a = f()] = [undefined]; function f() { return 2; } console.log(a); //2如果不是undefined,f()不会求值2 对象的解构赋值
解构不仅可以用于数组,还可以用于对象。
let {a,b} = {a: 1, b:2} console.log(a,b); //1 2
如果变量名与属性名不一致,必须写成下面这样。
let {a:a2,b} = {a: 1, b:2} console.log(a2,b); //1 2
对于let、const而言,变量不能重新声明,所以一旦赋值的变量之前声明过,则会报错
let a2 let {a:a2,b} = {a: 1, b:2} console.log(a2,b); //Identifier "a2" has already been declared
所以需要写成下面的形式:
let a2 ({a:a2,b} = {a: 1, b:2}) console.log(a2,b); //1 2
这里需要加上小括弧,因为要避免JS引擎将{x}理解为一个代码块
也可以用于嵌套解构的对象
var obj = { persion: [ {name: "Oliver"}, {friends: ["Alice", "Troy"]} ] } var {persion: [{name},{friends}]} = obj; console.log(name,friends); //Oliver ["Alice", "Troy"]
对象的解构也可以指定默认值
var {prop:x = 3} = {prop:undefined}; console.log(x); //3
默认值生效的条件是对象的属性值严格等于undefined
对象的解构赋值可以很方便地将现有对象的方法赋值到某个变量
var obj = { name: "Oliver", age: 18 }; var {name,age: x} = obj; console.log(name,x); //Oliver 183 字符串的解构赋值
字符串也可以解构赋值
var {string: [a,b,c]} = {string: "str"}; console.log(a,b,c); //s t r
也可以访问其属性
var {length: len} = "hello"; console.log(len); //54 数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
let {toString: str} = 123; console.log(str); //toString() { [native code] } //两者都有toString方法(函数)5 函数参数的解构赋值
函数的参数也可以解构赋值
function add([x,y]) { console.log(x+y); } add([1,2]); //3
也可以使用默认值
function add([x,y] = [0,0]) { console.log(x+y); } add([1,2]); //3 add(); //06 圆括号问题
尽量不要在模式中使用圆括号
7 实际用途交换变量的值
var [x,y] = [1,2]; [x,y] = [y,x]; console.log(x,y); //2 1
从函数返回多个值
//返回数组 function init() { return [1,2,3]; } var [a,b,c] = init(); console.log(a,b,c); //1 2 3 //返回对象 function init() { return { name: "Oliver", age: 18 }; } var {name: n, age: a} = init(); console.log(n,a); //Oliver 18 var {name} = init(); console.log(name); //Oliver
函数参数的定义
//有序的数组 function init([x,y,z]) { return x+y+z; } console.log(init([1,2,3])); //6 //无序的对象 function init({x,y,z}) { return x+y+z; } console.log(init({z:1,y:2,x:3})); //6
提取JSON数据
var obj = {}; var jsonData = { name: "Oliver", id: "007", upload: [1,2,3] }; { let {name,id,upload} = jsonData; console.log(name,id,upload); //Oliver 007 [1, 2, 3] }
函数参数默认值
function f([x,y] = [1,1]) { console.log(x+y); } f(); //2
遍历Map结构
var map = new Map(); map.set("first", "hello"); map.set("second", "world"); for (let [key, value] of map) { console.log(key + " is " + value); } // first is hello // second is world
输入模块的指定方法
const { SourceMapConsumer, SourceNode } = require("source-map");
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79059.html
摘要:一简介与的关系是的规格,是的一种实现另外的方言还有和转码器命令行环境安装直接运行代码命令将转换成命令浏览器环境加入,代码用环境安装,,根目录建立文件加载为的一个钩子设置完文件后,在应用入口加入若有使用,等全局对象及上方法安装 一、ECMAScript6 简介 (1) 与JavaScript的关系 ES是JS的规格,JS是ES的一种实现(另外的ECMAScript方言还有Jscript和...
摘要:默认值同时,对象解构赋值也允许设置默认值,默认值生效的判断条件同数组,只有在对应值严格等于时会生效。报错如果要将一个已经声明的变量用于解构赋值,必须非常小心。的规则是,只要有可能导致解构的歧义,就不得使用圆括号。 ECMAScript6/ES6 入门 let和const命令 四、变量的解构赋值 在ES6之前,数组和对象属性赋值只能直接指定固定值,ES6 允许按照一定模式,从数组和对象中...
摘要:数组的解构赋值特点根据数据的下标来赋值的,有次序。模式能够匹配起来,如长度为数值和布尔值的解构赋值解构赋值的规则是只要等号右边的值不是对象或数组,就先将其转为对象。布尔值解构赋值为字符串的一种。在很多独立细小的方面,解构赋值都非常有用。 1、解构赋值简介 官方解释:按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 举个例子,想获取数组中...
阅读 1562·2023-04-25 22:42
阅读 2167·2021-09-22 15:16
阅读 3434·2021-08-30 09:44
阅读 455·2019-08-29 16:44
阅读 3277·2019-08-29 16:20
阅读 2481·2019-08-29 16:12
阅读 3359·2019-08-29 16:07
阅读 636·2019-08-29 15:08