1.var、let、const

ES6 推荐在函数中使用 let 定义变量
const 用来声明一个常量 (值类似值不能改变,引用类型地址不能改变)
let 和 const 只在最近的一个块中(花括号中)有效

//1.let不能重复申明   var n = 10;var n = 100;console.log(n)  //100let a=10let a=100console.log(a) // SyntaxError 'a' has already been declared//2.var能改变全局作用域(变量提升) let则不能var b =1{    var b=10}console.log(b) //10let c=1{    let c=10}console.log(c) //1//3.同作用域内不能重申明var d=1let d=2console.log(d) // SyntaxError'd' has already been declaredlet  d=1var  d=2console.log(d)  //SyntaxError 'd' has already been declared//4.var不管作用域对于同个变量赋值则更改var e=1{    let e=2}console.log(e) //1let  f=1{    var f=2}console.log(f) //SyntaxError 'f' has already been declared//5.常量不能重新赋值const A = [1,2];A.push = 3;console.log(A); //[1,2,3]A = 10; //Error 这里地址改变了

2.箭头函数、this

ES6箭头函数内的this指向的是函数定义时所在的对象,而不是函数执行时所在的对象。箭头函数背部没有自己的this,this总是指向上一层的this,层层递上,直到找到有自己的this函数为止。
ES5函数里的this总是指向函数执行时所在的对象,尤其在非严格模式下,this有时候会指向全局对象。

b.箭头函数不能用构造函数,因为它没有自己的this,无法实例化。

c.箭头函数没有自己的this,所以函数内也不存在arguments对象。这里就可以ES6的扩展运算符来代替。

d.函数的默认赋值
ES5,函数的形参是无法给默认值得,只能在函数内部通过变通方法实现。
ES6,函数可以默认赋值。

var foo = function(){return 1;};//等价于let foo = () => 1;箭头函数中的 this 指的不是window,是对象本身。function aa(){  this.bb = 1;  setTimeout(() => {    this.bb++; //this指向aa    console.log(this.bb);  },500);}aa(); //2

3.字符串模板语法

不使用模板字符串var name = 'Your name is' + first + '' + last + '.'使用模板字符串var name = Your name is ${first} ${last}.

4.class

提供了关键字 class 定义类
提供了关键字 extends 继承一个类
super()执行父类的初始化函数
提供了对象字面量, 定义一个函数

class Animal {  constructor(){    console.log('我是一个动物');  }}class Person extends Animal {  constructor(){    super();    console.log('我是一个程序员');  }}let aa = new Person();//我是一个动物//我是一个程序员

5.解构

解构赋值是ES6中推出的一种高效、简洁的赋值方法

//通常情况下var first = someArray[0];var second = someArray[1];var third = someArray[2];//解构赋值let [first, second, third] = someArray; //比上面简洁多了吧//还有下面例子let [,,third] = [1,2,3];console.log(third); //3let [first,...last] = [1,2,3];console.log(last); //[2,3]//对象解构let {name,age} = {name: "lisi", age: "20"};console.log(name); //lisiconsole.log(age); //20//注意let {ept1} = {};console.log(ept1); //undefinedlet {ept2} = {undefined};console.log(ept2); //undefinedlet {ept3} = {null};console.log(ept3); //null

6.新增方法

is()方法,比较两个目标对象,用来完善“===”方法。

NaN === NaN      //falseObject.is(NaN,NaN);     //true

assign()方法,用于对象新增属性或者多个对象合并。

const target = {a:1};const source1 = {b:2};const source2 = {c:3};Object.assign(target,source1,source2);console.log(target);          //{a:1,b:2,c:3}

ES6在原型上新增了Includes()方法,取代传统indexOf()查找字符串的方法。
includes():找得到返回true,找不到返回false。
indexOf():找得到返回0,找不到返回1。
此外,还新增了startsWith(),endsWith(),padStart(),padEnd(),repeat()等方法,可用于查找,补全字符串。

let str = `xiao ming`;console.log(str.includes(`xiao`));     //true

7.Symbol类型

Symbol是ES6引入的第七种原始数据类型,所有Symbol()生成的值都是独一无二的,可以从根本上解决对象属性太多导致属性名冲突覆盖的问题。
Symbol值通过Symbol函数生成。
对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种是新增的symbol类型,凡是属性名属于symbol类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。
Symbol 值可以显式转为字符串。另外,Symbol 值也可以转为布尔值,但是不能转为数值。

