解构赋值,你不能不懂!

解构赋值

很多人可能和我一样,第一次看到这个词的时候摸不着头脑。但是冷静再看一遍好像明白了,“把数据结构分解开分别进行赋值”。

  • 我们先看几个小例子
let [a,b,c] = [1,2,3];
console.log(a,b,c);//1 2 3

let {name,age} = {name:"jack",age:"18"};
console.log(name,age);//jack 18

let {toString,length} = "hello";
console.log(toString === String.prototype.toString,length);//true 5

let [a,b,c,d,e] = "world";
console.log(a,b,c,d,e);//w o r l d

let {shift,length,key} =[1,2,3];
console.log(shift,length,key);//[Function: shift] 3 undefined

function fo([x,y,z]){
    console.log(x,y,z);
}
fo([3,4,2]);//3,4,2

function fobj({x,y,z}){
    console.log(x,y,z);
}
fobj({z:1,y:4,x:2});//2 4 1

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

相信大家不难从上述的几段代码案例总结出来解构赋值的规律,我总结到如下几点: 1、解构主体为数组或者对象。 2、解构源必须具备Iterator接口或者经过转换之后具备Iterator接口。(什么是Iterator可看我接下来文章) 3、数组解构是按顺序进行解构(有序),对象是通过方法名或者属性名进行结构(无序)。 4、数组解构解构源会被转换为数组,对象解构解构源会被转换成对象。 5、解构对象时关键词解构会从当前实例持续向上访问原型链直到查不到返回undefined。

以上总结包含了大部分基础场景我们会遇到的情况,但还是有更多的细节需要我们注意下:

  • 我们可以嵌套解构
let [a,[b,{name,age}],d] = [1,[4,{name:1,age:1}],6];
console.log(a,b,d,name,age);//1 4 6 1 1
  • 我们也可以改变解构的变量名
var {b:x,a:y} = {a:1,b:2};
console.log(x,y);//2 1
  • 解构赋值可以设置默认值
var [x=1,y=2] = [,0];
console.log(x,y);//1 0

var {x=1,y=2] = {y:0};
console.log(x,y);//1 0
  • 数组解构赋值对于不可迭代实例将报错
let [val] = 1;
let [val] = false;
let [val] = NaN;
let [val] = undefined;
let [val] = null;
let [val] = {};
  • 数组解构可以跳跃赋值
//取出数组第三个
var [,,x] = [1,2,4];
console.log(x)//4
  • 数组解构可以截取
let [,...x] = [1,2,4];
console.log(x)//[ 2, 4 ]

那它有哪些用途呢?

1、交换变量,是一种很酷的玩法

var {x:y,y:x} = {x:1,y:2};
console.log(x,y);//2 1

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

2、接受函数返回的多个值

function test(){
    return [1,2,3];
}
let [a,b,c] = test();
console.log(a,b,c);//1 2 3

function test(){
    return {x:1,y:2,z:3};
}
let {y,z,x} = test();
console.log(y,z,x);//1 2 3

3、接受不按顺序的函数参数

function get({name,age,sex}){
    console.log(name,age,sex);
}
get({name:"Topqiang",age:24,sex:1});//Topqiang 24 1
get({age:24,name:"Topqiang",sex:1});//Topqiang 24 1
get({name:"Topqiang",sex:1,age:24});//Topqiang 24 1

接口封装调用函数再也不用考虑参数顺序了,以后我们在封装方法提供工具包时就可以让我们的关注点放在业务本身而无需关注参数传入的顺序上。这是多么美好的一件事。 4、设置默认值

function get({name="topqiang",age,sex}){
    console.log(name,age,sex);
}
get({age:24,sex:1});//Topqiang 24 1

5、为模块化编程提供优雅的模块引入方式

const {read,write} = require("fs");

6、函数的参数列表可以自动装载成数组

function getarr(...args){
    console.log(args);
}
getarr(1,23,4);//[ 1, 23, 4 ]

原文发布于微信公众号 - 思梦PHP(sm_php)

原文发表时间:2018-03-27

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏达摩兵的技术空间

a>b的那些事

经常会遇到对比两个值大小关系的逻辑,常规的处理中我们都是处理两个数字或者数字类型的字符串。那么这里进行延伸拓展的练习,来避免一些开发中的采坑。

671
来自专栏Python爱好者

Java基础笔记06

1408
来自专栏编程坑太多

js数组、json、js对象的区别与联系

2014
来自专栏诸葛青云的专栏

C语言什么是结构体?初步学习C语言结构体三部曲

结构体部分内容,涉及结构体定义,结构体变量,结构体指针,结构体数组,更多内容敬请关注。

1383
来自专栏Vamei实验室

Python基础09 面向对象的进一步拓展

我们熟悉了对象和类的基本概念。我们将进一步拓展,以便能实际运用对象和类。 调用类的其它信息 上一讲中提到,在定义方法时,必须有self这一参数。这个参数表示某个...

1967
来自专栏前端黑板报

一个数字截取引发的精度问题(二)

上篇文章只是简单介绍了Number的 toFixed 方法,周末抽时间把 Number 里的一些方法又看了一下,其中有个方法引起我的注意: Number.pro...

1976
来自专栏Vamei实验室

Python基础09 面向对象的进一步拓展

我们熟悉了对象和类的基本概念。我们将进一步拓展,以便能实际运用对象和类。 调用类的其它信息 上一讲中提到,在定义方法时,必须有self这一参数。这个参数表示某个...

2046
来自专栏云霄雨霁

排序----堆排序

1500
来自专栏阿凯的Excel

Python读书笔记22(函数传递任意数量实参)

连小编都没想到一个小小的函数要分享这么多期~ 当然,主要原因是! 不好意思,放错图了是! 今天和大家分享函数的最后一个部分,虾米呢? 前期有分享过传递一个...

3597
来自专栏keyWords

JavaScript之作用域和闭包

801

扫码关注云+社区