let的解构赋值_解构赋值还有这么多玩法?
解构赋值
解构赋值很多人可能和我一样,第一次看到这个词的时候摸不着头脑。但是冷静再看一遍好像明白了,“把数据结构分解开分别进行赋值”。
我们先看几个小例子
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 ]
。。。还有我没有发现的好处。。。
以上就是我对解构赋值的一些总结,希望能对还没入门的你提供到一些帮助。es6给我们提供了很多优美的语法糖,让我们编起码来更优雅,更易读(前提懂es6),更规范。但是这些语法糖相对es5实现方式性能怎么样?要不要来我们现场交流交流呢!
let的解构赋值_解构赋值还有这么多玩法?相关推荐
- 展开运算符解构赋值_解构式展开式搜索栏
展开运算符解构赋值 View demo 查看演示Download Source 下载源 Maybe you have noticed the little adjustments that we di ...
- jdk解压版_命令行版的斗地主你玩过没?
相信大家都玩过斗地主游戏,或在现实中斗地主或在电脑和手机上斗地主,但你想过用命令行界面进行斗地主吗? 先来张图体验一下: 是不是觉得挺有意思,下面就带大家一起玩一下吧~部署命令行版斗地主 1 环境准备 ...
- 安卓zip解压软件_解压教程(安卓苹果)
[安卓手机解压教程] 1.在手机找到软件商店,不同手机下载客户商不同,请根据自身选择,见下图. 2.安装软件,请在软件商店里面搜索:ES文件浏览器,并安装它,见下图. 3.找到刚才保存的文件夹,见下图 ...
- 数据数组赋值_嵌入式-数组赋值
C语言中表达数据的基本类型时,用基本数据类型描述,例如整型,字符型,浮点型.在表达数据的复杂结构时,使用了构造数据类型这样的特殊类型描述,例如数组,结构体,共用体.数组是最常用的构造类型,也是最简单的 ...
- vector c++ 赋值_面对拷贝赋值时发生的自我赋值的正确态度时接受而不是防止
C.62: Make copy assignment safe for self-assignment C.62:保证拷贝赋值对自我赋值安全 Reason(原因) If x = x changes t ...
- python给字母赋值_给字母赋值的更快方法?
我试着从列表中的单词中读出每个字符,然后根据单词中的每个字母给它们赋值.我的代码太长了,我相信一定有一个更短的方法来实现它...在for c in tempWord: if(c == "A& ...
- python 声明不赋值_为什么Python赋值不返回值?
无论论据有多好,进入味觉讨论或任何被认为是这样的讨论通常都是浪费时间. 除了更一般的原则外,我更希望将赋值用作表达式的实际原因是,当我想将具有多个模式(提取子模式)的字符串匹配到成功之前,具有与cas ...
- jquery给日期赋值_关于jQuery赋值
你的位置: 问答吧 -> XML/HTML/CSS/JS -> 问题详情 关于jQuery赋值 我先取了文本长度 var val = $("#dd").text(); ...
- python新特性赋值_变量与赋值_Python入门视频课程_Python视频-51CTO学院
老男孩教育的PYTHON自动化开发课程自2013年第1期到现在已经走到了第12期,2年半的时间里,我们每一期都在对课程细节进行不同程度的优化,课程总时长也从最开始的2个月延长至第12期的五到六月,更新 ...
最新文章
- isis学不到looback口的路由_使用路由器后测速达不到宽带的网速怎么办?
- Concurrent包下的常用并发类和普通类之间的区别
- VisualStudio2017中新建项目没有Asp.Net项目
- 《移动应用开发》实验报告——疫情地图
- Javascript 深入学习循环
- 单片机开发设计之十层功力
- html5 type submit,input type=submit
- HttpServletResponse.getWriter().print乱码,request.getHeader乱码,解决方法
- mysql php 变量赋值,在MySQL UPDATE(PHP / MySQL)中使用变量
- 游标循环读取的正确逻辑_千分尺的正确使用方法原来是这样?我用了那么多年都用错了...
- [Usaco2008 Feb]Eating Together麻烦的聚餐[最长不下降子序列]
- linux下安装微信,qq,企业微信,百度网盘,Foxmail等软件方法
- 老毛子 K2 通过SSH 抓包
- 电气工程及其自动化用matlab,计算机仿真技术与CAD--基于MATLAB的电气工程(电气工程及其自动化专业精品教材普通高等教育十三...
- 计算机管理 未分配磁盘,磁盘显示未分配怎么办?
- 你的代码会说话吗?(上)
- ES6之Symbol详解
- java.lang.IllegalStateException: Current state = FLUSHED, new state = CODING_END问题查找
- ACCV 2020 开幕,最佳论文出炉!附所有论文下载
- Tita OKR:目标地图的妙用
热门文章
- C语言宏定义中#define中的井号#的使用
- OpenCV学习笔记:绘图指令(矩形、圆、线、文本标注)
- C语言线性表之顺序表
- jupyter notebook 快捷键设置字体大小_你可能并不知道这样定制炫酷的jupyter主题
- activiti 工作流_JAVA-工作流引擎-activiti-Tasks介绍
- 录入班级学生姓名科目成绩_如何利用钉钉发布考试成绩
- Unity+SenseAR教程 | 用手势发射爱心2:加入发射方向【源码】
- (五)使用生成对抗网络 (GAN)生成新的时装设计
- 强类型的JavaScript(TypeScript)–现在没有任何理由不要深入JavaScript!
- Tableau中的行级数据安全性——第2部分