ES6学习总结之 解构赋值

变量的解构赋值

1.数组解构赋值

1.1 基本用法

ES6允许按照一定模式,提取数组或对象的值,对变量赋值,称之为解构赋值

以往对变量赋值如下:

var a=10;
var b=20;
var c=30;

ES6中可写成以下形式:

var [a,b,c] = [10,20,30];

这种写法属于“模式匹配”,只要等号两边的模式对应,右边的值便会赋予左边对应的变量。

注意下面的写法:


// ... 是扩展运算符,代表剩余所有参数
var [a, ...b] = [1,2,3,4];

a //1
b // [2,3,4]

var [a, , b]=[1,2,3]

a //1
b //3
//解构赋值可以嵌套
var [a,[b,c],d]=[1,[2,3],4]

a //1
b //2
c //3
d //4

//如果解构不成功,变量值为undefined
var [a,b,...c] = [1]

a //1
b //undefined
c //[]

注意,只要某种数据结构具有Iterator接口,就可以采用数组形式的解构赋值,结构赋值也适用于let,const命令

1.2 默认值

解构赋值可以指定默认值

let [a=2]=[]

a //2

let [x,y=3]=[4]

x //4

y //3

ES6内部用===判断一个位置是否有值,所以一个成员变量不严格等于undefined,默认值不生效

var [a=10] = [undefined]

a //10

var [b=20] = [null]

b//null

如果默认值是一个表达式,只有需要用到表达式时候才会求值

function foo(){
     console.log(‘I love u‘)
}

let [x=foo()]=[666]

x //666

默认值可以是变量,但此变量必须已经声明

let [a=2,b=a] = []

a //2
b //2

let [a=b,b=1] = []

//Reference Error

2.对象解构赋值

2.1 基本用法

对象的属性没有次序,变量名必须与属性同名,才能取到正确的值

var {bar,foo} = {foo:"abc", bar:"def"};

foo // "abc"
bar // "def"

如果变量名和属性名不相同,必须写出以下形式

var {foo:p} = {foo:"abc" , bar:"def"}

p // "abc"

这说明了对象的解构赋值其实是以下形式的简写

var {bar:bar,foo:foo} = {foo:"abc", bar:"def"};

对象解构赋值的内部机制,实现找到对应同名属性,在赋值给对应的变量,真正被赋值的是冒号后面的变量,而不是冒号前面的属性

与数组相同,解构赋值也可用于嵌套结构的对象

var obj={p:["abc" , {y:12}]}

var {p:[x,{y}]} = obj

x // "abc"
y // "12"

以上代码中,p是模式不是变量,不会被赋值

2.2 默认值

对象的解构赋值也可以指定默认值,默认值生效条件是,对象属性严格等于undefined

var {a:1} = {a : undefined};

a // 1

var {b:1} = {b : null};

b // null

2.3 注意事项

1.将一个已经声明的变量用于解构赋值

var a;
{a} = {a=1};

上面代码会报语法错误,因为js引擎会把{a}理解成代码块。只有不把大括号写在行首,才能避免这样的错误,比如用()括起来

({a} = {a=1})

2.结构赋值允许等号左边的模式中不放任何变量名

{} = {1,2,3}

虽然上面的代码毫无意义,但是不报错

3.对象的解构赋值可以很方便的把现有对象的属性方法赋值给某个变量

let {floor , ceil , abs} = Math

3.字符串解构赋值

字符串在解构赋值时 被转为类数组对象,可以对其length属性解构赋值

let {a,b,c,d,e,length:len} = "hello"

a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
len // 5

4.数值和布尔值解构赋值

解构赋值是,若等号右边是数值或布尔值,则会先转为对象

let {toString:s} = 666
s === Number.prototype.toString // true

let {toString:s} = true
s === Boolean.prototype.toString // true

5.函数参数解构赋值

function sum([x,y]){
     return x+y;
}

sum([1,2])  // 3

函数参数结构赋值也可以指定默认值,但要注意

function foo({x=0,y=0} = {}){
    return [x,y];
}
foo({x:1,y:2}) // [1,2]

