ES6基础知识

刚开始用vue、angular或者react，很多时候我们都会把ES6这个大兄弟加入我们的技术栈中。但是ES6那么多那么多特性，我们需要全部都掌握吗？秉着二八原则，掌握好常用的，有用的这个可以让我们快速起飞。
接下来我们就聊聊ES6那些可爱的新特性吧。
1.变量声明const和let
我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

function aa() {
  if(bool) {
    var test = 'hello man'
  } else {
    console.log(test)
  }
}

以上的代码实际上是：

function aa() {
  var test // 变量提升
  if (bool) {
    test = 'hello man'
  } else {
    //此处访问test 值为undefined
    console.log(test)
  }
  //此处访问test 值为undefined
}

所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。
接下来ES6主角登场：
我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？
● 在一个函数内部
● 在一个代码块内部
说白了 {}大括号内的代码块即为let 和 const的作用域。
看以下代码：

function aa() {
  if(bool) {
    let test = 'hello man'
  } else {
    //test 在此处访问不到
    console.log(test)
  } 
}

let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。
再来说说const。

const name = 'lux'
name = 'joe'//再次赋值此时会报错

2.模板字符串 es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。
第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

//es5 
var name = 'lux'console.log('hello' + name) 
//es6 
const name = 'lux'console.log(`hello ${name}`) //hello lux

3.函数 函数默认参数 在ES5我们给函数定义参数默认值是怎么样？

function action(num) {
    num = num || 200
    //当传入num时，num为传入的值 
    //当没传入参数时，num即有了默认值200
    return num
}

但细心观察的同学们肯定会发现，num传入为0的时候就是false， 此时num = 200 与我们的实际要的效果明显不一样 ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

function action(num = 200) {
    console.log(num)
}
action() //200
action(300) //300

箭头函数 ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。 箭头函数最直观的三个特点。 ● 不需要function关键字来创建函数 ● 省略return关键字 ● 继承当前上下文的 this 关键字

//例如： [1,2,3].map( x => x + 1 )
//等同于： [1,2,3].map((function(x){ return x + 1 }).bind(this))

说个小细节。
当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{}；例如:

var people = name => 'hello' + name//参数name就没有括号

作为参考

var people = (name, age) => { const fullName = 'h' + name return fullName } //如果缺少()或者{}就会报错

4.拓展的对象功能
对象初始化简写
ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如：

function people(name, age) {
    return {
        name: name,
        age: age
    };
}

键值对重名，ES6可以简写如下：

function people(name, age) {
    return {
        name,
        age
    };
}

ES6 同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法：

const people = {
    name: 'lux',
    getName: function() {
        console.log(this.name)
    }
}

ES6通过省略冒号与 function 关键字，将这个语法变得更简洁

const people = {
    name: 'lux',
    getName() {
        console.log(this.name)
    }
}

总结
ES6的特性远不止于此，但对于我们日常的开发开说。这已经是够够的了。还有很多有意思的方法。比如findIndex…等等。包括用set来完成面试题常客数组去重问题。我和我的小伙伴们都惊呆了!