es6常见新特性汇总解读

const和let和var的区别

一：let,const不能重复定义，var可以

{
	var a = 1;
	var a = 2;
}
{
	let b = 1;
	let b = 2;//(报错 Identifier 'b' has already been declared)
}
{
	const C = 1;
	const C = 2;//(报错 Identifier 'C' has already been declared)
}

二：let,const没有变量提升

{
	console.log(a)//undefined
	var a = 1;
	console.log(a)//1
}
{
	console.log(b);//(报错 b is not defined)
	let b = 1;
	console.log(b);
}
{
	console.log(C);//(报错 C is not defined)
	const C = 1;
	console.log(C);
}

三：var是函数作用域，let,const是块级作用域（即{}）

{
	var tmp = new Date();
	function f(){
		console.log(tmp); //undefined
		if(false){
			var tmp = "hello";
		}
	}
	f();
	//f函数内部可以理解为(var 变量提升至函数开始)
	function f(){
		var tmp;
		console.log(tmp); //undefined
		if(false){
			tmp = "hello";
		}
	}
}
{
	var tmp = new Date();
	function f(){
	  console.log(tmp); // Mon Feb 17 2020 14:07:09 GMT+0800 (中国标准时间)
	  if(false){
	    let tmp = "hello";
	  }
	}
	f();
	//而此时为let时只能提升至if开始，如
	var tmp = new Date();
	function f(){
	  console.log(tmp); // Mon Feb 17 2020 14:07:09 GMT+0800 (中国标准时间)
	  if(false){
	    let tmp;
	    tmp =  = "hello";
	  }
	}
	f();
}
//const同理let，不做演示代码

四：const 在声明时必须被赋值,且值不能被修改

{
	var a = 1;
	console.log(a);//1
	a = 2;
	console.log(a);//2
}
{
	let b = 1;
	console.log(b);//1
	b = 2;
	console.log(b);//2
}
{
	const C = 1;
	console.log(C);//1
	C = 2;//(报错 Assignment to constant variable.)
	console.log(C);
}
{
	const C;//(报错 Missing initializer in const declaration)
}

字符串模板

var ha = '哈哈'
var str = `笑 ： ${ha}`;
console.log(str);//笑 ： 哈哈

解构赋值

function foo({x,y,z}) {
 return x + y + z;
}
let json = {x:1,y:2,z:3};
console.log(foo(json));//6

展开运算符

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));//6

箭头函数

箭头函数this指向父级/宿主，普通函数this指向调用者，找不到调用者时即为window

function a(){
	this.ha = '哈';
	setTimeout(function(){
		console.log(this.ha);//undefined
	},100);
}
function b(){
	this.he = '呵';
	setTimeout(()=>{
		console.log(this.he);//呵
	},100);
}
new a();new b();

Promise

Promise.all：并行执行多个 promise，当有一个catch时，整体catch
Promise.allSettled：并行执行多个 promise，当有一个then时，整体then
Promise.race：只等待第一个promise的结果，不管成功失败
Promise.any：只等待第一个成功的promise的结果

class

class Div {
   constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    getBackground(){
    	//方法...
	}
}

extends 、super
extends继承必须在constructor中调用super

class Div {
	constructor(height) {
		console.log(1);
        this.height = height;
    }
    getBackground(){
    	console.log(this.height);
	}
}
class DivDom extends Div {
	constructor (height){
		super(height)
		console.log(2)
	}
}
let divDom = new DivDom(100);
divDom.getBackground();

若子类中重写了父类方法，可通过super调用父类方法

class Div {
	constructor(height) {
		console.log(1);
        this.height = height;
    }
    getBackground(){
    	console.log(this.height);
	}
}
class DivDom extends Div {
	constructor (height){
		super(height)
		console.log(2)
	}
    getBackground(){
    	console.log(3);
	}
    getBackgroundParent(){
		super.getBackground();
	}
}
let divDom = new DivDom(100);
divDom.getBackground();
divDom.getBackgroundParent();

async、await

async、await

字符串新增方法

padStart、padEnd

'1'.padStart(2,0) // '01'

includes

'123'.includes(3) // true

trim、trimStart、trimEnd

'  abc  '.trim(); // 'abc'

数组新增方法

includes

[1, 2, 3].includes(3) // true

forEach

[1,2,3].forEach(item => {
	console.log(item)
})

map

let arr = [1,2,3].map(item => {
	return item*2
})
console.log(arr) // [2,4,6]

filter

let arr = [1,2,3].filter(item => {
	return item > 2
})
console.log(arr) // [3]

find

let num = [1,2,3].find(item => {
	return item > 1
})
console.log(num) // 2

reduce

let total = [1,2,3].reduce((num,item) => {
	return num + item
})
console.log(total) // 6