總目錄
從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本身並沒有在上面多做什么。