ES6系列之项目中常用的新特性

ES6常用特性

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

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

ES6的发展史

1996, ES1.0 Netscape 将 JS 提交给 ECMA 组织，ES 正式出现
1999, ES3.0 被广泛支持
2011, ES5.1 成为 ISO 国际标准
2015, ES6.0 正式发布

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可以让我们减少很多开发时间来做更多的事。