专栏首页coding个人笔记ES6之变量的解构赋值

ES6之变量的解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值在一些场景下还是很有用的。

数组:

从数组中提取值,按照对应位置,对变量赋值。“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。如果解构不成功,变量的值就等于undefined。不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

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

let [ , , d] = [5, 6, 7];
console.log(d); // 7

let [e, , f] = [8, 9, 10];
console.log(e); // 8
console.log(f); // 10

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

let [i, j, ...k] = [5];
console.log(i);// 5
console.log(j); // undefined
console.log(k); // []

let [l] = [];
let [m, n] = [6];
console.log(l);//undefined
console.log(m);//6
console.log(n);//undefined

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

对象:

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

let {a, b, c} = {a: "aaa", b:"bbb"};
console.log(a);//aaa
console.log(b);//bbb
console.log(c);//undefined

对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

let {fa: a, fb: b } = {fa: "aaa",fb: "bbb"};
console.log(a);//aaa
console.log(b);//bbb
console.log(fa);//Uncaught ReferenceError: fa is not defined
console.log(fb);//Uncaught ReferenceError: fb is not defined

也就是说通过fa、fb找到对应的的同名属性,然后把值赋给变量a、b,这是需要特别注意的点。如果是{a,b}等同于{a: a, b: b}

同样的,可以嵌套解构:

let {
    a: [e], a: [{
        b: {
            c:[d]
        }
    }]
} = {
    a: [{
        b: {
            c: [0]
        }
    }]
};
console.log(d);//0

嵌套解构在实际中一般不会使用,所以我们只要记住,左右两边解构一致,就可以解构赋值。

字符串:

字符串会被解析成数组去解构:

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

let {length: len} = 'hello';
console.log(len); // 5

特别注意,字符串能获得字符串长度解构。

数值、布尔值、undefined、null也能够解构,但是不推荐使用,这边就不说了。

函数参数也支持解构:

function add([x, y]){
    return x + y;
}

console.log(add([1, 2]));; // 3

默认值:

解构赋值允许设定默认值,也就是说右边没有对应上的时候,会取左边设定的默认值。

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

对象也一样:

let {a: a, b: b, c: c = 6} = {a: 8, b: 8};
console.log(a);//8
console.log(b);//8
console.log(c);//6

用途:

一个方法,比较重要的就是用途了。解构赋值在一些场景下非常有用

交换变量:

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

函数返回值,也就是return、函数参数可以很方便的把数据对应起来,还可以设置默认值。

提取JSON:

比如我们调用接口返回了很多数据,我们需要一个一个赋值

let data = {
    have: 'new',
    old: 'old',
    free: [0, 1, 2, 3],
}

let have = data.new;
let old = data.old;
let free = data.free;

使用解构的话:

let {free, old, have} = data;

其实我们一直使用的import {}使用的也是解构。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 数据类型判断Object.prototype.toString.call

    越学习越觉得基础的不牢固,不懂的,摸棱两可的,学了忘了的,在从入门到放弃的路上一直走着。今天分享一下数据类型判断的方法。

    wade
  • ES6之数值的扩展

    之前说过,严格模式八进制不能使用前缀0表示,ES6规定必须使用0o。ES6提供了二进制和八进制的新写法:

    wade
  • 分片加载超长列表渲染

    很早以前就有面试问超长列表如何优化,那时候觉得一般前端不会有这种功能,有也是分页,也就没有去关注。今天分享一个超长列表渲染的优化方法,分片加载,现在几乎也都不会...

    wade
  • ES6(三):变量的解构赋值

    解构赋值语法是一个Javascript表达式,这使得可以将值从数组或属性从对象提取到不同的变量中,文中主要讲数组的解构赋值、对象的解构赋值、字符串的解构赋值、数...

    从入门到进错门
  • 【ES6基础】解构赋值(destructuring assignment)

    我们经常可以在其他编程语言(如GO语言)中看到多返回值这种特性,因为在很多实际场景中,函数的返回值中,函数的返回值并不只有一个单一的值。ES6之前,并没有可以直...

    前端达人
  • ES6中的解构赋值

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

    刘亦枫
  • 谈谈ES6语法(汇总上篇)

    ES6可以说是一个泛指,指5.1版本以后的JavaScript的下一代标准,涵盖了ES2015,ES2016,ES2017等;亦指下一代JavaScript语言...

    嘉明
  • 这5个 console.log() 技巧帮你提高工作效率

    我们知道 console.log(message)用法很简单,表示将参数message 打印到控制台上。

    前端小智@大迁世界

扫码关注云+社区

领取腾讯云代金券