ES6学习笔记之解构赋值

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

一. 数组

例子:

let [a, b, c] = [1, 2, 3];

等同于

let a = 1;
let b = 2;
let c = 3;

Tips:从数组中提取值，按照对应位置，对变量赋值

let [a, [b], c] = [1, [2], 3];
console.log(a);  // 1
console.log(b);  // 2
console.log(c);  // 3

let [ , , third] = ['one' , 'two', 'three']
console.log(third);  // three

let [x ,  ,z ] = [1, 2, 3];
console.log(x);  // 1
console.log(z);  // 3

let [top , ...buttom] = [1, 2, 3, 4];
console.log(top);  // 1
console.log(buttom);  // [2, 3, 4]

let [x, y, ...z] = ['a'];
console.log(x);  // a
console.log(y);  // undefiend
console.log(z);  // [ ]

Tips: 如果解构不成功，变量的值就等于undefined。

不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

例子:

let [x, y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2

let [x, [y], z] = ['a', ['b' , 'c'], d];
console.log(x); // a
console.log(y); // b
console.log(z); // d

如果等号的右边不是数组（或者严格地说，不是可遍历的结构，参见《Iterator》一章），那么将会报错。

// 报错
let [a] = 1;
let [a] = false;
let [a] = undefined;
let [a] = null;
let [a] = {};

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

例子:

let [ i = 'mark'] = [];  // i = 'mark'
let [x, y = 'a'] = ['b']; // x = 'b', y = 'a'
let [x, y = 'b'] = [ 'a' , undefiend]; // x = 'a' , y = 'b'

Tips: ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。

let [x = 1] = [undefined]; 
//x = 1

let [x = 1] = [null];  
// x = null

Tips : 如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。

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

例子:

function f(){
    return 'aaa';
}

let [a = f()] = [1]; 
// a = 1

Tips: 因为x能取到值，所以函数f根本不会执行。

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

let [x = 1, y = x] = []; // x = 1, y = 1
let [x = 1, y = x] = [2]; //x = 2, y = 2
let [x = 1, y = x] = [1 ,2]; // x = 1, y = 2 
let [x = y, y = 1] = []; //ReferenceError

Tips: 最后一个表达式之所以会报错，是因为x用到默认值y时，y还没有声明

二. 对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { name, age} = { name : 'mark', age : 12}
name // 'mark'
age //12

Tips:对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { age, name } = { name: "mark", age : 12 };

let { height } = { name: "mark", age : 12  };
height  // undefiend

Tips:号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。

//如果变量名与属性名不一致，必须写成下面这样。
var { name: myName} = { name: 'mark', age: 12 };
myName // 'mark'

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

Tips: first是匹配的模式，f才是变量。真正被赋值的是变量f，而不是模式first。

与数组一样，解构也可以用于嵌套结构的对象。

//这时p是模式，不是变量，因此不会被赋值。
let obj = {
    p: [
       'Hello',
      { y: 'World' }
      ]
}
let { p: [x, { y }] } = obj;
x // 'Hello'
y // 'world'

//p作为变量赋值
let { p, p: [x, { y }] } = obj;
x // 'Hello'
y // 'world'
p // ["Hello", {y: "World"}]

var node = {
      loc: {
        start: {
            line: 1,  
            column: 5
           }
         }
       }   
var { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

对象的解构也可以指定默认值。

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。

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

Tips : 如果x属性等于null，就不严格相等于undefined，导致默认值不会生效。如果解构失败，变量的值等于undefined。

let {foo} = {bar: 'baz'};
foo   //undefined

如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。

//报错
let {foo: {bar}} = {baz: 'baz'};

Tips:上面代码中，等号左边对象的foo属性，对应一个子对象。该子对象的bar属性，解构时会报错。原因很简单，因为foo这时等于undefined，再取子属性就会报错

三. 字符串的解构赋值

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
....

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
let {length : len} = 'hello';

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

Tips: undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

四.函数参数的解构赋值

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

function add([x, y]){
     return x+y;
}
add([3,4]); // 7

Tips: 函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y

[[3, 4] , [5, 6]].map(([a , b]) => a+b);
// [7, 11]

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

function move({x = 0, y = 0} = {}){
      return [x, y];
}

move({});  //  [0, 0]
move({x : 1, y : 2});  //  [1,2]
move({x : 2});  // [2, 0]
move(); // [0, 0]

function move({x , y} = { x = 0, y =0}){
      return [x , y];
}

move({}); // [undefiend, undefiend]
move({x : 3, y : 8}); // [3, 8]
move({x : 3}); // [3, undefiend]
move(); // [0, 0]

Tips: 上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值

undefined就会触发函数参数的默认值。

[1, undefiend, 3].map((x = 'no') => x);
[1, 'no', 3]

五. 解构赋值的用途

  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.函数参数的定义

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

4.提取JSON数据

let data = {
    id : 12,
    status : '200',
    data: [867, 5309]
};

let [id, status, data : number]  = data;
console.log(id , status, number);
//12, '200', [867,5309]

5.函数参数的默认值

function ( a, { b = 's' , c = 'd'}){
   // do something
}

6.遍历Map结构

var map = new map();
map.set('first', 'hello');
map.set('second', 'world');

for(let [key , value] of map){
    console.log(key + " is " + value);
}

// 获取键名
for(let [key] in map){
  // .....
}

//获得值
for(let [ , key] in map){
    //.....
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,222评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,455评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,720评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,568评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,696评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,879评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,028评论 3赞 409
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,773评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,220评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,360评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,002评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2赞 350

推荐阅读更多精彩内容

  • ES6 变量的解构赋值
    1.数组的解构赋值 2.对象的解构赋值 3.字符串的解构赋值 4.数值和布尔值的解构赋值 5.函数参数的解构赋值 ...
    卞卞村长L阅读 917评论 0赞 0
  • ES6 数组的解构赋值
    基本用法 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring...
    嘉奇呦_nice阅读 789评论 0赞 2
  • es6学习笔记
    《ECMAScript6 入门》阮一峰 读书笔记 let和constlet声明的变量仅在块级作用域内有效，var声...
    亲爱的孟良阅读 716评论 1赞 2
  • 阳光下那金子般的色彩
    2017.02.26 叶子被太阳照射成闪闪发光的金色亮点 枯萎的叶子在冬天里徜徉 在春天里迟迟不肯离去 在太阳辉映...
    田萍阅读 525评论 1赞 1
  • 夜深了
    夜深了 心里不知道思念着谁 有那么个人不管再任何时候任何时间只要你需要他出现的时候他会马上告诉你他的存在 一句话也...
    卡伊木门欧恵尔地板阅读 137评论 0赞 0