（一） ES6 新特性 ——let与const关键字

CSDN话题挑战赛第2期
参赛话题：学习笔记

  目录

2.1.let 关键字

2.2. const 关键字

---

2.1.let 关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

1. 不允许重复声明

2. 块儿级作用域

3. 不存在变量提升

4. 不影响作用域链

5. 应用场景：以后声明变量使用 let 就对了

let声明变量：

let a;
let b,c,d;
let e = 100;
let f = 521, g='iloveyuo', h=[];

1. 变量不能重复声明 （var可以重复声明）

let star = 1;
let star = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4

2. 块级作用域

作用域：块级作用域、全局作用域、函数作用域、eval

{
   let girl = '周扬青';
}
console.log(girl);

{
    var girl = '周扬青';
}
console.log(girl);

let——块级作用域：其作用域为该语句所在的代码块内，只在代码块{}中有效，在外面无法读取。 var——非块级作用域，其作用域为该语句所在的函数内，代码块{}外也能访问。

✨for 循环计数器很适合用 let

for (var i = 0; i < 10; i++) {
  setTimeout(function(){
    console.log(i);
  })
}
// 输出十个 10
for (let j = 0; j < 10; j++) {
  setTimeout(function(){
    console.log(j);
  })
}
// 输出 0123456789

变量 i 是用 var 声明的，在全局范围内有效，所以全局中只有一个变量 i, 每次循环时，setTimeout 定时器里面的 i 指的是全局变量 i ，而循环里的十个 setTimeout 是在循环结束后才执行，所以此时的 i 都是 10。

变量 j 是用 let 声明的，当前的 j 只在本轮循环中有效，每次循环的 j 其实都是一个新的变量，所以 setTimeout 定时器里面的 j 其实是不同的变量，即最后输出 12345。（若每次循环的变量 j 都是重新声明的，如何知道前一个循环的值？这是因为 JavaScript 引擎内部会记住前一个循环的值）。

3. 不存在变量提升

console.log(song);
let song = '恋爱达人';

👉与之相反：var存在变量提升，但是只是变量声明（var x）提升了，初始化（x=7）不会被提升

var x = 5;                                  // 初始化 x elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x + " " + y; // 显示 x 和 y var y = 7;                                 // 初始化 y 👋 y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。 类似以下代码: var x = 5;                                   // 初始化 x var y;                                         // 声明 y elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x + " " + y; // 显示 x 和 y y = 7;                                       // 设置 y 为 7

4. 不影响作用域链

{
  let school = "尚硅谷";
  function fn() {
    console.log(school);  //输出尚硅谷
  }
  fn();
}

函数作用域下面没有school变量，它会向上一级作用域中找school变量

---

let实践案例：点击使盒子切换颜色

<div class="container">
        <h2 class="page-header">点击切换颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        let items=document.querySelectorAll('.item');
        for(var i=0;i<items.length;i++){
            items[i].addEventListener('click',function(){
                this.style.backgroundColor='pink';
              // items[i].style.backgroundColor='pink';
            })
        }
    </script>

分析：items[i].style.backgroundColor='pink';为什么不能实现颜色切换

这里报错的原因就是因为 i的值，因为var没有块级作用域，所以当循环结束后，i的值就等于3，而此时点击区域，就会执行这个回调函数里面的代码

 item[i].style.background='pink';

但是此时在函数里面找不到i的值，只能去Windows里面去找，i=3，越界了，无法修改背景颜色，所以报错。 由于let有块级作用域的概念，每次绑定的i都各不相同，因此可以正确使用：

let items=document.querySelectorAll('.item');
for(let i=0;i<items.length;i++){
    items[i].addEventListener('click',function(){
        items[i].style.backgroundColor='pink';
    })
}

2.2. const 关键字

const 关键字用来声明常量，const 声明有以下特点

1. 声明必须赋初始值

2. 标识符一般为大写

3. 不允许重复声明

4. 值不允许修改

5. 块儿级作用域

注意: 对象属性修改和数组元素变化不会触发 const 错误 应用场景：声明对象类型使用 const，非对象类型声明选择 let

const声明变量：

const SCHOOL = '尚硅谷';

1. const声明一定要初始化

const A; //Uncaught SyntaxError: Missing initializer in const declaration

2. 一般常量使用大写(潜规则)

const a = 100; //不推荐使用

3. 常量的值不能修改

SCHOOL = 'ATGUIGU';  //Uncaught TypeError: Assignment to constant variable.

4. 块儿级作用域

{
   const PLAYER = 'UZI';
}
console.log(PLAYER);//Uncaught ReferenceError: PLAYER is not defined

const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:

const x = 2;       // 合法
 
{
    const x = 3;   // 合法
}
​
{
    const x = 4;   // 合法
}

5. 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错

const TEAM = ['UZI','MXLG','Ming','Letme'];
// 可以添加元素
TEAM.push('Meiko');
// 可以修改元素
TEAM[0]='ANDY';
// 不可以对常量数组重新赋值
TEAM = ['Toyota', 'Volvo', 'Audi','Meiko'];    // 错误

const 与 let： const定义常量与使用let 定义的变量相似：

• 二者都是块级作用域

• 都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别：

• const声明的常量必须初始化，而let声明的变量不用

• const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

var x = 10;
// 这里输出 x 为 10
{ 
    const x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10