Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
一、 let 与 const
1.1 关键字 var 的问题
- 可以重复声明
var a = 10; var a = 20; console.log("a:",a);
无法限制修改
var b = 10; b = 20; console.log("b:",b);
没有块级作用域（存在变量提升）
{ var a = 10; } if(true){ var b = 10; } console.log("a:",a,"b:",b) for(var i = 0; i < 10; i++){ console.log("i:",i); } console.log("i:",i);
1.2 关键字 let 和 const 可以解决上述问题，两者异同点如下：
let 和 const 定义的变量不能被重复声明（避免全局变量污染）
const 用来定义常量，定义后不能被修改；let用来定义变量，执行执行过程中可以被改变
大括号中使用 let 和 const 会形成自己独立的块级作用域
块级作用域中不存在变量的提升，会出现暂时性死区的现象，所以当进入当前作用域，在变量声明之前访问变量，是无法访问到的）
var value = 1; if (true) { console.log(value);//ReferenceError: Cannot access 'value' before initialization let value = 10; }
1.3 案例：块级作用域解决循环中无法正确获取索引问题：
布局代码：
<button>按钮一</button> <button>按钮二</button> <button>按钮三</button>
JS代码：
let btns = document.getElementsByTagName('button'); //ES6之前的处理方案： //方案一：给每一个元素自定义属性index对应循环索引 for(var i = 0; i < btns.length; i++){ btns[i].index = i; btns[i].onclick = function(){ console.log(this.index); } } //方案二：闭包 for(var i = 0; i < btns.length; i++){ (function(j){ btns[j].onclick = function(){ console.log(j) } })(i) } // ES6中的方案：利用块级作用域和let关键字 for(let i = 0; i < btns.length; i++){ btns[i].onclick = function(){ console.log(i) } }
二 解构赋值
2.1 注意点：
- 左右两边结构必须一样
// 错误示例 let [a, b] = {a:1, b:2}; // 类型错误 TypeError: {(intermediate value)(intermediate value)} is not iterable
右边必须是一个合法值
// 错误示例 let {a, b} = {12, 5}; //{12, 5} 啥也不是 // 语法错误 SyntaxError: Unexpected token ','
声明和赋值不能分开（必须在一句话中完成）
// 错误示例 let [a,b]; [a, b] = [1, 2]; // SyntaxError: Missing initializer in destructuring declaration // 语法错误 在解构声明中缺少初始化式
2.2 代码示例：
// 数组 let [a, b, c] = [1, 2, 3]; console.log(a, b, c); // => 1 2 3 // 对象 let {d, e, f} = {d:4, e:5, f:6}; console.log(d, e, f);//=> 4 5 6 // 数组 + 对象 + 其它数据 let [{a, b}, [a1, a2, a3], n, s] = [{a:10, b: 20}, ['apple', 'banana', 'orange'], 3.14, 'hello 解构赋值'] console.log(a, b, a1, a2, a3, n, s); // => 1 2 "apple" "banana" "orange" 3.14 "hello 解构赋值" // 粒度：同一维度下，数据统计的粗细程度 let [obj, arr, n, s] = [{a:10, b: 20}, ['apple', 'banana', 'orange'], 3.14, 'hello 解构赋值'] console.log(obj, arr, n, s); // => {a: 10, b: 20} (3) ["apple", "banana", "orange"] 3.14 "hello 解构赋值"
