ES6常用特性

平时项目开发中灵活运用ES6+语法可以让开发者减少很多开发时间，提高工作效率。ES6版本提供了很多新的特性，接下来我列举项目中常用的ES6+的特性：

let / const
箭头函数
解构赋值
默认参数
扩展运算符
类
字符串
数组
Promise

var、let、const

var的应用

可以重复声明

var a=12
var a=6
alert(a); //可以出来结果，不报错，出来的结果为6

不能定义常量

//var
var a = 5;
a = 6;

没有块级作用域

if(true){
	var a=12
}
alert(a);//出来的结果是12

会变量提升预解释

console.log(a); //undefined相当于 var a
var a = 52

块级作用域之var的案例

<script>
	window.onload=function(){
		var aBtn=document.getElementsByTagName('input')
		for(var i=0;i<aBtn.length;i++){
			aBtn[i].onclick=function(){
				alert(i);
			}
		}
	}
</script>
</head>
<body>
	<input type="button" value="星期一">
	<input type="button" value="星期二">
	<input type="button" value="星期三">
</body>

打印出来的结果就是点击3个按钮，都弹出3，这说明了var没有块级作用域

所以这下边这段代码就进行了修改，打印出来三个按钮就是0、1、2

<script>
	window.onload=function(){
		var aBtn=document.getElementsByTagName('input')
		for(let i=0;i<aBtn.length;i++){
			(function(i){
				aBtn[i].onclick=function(){
				alert(i);
			};
			})(i)
		}
	}
</script>
</head>
<body>
	<input type="button" value="星期一">
	<input type="button" value="星期二">
	<input type="button" value="星期三">
</body>

let的应用

不能重复声明

let a=5
let a=10
alert(a);//这时候就会出现报错，因为相同的变量不能声明两次

可以修改

//let是定义变量，可以修改
let a=12
a=20
alert(a)//打印出来的结果a=20

有块级作用域

if(true){
	let a=12;
}
alert(a);//这个时候就会出现报错，说a没有定义

不会预解释变量

console.log(a)//Uncaught ReferenceError: a is not defined 语法错误，没有预解释
let a = 52

块级作用域之let的案例

直接使用let就可以解决上边的问题，使三个按钮弹出的结果为0、1、2

<script>
	window.onload=function(){
		var aBtn=document.getElementsByTagName('input')
		for(let i=0;i<aBtn.length;i++){
			aBtn[i].onclick=function(){
				alert(i);
			}
		}
	}
</script>
</head>
<body>
	<input type="button" value="星期一">
	<input type="button" value="星期二">
	<input type="button" value="星期三">
</body>

const的应用

不能重复声明

const a=5
const a=10
alert(a);//这时候就会出现报错，因为相同的变量不能声明两次

不能修改

//const是定义的常量，不能修改
const a=12;
a=5;
alert(a);//这时候就会出现报错，不能修改

有块级作用域

if(true){
	const a=12;
}
alert(a);//这个时候就会出现报错，说a没有定义

不会预解释变量

console.log(a)//Uncaught ReferenceError: a is not defined 语法错误，没有预解释
let a = 52

箭头函数

在使用箭头函数时要注意以下几点：

如果只有一个参数，（）可以省
如果只有一个return，{ }可以省略

注意：箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题

普通函数和箭头函数写法区别

//普通函数1
function show(){
	
}
//箭头函数1
let show=()=>{
	
}
//普通函数2
function(){
	
}
//箭头函数2
()=>{	
}

解构赋值

从数组和对象中提取值，对变量进行赋值，这被称为解构，解构赋值可以直接使用对象的某个属性，而不需要通过属性访问的形式使用。

普通赋值

	//普通赋值
	let arr=[1,2,3]
	let a=arr[0]
	let b=arr[1]
	let c=arr[2]
	console.log(a,b,c)//1,2,3

获取数组中的值

	//获取数组中的值
    let[a,b,c]=[1,2,3]
    console.log(a,b,c)//1,2,3
    
    //获取数组中的值
    let [a,b]=[123,23]
    console.log(a,b)//123 23

获取对象中的值

	//获取对象中的值
    let {a,c,d}={a:12,c:5,d:6}
    console.log(a,c,d)

复杂解构

//复杂解构
let [{a,b},[n1,n2,n3],num,str]=[{a:12,b:4},[2,3,6],787,'abcdes']
console.log(a,b,n1,n2,n3,num,str)

//复杂解构
let [json,arr,num,str]=[{a:12,b:4},[2,3,6],787,'abcdes']
console.log(json,arr,num,str)

默认参数

$('#div1').animate({width:'200px'});
$('#div1').animate({width:'200px'},1000);

function show(a,b=5,c=12){
console.log(a,b,c)
}
show(99)//99 5 12(默认参数就是直接把值替换成没有定义值的)

扩展运算符

收集剩余的参数

function show(a,b,...args){
	alert(args)
}
show(12,12,34,3,2,4,28)//打印出来的结果是34,3,2,4,28   (...args必须放在最后面)

展开数组

