前言
Var 声明
- 可以在函数内部定义变量
- 可以在其它函数内部访问相同的变量
function f() {
var a = 1;
a = 2;
var b = g();
a = 3;
return b;
function g() {
return a;
}
}
f();
复制代码
作用域规则
- 对于var声明奇怪的作用域规则
- 在这里以为程序在执行时会先编译一遍所以x就已经被声明了
- 可以在包含它的函数,模块,命名空间或全局作用域内部任何位置被访问
function f(shouldInitialize: boolean) {
if (shouldInitialize) {
var x = 10;
}
return x;
}
f(true);
f(false);
复制代码
- var多次声明并不会报错
function sumMatrix(matrix: number[][]) {
var sum = 0;
for (var i = 0; i < matrix.length; i++) {
var currentRow = matrix[i];
for (var i = 0; i < currentRow.length; i++) {
sum += currentRow[i];
}
}
return sum;
}
复制代码
捕获变量怪异之处
- setTimeout 定时器,而且每一次的时间就加长了
- 执行的速度是非常快的,很快就循环完毕开启了所有的定时器
- 但是定时器的执行会延时,在最后执行时i已经是10了
- 所以所有的输出都是10,并不是想象的1......9
for (var i = 0; i < 10; i++) {
setTimeout(function() { console.log(i); }, 100 * i);
}
复制代码
- 解决方案,使用闭包,每一次的值都是传进去的就不会被改变
for (var i = 0; i < 10; i++) {
(function(i) {
setTimeout(function() { console.log(i); }, 100 * i);
})(i);
}
复制代码
Let声明
- 在let中和var还是有一定的区别的
- let中使用的是作用域或块作用域
- 所有在区块内没有定义是不可以使用的
- let并没有作用域提示的概念
块作用域
- 这里我们定义了2个变量a和b。 a的作用域是f函数体内,而b的作用域是if语句块
- 这就是我们提到的变量不会提升,所以不能使用
- 如果是用var这个就可以是用了
- 而且我们使用ts 在编译时就会报错的
- 直接会 error TS2304: Cannot find name 'b' 提示没有定义这个名称的变量
- 但是a为什么可以获取呢?因为a所在的作用域块大于if,而在外面的作用域是不能访问内部定义的变量
function f(input: boolean) {
let a = 100;
if (input) {
let b = a + 1;
return b;
}
return b;
}
复制代码
暂时性死区
- 未声明前无法读/写
- 很多人对这个let不了解就想当然的像var一样去用
- 但是虽然变量存在,在let声明前所定义的所有代码都是无效的,因为let有着暂时性死区(声明前的所有区域都是)
- ts中编译也是会爆出来的
a++;
let a;
复制代码
- 注意一点,我们仍然可以在一个拥有块作用域变量被声明前获取它。 只是我们不能在变量声明前去调用那个函数。 如果生成代码目标为ES2015,现代的运行时会抛出一个错误;然而,现今TypeScript是不会报错的。
function foo() {
return a;
}
foo();
let a;
复制代码
重定义及屏蔽
重定义
- 我们在使用var 时可以无限的重复声明最后只会得到一个(会出现bug)
- let在同一作用域下是不可以重复声明的
- 并不是要求两个均是块级作用域的声明TypeScript才会给出一个错误的警告。
- 并不是说块级作用域变量不能用函数作用域变量来声明。 而是块级作用域变量需要在明显不同的块里声明。
let x = 10;
let x = 20;
function f(x) {
let x = 100;
}
function g() {
let x = 100;
var x = 100;
}
function g() {
let x = 100;
console.log('fn g x',x)
if (true) {
let x = 5;
console.log('fn if x',x)
}
console.log('fn g x',x)
}
function f(condition, x) {
if (condition) {
let x = 100;
return x;
}
return x;
}
f(false, 0);
f(true, 0);
复制代码
屏蔽
- 在一个嵌套作用域里引入一个新名字的行为称做屏蔽。 它是一把双刃剑,它可能会不小心地引入新问题,同时也可能会解决一些错误
- 使用let重写sumMatrix上面var写过的
- 在这里 在重新定义的数据,会出现一个数据屏蔽把前面定义的数据屏蔽掉
- 这样解决了数据不会相互影响的问题
-
function sumMatrix(matrix: number[][]) {
let sum = 0;
for (let i = 0; i < matrix.length; i++) {
var currentRow = matrix[i];
for (let i = 0; i < currentRow.length; i++) {
sum += currentRow[i];
}
}
return sum;
}
复制代码
块级作用域变量的获取
- 在我们最初谈及获取用var声明的变量时,我们简略地探究了一下在获取到了变量之后它的行为是怎样的。 直观地讲,每次进入一个作用域时,它创建了一个变量的 环境。 就算作用域内代码已经执行完毕,这个环境与其捕获的变量依然存在。
- 因为我们已经在city的环境里获取到了city,所以就算if语句执行结束后我们仍然可以访问它。
function theCityThatAlwaysSleeps() {
let getCity;
if (true) {
let city = "Seattle";
getCity = function() {
return city;
}
}
return getCity();
}
复制代码
- 当let声明出现在循环体里时拥有完全不同的行为。 不仅是在循环里引入了一个新的变量环境,而是针对 每次迭代都会创建这样一个新作用域。 这就是我们在使用立即执行的函数表达式时做的事,所以在 setTimeout例子里我们仅使用let声明就可以了。
- 这样就可以理想的输出1-9了
for (let i = 0; i < 10 ; i++) {
setTimeout(function() {console.log(i); }, 100 * i);
}
复制代码
const 声明
- 它们与let声明相似,但是就像它的名字所表达的,它们被赋值后不能再改变。 换句话说,它们拥有与 let相同的作用域规则,但是不能对它们重新赋值
const numLivesForCat = 9;
const kitty = {
name: "Aurora",
numLives: numLivesForCat,
}
kitty = {
name: "Danielle",
numLives: numLivesForCat
};
kitty.name = "Rory";
kitty.name = "Kitty";
kitty.name = "Cat";
kitty.numLives--;
复制代码
解构【es6特性】
数组解构
- 相当于使用了索引,但更为方便
- 你可以在数组里使用...语法创建剩余变量
let input = [1, 2];
let [first, second] = input;
console.log(first);
console.log(second);
first = input[0];
second = input[1];
function f([first, second]: [number, number]) {
console.log(first);
console.log(second);
}
f(input);
let [first, ...rest] = [1, 2, 3, 4];
console.log(first);
console.log(rest);
let [first] = [1, 2, 3, 4];
console.log(first);
let [, second, , fourth] = [1, 2, 3, 4];
复制代码
对象解构
let o = {
a: "foo",
b: 12,
c: "bar"
};
let { a, b } = o;
let { a, ...passthrough } = o;
let total = passthrough.b + passthrough.c.length;
复制代码
属性重命名
- 在对象中结构我们可以赋于其他于属性不同的名字
- 这里就会有疑惑ts里面‘:’后面不是加的是指示类型么
- 如果你想指定它的类型, 仍然需要在其后写上完整的模式。
let { a: newName1, b: newName2 } = o;
let newName1 = o.a;
let newName2 = o.b;
let {a, b}: {a: string, b: number} = o;
复制代码
默认值
- ? 可选属性
- 在指定类型前面加?号代表可以不传
- 在结构时用=给定默认值
- 默认值可以让你在属性为 undefined 时使用缺省值
function keepWholeObject(wholeObject: { a: string, b?: number }) {
let { a, b = 1001 } = wholeObject;
}
let wholeObject = {a:'abc'}
console.log(keepWholeObject(wholeObject))
复制代码
函数声明
type C = { a: string, b?: number }
function f({ a, b }: C): void {
}
复制代码
- 可以使用结构的同时使用默认值
- 通常情况下更多的是指定默认值,解构默认值有些棘手。 首先,你需要在默认值之前设置其格式
- 官网的例子并不能实现
function f({ a="", b=0 } : {a?:String,b?:Number}): void {
// ...
console.log(a);
console.log(b);
}
f({});
复制代码
展开
- 展开操作符正与解构相反。 它允许你将一个数组展开为另一个数组,或将一个对象展开为另一个对象
- 这样我们合并数组/对象就方便了很多
- 但是展开对,对象的缺陷还是有的
- 两个对象展开相同还是对象,相同的属性就会覆盖
let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];
let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = { ...defaults, food: "rich" };
复制代码
- 对象展开还有其它一些意想不到的限制。 首先,它仅包含对象 自身的可枚举属性。 大体上是说当你展开一个对象实例时,你会丢失其方法:
class C {
p = 12;
m() {
}
}
let c = new C();
let clone = { ...c };
clone.p;
clone.m();
复制代码
后记
- 这个就是我学习Ts的第二天的笔记,欢迎更多的同行大哥指导交流
- 欢迎进入我的博客:https://yhf7.github.io/
- 如果有什么侵权的话,请及时添加小编微信以及qq也可以来告诉小编(905477376微信qq通用),谢谢!