ES6常用的新特性

11,231 阅读7分钟

ES6常用特性

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

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

var、let、const

var的应用

  1. 可以重复声明
var a=12
var a=6
alert(a); //可以出来结果,不报错,出来的结果为6
  1. 不能定义常量
//var
var a = 5;
a = 6;
  1. 没有块级作用域
if(true){
	var a=12
}
alert(a);//出来的结果是12
  1. 会变量提升预解释
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的应用

  1. 不能重复声明
let a=5
let a=10
alert(a);//这时候就会出现报错,因为相同的变量不能声明两次
  1. 可以修改
//let是定义变量,可以修改
let a=12
a=20
alert(a)//打印出来的结果a=20
  1. 有块级作用域
if(true){
	let a=12;
}
alert(a);//这个时候就会出现报错,说a没有定义
  1. 不会预解释变量
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的应用

  1. 不能重复声明
const a=5
const a=10
alert(a);//这时候就会出现报错,因为相同的变量不能声明两次
  1. 不能修改
//const是定义的常量,不能修改
const a=12;
a=5;
alert(a);//这时候就会出现报错,不能修改
  1. 有块级作用域
if(true){
	const a=12;
}
alert(a);//这个时候就会出现报错,说a没有定义
  1. 不会预解释变量
console.log(a)//Uncaught ReferenceError: a is not defined 语法错误,没有预解释
let a = 52

箭头函数

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

  1. 如果只有一个参数,()可以省

  2. 如果只有一个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可以让我们减少很多开发时间来做更多的事。