数字化管理平台

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 案例：块级作用域解决循环中无法正确获取索引问题：

布局代码：

按钮一按钮二按钮三

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 解构赋值"