加入QQ群：864680898，一起学习进步！点击群名可查看本人网站，有最新文章！

es6速记手册阮一峰es6入门

什么是es6？

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。

ECMAScript和JavaScript到底是什么关系？很多初学者会感到困惑，简单来说，ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。

1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，
定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。

一、新增声明变量的方式let，const

以前只有var来声明变量，而且函数内部还可不声明，相当于全局变量，es6严格规定了变量的申明，使得更加规范可控

1、let声明一个块级变量，形成暂时性死区，不会被预解析，禁止重声明

// 如何让下面的打印为1 2 3 4
for(var i=1;i<5;i++){
  setTimeout(function(){
    console.log(i)  //5 5 5 5
  })
}

//方法一
for(var i=1;i<5;i++){
  (function(i){
    setTimeout(function(){
      console.log(i)  // 1 2 3 4
    })
  })(i)
}

//方法二
for(let i=1;i<5;i++){
  setTimeout(function(){
    console.log(i)  // 1 2 3 4
  })
}

2、const声明一个常量，一旦设置不可被更改

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

二、字符串操作

查找字符串中是否包含includes(), startsWith(), endsWith()，返回布尔值

let str = 'hello world';
str.includes('h')   //返回布尔值，表示是否找到了参数字符串。
str.startsWith('h')   //返回布尔值，表示参数字符串是否在原字符串的头部。
str.endsWith('h')   //返回布尔值，表示参数字符串是否在原字符串的尾部。

补全字符串padStart()，padEnd()

padStart()    //用于头部补全
padEnd()    //用于尾部补全

// 像时间，20:05:01不足10的要补全显示

字符串模板

字符串拼接在变量过多时将会变得非常影响代码的识别度，所以出现了字符串模板

// 使用 `` 包含
let name = 'mySkey', age = '23';
console.log(`${name}’s age is ${age}`)

三、函数新增操作

javascript中容易混淆作用域，一般都要利用词法作用域来传递 this，es6就解决了这个问题

函数参数可以设置默认值,那么在函数调用时，没有传递实参时就是使用默认的形参

function say(word = 'good morning'){
  console.log(word)
}

箭头函数的使用，解决了this指代的问题

// 一个参数时，可以不用()包含形参； 一句执行语句时，可以不用{}包含代码块； 一行代码时是有返回值的。
let fn = num=>console.log(num)

// 两个参数
let fn = (a,b)=>a+b

// 箭头函数中的this
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 }); // id: 42

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。

箭头函数的注意点

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

双冒号的使用

箭头函数可以绑定this对象，大大减少了显式绑定this对象的写法（call、apply、bind）。但是，箭头函数并不适用于所有场合，所以现在有一个提案，提出了“函数绑定”（function bind）运算符，用来取代call、apply、bind调用。

foo::bar;
// 等同于
bar.bind(foo);

foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);

四、reset符的使用 …

函数参数中使用

let fn = (a,...arguments)=>console.log(...arguments)
fn(1,2,3,4) // 2,3,4

对象中使用

let person = {
  name: 'mySkey',
  age: 23
}

// 赋值
let me = {...person}
console.log(me) // { name: 'mySkey , age: 23}

// 作为函数参数来使用
let showInfo = ({name, age})=>{
  console.log(name +'`s age is '+ age)
}
showInfo({ ...person })

数组中使用

let arr = [1,2,3,4]
let arr1 = [0,...arr,5]
console.log(arr1)  // [0,1,2,3,4,5]

五、解构赋值

对象的结构赋值（除了对象解构会以 key 来找 value，数组和字符串的解构就是位置上一一对应）

let person = { name: 'mySkey', age: 23, location: 'chengdu', position: 'web前端' }
let { age, ...info } = person;
console.log(age)  // 23
console.log(info) // {name: "mySkey", location: "chengdu", position: "web前端"}

数组的解构赋值

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

let [a, ...num] = [1,2,3,4]
console.log(num)  // [2, 3, 4]

字符串的解构赋值

let [a,b,c,d,e] = 'mySkey'
console.log(a)  // 'm'

六、Symbol

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

let mySymbol = Symbol();

// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';

// 第二种写法
let a = {
  [mySymbol]: 'Hello!'
};

// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

七、Set和Map数据结构

Set 它类似于数组，但是成员的值都是唯一的，没有重复的值

使用场景并不多，但是用来做数组去重很方便

let removeSame = arr=>[...new Set(arr)]

既然可以做数组去重，那就可以做字符串去重

let removeSameStr = str=>[...new Set(str)].join('')

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别

1、WeakSet 的成员只能是对象
2、WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中

const a = [[1, 2], [3, 4]];
const ws = new WeakSet(a);
// WeakSet {[1, 2], [3, 4]}

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

WeakMap 结构与Map结构类似，也是用于生成键值对的集合。WeakMap与Map的区别有两点:

1、WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名
2、WeakMap的键名所指向的对象，不计入垃圾回收机制

const wm = new WeakMap();
let key = {};
let obj = {foo: 1};

wm.set(key, obj);
obj = null;
wm.get(key)
// Object {foo: 1}

八、Promise对象、（*， yield）和（async， await）

在没有Promise的时候，我们需要大量使用到回调函数，以为javascript是一门单线程语言，会产生很多异步操作，那么有的操作需要执行完毕后才执行，那怎么来捕获这个时机呢？

假设我们的后台睡着了，接口需要3s才返回，我们需要操作返回的数据，下面依次来解决异步产生的阻塞式io

方法1、回调函数（老熟人）

let getData = (callback)=>{
  setTimeout(()=>{
    let data = { code: 404, msg: 'I am sleeping' }
    callback(data)
  }, 3000)
}

