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期的五到六月,更新 ...
最新文章
- net 中web.config一个配置文件解决方法 (其他配置文件引入方式)
- 修改Windows登陆时显示上一次登陆的用户名
- 【移动GIS】室内导航算法设计
- C#模拟GetPOST提交表单(一)--HttpWebRequest以及HttpWebResponse --WebClient,restsharp
- 区块链技术指南:常见问题
- 最新VSCode格式化代码不换行
- CCF中国计算机学会推荐国际学术期刊与会议
- python爬虫爬取豆瓣电影为啥内容有缺失-Python爬虫之抓取豆瓣影评数据
- 怎么修改teredo服务器,技术员设置win7系统通过teredo连接IPv6的修复方案
- larval 捕获mysql错误_larval 如何捕获mysql错误
- Kepp-alive的实际运用场景(1)
- 安装oracle gcc版本,安装cx_Oracle时报错:error: command 'gcc' failed with exit status 1
- 简单理解与实验生成对抗网络GAN
- # Sql语句过长报错、查询慢优化方案探索
- DAO终极之问:去中心化组织归谁所有?
- CentOS7下使用rpm安装RabbitMQ
- 大家来找茬辅助工具超级简易版
- java.util.stream.Stream
- 058输入月份号输出英文月份名
- 蓝桥杯嵌入式MCP4017
热门文章
- python设置黑色主题_Python背景色与语法高亮主题配置
- php两个时间月数,PHP获得两个日期之间的月数
- 聚类分析在用户行为中的实例_基于行为数据的消费信贷反欺诈方案
- 服务器即将维护完成,新一轮大服务器即将开启:3月26日维护8小时
- mysql约束条件整型_MySQL 表的操作
- 英雄无敌6服务器在哪个文件夹,Win7系统无法运行英雄无敌6的两种原因和解决方法...
- linux启用shell脚本,linux下开机启动shell脚本
- OpenShift 4 - 直接将Web应用当成Serverless运行
- 微软正式推出 gRPC-Web for .NET
- 使用实体框架返回数据表