let/const模板和解構(gòu)

let聲明

// 1.1var可以重復(fù)聲明，let不能重復(fù)聲明
let a;
let a;
// 1.2var會有變量聲明提升，let不會，所以也會有可能出現(xiàn)暫時性死區(qū)
console.log(username); //出錯，因為不會出現(xiàn)變量提升
let username = "小明";
function func() {
    let username = "小紅";
    console.log(username);
}
func();
console.log(username);
// 1.3支持塊作用域
if (true) {
    let price = 30;
}
// 在外面訪問不到price
console.log(price); //出錯

const聲明

// 2.1常量在一個腳本的聲明周期內(nèi)禁止更新，所以聲明的時候必須初始化
const APP_NAME = "管理系統(tǒng)";
// 2.2和let一樣不允許重復(fù)聲明
// 2.3和let一樣支持塊作用域
// 以后聲明變量首選const，如果出現(xiàn)修改數(shù)據(jù)出現(xiàn)錯誤時在改為let
// 如果聲明對象或者數(shù)組時強烈推薦const
const arr = [10, 20, 30];
arr[0] = 50;
arr[1] = 40;  //這樣更改不會出錯
arr[2] = 60;
arr = [10, 40, 70]; 這樣才會報錯
console.log(arr);
// 更改數(shù)組或?qū)ο笾械膶傩?，值不會報錯，只有重新賦值對象或數(shù)組會報錯
const obj = { x: "admin", y: 123 };
obj.y = 456;
console.log(obj.x, obj.y);

模板解構(gòu)

• 解構(gòu)對象

// 解構(gòu)的功能--把集合數(shù)據(jù)按規(guī)則打散到獨立變量中
const product = {
    name: "手機",
    price: 4999,
};
// 傳統(tǒng)方法
let name1 = product.name;
let price1 = product.price;
console.log("%s: %c %d", name1, "color:lightgreen", price1);
// 模板解構(gòu) （等號左邊為解構(gòu)變量聲明）--let { name, price }
let { name, price } = product;
console.log("%s: %c %d", name, "color:lightblue", price);
// 沒有輸入別名的情況下，解構(gòu)對象時模板解構(gòu)變量名必須和對象屬性名相同
// 解構(gòu)變量必須初始化，不能只聲明（let{a,b};這樣是錯誤的）
// 解構(gòu)表達式
// 場景1 更新變量數(shù)據(jù)
let a = 10;
let b = 20;
console.log(a, b);
// 用表達式更新數(shù)據(jù)
let obj = {
    a: 100,
    b: 200,
};
({ a, b } = obj);
console.log(a, b);
// 場景2
function func({ a: x, b: y }) {
    console.log(x + y);
}
func(obj);
// 解構(gòu)聲明中設(shè)置默認值
const obj1 = {
    objName: "admin",
    objEmail: "adming@qq.com",
};
const { objName, objEmail = "aaa@qq.com", objAge = 20 } = obj1;
// 有自定義的值則賦自定義值，沒有則賦默認值，自定義的值優(yōu)先級更高
console.log(objName, objEmail, objAge);
// 解構(gòu)聲明中的別名
const obj2 = {
    objName: "小明",
    objEmail: "xiaoming@qq.com",
};
// 直接解構(gòu)的話會和上面同名報錯所以要用別名
const { objName: objName1, objEmail: objEmail1, objAge: objAge1 = 20 } = obj2;
console.log(objName1, objEmail1, objAge1);
嵌套對象解構(gòu)
const obj = {
    name: "admin",
    course: {
        php: {
            level: "basis",
            grade: 80,
        },
        javascript: {
            level: "advance",
            grade: 70,
        },
    },
};
// 模板解構(gòu)
const {
    course: { php },
} = obj;
console.log(php);
// 嵌套對象的多次解構(gòu)
const {
    name,
    course,
    course: { php: objphp },
    course: { php: { level } },
} = obj;
console.log(name, course, objphp, level);

對象的嵌套解構(gòu)

• 數(shù)組解構(gòu)

const arr = [1, "admin", "admin@qq.com"];
// 模板解構(gòu)
const [id, name, email] = arr;
console.log(id, name, email);
// 也可以只解構(gòu)其中一兩個值
const arr1 = [2, "admin22", "admin22@qq.com"];
const [, username, email1] = arr1;
console.log(username, email1);
// 數(shù)組解構(gòu)表達式
// 更新數(shù)據(jù)
let a = 10;
let b = 20;
let c = [5, 37];
// 更新a和b的值
[a, b] = c;
console.log(a, b);
// 設(shè)置默認值
const arr2 = ["iPhone", "xmax"];
// 和解構(gòu)對象一樣自定義的值優(yōu)先級更高，有自定義值就賦自定義的值
let [brand, model, color = "green"] = arr2;
console.log(brand, model, color);
// 在函數(shù)參數(shù)中使用數(shù)組解構(gòu)
function func([x, y]) {
    console.log(x + "*" + y + "=" + (x * y));
}
func(c);
// 也可以在參數(shù)中設(shè)置默認值
function func1([x, y, z = 6]) {
    console.log(x + "*" + y + "*" + z + "=" + (x * y * z));
};
func1(c);
// 數(shù)組的嵌套解構(gòu)
const arr3 = [10, [20, [30], 40], 50];
// 解構(gòu)
const [a1, [a2, [a3], a4], a5] = arr3;
console.log(a1, a2, a3, a4, a5);

總結(jié)

1.了解let和const，var聲明間的區(qū)別
2.對于解構(gòu)的應(yīng)用場景和使用有了些了解

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語：模板字符串并非新事物, 是對原js中不規(guī)范的字符串進行了規(guī)范化, 其實這些在其它語言中不是事