• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript笔记5--变量声明(解构和展开)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

解构是什么

解构(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"}

注意:使用...创建展开,请使用[email protected]版本


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Typescript中类的使用发布时间:2022-07-18
下一篇:
react中使用typescript时,error: Property 'setState' does not exist on type 'Hom ...发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap