-
解构赋值
2021-04-13 21:50:07解构赋值 1、解构赋值:是对赋值运算符的扩展,把对象或数组的属性或值提取出来,进行赋值给变量;在解构中,解构的源:解构赋值表达式右边部分;解构的目标:解构赋值表达式左边部分;好处:让语法更加简洁优雅; 2...解构赋值
1、解构赋值:是对赋值运算符的扩展,把对象或数组的属性或值提取出来,进行赋值给变量;在解构中,解构的源:解构赋值表达式右边部分;解构的目标:解构赋值表达式左边部分;好处:让语法更加简洁优雅;
2、解构赋值的分类:
(1)数组解构赋值
(2)对象解构赋值
(3)字符串解构赋值
(4)布尔值解构赋值
(5)函数参数解构赋值
(7)数值解构赋值
3、解构赋值使用场景:
(1)变量交换
(2)直接返回函数return有多个值的内容
(3)可以选择赋值
(4)取出第一个赋值,剩余的赋值为数组
(5)提取对象中需要的属性值;
(6)json对象可以使用json.parse转换成字符串,通过解构只取出其中的一部分;
4、数组解构赋值要注意的事项:
(1)“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值;
(2)如果等号的右边不是数组(或者严格地说,不是可遍历的结构,那么将会报错);
5、对象解构赋值要注意的事项:
(1)对象的属性没有次序,变量名必须与属性名同名,才能取到正确的值;
(2)对象解构也可以用于相套结构对象;
6、默认值:只有当赋的值严格为undefined时,默认值才会生效;
7、():对已声明的变量进行解构,要加上();
-
ES6解构赋值 数组解构赋值 对象解构赋值 函数参数解构赋值 解构 参数解构
2020-12-17 13:52:40解构赋值 什么是解构赋值:按照一定的模式从数组或者对象中提取值,然后对变量进行赋值,这被称为解构赋值。 数组解构赋值 基本用法 下标对下标。 let [a,b,c]=[1,2,3]; let [a,[[b],c]=[1,[[2],3]]; 结果: 同时...解构赋值
什么是解构赋值:按照一定的模式从数组或者对象中提取值,然后对变量进行赋值,这被称为解构赋值。
数组解构赋值
基本用法
下标对下标。
let [a,b,c]=[1,2,3]; let [a,[[b],c]=[1,[[2],3]];
结果: 同时声明三个变量a,b和c,a拿到值1, b拿到值2,c拿到值3。这种写法属于"模式匹配",只要模式相同左边的变量就会被赋予相对应的值。
let [,,third] = ["foo","bar","baz"] //third="baz"(解构部分) let [a,,b] = [1,2,3] //a=1,b=3(解构部分) let [x,y] = [1,2,3] //x=1,y=2(不完全解构)
但是如果解构不成功变量的值就等于
undefined
let [a,b,...c] = ["1"] //a=1,b=undefined,c=[]
如果等号右边不是数组(或是可遍历的结构)就会报错。
默认值
数组的解构赋值允许指定默认值
let [a = 1] = []; //a = 1
注意:
-
如果一个数组成员不严格等于undefined,默认值是不会生效的。
-
注意null!== undefined,当数组成员等于null时,默认值是不会生效的。
-
默认值也可以引用解构赋值的其他变量,但是该变量必须已经声明。
对象解构赋值
基本用法
属性名对属性名。
let { foo:foo ,bar:bar } = { foo:"aaa",bar:"bbb" }; //foo="aaa",bar="bbb"
对象的解构赋值和数组有一个重要的不同。数组的元素是按次序排列的,变量的取值是由他的下标决定的;而对象的属性没有次序,变量必须与属性同名才能取到正确的值。
简写(语法糖):
通常原对象中的属性名起的挺好,简洁又见名知意,所以没必要再另外起一个变量名,所以:
let { foo:foo,bar:bar } = { foo:"aaa",bar:"bbb"};
可简写为:
let { foo,bar } = { foo:"aaa",bar:"bbb"};
一个名两个用途:既当做配对的属性名,又当做将来单独使用的变量名
注意:
-
等号左边要把变量装扮成和要解构的数组或者对象相同的结构
-
于数组一样,对象解构赋值也可以用于嵌套的解构的对象
-
看对象解构面试题时,一定要先把简写写成最开始的写法看清楚谁是模式谁是变量再进行判断
//如果属性名不一样,必须写成如下例子中一样 let { foo:baz } = { foo:"aaa",bar:"bbb"}; //baz="aaa",实际上被赋值的是foo属性的baz变量
默认值
对象的解构赋值也允许指定默认值
var {x = 3} = {}; x // 3 var {x, y = 5} = {x: 1}; x // 1 y // 5 var {x: y = 3} = {}; y // 3 var {x: y = 3} = {x: 5}; y // 5 var { message: msg = 'Something went wrong' } = {}; msg // "Something went wrong"
注意
- 默认值生效的条件是,对象的属性值严格等于undefined
- 注意null不严格等于undefined会使默认值不生效
- 解构失败,变量的值等于undefined
字符串解构赋值
字符串也可以解构赋值,这是因为此时字符串被转换成了一个类数组对象。
const [a,b,c,d,e] = "hello" //a="h",b="e",c="l",d="l",e="o" let {length:len} = "hello"; //len=5
数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true
上面代码中,数值和布尔值的包装对象都有
toString
属性,因此变量s
都能取到值。解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。
由于
undefined
和null
无法转为对象,所以对它们进行解构赋值,都会报错。由上的代码可以看出,左边写成
let {toString: s} = 123;
是可以把Number.prototype.toString
方法的地址值复制一份出来给左边对象结构中的s
,那么以后我们想调用别的父类型(原型对象)上的方法也是不是可以这样做?eg:查看一个数据是什么类型的:
let { toString:objToString } = {}; objToString.call(1) === "[object Number]" //true objToString.call("") === "[object String]" //true objToString.call([]) === "[object Array]" //true
可以看到我从
{}.toString
处拿到了Object顶级父对象toString的地址值然后解构赋值给了objToString
找到了这个方法是可行的。函数参数解构赋值
以数组或对象形式传递多个参数,调用时,所有实参值必须也放在一个数组或对象中传入。
function fun([a,b]){ console.log(a+b) } fun([1,2]);//3 function fun({a:a,b:b}){ console.log(a+b) } fun({a:1,b:2});//3
简写: 语法糖: 如果形参名与属性名没必要区分,是相同的名字,也可以只写一个。
function fun({a,b}){ console.log(a+b) } fun({a:1,b:2});//3
函数参数的定义和函数参数的默认值
当一个函数内需要多个参数,但调用时不能确定参数有没有,而又要求参数值与函数内变量有对应关系这时就要用到参数解构;指定参数的默认值,就避免了在函数体内部再写
var foo = config.foo || 'default foo';
这样的语句。function order( {zhushi: zs = "香辣鸡腿堡",xiaochi: xc = "薯条薯条",yinliao: yl = "可口可乐"}={}) { console.log(`您本次点的是: 主食:${zs}, 小吃:${xc}, 饮料:${yl} `) } order()
实际应用
1 交换变量的值
let x = 1; let y = 2; [x, y] = [y, x];
2 函数返回值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回,然后用解构取值。
// 返回一个数组 function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一个对象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example();
3 提取JSON数据
let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309]
4 输入模块的指定方法
加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
import { queryMicroInfoShopPost } from "@/api/sysmgr"
ps: 学习阮一峰 ES6入门 个人理解心得总结(2)-解构赋值 个人理解难免有错误,欢迎大家指正
-