ES6 新特性

为什么使用 ES6 ?

每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方
变量提升特性增加了程序运行时的不可预测性
语法过于松散,实现相同的功能,不同的人可能会写出不同的代码

1.ES6中新增的用于声明变量的关键字

let
let声明的变量只在所处于的块级有效
使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性。
if (true) {
   var a = 10;
   let b = 10;
 }
console.log(a) // 10
console.log(b) // b is not defined
let不存在变量提升,不能重复声明
 console.log(a); // undefined
 var a =10; 

 console.log(a); // Cannot access 'a' before initialization
 let a = 10;

 let a =1;
 let a =2;   //Identifier 'a' has already been declared
let存在暂时性死区
var num = 10
if(true) {
    console.log(num);// 10
    var num =20
 }

var num = 10
if(true) {
    console.log(num);// Cannot access 'num' before initialization
    let num =20
 }
let,var经典面试题
var arr = [];
for (var i = 0; i < 2; i++) {
    arr[i] = function () {
    console.log(i);
    } 
    }
    arr[0](); // 2
    arr[1](); // 2
    //因为用var声明的变量i是全局的,所以函数执行时输出的都是全局作用域下的i值。

let arr = [];
for (let i = 0; i < 2; i++) {
    arr[i] = function () {
    console.log(i);
    } 
    }
    arr[0](); // 0
    arr[1](); // 1
 //因为每次循环都会产生一个块级作用域,每个块级作用域中的变量都是不同的,
  //函数执行时输出的是自己上一级(循环产生的块级作用域)作用域下的i值

const

同样的,const也具有块级作用域
if (true) {
   const a = 10;
 }
 console.log(a) // a is not defined
const声明常量时必须赋值,且不能更改,如果值是一个数组,那么可以更改数组里的内容,但是仍然不可更改数组本身
const a; //Missing initializer in const declaration

const a = 10;
    a = 10; // Missing initializer in const declaration

const arr = [10, 20];
    arr[0] = 'a';
    arr[1] = 'b';
    console.log(arr);  // ['a', 'b']
    arr = ['a', 'b'] //Assignment to constant variable.
let、const、var 的区别
  1. 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。
  2. 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。
  3. 使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值

2. 解构赋值

数组解构

ES6中允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构。如果解构不成功,变量的值为undefined

let [a, b, c, d, e] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // undefined
console.log(d) // undefined
对象解构

按照一定模式,从数组中或对象中提取值,将提取出来的值赋值给另外的变量.

let person = { name: 'zhangsan', age: 20 };
let { name, age } = person;
console.log(name); // 'zhangsan' 
console.log(age); // 20

let {name: myName, age: myAge} = person; // myName myAge 属于别名
console.log(myName); // 'zhangsan' 
console.log(myAge); // 20

3.箭头函数

ES6中新增的定义函数的方式。

() => {} 
const fn = () => {}

function sum(num1, num2) {
 return num1 + num2; }
const sum = (num1, num2) => num1 + num2;//  函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号

function fn (v) {
 return v; }
const fn = v => v; // 如果形参只有一个,可以省略小括号

箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this。

const obj = { name: '张三'}
    function fn () {
        console.log(this); //指向obj
        return () => {
            console.log(this); // 指向上文this, 所以也是指向obj
        } 
    }
const resFn = fn.call(obj); //通过call方法使this指向 obj
resFn();

推荐阅读更多精彩内容