TypeScript:变量声明之解构赋值

解构(Destructuring)是ES6新增的特性。数组和对象(Object)的一个作用是把一些值组合打包在一起。与之相对,解构就类似把数组里的值或对象的属性解包。使用解构赋值语法可以很简便地把数组的值或对象的属性赋值给单独的变量。

语法

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 输出10
console.log(b); // 输出20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 输出10
console.log(b); // 输出20
console.log(rest); // 输出数组后面的值[30, 40, 50]

({a, b} = {a: 10, b: 20});
console.log(a); // 输出10
console.log(b); // 输出20

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});

数组解构

基本的用法

let input = [1, 2];
let [first, second] = input;
console.log(first); // 输出 1
console.log(second); // 输出 2

这里创建了first和second两个变量,input数组按索引依次对first和second赋值。这等同于

first = input[0];
second = input[1];

显然,使用解构赋值更加简便明了。

交换变量

[first, second] = [second, first];

函数参数

function f([first, second]: [number, number]) {
    console.log(first);
    console.log(second);
}
f([1, 2]);

余项变量

使用...语法来创建变量,数组的余项构成新的数组将赋值给此变量。

let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 输出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;

例子里新建了变量a和b,并把对象的o的属性a和b分别赋值给它们,o.c不需要用到,可以忽略。

不声明对象变量,使用括号括起来可以对对象直接解构赋值:

({ a, b } = { a: "baz", b: 101 });

例子里{ a, b } = { a: "baz", b: 101 }使用了括号括起来。

余项变量

和数组解构的余项变量一样,对象解构使用...语法创建变量,对象余下的属性构成新的对象赋值给此变量。

let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let { a, ...passthrough } = o;
let total = passthrough.b + passthrough.c.length;

此例里,passthrough值为{b:12,c:'bar'}。

重命名属性

除了使用原来的属性名作为变量来接收解构的值外,也可以对属性变量重命名。重命名的语法:

let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let { a: newName1, b: newName2 } = o;
console.log(newName1);   //输出foo
console.log(newName2);  //输出12

重命名也是避免和原来属性重名。

默认值

可以对解构的变量赋一个默认值,避免解构对象属性的值为undefined。

function keepWholeObject(wholeObject: { a: string, b?: number }) {
    let { a, b = 1001 } = wholeObject;
}

wholeObject的属性为可选,当它的值为undefined时,解构变量b值为默认值1001。

函数声明

解构也可以用在函数声明里:

type C = { a: string, b?: number }
function f({ a, b }: C): void {
    // ...
}

这里定义了类型C,并在声明函数f时,把类型C的属性解构赋值给函数变量a和b。

函数声明时赋默认值:

function f({ a, b } = { a: "", b: 0 }): void {
    // ...
}
f(); //默认值为{ a: "", b: 0 }

扩展(Spread)

使用扩展运算符可以一个数组添加到另外一个数组,或者把一个对象的属性添加到另外一个对象。使用...语法来扩展数组和对象。

数组扩展

let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];

bothPlus为扩展的数组,它的值扩展后卫[0,1,2,3,4,5]。

对象扩展

let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = { ...defaults, food: "rich" };

search为扩展后的对象,对象的扩展存在属性相同时,后面的属性的值覆盖前面的值。上面的例子里,后面food的值'rich'将会覆盖defaults里的food的值。

对象的扩展有两个限制:

  1. 不能扩展方法
  2. 不允许扩展来自泛型函数的类型参数

参考:
Variable Declarations
Destructuring assignment

版权声明:著作权归作者所有。

相关推荐

ES6 函数使用解构赋值(Destructuring )的几点好处

解构赋值(Destructuring )是ES6新增的特性。使用解构赋值有以下几点好处:命名参数设置默认参数多个返回值命名参数在传统的函数定义如下:function findUsersByRole (   role,    withContactInfo,    includeInactive )&

TypeScript:接口(interface)属性的定义

  在TypeScript里,接口扮演了一个定义数据结构的角色,它在TypeScript的类型检查中起到很重要的作用。基本用法匿名定义sayHello(person: {name:string}) { console.log(person.name + ", 您好!"); } 这是一个很简单的例子,它使用匿

Java 9模块声明中requires and requires transitive的区别

可读性(Readability)首先要理解模块的可读性module bar{     requires drink; } bar requires drink意味着:bar模块强制要求存在drink模块,这称为可靠配置。bar模块可以读入drink模块的文件,这称为可读性。bar模块可以访问drink模块的代码,这称为

TypeScript:let和const变量声明

在开始介绍let和const变量声明前,有必要先了解下JavaScript里的var变量声明。var变量声明全局声明var声明在函数体外,所声明的变量为全局变量。var name = "张三"; var所声明的全局变量会作为window的一个属性,可以使用"."来引用。如上例的name引用:console.log(window.