变量

1. 新变量和块作用域

• let和const
  • 不存在变量提升
  • 同一作用域下不能重复定义同名称变量
  • 块作用域: { }
• 用const声明变量一定要初始化，否则报错（let可以不初始化）
• const声明的常量无法改变，但引用类型变量可以改变其内部的值：
  因为引用变量存储的是堆中地址，const声明的不能改变该地址，但对堆中内容无限制
• 经典案例：

  <button id="btn1">btn1</button>
  <button id="btn2">btn2</button>
  <button id="btn3">btn3</button>
      <script type="text/javascript">
          var btns = document.getElementsByTagName('button');
          // 用闭包解决
          // for (var i = 0; i < btns.length; i++) {
          //  (function(i) {
          //      btns[i].onclick = function() {
          //          alert(i);
          //      }
          //  })(i);
          // }
          
          // 用ES6语法解决
          for (let i = 0; i < btns.length; i++) {
              btns[i].onclick = function() {
                  alert(i);
              }
          }
      </script>
  

2. 变量的解构赋值

数组的解构赋值

• 举例：

let [a, b, c] = [1, 2, 3];
// 等价于
let a = 1, b = 2, c = 3;

• 解构的默认值
  • 如果解构时缺少对应值或值为undefined，会赋值为undefined，这时可以使用默认值。
    不缺少对应值时，会覆盖默认值。

let [a, b, c = 4] = [1, 2];
// 等价于
let a = 1, b = 2, c = 4;

对象的解构赋值

• 变量名要和对象的属性名对应，变量名的顺序不一定要与对象中属性顺序一致

let obj = {
  name: 'xxx',
  age: 18,
  sex: 'female'
}
let {name, sex, age} = obj;

• 注意：如果变量在解构之前就已经定义，解构时会报错

let name;
// { name } = obj; // 报错
// 解决：
({ name } = obj);

字符串的解构赋值

let str = 'Hello World';
let [a, b, c] = str; 
// 等价于
let a = 'H', b = 'e', c = 'l';

3. for ... of 循环

• for...of 循环数组，直接取得其value

let arr = [ 'a', 'b', 'c']
for(let i of arr) {
  console.log(i); // a b c
}
// 注意与for...in的区别
for(let i in arr) {
  console.log(i); // 0 1 2
}

• for...of也可以遍历Map对象

let map = new Map();
map.set('name', 'xxx');
map.set('age', 18);
// 通过for...of和解构快速获取Map对象的key和value
for(let [key, value] of map) {
  console.log(key, value); // name xxx
}

4. 模板字符串

• `` 和 ${ } 配合使用
• 举例：

let foo = 'hh';
console.log(`输出变量值：${foo}`)；// 输出变量值：hh
let a = 2, b = 5;
console.log(`输出表达式：${ a * b }`);  // 输出表达式：10
function func() {
  return '函数';
}
console.log(`输出：${ func() }`); // 输出：函数