ES6变量的解构赋值

概念

ES6允许 按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。

**变量的解构赋值在本质上属于 “模式匹配”,要掌握这个知识点,只需要找准它们的对应关系,并且能准确区分 谁是“模式” 谁是“变量”

数组解构赋值

只要等号两边的模式相同 左边的变量就会被赋与对应的值
var a=1;
var b=2;           =>    let [a,b,c]=[1,2,3]       //a=1;b=2;c=3
var c=3;
不完全解构:等号左边的模式只匹配等号右边数组的一部分。
let [x,y]=[1,2,3]       //x=1;y=2

let [a,[b],d] = [1,[2,3],4]      //a=1;b=2;d=4
报错:如果等号右边不是可遍历的解构(数组),将会报错
let [a]=1;
let [a]=false;
let [a]=NaN;
let [a]=undefined;
let [a]=null;
let [a]={};

解构赋值允许指定默认值
var [foo=true]=[]              //foo=ture
var [x,y='b']=['a']            //x='a';y='b'

默认值也可以引用其他变量,但变量必须已经声明
let [x=1,y=x]=[];       //x=1;y=1
let [x=1,y=x]=[2];       //x=2;y=2
let [x=y,y=1]=[];       //ReferenceError

对象的解构赋值

*对象的属性没有次序,变量必须与属性同名,才能取到正确的值,否则取不到值,最后等于undefined。
//例1
var {foo,bar}={foo:'aaa',bar:'bbb'}   // foo='aaa'  ;bar='bbb'
var {baz}={foo:'aaa',bar:'bbb'}        //baz=undefined

*如果想要声明的变量名与属性名不一样,则必须写成下面这样:
//例2
var {foo:baz}={foo:'aaa',bar:'bbb'}   //baz='aaa'

*对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量,真正被赋值的是后者,而不是前者。
//例3
var {foo:baz}={foo:'aaa',bar:'bbb'} 
//baz='aaa'
//foo   error:foois not defined   
// 本例中被真正赋值的是baz 而不是模式foo

//**由上可知,例1中对象的解构赋值 其实是一种简写
var {foo,bar}={foo:'aaa',bar:'bbb'}   =>
var {foo:foo,bar:bar}={foo:'aaa',bar:'bbb'} 

(ES6允许在对象中只写属性名,不写属性值,这个时候,属性值等于属性名字所代表的变量)
var baz={foo} => var baz={foo:foo}
#####解构嵌套结构的对象

var obj={
   p:[
      "hello",
      {y:''word"}
   ]
};
var {p:[x,{y}]}=obj;
//x=>"hello"
// y => "world"
// p => error: p is not defined
*这时p 是模式,不是变量,因此不会被赋值
对象的解构也可以指定默认值
var {x=3}={}    // x=>3
var {x,y=5}={x;1}     //x=>3    y=>5
var {x:y=9}={}      //y=>9   

字符串的解构赋值

此时字符串被转换成了一个类似数组的对象
const [a,b,c,d,e]="hello" 
// a => "h"
// b => "e"
// c => "l"
// d => "l"
// e => "0"

****类似数组的对象都有length属性,因此还可以对这个属性解构赋值。***
let {lebgth:len}="hello"
//len => 5

数值和布尔值的解构赋值

解构赋值的规则是,只要等号右边的值不是对象,就先将起转化为对象,所以数值和布尔值的解构赋值,会先将起转为对象,因此,需要注意的是,undefined和null 无法转为对象,所以对它们进行解构赋值都会报错。

函数参数的解构赋值

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()   //[00]

用途

1、交换变量的值

var [x,y] =[y,x]

2、提取JSON数据

var json={
   id:42,
   status: "ok",
   data:[867,5309]
}

let {id,status, data:number}=jsonData;

3、指定函数参数默认值,省去在函数体内部 再写 var foo=config.foo|| "default foo" 短路写法
$.ajax = function (url,{
async=true,
cache = true
})

4、输入模块的指定方法
let {formData,pxTorem,foo}= improt '../../index.js';

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,175评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,674评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,151评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,597评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,505评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,969评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,455评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,118评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,227评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,213评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,214评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,928评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,512评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,616评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,848评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,228评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,772评论 2 339

推荐阅读更多精彩内容