ES6中的一些基礎語法(let,const,解構賦值，模板字串，物件的擴充套件)
阿新 • • 發佈：2020-10-18
1. let和const
1）let 宣告的變數
let特點：
1.沒有變數提升的過程，必須先宣告再使用
2.不可以重新宣告，可以重新賦值；
3.會產生塊級作用域
4.暫時性死區(因為會產生塊級作用域和必須先宣告再使用)
2）const 宣告的常量
const特點：
1.沒有變數提升的過程，必須先宣告再使用
2.不可以重新宣告，也不可以重新賦值；（注意：引用型別）
3.會產生塊級作用域
4.暫時性死區(因為會產生塊級作用域和必須先宣告再使用)
5.初始化必須賦值
2.解構賦值：
1）概念：陣列和物件中，按照一定的模式提取，賦值給變數；這個過程，叫做解構賦值；
2）模式匹配
3）陣列的解構賦值：有序集合
特點：
-
不完全解構，值比變數多
-
解構失敗,變數比值多
-
預設值:1）解構失敗，預設值生效
2）值為undefined，預設值生效
3）注意：值null預設值不生效
// let a = 10; // let b = 20; // let c = 30; // 模式匹配 // 陣列：有序的集合 let [a, b, c] = [10, 20, 30]; // console.log(a, b, c) // 特點: //1. 不完全解構，值比變數多 // let [a] = [10, 20]; // console.log(a) // 預設 // let [, , , a] = [10, 20, 30, 40]; // console.log(a) // 2. 解構失敗,變數比值多 // let [a, b] = [10]; // console.log(a, b) // 3.預設值: // 1) 解構失敗，預設值生效 // let [a, b = "hello"] = [10]; //console.log(a, b) // 2）值為undefined，預設值生效 // let [a, b = "hello"] = [10, undefined]; // console.log(a, b) // 3) 注意：值null預設值不生效 // let [a, b = "hello"] = [10, null]; // console.log(a, b) // 適用場景：值的交換 (排序) let a = 10; let b = 20; [a, b] = [b, a]; console.log(a, b); // 20 10
4）物件解構賦值：無序的集合
特點：
-
不完全解構，值比變數多
-
解構失敗,變數比值多
-
預設值: 1）解構失敗，默認值生效
2）值為undefined，預設值生效
3）注意：值null預設值不生效
// let a = 10; // let obj = { // age: a // } // console.log(obj) // let {age:a} = {age:20}; // console.log(a) // 屬性名和變數相同的情況下，可以簡寫 // let a = 10; // let obj ={ // a:a // } // let { // a: a // } = { // a: 20 // }; // console.log(a) // 20 // let a = 10; // let obj = { // a // }; // console.log(obj) // {a : 10} // let {a} = {a:10}; // console.log(a) //1.不完全解構，值比變數多 // let { // a // } = { // a: 10, // b: 20 // }; // console.log(a) // 2.解構失敗,變數比值多 // let { // a, // b // } = { // a: 10 // }; // console.log(a, b) // 3. 預設值 // 1) 解構失敗，預設值生效 // 2）值為undefined，預設值生效 // 3) 注意：值null預設值不生效 // let { // a, // b = "hello" // } = { // a: 10, // b: null // }; // console.log(a, b) // 案例： // let [,,{a}] = [10,20,{a:'hello'}]; // console.log(a) // 適用場景： 資料讀取 let data = { name: "xiaoming", age: 20, address: "北京", sex: "男" } let { name, age, address, sex } = data; console.log(name, age)
3.模板字串:
1）語法：反引號，${變數}
2）優點：
1. 換行，回車 不需要使用轉義符，直接可以使用html中的結構；
2. 不需要考慮單雙引號的巢狀問題，但是不可以反引號套反引號；
3. 可以直接寫js語句
4. 簡潔，直接
<ul> <!-- <li> <h1></h1> </li> --> </ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script> let arr = ["北京", "天津", "上海", "西安"]; let str = ""; arr.forEach(function(item, index) { // str += "<li class='demo'>" + item + "</li>"; // str += `<li class='demo'>${item}</li>`; str += `<li> <h1>${index%2==0?item:""}</h1> </li>`; }); console.log(str); $("ul").html(str); </script>
4.物件擴充套件:
1）物件簡寫：
屬性的簡寫：變數名和屬性名相同
方法的簡寫：省略冒號和function
2）物件屬性表示式: [] 可以 變數，數字，表示式，字串
3）物件的拼接：Object.assgin()
4） Object.keys() 返回的是一個數組，裡面是key
Object.values() 返回的是一個數組，裡面是value
// 1. 簡寫 // 物件屬性的簡寫：屬性名和變數名相同的情況下簡寫 // 物件方法的簡寫：直接省略冒號和function關鍵字 // let a = 10; // let obj = { // a, // fn() { // console.log("fn") // } // }; // console.log(obj) // obj.fn() // 2. 物件屬性表示式: [] 可以是變數，字串,表示式,數字 // let a = "hello" // let obj = { // [a]: "a", // ["a"]: "a", // "b": "world", // 10: "你好" // } // obj[1 + 2] = "aaa" // console.log(obj["10"]) // 3. 物件拼接 // 陣列複習： // let arr1 = [1, 2]; // let arr2 = [3, 4]; // let x = arr1.push(arr2) // 可以改變原陣列 // let arr3 = arr1.concat(arr2); // 不可以改變原陣列 // console.log(arr3) // console.log(x) // let o1 = { // a: 10 // } // let o2 = { // b: 20 // } // 把o2拼接到o1裡面,第一個引數是被拼接元素，從第二個引數開始就是拼接元素 // let o3 = Object.assign(o1, o2, { // c: 30 // }); // console.log(o1) // console.log(o2) // console.log(o3) // 4.物件 // Object.keys(obj) 返回的是陣列，數組裡面是物件的屬性 // Object.values(obj) 返回的是陣列，數組裡面是物件的值 let obj = { a: 10, b: 20, c: 30 } console.log(Object.keys(obj)) console.log(Object.values(obj))