ts的变量声明有var,let和const,这尼玛完全跟es6一样嘛。就稍微介绍一下。

大多数js开发者对于var很熟悉了,原生js里没有块级作用域,只有函数作用域和全局作用域,还存在var的变量提升的问题,导致一些不熟悉js的开发者会发现一些怪异事件。点击查看关于es6的let与const

let声明

let声明和var一样的写法,大家看前面的博客里面相信也看到了。

拣重要的说,let和var的区别就是let使js实现了它的块级作用域,即词法作用域块作用域。

而且它不存在变量提升。

function f(input: boolean) {
let a = 100; if (input) {
// Still okay to reference 'a'
let b = a + 1;
return b;
} // Error: 'b' doesn't exist here
return b;
}

内部块一样能访问外部块,反之就不行了。这一特性使for循环的计数器就比较好用了,

for(let i = 0; i < arr.length; i++){}

console.log(i)
//ReferenceError: i is not defined
// 报错
function () {
let a = 10;
var a = 1;
} // 报错
function () {
let a = 10;
let a = 1;
}

let是不允许重复声明的。

需要注意的是,现在的ts编译器都是吧let直接编译为var,所以let的特性在浏览器支持之前还是无法试用的。

在js里面输出10个10的例子,在let下就不一样了。

for (let i = 0; i < 10 ; i++) {
setTimeout(function() {console.log(i); }, 100 * i);
}

不仅是在循环里引入了一个新的变量环境,而是针对每次迭代都会创建这样一个新作用域。 这就是我们在使用立即执行的函数表达式时做的事。

他会和我们预想的一样输出1-10。

const

const和let基本一致,只是const声明的变量被赋值后不能再改变(所以对于const来说,只声明不赋值,就会报错),作用域同let。

const numLivesForCat = 9;
const kitty = {
name: "Aurora",
numLives: numLivesForCat,
} // Error
kitty = {
name: "Danielle",
numLives: numLivesForCat
}; // all "okay"
kitty.name = "Rory";
kitty.name = "Kitty";
kitty.name = "Cat";
kitty.numLives--;
const a = [];
a.push("Hello"); // 可执行
a.length = 0; // 可执行
a = ["Dave"]; // 报错

这个数组和对象本身是可写的,但是如果将另一个数组赋值给const变量,就会报错。

使用的法则:

所有变量除了你计划去修改的都应该使用const

Typescript学习笔记(三)变量声明及作用域的更多相关文章

  1. Typescript 学习笔记三:函数

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  2. ES6学习笔记之变量声明let,const

    最近用淘宝的weex做了个项目,最近稍微闲下来了.正好很久没有接触RN了,所以趁这个机会系统的学习一下ES6的相关知识. 孔子说:没有对比就没有伤害.所以我们要拿ES6和ES5好好对比的学习.这样才能 ...

  3. 批处理学习笔记3 - 变量声明和goto代替while循环

    批处理中没有while循环,只能用goto代替.下面是代码 @echo off set /a i = 0 :again echo %i% set /a i= %i% + 1 if %i% lss 10 ...

  4. scala学习笔记:变量声明中的模式

    先看个正常的写法: scala> val x = 1 x: Int = 1 体会一下元组的写法: scala> val (x,y,z)=(1,2,3) x: Int = 1 y: Int ...

  5. typescript学习笔记(三)---接口

    关于第二章的学习笔记是变量声明. 接口:TypeScript的核心原则之一是对值所具有的结构进行类型检查. 它有时被称做“鸭式辨型法”或“结构性子类型化”. 在TypeScript里,接口的作用就是为 ...

  6. Typescript 学习笔记二:数据类型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  7. Typescript 学习笔记四:回忆ES5 中的类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  8. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  9. Typescript 学习笔记六:接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  10. Typescript 学习笔记五:类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

随机推荐

  1. vue实现双向数据绑定之Object.defineProperty()篇

    前言 vue.js中使用ES5的Object.defineProperty()实现数据的双向绑定 Object.defineProperty()原理 Object.defineProperty()可以 ...

  2. Vue+iview实现添加删除类

    <style> .tab-warp{ border-bottom: solid 1px #e0e0e0; overflow: hidden; margin-top: 30px; posit ...

  3. jq简单仿上传文件

    html: <div> <input id="lefile" type="file" style="display:none&quo ...

  4. Django 2.11 静态页面404 解决

    在settings中配置 STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR,"static"), ...

  5. 微信小程序支付功能

    API:wx.requestPayment() { } https://blog.csdn.net/qishubiao/article/details/80804052

  6. vue循環語句

    迭代數組: v-for="site in sites”,sites表示源數組名,site表示數組元素: 迭代對象: v-for=“value in Object”, v-for=" ...

  7. C-LODOP设置同一页面 手机电脑都打印

    C-Lodop有四种角色,1:客户端本地打印方式客户端访问web,调用客户端本地的打印机进行打印,这时候调用的安装在客户端本地的c-lodop服务,实际调用的是http://Localhost:800 ...

  8. Lodop背景图无图片时显示放大叉号问题

    正常情况下,如果指定图片路径中,图片不存在或指定错误的路径,会因为找不到图片显示叉号,Lodop背景图如果设置了背景图宽度高度控制,显示的叉号也会被相应的放大,形成放大的模糊的图案,看起来就像是黑色边 ...

  9. oracle逗号分隔函数

    SELECT wm_concat(GZTYPE) str FROM TB_FDN_WORKKIND

  10. Visual Studio 2017 and Swagger: Building and Documenting Web APIs

    Swagger是一种与技术无关的标准,允许发现REST API,为任何软件提供了一种识别REST API功能的方法. 这比看起来更重要:这是一个改变游戏技术的方式,就像Web服务描述语言一样WSDL( ...