ES6新增核心语法一览

let 和const

let不可以声明前置

a = 3
let a
console.log(a) //undefined

let不可以重复声明

let a = 3
let a = 4 //报错
let a = 5 //报错

存在块级作用域

for(let i = 0; i<10;i++){
  console.log(i)
}
console.log(i) //报错

这样就可以替换掉原来IIFE的写法

(function(){
  var a = 1
})()

{
  let a = 1
}

const 声明的常量不可以改变

const a = 1
a = 2 //报错

const obj = {a: 1}
obj.a = 2   //没问题
obj = {a: 2}  //报错

适用于let的也同样适用于const

解构赋值

数组的解构（用来给多个变量赋值）

let [a,b,c] = [1,2,3]
console.log(a,b,c) //1,2,3

let [a,[b],c] = [2,[3],4]
a //2
b //3
c //4

默认值(有指定的值则用指定的，没有则用默认的；没有默认的就返回undefined)

let [a, b = 2] = [3]
a // 3
b // 2

let [a, b = 2] = [3, 4]
a //3
b //4

对象的解构赋值
在ES6中对象有一种简写方式：

let [name, age] = ['hunger', 3]
let p1 = {name, age}
//等同于
let p2 = {name: name, age: age}

解构赋值：

let {name, age} = {name: 'jirengu', age: 4}
name //‘jirengu’
age //4

以上相当于：

let name
let age
({name: name, age: age} = {name: 'jirengu', age: 4})

4.默认值

let {x, y=5} = {x: 1}
x //1
y //5

函数解构

function add([x=1, y=2]){
  return x+y
}
add() //Error
add([2]) //4
add([3,4]) //7

function sum({x, y}={x:0, y:0}, {a=1, b=1}){
    return [x+a, y+b]
}
sum({x:1, y:2}, {a:2}) //[3, 3]

函数传参时，相当于给[x=1,y=2]这个数组赋值，当你不传数字时相当于[x=1,y=2] = [undefined,undefined],所以会报错。

字符串

多行字符串

let str =`
Hi,
This is 
You can study frontend here.
`

字符串模板

let website = 'jirengucom'
let who = 'You'
let str = `Hi
This is ${website}.
${who} can study frontend here

数组

es6新增的...arr可以展开一个数组

var a = [1, 2]
console.log(...a)  // 1, 2
var b = [...a, 3]
b // [1, 2, 3]

var c = b.concat([4, 5])
var d = [...b, 4, 5]

这个东西大概的用法，一，函数参数的扩展

function sort(...arr){
  console.log(arr.sort())
}
sort(3, 1, 5)  //[1, 3, 5]

function max(arr){
  return Math.max(...arr)
}
max([3, 4, 1])  // 4

二，类数组对象转数组

let ps = document.querySelectorAll('p');
Array.from(ps).forEach(p=> {
  console.log(p.innerText);
});
[...ps].forEach(p=>{console.log(p.innerText)});

函数

默认值

function sayHi(name='jirengu') {
  console.log(`hi, ${name}`)
}
sayHi()
sayHi('ruoyu')

function fetch(url, { body='', method = 'GET', headers = {} } = {}) {
  console.log(method);
}

箭头函数

var f = v => v+1
//等价于
var f = function(v){return v+1}

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

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

var arr = [1, 2, 3]
var arr2 = arr.map(v=>v*v)
arr2 //[1, 4, 9]

箭头函数没有绑定this，它的this指向词法作用域。换句话说，箭头函数是个匿名的不配拥有this的穷函数，所以它里面的this到其父函数中的this去找；再穷的话找祖父。

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id); //this == window
  }, 100);
}

//  等同于如下ES5
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

类和继承

ES6里增加了class的语法糖。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log( `hello, ${this.name}, i am ${this.age} years old`);
  }
}

这种方法等同于我们写es5的构造函数：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function () {
  console.log(  `hello, ${this.name}, i am ${this.age} years old`);
};

var p = new Person('hunger', 2);

实现继承时，ES6增加了extends 和super关键字

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log( `hello, ${this.name}, i am ${this.age} years old`);
  }
}
class Student extends Person {
  constructor(name, age, score) {
    super(name, age); 
    this.score = score;
  }

  sayScore() {
     console.log(  `hello, ${this.name}, i am ${this.age} years old, i get ${this.score}`);
  }
}

模块化

在ES6前，前端就使用RequireJS或者seaJS实现模块化， requireJS是基于AMD规范的模块化库，而像seaJS是基于CMD规范的模块化库，两者都是为了为了推广前端模块化的工具。
现在ES6自带了模块化，也是JS第一次支持module，在很久以后，我们可以直接作用import和export在浏览器中导入和导出各个模块了，一个js文件代表一个js模块；而不必再向项目里引入requireJS等方案。
但现在的阶段，浏览器对模块(module)支持程度不同，目前都是使用babelJS，把ES6代码转化为兼容ES5版本的js代码;
ES6模块的导出和引入通过export和import来实现。具体方法以后再说吧。