文章目录
1. let与const
1.1 let
-
let声明的变量有块级作用域
-
let不存在变量提升
-
在同一作用域中，let声明的变量不能重复声明
-
let存在暂时性死区
// 说明解析器会提前解析，但是不会提升 let i = 10 if (true) { console.log(i); // Cannot access 'i' before initialization let i = 20 }
1.2 const
- 声明常量，不能被改变
- 具有块级作用域
- 使用const声明时必须要赋值
2. 解构赋值
2.1 解构赋值定义
通过解构赋值，可以将属性、值从对象或数组中取出，赋值给其他变量
2.2 数组解构
// 正常解构
let arr = [2, 4, 6]
let [a, b, c] = arr
console.log(a, b, c); // 2 4 6
// 数组长度大于要解构的长度
let arr1 = [2, 4, 6, 8]
let [a1, b1, c1] = arr1
console.log(a1, b1, c1); // 2 4 6
// 数组长度小于要解构的长度
let arr2 = [2, 4]
let [a2, b2, c2] = arr2 // c2相当于初始化未赋值
console.log(a2, b2, c2); // 2 4 undefined
2.3 对象解构
let obj = {
name: "小红",
age: 18
}
let { name, age } = obj
console.log(name, age); // 小红 18
// 别名方式(自定义名字)
let obj = {
name: "小红",
age: 18
}
// 因为对象是无序的，不使用别名的话，只能通过key去获取
let { name: myName, age: myAge } = obj
console.log(myName, myAge); // 小红 18
3. 箭头函数
3.1 基本语法
// 基本语法
let fn = (形参列表) => {
// 代码块
}
// 只有一个形参时，可以省略小括号
let fn1 = num => {
// 代码块
}
// 代码块只有return时，可以省略花括号
let fn2 = num => num * num
3.2 this指向
-
箭头函数中的this，取决于声明时所在的执行上下文
-
箭头函数的arguments没有实参
-
箭头函数中的this不能直接修改
-
箭头函数没有构造器，不能被new
-
箭头函数的this会因为外层执行上下文的改变而改变
// 下面两个打印，很明显箭头函数的this改变了 function fn() { console.log("普通函数的this:", this); return () => { console.log("箭头函数的this:", this); } } let obj = { name: "小红" } fn()() // 普通函数的this ==> window，箭头函数的this ==> window fn.call(obj)() // 普通函数的this ==> obj，箭头函数的this ==> obj
4. 展开语法
4.1 剩余参数
4.1.1 基本用法
// 因为箭头函数的arguments没有实参
// 可以使用剩余参数去获取
function fn(a, ...args) {
console.log(a); // 2
console.log(args); // [4, 6, 8, 9]
}
fn(2, 4, 6, 8, 9)
4.1.2 剩余参数配合解构赋值
// 数组解构
let arr = [2, 4, 6, 8]
let [a, ...args] = arr
console.log(a); // 2
console.log(args); // [4, 6, 8]
// 对象解构
let obj = {
name: "小红",
age: 18,
num: 100
}
let { name: myName, ...args } = obj
console.log(myName); // "小红"
console.log(args); // {age: 18, num: 100}
4.2 扩展运算符
4.2.1 可迭代对象
// 可以把数组的每一个都给展开
let arr = [2, 4, 6, 8]
console.log(...arr); // 2 4 6 8
console.log([...arr]); // [2, 4, 6, 8]
// 字符串也可以
let str = "1234"
console.log(...str); // "1" "2" "3" "4"
// 集合也可以
let set = new Set([2, 4, 6, 8])
console.log(...set); // 2 4 6 8
4.2.2 对象
// 对象不可以，可以发现展开的话，只能为可迭代对象
let obj = {
name: "小红",
age: 18,
count: 100
}
console.log(...obj); // Found non-callable @@iterator
// 但是可以添加对象中(浅拷贝)，再次添加到对象中没有使用迭代器
console.log({ ...obj }); // {name: '小红', age: 18, count: 100}
// 数组不行，只能为对象
console.log([ ...obj ]); // obj is not iterable
5. 模板字符串
5.1 基本语法
// 1.`` 表示模板字符串，在${}中可以放js代码(只能用不能写)
// 就是可以使用变量、调用函数，但是不能声明变量和声明函数
// 2.模板字符串可以换行，普通字符串不可以
let p = "我是p标签"
let span = "我是span标签"
let str = `<div>
<p>${p}</p>
<span>${span}</span>
</div>`
console.log(str);
// 和字符串一样，空字符也算长度
let str = ` `
console.log(str.length); // 16
