05-ES6语法总结和模块导入导出
var let 和 const
# var 以后尽量少用，函数作用域
# 在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。
# ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束
# "暂时性死区"（Temporal Dead Zone，简称 TDZ）是指在 ES6 中使用 let 或 const 声明变量时，变量存在但无法访问的区域。这种行为是为了在 JavaScript 中引入块级作用域而设计的。
# 在 JavaScript 中，使用 var 声明的变量在其声明语句之前就可以被访问，这种行为称为"变量提升"。而在使用 let 或 const 声明变量时，变量虽然存在于作用域中，但是在声明语句之前访问这些变量会导致引发 ReferenceError 异常。
# 暂时性死区的产生原因是，let 和 const 声明的变量在进入作用域时就已经被创建，并且被绑定到了该作用域中，但是在变量的声明语句之前，访问这些变量会进入暂时性死区，因为此时变量尚未初始化
# const可以修改对象内部的值
<script>
var name = "小满"
console.log(window.name) // 小满
console.log(name) // 小满
console.log(this.name) // 小满
let hobby = "摸鱼"
console.log(hobby) // 摸鱼
console.log(window.hobby) // undefined
</script>
https://www.freecodecamp.org/chinese/news/var-let-and-const-whats-the-difference/
箭头函数
# 1 简化代码
# 2 箭头函数内部，没有自己的this---》使用上一级的
let f=()=>{}
# 3 this指向问题
# 1 在全局上下文中，this 指向全局对象，在浏览器环境中通常是 window 对象，在 Node.js 中是 global 对象
console.log(this) # window 对象
# 2 函数调用：
# 2.1 如果函数作为普通函数调用，this 指向全局对象（在严格模式下为 undefined）
# 2.2 如果函数作为对象的方法调用，this 指向调用该方法的对象。
# 3 构造函数：
在构造函数中，this 指向新创建的实例对象
# 4 箭头函数：
箭头函数的 this 指向定义时所在的作用域的 this 值，而不是调用时的 this 值。换句话说，箭头函数的 this 是词法作用域，而不是动态作用域
# 5 DOM 事件处理函数：
在 DOM 事件处理函数中，this 指向触发事件的 DOM 元素
#6 ES6 类方法：
在 ES6 类方法中，this 指向调用该方法的对象实例
模板字符串
let name = "小满"
console.log(`你好，我是${name}`) // 你好，我是小满
解构赋值
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
- 解构赋值允许从数组或对象中提取数据，并将其赋值给变量。
- 解构赋值可以方便地交换变量的值，同时还支持默认值。
// 解对象
let user = {name: "小满", age:3, hobby:"摸鱼"}
console.log(user.name) // 小满
let {name, age, hobby, gender} = user
console.log(name, age, hobby, gender) // 小满 3 摸鱼 undefined
let {name, age, hobby, gender="保密"} = user
console.log(name, age, hobby, gender) // 小满 3 摸鱼 保密
// 解数组
hobbyArr = ['摸鱼', "抢人头", "逃课"]
let h1 = hobbyArr[0]
let h2 = hobbyArr[1]
let h3 = hobbyArr[2]
console.log(h1, h2, h3) // 摸鱼 抢人头 逃课
let [a, b, c] = hobbyArr
console.log(a, b, c) // 摸鱼 抢人头 逃课
let [a1, a2, a3, a4] = hobbyArr
console.log(a1, a2, a3, a4) // 摸鱼 抢人头 逃课 undefined
// 交换变量
let a = 1;
let b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
// 解析函数返回的数组
function f(){
return ["小满", "大乔", "阿珂"]
}
const [name1, name2, name3] = f()
console.log(name1, name2, name3); // 小满 大乔 阿珂
// 忽略某些返回值
// 大乔老欺负我，太讨厌了 (〃＞目＜) 忽略掉她
function f(){
return ["小满", "大乔", "阿珂"]
}
const [name1, , name2] = f()
console.log(name1, name2); // 小满 阿珂
// 忽略全部返回值
function f(){
return ["小满", "大乔", "阿珂"]
}
const [, ,] = f()
console.log(name1, name2); // name1 is not defined
默认参数
function userInfo(name, age=3){
console.log(name, age);
}
userInfo("小满") // 小满 3
展开运算
// 展开运算
const [name, age, ...{pop, push}] = [1, 2]
console.log(name); // 1
console.log(age); // 2
console.log(pop); // function pop()
console.log(push); // function push()
const nameList = ["小满", "大乔", ...["阿珂", "海月"]]
console.log(nameList); // ["小满", "大乔", "阿珂", "海月"]
const [a, b, ...[c, d]] = [1, 2, 3, 4]
console.log(a, b, c, d); // 1 2 3 4
const userInfo = {name:"小满", age:3}
const profile = {hobby:"摸鱼", gender:"女", ...userInfo}
console.log(profile); // {hobby: "摸鱼", gender: "女", name: "小满", age: 3}
模块化
- 必须要先导出，才能导入正常使用。
- 默认导出只能导出一次，也就是只能有一次
export - 如果导入命令写在js内部，必须加上
<script type="module">导入命令</script> - 如果在vue中，不需要添加
type=module，直接写就可以了，如果在HTML页面中的js导入，才使用type=module。 - 使用import * as xx 可以导入全部并起一个别名，后续使用别名操作就可以了
默认导出和导入
// ./xm.dq.js
// 被导出的js文件
let name = "大乔"
function add(a, b){
return a + b
}
// 完整写法
// export default {
// name: name,
// add: add
// }
// 省略写法 推荐
// 必须要先导出
export default{
name,
add
}
<!-- 正常导入使用 js内导入不要忘记加 module -->
<script type="module">
import dq from "./xm/dq.js"
console.log(dq.name); // 大乔
console.log(dq.add(1, 2)); // 3
</script>
命名导出和导入
// 1. 依次导出
export let name = "小满"
export function add(a, b){
return a + b
}
export let hobby = ['摸鱼', "逃课"]
<!-- 2. 导入 -->
<script type="module">
import {name, hobby} from "./xm/utils.js"
console.log(name); // 小满
console.log(hobby); // ["摸鱼", "逃课"]
</script>
import http from "axios"
http代指的就是axios的对象，后续使用http也能使用，一个别名
导入全部 * as xx
<!-- 导出命令不变 -->
<script type="module">
import * as xm from './xm/utils.js'
console.log(xm.name); // 小满
console.log(xm.hobby); // ["摸鱼", "逃课"]
console.log(xm.add(1, 4)); // 5
</script>
导入某一个起一个别名
<script type="module">
import {add as myadd} from "./xm/utils.js"
console.log(myadd(2, 3)); // 5
</script>
如果导入的是index.js，index.js可以省略（很少用到）
// 1. 导出
export default {
name: "小满",
age: 3,
showName(){
console.log(this.name);
}
}
// 2. 导入
import xm from "./xm"
console.log(xm.age);
xm.showName()
其他
// 这种vue2使用的比较多
import dq from "./xm/dq.js"
// 这种vue3使用的比较多
import {add} from "./xm/utils.js"
