ES6变量的解构赋值注意点及用途(补充)

前言：变量的解构赋值基础用法点击这里

一、数组的解构赋值注意点

1、不完全解构,即等号左边的模式只匹配一部分的等号右边的数组。

let [x,y]=[1,2,3];
x//1
y//2let [a,[b],d]=[1,[2,3],4];
a //1
b //2
d //4

2、惰性求值，即只有在用到时才会求值。

function f(){console.log('aaa');
}
let [x=f()]=[1];
//只有触发underfind时才会执行函数f();

3、变量未定义。

let [x=y,y=1]=[];//ReferenceError
//原因：在进行x=y时，y未定义
let [x=1,y=x]=[];//x=1 y=1

4、数组嵌套赋值（模式匹配）

let [foo,[ [bar],baz ] ]=[1,[ [2],3 ] ];
foo //1
bar //2
baz //3

5、对数组进行对象属性的解构

let arr=[1,2,3];
let {0:first,[arr.lebgth-1]:last}=arr;
first //1
last //3

6、数组可以解构的前提（被解构的对象具备Iterator接口）

二、对象的解构赋值注意点

1、变量必须与属性同名，如果不同名时应该改写为：

var {foo:baz}={foo:'aaa',bar:'bbb'}
baz //"aaa"

由此可以看出：对象的解构赋值的内部机制时是先找到同名属性，然后再赋值给对应变量。真正被赋值的是后者，而不是前者(模式匹配)。

2、嵌套赋值

let obj={p:['Hello',{y:'world'}]
};
let { p: [x,{y}]}=obj;
x //Hello
y //world//p是模式匹配，不被赋值

3、将一个已经声明的变量用于解构赋值时，需要小心。

//错误写法
let x;
{x}={x:1} //报错 SyntaxError:syntax error//原因：javascript引擎会将{x}理解为一个代码块，从而导致语法错误
//解决方法
let x;
({x}={x:1});

三、数值和布尔值的解构赋值注意点

解构赋值，如果等号右边是数值和布尔值，则会先转为对象。

let {toString:s}=123;
s=== Number.prototype.toString;//truelet {toString :s}=true;
s===Boolean.prototype.toString; //true//因为数值和布尔值的包装对象都有toString属性，因此变量s都能取到值let{prop:x}=underfind;//TypeError
let{prop:x}=null;//TypeError

四、函数参数的解构赋值注意点

例子一:为x y指定默认值

function move({x=0,y=0}={}){return [x,y];
}
move({x:3,y:8}); //[3,8]
move({x:3}); //[3,0]
move({}); //[0,0]  参数为空对象，此时x,y的值为underfind,触发默认值
move();   //[0,0]  参数为空，执行{x=0,y=0}={}，此时x,y的值为underfind,触发默认值

例子二：为函数参数指定默认值

function move({x,y}={x:0,x:0}){return [x,y];
}
move({x:3,y:8}); //[3,8]
move({x:3}); //[3,0]
move({}); //[underfind,underfind] 参数为空对象，此时x,y的值为underfind
move(); //[0,0]参数为空，触发函数参数默认值

例子三：对比例子一

function foo({x,y=5}){console.log(x,y);
}
foo(); //TypeError:Cannot read property 'x' of undefined

五、用途

交换变量的值
从函数返回多个值
函数参数的定义
提取JSON数据
函数参数的默认值
遍历Map结构
输入模块的指定方法

const{SourceMapConsumer,SourceNode}=require("source-map")

欢迎访问我的个人博客

ES6变量的解构赋值注意点及用途(补充)相关推荐

ES6变量的解构赋值--对象篇
目录使用方式普通形式嵌套结构使用默认值注意事项上一篇我们讲解了数组的解构赋值,解构还可以用于对象.字符串等等,这里我们来讲解对象的解构赋值. ES6变量的解构赋值--数组_zxn20012 ...
（34）2021-02-24（ES6变量的解构赋值）
ES6变量的解构赋值一. 变量的解构赋值 1.什么是解构 2.数组解构赋值不完全解构 3.对象解构赋值方法解构注意点 4.字符串解构 5.函数参数的解构赋值 6.用途 6.1 交换变量的值 6 ...
ES6——变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. let [a, b] = [1, 2]; let {c, d} = {c: 3, d: 4};console.log(a ...
es6—变量的解构赋值
数组的解构赋值 /* 1.变量的解构赋值: * 数组的元素是按次序排列的,变量的取值由它的位置决定: * 从数组和对象中提取值,对变量进行赋值,这被称为解构; * 属于"模式匹配" ...
es6变量的解构赋值
https://note.youdao.com/web/#/file/WEB0795aa69a66933c323f06127c9127f4d/note/WEBb0bbf2a9471ea54f2cb0f ...
【ES6】变量的解构赋值
[ES6]变量的解构赋值一.什么叫解构赋值? 二.解构赋值有哪些分类?写法? 1)对数组的解构赋值 2)对对象的解构赋值 3)对字符串的解构赋值 4)对数值和布尔值的解构赋值 5)对函数参数的解构赋 ...
ES6的新特性（3）——变量的解构赋值
变量的解构赋值数组的解构赋值基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; le ...
Vue2.x—理解vuex核心概念action（使用到ES6的变量的解构赋值）
Action Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态. Action 可以包含任意异步操作. 让我们来注册一个简单的 acti ...
es6分享——变量的解构赋值
变量的解构赋值:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前的写法: var a = 1; var b = 2; es6允许的写法 ...
[ES6] 细化ES6之 -- 变量的解构赋值
变量的解构赋值解构赋值是什么 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值 var/let [变量名称1,变量名称2,...] = 数组或对象本质上,这种写法属于"模式 ...