目標
- 掌握如何定義變量
- 掌握解構的內部機制
- 掌握字符串模版
let關鍵字
可以限制變量作用域
- Code 1:
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
適合使用使用在for循環中
- Code 2:
//使用 var會出現 閉包的情況
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
/*-------------------*/
//使用let自動解決閉包的問題
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
不存在變量提升
- Code 3:
console.log(foo); // 輸出undefined
console.log(bar); // 報錯ReferenceError
var foo = 2;
let bar = 2;
在代碼塊內，使用let命令聲明變量之前，該變量都是不可用的。這在語法上，稱為“暫時性死區”（temporal dead zone，簡稱TDZ）。
- Code 4:
if (true) {
// TDZ開始
tmp = 'abc'; // ReferenceError
console.log(tmp); // ReferenceError
let tmp; // TDZ結束
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}
考一考，下面2個代碼片段的結果如何？
- Code 5:
function bar(x = y, y = 2) {
return [x, y];
}
bar(); // ??
- Code 6:
function bar(x = 2, y = x) {
return [x, y];
}
bar(); // ??
同一個作用域不能聲明多次
- Code 7:
// 報錯
function () {
let a = 10;
var a = 1;
}
考一考
- Code 8:
var tmp = new Date();
function f() {
console.log(tmp);
if (false) {
var tmp = "hello world";
}
}
f(); // ？？
- Code 9:
var tmp = new Date();
function f() {
console.log(tmp);
if (false) {
tmp = "hello world";
}
}
f(); // ？？
可以舍棄匿名函數
- Code 10:
// IIFE寫法
(function () {
var tmp = ...;
...
}());
//
// 塊級作用域寫法
{
let tmp = ...;
...
}
為了兼容不同的es版本，請使用函數表達式
- Code 11:
// 函數聲明語句
{
let a = 'secret';
function f() {
return a;
}
}
// 函數表達式
{
let a = 'secret';
let f = function () {
return a;
};
}
const 申明常量
對于復合類型的變量，變量名不指向數據，而是指向數據所在的地址。const
命令只是保證變量名指向的地址不變，并不保證該地址的數據不變
- Code 12:
const foo = {};
foo.prop = 123;
foo.prop // 123
foo = {}; // TypeError: "foo" is read-only
- Code 13:
const a = [];
a.push('Hello'); // 可執行
a.length = 0; // 可執行
a = ['Dave']; // 報錯
變量賦值
疑惑點：
解構 ？？
解構允許使用默認值 ？？
Generator函數 ？？
yield ？？
Generator函數，原生具有Iterator接口。解構賦值會依次從這個接口獲取值 ？？
默認表達式使用惰性求值 ？？默認值是個函數 ？？ 有值的話 默認函數會執行么？？
對象的解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而不是前者 ？？
解構賦值時，如果等號右邊是數值和布爾值，則會先轉為對象 ？？
哪些 不能使用圓括號的情況 ？？
Code 14:
function f() {
console.log('aaa');
}
let [x = f()] = [1];
- Code 15:
let x;
if ([1][0] === undefined) {
x = f();
} else {
x = [1][0];
}
- 解構的作用
交換變量的值
從函數返回多個值
函數參數的定義
提取JSON數據
函數參數的默認值
遍歷Map結構
輸入模塊的指定方法
字符串擴展
模板字符串？
Code 16:
// 普通字符串
`In JavaScript '\\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入變量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
