Typescript 解构 、展开
什么是解构、展开?
展开与解构作用相反,简单来说:
解构:解构赋值允许你使用数组或对象字面量的语法,将数组和对象的属性付给各种变量。
展开:允许你讲一个数组展开为另一个数组,或一个对象展开为另一个对象。
数组解构
// 1.数组元素的赋值-JavaScript语法
var first=someArray[0];
var second=someArray[1];
var third=someArray[2]; // 2.对比一下TypeScript、ES6提供简介、高效、可读的解构语法
var [first,second,third]=someArray; // 3. 对任意深度的嵌套数组进行解构
var [foo,[[bar],baz]]=[1,[[2],3]];
console.log(foo);//
console.log(bar);//
console.log(baz);// // 4.忽略尾随元素
let [first]=[1,2,3,4];
console.log(first);// // 5 .忽略部分元素
let [,second,,forth]=[1,2,3,4];
console.log(second);//
console.log(forth);//对象解构
// 1. 解构对象
let o={
a:'foo',
b:12,
c:'bar'
};
let {a,b}=o; // 2. 没有声明的赋值
({a,b}={a:'foo',b:12,c:'bar'});//注意此处,需要用括号括起来,因为javascript通常会以{起始的语句作为一个代码块。 // 3.对象里面可以使用 ... 语法创建剩余变量
let {a,...passthrough}=o;
let total=passthrough.b+passthrough.c.length; // 4. 属性重命名
let {a:newName1,b:newName2}=o; //a:newName1读作“a作为newName1”,等价于一下写法:
let newName1=o.a;
let newName2=o.b; // 5. 指定类型
let {a,b}:{a:string,b:number}=o; // 6 .指定默认值(即使b为udefined,obj的属性a,b也都会有值)
function keepWhole(obj:{a:string,b?:number}{
let {a,b=1001}=obj;
});展开
// 1. 数组展开
let first=[1,2];
let second=[3,4];
let all=[0,...first,...second,5];
console.log(all);//0,1,2,3,4,5 // 2. 对象展开(属性值覆盖)
let default={ food:'spicy',price:'$',drink:'coko'};
let search={...default,food:'rich'};
console.log(search);//{food:'rich',price:'$',drink:'coko'} // 3.对象展开:它只包含自身的可枚举的属性。 并且会丢失展开对象的方法:
class C={p:12,m(){}};
let c=new C();
let clone={...c};
console.log(clone.p);//
console.log(clone.m);//error!
___end
Typescript 解构 、展开的更多相关文章
- TypeScript 解构和展开
解构数组 解构数组元素 let input = [1, 2]; let [first, second] = input; console.log(first,second); 交换值 [first, ...
- TypeScript 解构
⒈解构数组 最简单的解构莫过于数组的解构赋值了: let input = [1, 2]; let [first, second] = input; console.log(first); // out ...
- TypeScript笔记 5--变量声明(解构和展开)
解构是什么 解构(destructuring assignment)是一种表达式,将数组或者对象中的数据赋给另一变量. 在开发过程中,我们经常遇到这样问题,需要将对象某个属性的值赋给其它两个变量.代码 ...
- Typescript中一些不理解的概念解释(泛型、断言、解构、枚举)
新的项目想使用typescript,因此又对其概念及使用过一遍,本文主要记录下对之前一些概念不太理解的地方. 1.泛型 定义: 在定义函数.接口或者类的时候,不预先指定具体的类型,而是在使用的时候再指 ...
- TS学习之解构与展开
一.解构 1.解构数组 let input = [1, 2]; let [first, second] = input; console.log(first); // outputs 1 consol ...
- 变量声明---let,const,解构
let在很多方面与var是相似的,但是可以帮助大家避免在JavaScript里常见一些问题. const是对let的一个增强,它能阻止对一个变量再次赋值. 块作用域 当用let声明一个变量,它使用的是 ...
- 豪情-CSS解构系列之-新浪页面解构-01
目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...
- ES6新特性-------解构、参数、模块和记号(续)
六.解构 解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子: //ES6 let [x,y]=[1,2];//x=1,y=2 //ES5 var arr=[1,2]; var x=a ...
- 前端笔记之ES678&Webpack&Babel(上)初识ES678&Babel&let和const&解构&语法
一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...
随机推荐
- 用JS来实现于截取中英文混合字符串方法(转载)
网站制作过程中,提示层文字超出,需要JS做字符串截取,但是呢,我们常常会烦恼文字中英文混合如何判断,因为我们知道在JS中 string.length这个值是不考虑中英文的,但是计算机对中英文的识别是 ...
- 进入MVC处理通道
这一篇主要讲如何通过Asp.net处理管道把请求交给MVC进行处理的(进入MVC处理通道). 首先来看一下经典的Asp.net处理管道的生命周期. 我们知道一个ASP.NET应用程序可以有多个Http ...
- cvCvtColor与cvtColor区别
用到了rgb转灰度图功能,查到两个函数,发现名字很像,功能也一样,但是参数类型不一样. 记录一下. 可以看声明,cvCvtColor是c语言风格接口. /* Converts input array ...
- 【LeetCode】110. Balanced Binary Tree
题目: Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced bin ...
- 错误代码是1130,ERROR 1130: Host xxx.xxx.xxx.xxx is not allowed to connect to this MySQL server 是无法给远程连接的用户权限问题
错误代码是1130,ERROR 1130: Host xxx.xxx.xxx.xxx is not allowed to connect to this MySQL server 是无法给远程连接的用 ...
- JavaWeb 后端 <九> 之 JDBC加强
一.大结果集的分页(重点,难点) 1.分批次查询:分页 2.基于数据库的分页:依赖的是数据库的分页语句(不同数据库是不同的) MySQL:每页显示10条. select * from XXX limi ...
- java 中的 instanceof
instanceof是Java的一个二元操作符,和==,>,<是同一类东东.由于它是由字母组成的,所以也是Java的保留关键字.它的作用是测试它左边的对象是否是它右边的类的实例,返回boo ...
- python学习笔记之运算符
目录 前言 软件环境 身份运算符 算术运算符 比较运算符 位移运算符 自变运算符 位运算符 逻辑运算符 成员关系运算符 Python真值表 最后 前言 在前面的博文介绍了Python的数据结构之后,接 ...
- for(int a:i)在java 编程中的使用
这种有冒号的for循环叫做foreach循环,foreach语句是java5的新特征之一,在遍历数组.集合方面,foreach为开发人员提供了极大的方便. foreach语句是for语句的特殊简化版本 ...
- 上传图片并生成相关缩略图-PHP
if(!empty($_FILES["fileField"]["name"])){//检测表单传递文件数据 $fileinfo = $_FILES[" ...