ES6

215 阅读2分钟

1.let和const

在ES6之前,js只有全局作用域和函数作用域,ES6中let关键字为其引入了块级作用域。

{
var a = 1;
let b = 3;
}
console.log(a);     //1
console.log(b);     //b is undefined

let声明的变量只能在代码块内才能访问,var声明的变量由于是全局变量,因此可以在代码块外访问

const用来定义常量,相当于java中的final关键字。

并且const声明常量之后就必须立即初始化!

2.解构赋值

以前,为变量赋值,只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

现在ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

如果解构没成功,变量的值就等于undefined。

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

另一种情况是不完全解构,只匹配一部分的等号右边的数组,解构依然可以成功。

let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

3.函数的扩展

ES5中的写法

function log(x, y) {
  //y = y || 'World';  --> 这种写法如果y是false则不起作用,所以用下面的方式复制
  if (typeof y === 'undefined') {
    y = 'World';
  }
  console.log(x, y);
}
log('Hello') // Hello World

ES6中的写法

function log(x, y = 'World') {
  console.log(x, y);
}
log('Hello') // Hello World

箭头函数

var f = v => v;
// 等同于
var f = function (v) {
  return v;
};

//如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
var f = () => 5;
// 等同于
var f = function () { return 5 };

4.class

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y);                                // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

5.模块化

//lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};

这是一个js模块,对外输出两个属性counter(变量)、incCounter(函数),然后再去加载这个模块 这样就可以去调用该模块对外输出的属性了:

// main.js
var mod = require('./lib');

console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter);  // 3

以上就是我个人对ES6的一些浅薄的个人见解,不周之处还望大家及时指出,以便修改。