ES6简介

ES6是什么

image.png

ECMAScript是什么

image.png

ECMA

具体是什么

image.png

ECMAScript的历史版本

image.png

ECMAScript的命名方式

image.png

ECMAScript与JavaScript的关系

image.png

ES6的兼容性

image.png

let和const

let和const是什么

  1.       // 1.let 和 const 是什么
  2.       // 声明变量或声明常量
  3.       // var 声明变量
  4.       // let 代替 var，声明变量
  5.       // const 声明常量 constant
  7.       // 2.let 和 const 的用法
  8.       // var 一样
  9.       var username = 'Alex';
  10.       let age = 18;
  11.       const sex = 'male';
  12.       console.log(username, age, sex);
  14.       // 3.什么是变量，什么是常量
  15.       username = 'ZS';
  16.       age = 28;
  17.       console.log(username, age);
  19.       // 报错
  20.       sex = 'female';
  22.       // var、let声明的就是变量，变量一旦初始化之后，还可以重新赋值
  23.       // const 声明的就是常量，常量一旦初始化，就不能重新赋值了，否则就会报错

const

为什么需要const

  1.       // let
  2.       // let sex = 'male';
  3.       // // ...
  4.       // sex = 'female';
  5.       // console.log(sex);
  7.       // const
  8.       // const sex = 'male';
  9.       // // ...
  10.       // sex = 'female';
  11.       // console.log(sex);
  13.       // const 就是为了那些一旦初始化就不希望重新赋值的情况设计的

const的注意事项

  1.       // 2.1.使用 const 声明常量，一旦声明，就必须立即初始化，不能留到以后赋值
  2.       // const sex;
  3.       // sex='male'
  5.       // const sex = 'male';
  7.       // 2.2.const 声明的常量，允许在不重新赋值的情况下修改它的值
  8.       // 基本数据类型
  9.       // const sex = 'male';
  10.       // sex = 'female';
  12.       // 引用数据类型
  13.       // const person = { username: 'Alex' };
  14.       // // person = {};
  15.       // person.username = 'ZhangSan';
  16.       // console.log(person);

什么时候用const,什么时候用let

  1.       // var
  2.       // for (let i = 0; i < 3; i++) {}
  3.       // const username = 'Alex';
  4.       // // ...
  5.       // username = 'ZhangSan';

let、const与var的区别

重复声明

  1.       // 已经存在的变量或常量，又声明了一遍
  2.       // var 允许重复声明，let、const 不允许
  3.       // let a = 1;
  4.       // // ...
  5.       // let a = 2;
  6.       // console.log(a);
  8.       // function func(a) {
  9.       //   let a = 1;
  10.       // }
  11.       // func();

image.png

变量提升

  1.       // var 会提升变量的声明到当前作用域的顶部
  2.       // console.log(a);
  4.       // console.log(a);
  5.       // var a = 1;
  7.       // 相当于
  8.       // var a;
  9.       // console.log(a);
  10.       // a = 1;
  11.       // console.log(a);
  13.       // let、const 不存在变量提升
  14.       // console.log(a);
  15.       // let a = 1;
  17.       // 养成良好的编程习惯，对于所有的变量或常量，做到先声明，后使用

暂时性死区

  1.       // 只要作用域内存在 let、const，它们所声明的变量或常量就自动“绑定”这个区域，不再受到外部作用域的影响
  2.       // let、const 存在暂时性死区
  3.       // let a = 2;
  4.       // let b = 1;
  5.       // function func() {
  6.       //   console.log(b);
  7.       //   // console.log(a);
  8.       //   // let a = 1;
  9.       // }
  10.       // func();
  12.       // 养成良好的编程习惯，对于所有的变量或常量，做到先声明，后使用

window对象的属性和方法（全局作用域中)

  1.       // 全局作用域中，var 声明的变量，通过 function 声明的函数，会自动变成 window 对象的属性或方法
  2.       // let、const 不会
  4.       // var/function
  5.       // var age = 18;
  6.       // function add() {}
  7.       // console.log(window.age);
  8.       // console.log(window.add === add);
  10.       // let/const
  11.       // let age = 18;
  12.       // const add = function () {};
  13.       // console.log(window.age);
  14.       // console.log(window.add === add);

块级作用域

什么是块级作用域

  1.       // var 没有块级作用域
  2.       // for (var i = 0; i < 3; i++) {
  3.       //   // console.log(i);
  4.       // }
  5.       // console.log(i);
  7.       // let/const 有块级作用域
  8.       // for (let i = 0; i < 3; i++) {
  9.       //   // i = i+1
  10.       //   // console.log(i);
  11.       // }
  12.       // console.log(i);

作用域链

  1.       // function func() {
  2.       //   for (let i = 0; i < 3; i++) {
  3.       //     // console.log(i);
  4.       //   }
  5.       // }
  6.       // func();
  7.       // console.log(i);
  8.       // 作用域链：内层作用域->外层作用域->...->全局作用域

有哪些块级作用域

  1.       // {}
  2.       // {
  3.       //   let age = 18;
  4.       //   // console.log(age);
  5.       // }
  6.       // console.log(age);
  8.       // {}
  9.       // for(){}
  10.       // while(){}
  11.       // do{}while()
  12.       // if(){}
  13.       // switch(){}
  15.       // function(){}
  16.       // const person = {
  17.       //   getAge: function () {}
  18.       // };

作用域分块级、函数、全局作用域

let和const的应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>let 和 const 的应用</title>
  8.     <style>
  9.       body {
  10.         padding: 50px 0 0 150px;
  11.       }
  13.       .btn {
  14.         width: 100px;
  15.         height: 100px;
  16.         margin-right: 20px;
  17.         font-size: 80px;
  18.         cursor: pointer;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <button class="btn">0</button>
  24.     <button class="btn">1</button>
  25.     <button class="btn">2</button>
  27.     <script>
  28.       // 1.var
  29.       // var btns = document.querySelectorAll('.btn');
  31.       // for (var i = 0; i < btns.length; i++) {
  32.       //   btns[i].addEventListener(
  33.       //     'click',
  34.       //     function () {
  35.       //       console.log(i);
  36.       //     },
  37.       //     false
  38.       //   );
  39.       // }
  41.       // 2.闭包
  42.       // var btns = document.querySelectorAll('.btn');
  44.       // for (var i = 0; i < btns.length; i++) {
  45.       //   (function (index) {
  46.       //     btns[index].addEventListener(
  47.       //       'click',
  48.       //       function () {
  49.       //         console.log(index);
  50.       //       },
  51.       //       false
  52.       //     );
  53.       //   })(i);
  54.       // }
  56.       // 3.let/const
  57.       let btns = document.querySelectorAll('.btn');
  59.       for (let i = 0; i < btns.length; i++) {
  60.         btns[i].addEventListener(
  61.           'click',
  62.           function () {
  63.             console.log(i);
  64.           },
  65.           false
  66.         );
  67.       }
  68.     </script>
  69.   </body>
  70. </html>