ES6笔记

ES6运行的三种方式

• 第一种：浏览器直接显示（Babel浏览器脚本）
  • Babel的链接：https://www.bootcdn.cn/babel-standalone/
  • Babel将ES6的语法转化成ES5的语法在浏览器上运行
• 第二种：在线转换https://www.babeljs.cn/
• 第三种：Babel（node.js）工具，工具把ES6转换成ES5，然后用node.js运行ES5
  • Babel包：babel-preset-latest，babel-preset-react，babel-preset-stage

ES6的浏览器兼容

• Chrome，Safari，FF都支持，node.js
• IE11及以上都支持，IE10部分支持，IE8，IE9不支持
• 对于支持ES6的浏览器，其实不需要任何额外的工具，type=“module”

let、const和块级作用域

let关键字

• let关键字只在块中有效

if(true){
   
    var a = 1;
    let b = 2;
    console.log(a);//1
    console.log(b);//2
}
console.log(a);//1
console.log(b);//b is not defined

• let关键字可以防止循环变量泄露，同时能够提供闭包

for(var i = 0 ; i < 5 ; i++){
   
    console.log(i)
}
console.log(i);//5
for(let a = 0 ; a < 5 ; a++){
   
    console.log(a)
}
console.log(a);//a is not defined

• for循环是一个特例，括号是一个独立作用域，大括号是一个独立作用域

for(let i = 0; i < 3; i++){
   
    let i = 3;
    console.log(i);
}

• let不会进行变量提升

console.log(a);//undefined
var a = 1;
console.log(b);//Cannot access 'b' before initialization
let b = 1;

• 暂时性死区的概念，let不进行变量提升，他会绑定到一个块作用域上
  • var 在预编译时将变量产生，只是数值没有初始化，可以访问
  • let 在预编译的时候产生，但是在let声明以前，不能使用，从块级作用域的头部到let声明之间的范围叫做暂时性死区

let a = 5;
if(true){
   
    console.log(a);//Cannot access 'a' before initialization
    //TDS
    let a = 3;
    //undefined
    console.log(a);//3
}
console.log(a);//5

• let不能在一个作用域内重复定义

{
   
    var a = 5;
    var a = 3;
    console.log(a);//3
}

{
   
    let b = 5;
    let b = 3;
    console.log(b);//Identifier 'b' has already been declared
}

• 块级作用域解决了两种不合理的现象

var a = 5;
function f(){
   
    console.log(a);
    if(true){
   
        var a = 3;
    }
}

f();//undefined

for(var i = 0 ; i < 5 ; i++){
   
    
}
console.log(i);//5

• 立即执行函数简化

(function(){
   
    var tmp = 5;
    console.log(tmp);
})();

{
   
    let tmp = 5;
    console.log(tmp);
}

• let 声明的变量，内层可以访问外层的变量，外层不能访问内层的变量，内层退出后失效

let a = 5;
{
   
    console.log(a);//5
}
{
   
    let b = 3;
    console.log(b);//3
}
console.log(b);//b is not defined

• 块级作用域的函数声明
  • ES5：不允许在块结构中声明函数
  • ES6: 允许在块结构中声明函数，还是依然有预编译，函数依然有预编译，函数名会提升到全局作用域或者函数作用域的头部

function f(){
   
    console.log('outside');
}

(function(){
   
    if(false){
   
        function f(){
   
            console.log('inside')
        }
    }
    console.log(f);//ES6: f()outside  ES5: undefined
    f();//ES6: outside  ES5: ERROR
})();

const 关键字

• 原始类型：变量中的值不能改
• 引用类型：指向的地址不能改
• 其余特性与let一致

解构赋值

• 数组的解构
• 赋值

let a = 1