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;