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

2020-04-0420:52:02WEB前端开发Comments2,390 views字数 6308阅读模式

ES6常用特性

平时项目开发中灵活运用ES6+语法可以让开发者减少很多开发时间，提高工作效率。ES6版本提供了很多新的特性，接下来我列举项目中常用的ES6+的特性：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

  • 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的应用

  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的案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

<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没有块级作用域文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

所以这下边这段代码就进行了修改，打印出来三个按钮就是0、1、2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

<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的案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

直接使用let就可以解决上边的问题，使三个按钮弹出的结果为0、1、2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

<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
复制代码

箭头函数

在使用箭头函数时要注意以下几点：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

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

注意：箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

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

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

解构赋值

从数组和对象中提取值，对变量进行赋值，这被称为解构，解构赋值可以直接使用对象的某个属性，而不需要通过属性访问的形式使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

普通赋值

	//普通赋值
	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
})
复制代码

字符串

模板字符串

需要拼接字符串的时候尽量改成使用模板字符串，模板字符串可以使字符串的拼接更加的简洁和直观文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

  • 不使用模板字符串
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本意是承诺，在程序中的意思就是承诺我过一段时间后会给你一个结果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

什么时候会用到过一段时间？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

是异步操作文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

异步是指可能比较长时间才有结果的才做，例如网络请求、读取本地文件等文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

最基本的Promise长什么样？

代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

index.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

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

运行结果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

value 1
复制代码

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

代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

index.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

new Promise(1)
复制代码

promise.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

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

运行结果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

Promise resolver 1 is not a function
复制代码

这是一个最基本的promise

代码如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

index.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

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

promise.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

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)
    }
}
复制代码

运行结果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

早上好！
复制代码

具体可以看这篇一步步教你实现Promise/A+ 规范 完整版文章文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

generator

generator生成器函数

迭代器函数名前用“*”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

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

yield

迭代器遇到yield暂时中止执行，调用迭代器next方法继续执行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

  • 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可以让我们减少很多开发时间来做更多的事。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

作者：小明同学哟
链接：https://juejin.im/post/5e7c3065e51d455c49184f2b
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18104.html
  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/gcs/18104.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定