let s1 = Symbol('foo');let s2 = Symbol('foo');console.log(s1===s2) //falselet s1 = Symbol('foo');let s2 = Symbol('bar');console.log(s1,typeof(s1));console.log(s2);s1.toString() // "Symbol(foo)"s2.toString() // "Symbol(bar)"console.log(s1,typeof(s1.toString()))console.log(s2)

8.Set

类似Array的新的数据结构
Set实例的成员都是唯一的,不重复的。这个特性可以轻松实现数组去重。

let array = [1,2,3,2,3];let set = new Set(array);console.log(set);           //[1,2,3]let o1 = {age:11}let o2 = {age:12}let set = new Set([o1,o2]);console.log(set);           //结果里面有两个对象吧,因为对象的内存地址不一样let o2 = o1;let set = new Set([o1,o2]);console.log(set);           //结果里面有一个对象,对象的内存地址一样属性    .size 返回set集合的大小方法    .add()<相当于数组的push()> .delete(value) .has(value) .clear()清除数组

9.Map

Map是ES6引入的一种类似Object的新的数据结构,Map可以理解为是Object的超集,打破了以传统键值对形式定义对象,对象的key不再局限于字符串,也可以是Object。

let map1 = new Map()let obj = {name:'tiger'}map1.set(obj,'hello')     //设置键值对console.log(map1) // {{name:tiger}:hello}map1.set(1,'hello1')map1.set(2,'hello2')console.log(map1) // {{name:tiger}:hello,1 => "hello1", 2 => "hello2"}//遍历键值对for(let item of map1){    console.log(item);}//遍历键for(let item of map1.keys()){    console.log(item);}//遍历值for(let item of map1.value()){    console.log(item);}

10.Promise对象

function ajaxPromise() {    return new Promise(function(reslove,reject) {        console.log("正在执行...");        if(true) {            reslove("success")        }else{            reject("fail")        }     }) }ajaxPromise().then(value => {    console.log(value);}).catch(err => {    console.log(err);})

11.Generator函数

执行Generator函数会返回一个遍历器对象,每一次Generator函数里面的yield都相当一次遍历器对象的next()方法,并且可以通过next(value)方法传入自定义的value,来改变Generator函数的行为。
定义函数的时候需要加上星号,例:function test(){}
函数体里面包含yield(暂停执行的标志),代码运行到yield的时候便会暂停执行,然后通过.next(),让代码继续执行,直到下一个yield或者函数体结束符。

function* demo() {  console.log(1)  yield 111  console.log(2)  yield 222  console.log(3)  return 333}let g = demo()let val1 = g.next()console.log('val1',val1)// 打印 1,val1 = {value: 111, done: false}let val2 = g.next()// 打印 2,val2 = {value: 222, done: false}console.log('val2',val2)let val3 = g.next()console.log('val3',val3)

12.async 函数

async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已。

const gen = function* () {  const f1 = yield readFile('/etc/fstab');  const f2 = yield readFile('/etc/shells');  console.log(f1.toString());  console.log(f2.toString());};
const asyncReadFile = async function () {  const f1 = await readFile('/etc/fstab');  const f2 = await readFile('/etc/shells');  console.log(f1.toString());  console.log(f2.toString());};

async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

async function t(){    var a = new Promise(        function (resolve, reject) {            console.log(1);            resolve(9);            console.log(2);        })    var b = new Promise(        function (resolve, reject) {            console.log(3);            resolve(8);            console.log(4);        })    console.log(5);    b=await b;    a=await a;    console.log(b);    console.log(a);    console.log(6);}t();console.log(7);// 123457896

13.模块

使用import取代require。

// badconst moduleA = require('moduleA');const func1 = moduleA.func1;const func2 = moduleA.func2;// goodimport { func1, func2 } from 'moduleA';// commonJS的写法var React = require('react');var Breadcrumbs = React.createClass({  render() {    return <nav />;  }});module.exports = Breadcrumbs;// ES6的写法import React from 'react';class Breadcrumbs extends React.Component {  render() {    return <nav />;  }};export default Breadcrumbs;