TypeScript笔记 5--变量声明(解构和展开)
2017-02-21 13:31
405 查看
解构是什么
解构(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--变量声明(解构和展开)
- TypeScript笔记 5--变量声明(解构和展开)
- TypeScript笔记 5--变量声明(解构和展开)
- TypeScript学习笔记之变量声明
- TypeScript 学习笔记(一)---基本类型及变量声明
- es6 学习笔记 之 变量声明 和 变量的 解构赋值
- [Effective JavaScript 笔记] 第12条:理解变量声明提升
- scala学习笔记:变量声明中的模式
- 【js学习笔记-023】-- 变量声明
- C语言学习笔记(一)变量声明的规则
- Swift学习笔记之变量与常量声明
- OCJP(310-065)精选笔记之-变量声明 (Variable Declaration)
- scala学习笔记:变量声明中的模式
- php学习笔记(一)变量的声明与使用
- linux shell 学习笔记--变量声明与赋值,循环
- C语言学习笔记----伊能C语言学习笔记----变量可以在程序的三个地方声明
- C语言学习笔记:13_变量和函数的声明与定义
- iOS开发笔记--声明全局变量
- Javascript学习笔记一基本数据类型与变量声明
- JS 学习笔记--2--变量的声明