// 调用函数，在回调中就能获取数据
getData(data=>console.log(data))

方法2、使用Promise

let getData = ()=>{
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      let data = { code: 404, msg: 'I am sleeping' }
      try{
        // throw('我非要出个错，来看一下catch有没有用')  // throw 强制产生一个错误，Promis的catch就能捕获到错误
        resolve(data)
      }catch(err){
        reject(err)
      }
    }, 3000)
  })
}

// 调用函数，在函数返回时使用数据
getData().then(res=>{
  console.log('后台说：' + res.msg)
}).catch(err=>{
  console.log('发生的错误是：' + err)
})

方法3、使用 * 与 yield 为js中yield赋能（文章）

let getData = ()=>{
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      let data = { code: 404, msg: 'I am sleeping' }
      resolve(data)
    }, 3000)
  })
}

// 调用函数，在函数返回时使用数据
(function* () {
  let data = yield getData();
  return data;
})().next().value.then(res=>{
  console.log(res)
})

方法4、使用async与await，已同步来写异步

let getData = ()=>{
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      let data = { code: 404, msg: 'I am sleeping' }
      resolve(data)
    }, 3000)
  })
}

// async中就可以等待Promise执行完毕返回
(async ()=>{
  let data = await getData();
  console.log(data)
})()

Promise.all();

Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。可以同时执行多个Promise

// 像做菜这个就需要一步一步来
new Promise('买菜')
  .then('洗菜')
  .then('切菜')
  .then('炒菜')
  .then('起锅')

而有的步骤不需要这样一步一步来的，就像青菜、白菜就能一起洗

let p1 = new Promise('洗白菜')
let p2 = new Promise('洗青菜')
Promise.all([p1, p2])

九、Class的基本用法

使用Vue开发的话其实用的还少，但是使用React的话，就必须得掌握。

类的实例化

JavaScript 语言中，生成实例对象的传统方法是通过构造函数

function Person(name, age){
  this.name = name;
  this.age = age;
}
let mySkey = new Person('mySkey', 23)
console.log(mySkey.name)

一般静态方法就挂载在 prototype下，就不会每次创建对象时，实例化一次这些公用方法

function Person(name, age){
  this.name = name;
  this.age = age;
}
Person.prototype = {
  sing: function(){
    console.log('sing')
  },
  cry: function(){
    console.log('cry')
  }
}
let mySkey = new Person('mySkey', 23)
mySkey.sing()

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

class Person {
  constructor(props, name, age){
    super(props);
    this.name = name;
    this.age = age;
  }
  sing(){
    console.log('sing');
  }
  cry(){
    console.log('cry');
  }
}

Person.prototype = {
  talk: function(){
    console.log('talk')
  }
}
let mySkey = new Person('mySkey', 23)
mySkey.talk()

类的继承

子类会继承了父类的属性和方法

class Person {
  sing(){
    console.log('sing');
  }
}
class Son  extends Person{
  constructor(props){
    super(props)
    // console.log(props)
  }
  playComputer(){
    console.log('我会用电脑！')
  }
}
let mySon = new Son();
mySon.sing()

静态方法和属性，加上static关键字，方法不会被实例继承，而是直接通过类来调用

class Person {
  static pi = Math.PI;
  static eat(){
    console.log('eat');
  }
}
class Son  extends Person{
  constructor(props){
    super(props)
    // console.log(props)
  }
  playComputer(){
    console.log('我会用电脑！')
  }
}
let mySon = new Son();
mySon.eat()   // 错误的
Son.eat()     // 正确操作
console.log(Son.pi) // 3..1415926
console.log(mySon.pi)//mySon 是无法实例化出来pi属性的

私有方法和属性

私有方法和私有属性，是只能在类的内部访问的方法和属性，外部不能访问。这是常见需求，有利于代码的封装，但 ES6 不提供，只能通过变通方法模拟实现

class Person {
  #pi = Math.PI;  // #号来申明私有属性
  _eat(){         // _号来申明私有方法，但是不保险外部还是能访问到
    console.log('eat');
  }
}

十、模块化

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

export形式

// ./compute.js
let add = (a,b)=>a+b
let reduce = (a,b)=>a-b

export { add, reduce }

// 更换别名后导出
export { add as addMethod, reduce }

可以按需引入

import { add, reduce } from './compute.js'
console.log(add(2,1))  // 3

就像sql的查询语句一样，还可以在（引入或导出）时更换别名

// ./compute.js
let add = (a,b)=>a+b
let reduce = (a,b)=>a-b

// 更换别名后导出
export { add as addMethod, reduce }

import { add as addMethod, reduce } from './compute.js'
console.log(addMethods(2,1))

export default形式

export的形式用户必须知道变量名，不然就没法引入了，为了给用户提供方便，就要用到export default命令，为模块指定默认输出。

// ./methods.js
export default {
  add(a,b){
    return a+b
  },
  reduce(a,b){
    return a-b
  }
}

在需要使用的时候引入

import methods from './methods.js'
console.log(methods.add(2,1))

import()形式

import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。 Vue中的路由引入就是使用import()

const routes = [
  { path: "/", redirect: '/message'},
  { path: "/home", name: 'home', component: () => import('./views/Home.vue'), children: [
    { path: "/message", name: "message", component: () => import('./views/message/List.vue') },
    { path: "/message/conversation", name: "message_conversation", component: () => import('./views/message/Conversation.vue') },
    { path: "/message/service", name: "message_service", component: () => import('./views/message/Service.vue') },
  ]},
  { path: "/login", name: "user_login", component: () => import('./views/passport/Login.vue') },
  { path: "/register", name: "user_register", component: () => import('./views/passport/Register.vue') },
]