ES6的基本语法

块级作用域讲解

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
</head>

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
</body>

<script>
    let btns = document.getElementsByTagName('button');

    //方式1（错误方法）：var全局变量，没有块级作用域
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', function () {
            console.log('第' + i + '个按钮被点击了');
        })
    }

    //方式2：使用闭包
    for (var i = 0; i < btns.length; i++) {
        (function (i) {
            btns[i].addEventListener('click', function () {
                console.log('第' + i + '个按钮被点击了');
            })
        })(i)
    }

    // 方式3. 使用ES6中的let
    for (let i = 0; i < btns.length; i++) {
        btns[i].onclick = function(){
            console.log('第' + i + '个按钮被点击了');
        }
    }

    //详解：
    function(i) { //i = 0，点击第一次
         btns[i].addEventListener('click', function(){
             console.log('第' + i + '个按钮被点击了');
         })
     }
     function(i) { 
      //i = 1,点击第二次。
      // ①：由于使用的是var，前面i = 0/的函数里i又会被重新赋值成i = 1，故点击五次后，不论点击哪个按钮，都是打印的第5个按钮被点击
      // ②：闭包方式，此循环的函数调用完后，会寻找i，然后由于是闭包形式，此i就相当于局部变量使用，其他循环下的i不相互影响
      // ③：let方式：局部变量，有作用域范围
         btns[i].addEventListener('click', function(){
             console.log('第' + i + '个按钮被点击了');
         })
    }
</script>

</html>

const使用和注意

在使用ES6开发中我们优先使用const，只当有需要改变一个标识符时才使用let

const的注意一：一旦给const修饰的标识符被赋值后，不能修改
- const a = 20;
- a = 12;
const的注意二:
- const name; //错误，必须赋值。
const的注意三：常量的含义是指向的对象的指针引用不能被修改，但是内部属性可以被修改
- const obj = {
  id: 10,
  name: ‘why’,
  weight: 88
  }
- obj.id = 12;
- obj.name = ‘Lemon’;
- obj.weight = 90;

ES6字面量的增强写法

<script>
    //1.属性的增强写法
    const name = 'lemon';
    const age = 18;
    const height = 1.88;

    //ES5的写法
    const obj1 = {
      name: name,
      age: age,
      height: height
    }

    //ES6的写法
    const obj2 = {
      name,
      age,
      height
    }

    //2.方法的简写：
    //ES6之前
    let obj1 = {
      test: function () {
        console.log("");
      }
    }

    //ES6的写法
    let obj2 = {
      test() {
        console.log("")
      }
    }
  </script>

进阶链接