
批改狀態(tài):合格
老師批語:模板字符串并非新事物, 是對原js中不規(guī)范的字符串進行了規(guī)范化, 其實這些在其它語言中不是事
// 1.1var可以重復聲明,let不能重復聲明
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); //出錯
// 2.1常量在一個腳本的聲明周期內(nèi)禁止更新,所以聲明的時候必須初始化
const APP_NAME = "管理系統(tǒng)";
// 2.2和let一樣不允許重復聲明
// 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)的功能--把集合數(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)聲明中設置默認值
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)
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);
// 設置默認值
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ù)中設置默認值
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);
1.了解let和const,var聲明間的區(qū)別
2.對于解構(gòu)的應用場景和使用有了些了解
微信掃碼
關(guān)注PHP中文網(wǎng)服務號
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號