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