ES6学习基础

1、let和const

与var不同，新的变量声明方式带来了一些不一样的特性，其中最重要的两个特性就是提供了块级作用域与不再具备变量提升

{
    let a = 20;
}

console.log(a);  // a is not defined

当然，代码编译成为了ES5之后，仍然会存在变量提升，因此这一点只需要我们记住即可。在实际使用中，尽量避免使用变量提升的特性带来的负面影响。

使用ES6，我们需要全面使用let/const替换var，什么时候用let，什么时候用const就成为了一个大家要熟练区分的一个知识点。

我们常常使用let来声明一个值会被改变的变量，而使用const来声明一个值不会被改变的变量，也可以称之为常量。

当值为基础数据类型时，那么这里的值，就是指值本身。
而当值对应的为引用数据类型时，那么我这里说的值，则表示指向该对象的引用。这里需要注意，正因为该值为一个引用，只需要保证引用不变就可以，我们仍然可以改变该引用所指向的对象。

当我们试图改变const声明的变量时，则会报错。

let a = null;
a = 20;
const obDev = {
    a: 20,
    b: 30
}

obDev.a = 30;

console.log(obDev); // Object {a: 30, b: 30}
const fn = function() {}
const a = obDev.a;
... ...

 

2、箭头函数

ES6颠覆了js的编码习惯，箭头函数的使用占了很大一部分。

首先是写法上的不同:

// es5
var fn = function(a, b) {
    return a + b;
}

// es6 箭头函数写法，当函数直接被return时，可以省略函数体的括号
const fn = (a, b) => a + b;

// es5
var foo = function() {
    var a = 20；
    var b = 30;
    return a + b;
}

// es6
const foo = () => {
   const a = 20;
   const b = 30;
   return a + b;
}

需要注意的是，箭头函数可以替换函数表达式，但是不能替换函数声明。

其次还有一点，箭头函数中，没有this。如果在箭头函数中使用了this，那么该this一定就是外层的this。

也正是因为箭头函数中没有this，也就无从谈起用call/apply/bind来改变this指向

var person = {
    name: 'tom',
    getName: function() {
        return this.name;
    }
}

// 如果试图用ES6的写法来重构上面的对象
const person = {
    name: 'tom',
    getName: () => this.name
}

// 编译结果却是
var person = {
    name: 'tom',
    getName: function getName() {
        return undefined.name;
    }
};

在ES6中，会默认采用严格模式，因此this也不会自动指向window对象了，而箭头函数本身并没有this，因此this就只能是undefined，如果想用this，就不要用使用箭头函数的写法。

 

3、模板字符串

模板字符串是为了解决使用+号拼接字符串的不便利而出现的。它的功能很强大，但是使用它则非常简单。举个简单的小例子：

// es5
var a = 20;
var b = 30;
var string = a + "+" + b + "=" + (a + b);


// es6
const a = 20;
const b = 30;
const string = `${a}+${b}=${a+b}`;

使用 `` 将整个字符串包裹起来，而在其中使用 ${} 来包裹一个变量或者一个表达式。

 

4、展开运算符

在ES6中用...来表示展开运算符，它可以将数组方法或者对象进行展开。

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];

// 这样，arr2 就变成了[1, 2, 3, 10, 20, 30];

展开运算符还用在函数的参数中，来表示函数的不定参。只有放在最后才能作为函数的不定参，否则会报错。

// 所有参数之和
const add = (a, b, ...more) => {
    return more.reduce((m, n) => m + n) + a + b
}

console.log(add(1, 23, 1, 2, 3, 4, 5)) // 39

 

5、class

ES6为我们创建对象提供了新的语法糖，这就是Class语法。

// ES5
// 构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 原型方法
Person.prototype.getName = function() {
  return this.name
}

// ES6
class Person {
  constructor(name, age) {  // 构造函数
    this.name = name;
    this.age = age;
  }

  getName() {  // 原型方法
    return this.name
  }
}