ES6中的一些基础语法(let,const,解构赋值，模板字符串，对象的扩展)
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))
