TypeScript笔记 5--变量声明(解构和展开)
解构是什么
解构(destructuring assignment)是一种表达式,将数组或者对象中的数据赋给另一变量。
在开发过程中,我们经常遇到这样问题,需要将对象某个属性的值赋给其它两个变量。代码如下:
var person = {
name:'xxxx',
age: 20,
hobby:['football', 'run']
}
var a = person.name;
var hobby = person.bobby;
有了解构,我们可以精简代码了
var person = {
name:'xxxx',
age: 20,
hobby:['football', 'run']
}
let {a, hobby} = person;
let [first] = person.hobby;
数组解构
let nums = [1,2,3]
let [f,s] = nums;
console.log(f); // 输出: 1
console.log(s); // 输出: 2
将数组中前两项的值分别赋给f和s
变量值交换
[f, s] = [s, f];
console.log(f); // 输出: 2
console.log(s); // 输出: 1
使用...创建剩余变量
let nums= [1,2,3,4]
let [f, ...rest] = nums;
console.log(f); // 输出: 1
console.log(rest);// 输出: [2,3,4]
忽略数组中某些元素
let [first] = [1, 2, 3, 4];
console.log(first); // 输出: 1
let [, second, , fourth] = [1, 2, 3, 4];
对象解构
let o = {
a: "foo",
b: 12,
c: "bar"
}
let { a, b } = o;
console.log(a); // 输出: foo
console.log(b);// 输出: 12
将对象o.a赋值给a,0.b赋值给b,这里的a,b都是对象属性名且必须一致,而属性c则会忽略
重命名
上述例子中声明的变量a和b必须和对象中属性一致,如果想换一个名字,写法如下:
let { a: aa, b: bb } = o;
默认值
let o = {
a: "foo",
b: undefined,
c: "bar"
}
let {a, b=1}= o;
console.log(a); // 输出: foo
console.log(b);// 输出: 1
当属性b的值为undefined
时,解构表达式会使用默认值
展开
展开和解构正好相反,将一个数组展开为另一个数组,或将一个对象展开为另一个对象。
数组展开
let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];
console.log(bothPlus);// 输出:0,1,2,3,4,5
展开操作会对数组first和second浅拷贝,如果fisrt值修改,则bothPlus值不会改变。但是如果first中是对象数组,改变对象内部的值,bothPlus对应的值会改变。
对象展开
let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = { ...defaults, food: "rich" };
console.log(search); //输出:{food: "rich", price: "$$", ambiance: "noisy"}
展开是从做到右处理,意味着对象后面的属性会覆盖前面的。如下:
let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = {food: "rich", ...defaults };
console.log(search); //输出:{food: "spicy", price: "$$", ambiance: "noisy"}
注意:使用...创建展开,请使用typescript@2.1.x版本
TypeScript笔记 5--变量声明(解构和展开)的更多相关文章
- ES6学习笔记之变量的解构赋值
变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...
- ES6学习笔记(2)----变量的解构和赋值
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 变量的解构和赋值 本质上:只要模式匹配,左边的变量就能被赋予右边对应的值 原则: 解构赋值的规则 ...
- es6变量的解构赋值学习笔记
1. 解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象.由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错. let { prop: x } = undefin ...
- ES6 学习笔记 - 变量的解构赋值
变量的解构赋值 学习资料:ECMAScript 6 入门 数组的解构赋值 基本用法 可以从数组中提取值,按照对应位置,对变量赋值.这种写法属于"模式匹配". let [a, b, ...
- ES6学习笔记(二)变量的解构与赋值
1.数组的解构赋值 1.1基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1 ...
- ES6 - 变量的解构赋值学习笔记
变量的解析赋值 数组的解析赋值 es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构. var a = 1; var b = 2; var c = 3; //在es6中允许写成 ...
- es6笔记(3) 变量的解构赋值
基本概念 本质上是一种匹配模式,只要等号两边的模式相同,那么左边的变量就可以被赋予对应的值. // 以往定义接个变量的时候,需要这样 var a = 1, b = 2, c = 3; // 使用ES6 ...
- ES6学习笔记(一)-变量的解构赋值
变量的解构赋值种类 解构(Destructuring):ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值. 只有当一个数组成员严格等于(===)undefined,包括空“ ” ,默认值 ...
- Typescript 解构 、展开
什么是解构.展开? 展开与解构作用相反,简单来说: 解构:解构赋值允许你使用数组或对象字面量的语法,将数组和对象的属性付给各种变量. 展开:允许你讲一个数组展开为另一个数组,或一个对象展开为另一个对象 ...
随机推荐
- phpexcel用法(转)
.php导出excel(多种方法) (2013-03-23 15:44:02) 转载▼ 分类: php 基本上导出的文件分为两种: 1:类Excel格式,这个其实不是传统意义上的Excel文件,只 ...
- ecsmart的开发经历
ecsmart是ecshop的产品之一,是2015年发布的一套系统.关于它的介绍请到官网去了解,也可以百度 “商之翼” “ecsmart” 1.ecsmart分别在pc.mobile.app三个方面都 ...
- 编译TensorFlow源码
编译TensorFlow源码 参考: https://www.tensorflow.org/install/install_sources https://github.com/tensorflo ...
- @NotEmpty、@NotBlank、@NotNull的区别
@NotEmpty 用在集合类上面 @NotBlank 用在String上面 @NotNull 用在基本类型上 只有简单的结果,但是再更具体一点的内容就搜不到了,所以去看了看源码,发现了如下的注释 ...
- Java 反编译工具下载
反编译,通俗来讲,就是将.java 文件经过编译生成的 .class 文件还原.注意这里的还原不等于 .java 文件.因为Java编译器在编译.java 文件的时候,会对代码进行一些处理. 那么接下 ...
- vim 当前用户显示行号
在 -/.vimrc 中添加 set nu 如果文件不存在可以直接新建这个文件 -表示当前用户的主目录
- 遍历文件 创建XML对象 方法 python解析XML文件 提取坐标计存入文件
XML文件??? xml即可扩展标记语言,它可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言. 里面的标签都是可以随心所欲的按照他的命名规则来定义的,文件名为roi.xm ...
- Linux学习笔记整理
2.1BASH命令行基本操作 [用户@主机~]$ # //$#为提示符 $代表普通用户 #代表root用户 ~代表当前目录 ls //list相当于DOS的dir 显示当前目录列表 -a // ...
- 微信支付接口开发之---微信支付之JSSDK(公众号支付)步骤
1.准备 1.1.公众号为服务号,开通微信支付功能 1.2.为了方便调试微信后台的回调URL(必须为外网),我用了nat123软件来做一个映射 1.3.官方微信开发的示例WxP ...
- 【LCT+主席树】BZOJ3514 Codechef MARCH14 GERALD07加强版
3514: Codechef MARCH14 GERALD07加强版 Time Limit: 60 Sec Memory Limit: 256 MBSubmit: 2023 Solved: 778 ...