解构是什么

解构(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--变量声明(解构和展开)的更多相关文章

  1. ES6学习笔记之变量的解构赋值

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  2. ES6学习笔记(2)----变量的解构和赋值

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 变量的解构和赋值 本质上:只要模式匹配,左边的变量就能被赋予右边对应的值 原则: 解构赋值的规则 ...

  3. es6变量的解构赋值学习笔记

    1. 解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象.由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错. let { prop: x } = undefin ...

  4. ES6 学习笔记 - 变量的解构赋值

    变量的解构赋值 学习资料:ECMAScript 6 入门 数组的解构赋值 基本用法 可以从数组中提取值,按照对应位置,对变量赋值.这种写法属于"模式匹配". let [a, b, ...

  5. ES6学习笔记(二)变量的解构与赋值

    1.数组的解构赋值 1.1基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1 ...

  6. ES6 - 变量的解构赋值学习笔记

    变量的解析赋值 数组的解析赋值 es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构. var a = 1; var b = 2; var c = 3; //在es6中允许写成 ...

  7. es6笔记(3) 变量的解构赋值

    基本概念 本质上是一种匹配模式,只要等号两边的模式相同,那么左边的变量就可以被赋予对应的值. // 以往定义接个变量的时候,需要这样 var a = 1, b = 2, c = 3; // 使用ES6 ...

  8. ES6学习笔记(一)-变量的解构赋值

    变量的解构赋值种类 解构(Destructuring):ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值. 只有当一个数组成员严格等于(===)undefined,包括空“ ” ,默认值 ...

  9. Typescript 解构 、展开

    什么是解构.展开? 展开与解构作用相反,简单来说: 解构:解构赋值允许你使用数组或对象字面量的语法,将数组和对象的属性付给各种变量. 展开:允许你讲一个数组展开为另一个数组,或一个对象展开为另一个对象 ...

随机推荐

  1. phpexcel用法(转)

    .php导出excel(多种方法) (2013-03-23 15:44:02) 转载▼   分类: php 基本上导出的文件分为两种: 1:类Excel格式,这个其实不是传统意义上的Excel文件,只 ...

  2. ecsmart的开发经历

    ecsmart是ecshop的产品之一,是2015年发布的一套系统.关于它的介绍请到官网去了解,也可以百度 “商之翼” “ecsmart” 1.ecsmart分别在pc.mobile.app三个方面都 ...

  3. 编译TensorFlow源码

      编译TensorFlow源码 参考: https://www.tensorflow.org/install/install_sources https://github.com/tensorflo ...

  4. @NotEmpty、@NotBlank、@NotNull的区别

    @NotEmpty 用在集合类上面  @NotBlank 用在String上面  @NotNull 用在基本类型上 只有简单的结果,但是再更具体一点的内容就搜不到了,所以去看了看源码,发现了如下的注释 ...

  5. Java 反编译工具下载

    反编译,通俗来讲,就是将.java 文件经过编译生成的 .class 文件还原.注意这里的还原不等于 .java 文件.因为Java编译器在编译.java 文件的时候,会对代码进行一些处理. 那么接下 ...

  6. vim 当前用户显示行号

    在 -/.vimrc 中添加 set nu 如果文件不存在可以直接新建这个文件 -表示当前用户的主目录

  7. 遍历文件 创建XML对象 方法 python解析XML文件 提取坐标计存入文件

    XML文件??? xml即可扩展标记语言,它可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言. 里面的标签都是可以随心所欲的按照他的命名规则来定义的,文件名为roi.xm ...

  8. Linux学习笔记整理

    2.1BASH命令行基本操作 [用户@主机~]$ # //$#为提示符 $代表普通用户 #代表root用户 ~代表当前目录 ls   //list相当于DOS的dir 显示当前目录列表 -a   // ...

  9. 微信支付接口开发之---微信支付之JSSDK(公众号支付)步骤

    1.准备     1.1.公众号为服务号,开通微信支付功能     1.2.为了方便调试微信后台的回调URL(必须为外网),我用了nat123软件来做一个映射     1.3.官方微信开发的示例WxP ...

  10. 【LCT+主席树】BZOJ3514 Codechef MARCH14 GERALD07加强版

    3514: Codechef MARCH14 GERALD07加强版 Time Limit: 60 Sec  Memory Limit: 256 MBSubmit: 2023  Solved: 778 ...