foo({x:1}) // [1,0]
foo({}) // [0,0]
foo() // [0,0]
 
function bar({x,y} = {x:0,y:0}){ return [x,y]; }
bar({x:1,y:2}) // [1,2]

bar({x:1}) // [3,undefined]
bar({}) // [undefined,undefined]
bar() // [0,0]
 

foo函数参数是一个对象,对象中指定了x,y的默认值,通过对这个对象解构赋值,得到x和y的值;bar函数是为函数的参数整体指定默认值,不是为x,y指定默认值,x,y没有默认值!

时间: 2024-10-07 06:00:45

ES6学习总结之 解构赋值的相关文章

学习es6之(变量的解构赋值)

数组的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ES6可以写成下面这样. let [a, b, c] = [1, 2, 3]; 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值,下面是一些使用嵌套数组进行解构的例子. let [foo, [[

ES6新特性:解构赋值(上)

1:什么是解构赋值 按照一贯的套路,接下来的内容是解释:什么是解构赋值? 来看看官方的解释: ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 这句话也不难理解,但是前端君怎么会这么敷衍了事,随便贴一段官方的文字解释就算呢. 来,我们来上一段代码进一步解释一下什么叫解构赋值. 关于给变量赋值,传统的变量赋值是这样的: var arr = [1,2,3];//把数组的值分别赋给下面的变量: var a = arr[0]; var b = a

es6分享——变量的解构赋值

变量的解构赋值:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前的写法: var a = 1; var b = 2; es6允许的写法: let [a,b] = [1,2]; 一般用途: 1.交换变量的值 [x,y] = [y,x]; 2.函数返回多个值 function f1() { return [1,2,3]; } var [a,b,c] = f1(); // 返回json对象: function f1() { return

ES6-个人学习笔记二--解构赋值

第二期,解构赋值如果能够熟练应用确实是个十分方便的功能,但是过分的依赖和嵌套只会让代码理解和维护起来十分困难,是个体现高逼格的表达式呢~ 1,解构赋值的基础 //定义:es6运行按照一定模式,从数组或对象中提取值,并对变量进行赋值,如 var [a,b,c] = [1,2,3]; //一些其他方式 let [ , , a1] = [1,2,3]; //a1:3 let [a2,...b2] = [1,2,3,4]; //a2:1,b2:[2,3,4] let [a3,b3,...c3] = [1

ES6:变量的解构赋值

1.数组的解构赋值 基本用法: ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring).  以前,为变量赋值,只能直接指定值. var a = 1; var b = 2; var c = 3; ES6允许这样写: var [a,b,c] = [1,2,3]; console.log(a); //1 console.log(b); //2 console.log(c); //3 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 本质上,

ES6 之 数组的解构赋值

数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1;let b = 2;let c = 3; ES6允许写成下面这样. let [a, b, c] = [1, 2, 3]; 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值.下面是一些使用嵌套数组进行解构的例子

ES6(二)解构赋值+字符串的扩展

详解一下之前的解构赋值 ①解构赋值中的"..." let [a,...b]= [1]; b // [] ...代表变量b去匹配剩余的所有元素返回一个数组 ,匹配不到时返回[] //注意:"...b"只能放在最后 ②解构赋值的等号两边的数据类型必须一样 即: let [] = [] 或者 let {} = {} 但是:Set结构也允许使用数组进行解构赋值 let [a,b]= new Set([1,2,3,4]) a //1 b //2 技巧: 如果你不确定该结构是否

ES6 函数参数的解构赋值

function add([x, y]){ return x + y; } add([1, 2]); // 3 原文地址:https://www.cnblogs.com/nongzihong/p/10678522.html

ES6 之 解构赋值

本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中变量的解构赋值. 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. ES6 以前,为变量赋值,只能直接指定值. let a = 1 let b = 2 let c = 3 ES6 允许写成下面的样式. let [a, b, c] = [1, 2, 3] 该代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 相关示例 本质上来说,这种写法属于“模式匹配”.即