//普通函数
	function show(a,b,c){
		alert(a);
		alert(b);
		alert(c)
	}
	show(1,2,3)//打印出来的结果弹出1,再弹出2，再弹出3
	
    //数组展开
    let arr1=[1,2,3]
    let arr2=[5,6,7]
    let arr=[...arr1,...arr2];
    alert(arr)

function show(...args){
		fn(...args);
	}
	function fn(a,b){
		alert(a+b)
	}
	show(12,5)//弹出17

数组

map例子

//例子1
[45,78,278,890]
[
    {name:'one',level:0,role:9},
    {name:'two',level:0,role:8},
    {name:'three',level:0,role:7},
    {name:'four',level:0,role:6},
]

//例子2
let arr=[12,5,8];
    let result = arr.map((item)=>{
    return item*2;
    })
alert(result)//24,10,16

//例子3
let arr=[12,5,8];
let result = arr.map(item=>item*2);
alert(result)//24,10,16

reduce例子

//例子1,算平均数
let score=[89,12,34,23,45,55];
let result = score.reduce(function(tmp,item,index){
return tmp+item;
})
alert(result/score.length)//43(把这几个数求平均数)

//例子2
let arr=[12,67,67,889,97];
let result=arr.reduce(function(tmp,item,index){
	if(index!=this.length-1){//不是最后一次
		return tmp+item;
	}else{//最后一次
		return(tmp+item)
	}
})
alert(result);//1132

filter例子

//例子1
let arr=[12,5,8,99,67,87];
let result=arr.filter(item=>{
	if(item%3==0){
		return true;
	}else{
		return false;
	}
});
alert(result);//12,99,87

//例子2
let arr=[12,5,8,99,67,87];
let result=arr.filter(item=>{
	alert(item%3==0);
});//弹出布尔值

forEach例子

let arr=[12,3,45,6,566];
arr.forEach((item,index)=>{
	alert(index+':'+item)//0:12  1:3  2:45  3:6  4:566
})

字符串

模板字符串

需要拼接字符串的时候尽量改成使用模板字符串，模板字符串可以使字符串的拼接更加的简洁和直观

不使用模板字符串

var name = 'The weather today is ' + sun + ' ' + rain + '.'

使用模板字符串

var name = `The weather today is ${sun} ${rain}.`

startsWith例子

let str='git://www.baidu.com/23448';
if(str.startsWith('http://')){
	alert('普通地址');
}else if(str.startsWith('https://')){
	alert('加密地址');
}else if(str.startsWith('git://')){
	alert('git地址');
}else{
	alert('其它');
}//git地址

endsWith例子

let str='1.jpg';
if(str.endsWith('.txt')){
	alert('文件文本');
}else if(str.endsWith('.jpg')){
	alert('JPG图片');
}else{
	alert('其它')
}//JPG图片

promise

什么是异步编程？

从服务器获取数据，这个过程就叫做异步编程
在node.js中去读取文件，这个过程也是异步的

promise的理解

Promise本意是承诺，在程序中的意思就是承诺我过一段时间后会给你一个结果：

什么时候会用到过一段时间？

是异步操作

异步是指可能比较长时间才有结果的才做，例如网络请求、读取本地文件等

最基本的Promise长什么样？

代码如下：

index.js

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1)
    })
}).then(value => {
    console.log('value',value)
},reason => {
    console.log('reason',reason)
})

运行结果：

value 1

原生promise它的参数不是函数时，会发生？

代码如下：

index.js

new Promise(1)

promise.js

class Promise {
    constructor(executor){
        //参数效验
        if(typeof executor !== 'function'){
            throw new TypeError('Promise resolver ${executor} is not a function')
        }
    }
}

运行结果：

Promise resolver 1 is not a function

这是一个最基本的promise

代码如下

index.js

new Promise((resolve, reject) => {
    console.log('早上好！')
        resolve(1)
})

promise.js

class Promise {
    constructor(executor){
        //参数效验
        if(typeof executor !== 'function'){
            throw new TypeError('Promise resolver ${executor} is not a function')
        }
        const resolve = function (){

        }
        const reject = function (){

        }
        executor(resolve,reject)
    }
}

运行结果：

早上好！

具体可以看这篇一步步教你实现Promise/A+ 规范完整版文章

generator

generator生成器函数

迭代器函数名前用“*”

//generator生成器函数
function *show2() {
    console.log('1')
    yield
    console.log('2')
}
let genObj = show2()
genObj.next() // 1
genObj.next() // 2
genObj.next() // 最后了，没有结果

yield

迭代器遇到yield暂时中止执行，调用迭代器next方法继续执行

yield可以传参

//yield可以传参
function *show(){
	alert('a');//a
	let a=yield;
	alert('b');//b
	alert(a)//5
}
let gen=show();
gen.next(12);
gen.next(5);

yield可以返回

//yield返回
function *show(){
	alert('a');
	yield 12;
	alert('b');
	return 55;
}
let gen=show();
let res1=gen.next();
console.log(res1);//{value:12,done:false}
let res2=gen.next()
console.log(res2);//{value:55,done:true}    最后一步的结果靠return

总结

以上例子都是公司项目里常用的一些ES6新特性，灵活运用好这些API可以让我们减少很多开发时间来做更多的事。