美文网首页
第三章 变量的解构赋值

第三章 变量的解构赋值

作者: 曼珠沙华_521b | 来源:发表于2018-01-14 11:32 被阅读0次

3.1数组的解构赋值

3.1.1基本用法

Es6允许按照一定模式从数组和对象中取值,然后对变量进行赋值,这被称为解构。
ES6写法:

变量赋值:
 let [ a、b、c]=[1、2、3]
相当于
let a=1;
let b=2;
let c=3;
如果解构成功的话,会赋值,不成功的话,会等于undefined;
本质上,这种写法属于模式匹配,只要等号两边的模式相同,左边的变量就会赋予对应的值。

另一种情况的是不完全解构,即等号左边的模式匹配一部分的等号右边的数组,这种情况下,依然可以解构成功。如果右边不是数组,那么将会报错。

3.1.2默认值

解构赋值允许指定默认值:

let [foo =true]=[];
foo//true;

let [ x、y='b']=['a',undefined];//x='a';y='b'
ES6内部使用严格相等运算符来判断一个位置是否有值。所以如果一个数组成员不严格等于undefined,默认值是不会生效的。
let [x=1]=[null]
x//null
如果一个数组成员是null,默认值就不生效,因为null不严格等于undefined。

如果一个默认值是表达式,那么这个表达式是惰性求值的,即只有用到时才会求值。

let [x=f()]=[1];
上面的代码中,因为x能取到值,所以函数f根本不会执行。上面的代码等价于
let x;
if([1][0]===undefined){
        x=f();
 }else{
        x=[1][0];
}

3.2对象的解构赋值:

解构不仅可以用于数组,还可以用于对象
对象的解构与数组有一个重要的不同。数组的元素是按次序排序的,变量的取值是由他的位置决定的;而对象的属性没有次序,变量必须与属性同名才能取到正确的值。
等号左边变量没有对应的同名属性,导致取不到值,会等于uindefined。
如果变量名与属性名不一致,必须写成如下样式:

 var {foo:baz}={foo:'a',bar:'b'};
baz//'a'
foo//error:foo is not defined
foo是匹配模式,baz才是变量。真正被赋值的是变量baz ,而不是模式foo

let {bar,foo}={foo:'a',bar:'b'}
foo//a
bar//b
也就是说,对象的结构赋值的内部机制是先找到同名属性,然后再赋值给对应的变量。真正被赋值的是后者,而不是前者。
与数组一样,解构也可以用于嵌套结构的对象。
默认值生效的条件是,对象的属性严格等于undefined
如果解构失败,就等于undeifined

3.3字符串的解构赋值

字符串也可以解构赋值。这是因为此时字符串被转换成了一个类似数组的对象。

const [a,b,c,d,e]="hello''
a//h
b//e
c//l
d//l
e//o

类似数组的对象都有一个length属性,因此还可以对这个属性进行解构赋值。

let {length:len}='hello';
len//5

3.4数值和布尔值的解构赋值

解构赋值是,如果等号右边是数值和布尔值,则会先转为对象
解构赋值的规则是,只要等号右边的值不是对象或者数组,就先将其转为对象,由于undefined和null无法转为对象,所以他们解构时都会报错。

3.5函数参数的解构赋值

函数的参数也可以使用解构赋值。

function add([x,y]) {
return x+y; 
}
add([1,2]);//3
函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量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];
move();//[0,0];

函数的参数是一个对象,同队对这个对象进行解构,得到变量x和y的值,如果解构失败,x和y等于默认值。

3.6圆括号问题

如果模式中出现圆括号该怎么办?ES6的规则是,只要有可能导致解构的歧义,就不得使用圆括号。

3.7用途

1交换变量的值;
2.从何时返回多个值
3.函数参数的定义
4.提取json的数据尤其重要
5.函数参数的默认值
6.遍历map的结构
任何部署了itertor接口的对象都可以使用for...of循环遍历。map结构原生支持iterator接口,配合变量的结构赋值获取键名和键值。
var map=new Map();
map.set('1','one');
map.set('2','two');
for (let [key,value] of map){
console.log(key +"is"+value)
}
打印的是1 is one
2 is two
7输入模块的指定方法
const {SourceMapConsumer,SourceNode}=require(“source-map”)

相关文章

  • 解构赋值

    解构赋值:ES6 中新增了变量赋值的方式,从数组和对象中提取值,对变量进行赋值。 单独赋值给变量,解构赋值。 解构...

  • ES6笔记(解构赋值)

    ES6笔记(解构赋值) 解构赋值 变量的解构: 解构赋值允许指定默认值。 解构赋值必须保证赋值方 被赋值方类型一...

  • 变量的解构赋值

    数组的解构赋值: 解构,就是从数组和对象中提取值,然后对变量进行赋值 解构赋值: 解构不成功,变量的值就等于und...

  • ES6系列之变量的解构赋值

    本篇目录: 数组的解构赋值变量声明并赋值时的解构变量先声明后赋值时的解构不完全解构默认值交换变量解析一个从函数返回...

  • 解构赋值

    解构赋值 数组的解构赋值 嵌套,默认值,展开符 对象的解构赋值 对象解构赋值的本质与简写 对象解构的模式与变量 对...

  • 『ES6脚丫系列』变量的解构赋值

    『ES6脚丫系列』变量的解构赋值 第一章:变量的解构赋值的概念 【01】Q:什么是变量的解构赋值?有哪些方式? 吃...

  • ES6的解构赋值

    一、前言 什么是“解构赋值”呢?就是从数组或者对象中取值,对变量进行赋值,这就是变量的解构赋值。 二、数组的解构赋...

  • 名词

    1 解构: 从数组或对象中提取值,给变量赋值这被称为解构解构赋值的变量都会重新声明解构赋值的规则是,只要等号右边的...

  • 变量的解构赋值 - 字符串、数值、布尔值、函数参数

    一、字符串的解构赋值 二、数值和布尔值的解构赋值 三、函数参数的解构赋值 变量的解构赋值 - 数组篇[https:...

  • Z03_变量的解构赋值

    变量的解构赋值 数组的解构赋值 ES 中从数组和对象之中提取数值,对变量进行赋值,这个过程称为解构 1. 对于 S...

网友评论

      本文标题:第三章 变量的解构赋值

      本文链接:https://www.haomeiwen.com/subject/nthhoxtx.html