从C#到TypeScript - 变量
总目录
从C#到TypeScript - 变量
TypeScript的变量声明和ES6差不多,相比之前主要是多了let和const
为什么不用var
不管是TypeScript还是ES6都会兼容以前的javascript,所以在TypeScript里var也还是保留了。
虽然C#里也有var,但和JavaScript的可不一样,var在javascript里会有一些奇怪的表现,比如会置前,而且作用域是整个函数,可以不写var来声明变量,然后变量变成全局。
这些都可能会带了一些不容易注意到的问题。
比如经典的:
for (var i = 0; i < 10; i++) {
setTimeout(function() { console.info(i); }, 100);
}
结果并不是期望的0, 1, 2, 3...,跑出来的结果全是10,这是因为var出来的i的作用域是整个函数。
这就导致循环完成后i变成10,setTimeout内的函数才被执行,所以结果都是10了。
虽然可以用立即完成函数把重新构建一个作用域,但毕竟用起来麻烦,而且不符合人的思维,所以就有了let。
使用let声明变量
let主要是对var的一个代替,用let更符合人思考的过程,这才和C#var的功能是差不多。
let的用法和var是一样的:
let str = 'string';
let的作用域是块级作用域,比如上面的循环,用let声明i的话就可心得到期望的值
for (let i = 0; i < 10; i++) {
setTimeout(function() { console.info(i); }, 100);
}
这里得到的结果就是0, 1, 2....9。
所以建议还是抛弃var,选择let。
const
C#也有const,意义上差不多,都是常量,不想变量被改变。
const str = 'string';
str = 'new string'; // 编译不了
一般情况下,主张确定不变的变量用const声明来增加代码健壮性和可读性。
解构
所谓解构,就是把对象或数组里的成员分解出来。
比如数组:
let [first, second] = [1, '2', false];
console.info(`first: ${first}`);
这里就把数组的第一个成员和第二个成员分别用first和second解构出来,就省去了分别声明两个变量,并用下标取数组里的值来赋值了。
这也可以方便的提供一些功能,比如交换数组里的两个值,按以前的做法需要借助下中间变量,现在就不需要了:
let [first, second] = [second, first];
可以利用...扩展符号来解开数组,再并入其他数组。
let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];
console.info(newArr); // 1, 2, 3, 4, 5
对象同样可以被解构:
class Test{
str = "string";
int = 1;
bool = false;
func(){
console.info('func');
}
}
let {str, bool, func} = new Test(); //名字必须和类里的保持一致
let {str: newStr} = new Test(); //通过这种方式可以把str改为newStr
console.info(`${str}, ${bool}`);
func();
...符号同样可以用于对象,不过只能解开可枚举的变量,所以函数不会解出来。
延用上面的class:
let {str, ...other} = new Test();
console.info(other.int); // 输出1
console.info(other.func()); // 编译错误,...符号不能解出函数
还可以加上默认值,当解出来的值是undefined时会用上默认值
class Test{
empty;
str = '';
}
let {empty='empty', str='str'} = new Test();
console.info(`${empty}, ${str}`); // 输出 empty, ,因为str有值,所以用原始的''
以上就是常用的变量声明及赋值的使用方法,不过基本都是ES6的标准语法,TypeScript本身并没有在上面多做什么。
从C#到TypeScript - 变量的更多相关文章
- Typescript - 变量类型
原文:TypeScript基本知识点整理 一.number let num1 : number = 20; let num2 : number = 175.5; let a1 : number = I ...
- Typescript变量声明
let 和 const 是 javascript 里面最新的变量声明方式,let 与 var 很相似,而 const 是 let 的增强,能阻止对一个变量的再次赋值. var 声明 弱类型:var 声 ...
- typescript变量声明(学习笔记非干货)
var a=10; function f(){ var message="hello,world"; return message; } function f(){ a=10; r ...
- TypeScript 变量声明(二)
ES6 中,变量声明一共有6种,分别是var.function .let.const.class和import. let 基本语法:let 变量名 :类型.其中类型不是必须的. 1.用于声明变量,其用 ...
- C# vs TypeScript - 高级类型
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 从C#到TypeScript - 接口
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 从C#到TypeScript - 类
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 从C#到TypeScript - function
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 从C#到TypeScript - 装饰器
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
随机推荐
- Eclipse 的 git 插件操作 "代码提交"以及"代码冲突"
面向对象:曾经使用过SVN的同学. (因为Git 它 可以说是双重的SVN (本地一个服务器,远程一个服务器)),提交代码要有两次步骤,先提交到本地服务器,再把本地服务器在提交到远程服务器. 所以连S ...
- ZOJ 3931 Exact Compression
题目看了半小时才看懂的. 题意:首先根据给出的序列,构造出哈夫曼树,构造出来的是一棵二叉树,每个节点都有一个权值,每个节点的两个儿子只能取一个,问能否使取出来的节点权值之和刚好等于e. 这样一分析就很 ...
- chorme加减乘除浮点数处理
在处理简单的1-0.7的时候发现chorme给的结果竟然是0.30000000000000004,瞬间蛋疼了,这数据能用?! 然后去百度找到了简单的两个数的加减乘除,然后修改了下,除了除法都可以多个数 ...
- 数据库 Mysql事务详解
Mysql事务 mysql的事务默认是自动提交的,也就是你提交一个query,他就直接执行!我们可以通过 禁止自动提交 开启自动提交 //mysql事务 #include <stdio.h> ...
- Visual Studio 2012 开发环境配置+控制台工具+桌面应用程序
一.界面布局视图设置 1.窗口的布局.控制台窗口运行恢复到开发环境的设置方法 也可以保存好设好的个性化设置,导入设置: 2.视图|服务器资源管理器(sever explorer) 可以访问数据源.服务 ...
- Oracle数据库用户权限和管理员权限
一.如何查看权限 查看用户权限 1. oracle用户查看自己的权限和角色 select * from user_tab_privs; select * from user_role_ ...
- OpenCV点滴2
明天回家了-- 昨天去见了老师,去之前告诉自己不要紧张,去了后还是紧张了,语无伦次,很没礼貌--(不敢看老师的眼睛) 刚才妈打电话说让我早点回去,不知道为什么,在空荡荡的宿舍里听到妈的声音,眼泪会夺眶 ...
- 职业定位(移动端、ios开发、Android开发)
移动端 移动端webapp开发必备知识:http://www.chinaz.com/manage/2012/1128/283974.shtml 设计一款好的移动App,有哪些基本规则?http://w ...
- 纯css三角形
三角形原理: 盒子c内容width为0,height为0,盒子给一定宽度的border,分别为四边的border设置不同的颜色,则可以得到不同样式的三角形举个简单的栗子:CSS代码 .box1{ wi ...
- jQuery原型技术分解
jQuery原型技术分解 起源----原型继承 用户过javascript的都会明白,在javascript脚本中到处都是 函数,函数可以归置代码段,把相对独立的功能封闭在一个函数包中.函数也可以实现 ...