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

头像
ming
    阅读 7 分钟
    14

    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 正式发布

    注意：ES6是标准，JS 是实现。类似于后台里接口和接口实现类的关系。

    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长什么样？

    代码如下：

    <font face="楷体">index.js</font>

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

    <font face="楷体">运行结果：</font>

    value 1

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

    代码如下：

    <font face="楷体">index.js</font>

    new Promise(1)

    <font face="楷体">promise.js</font>

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

    <font face="楷体">运行结果：</font>

    Promise resolver 1 is not a function

    这是一个最基本的promise

    代码如下

    <font face="楷体">index.js</font>

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

    <font face="楷体">promise.js</font>

    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)
    }
}

    <font face="楷体">运行结果：</font>

    早上好！

    具体可以看这篇一步步教你实现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可以让我们减少很多开发时间来做更多的事。

    最后

    欢迎大家加入，一起学习前端，共同进步！
    cmd-markdown-logo

    前端ecmascript-6html5chromenode.js
    ming
    1.9k 声望3k 粉丝

    Strive to become better and better

    « 上一篇
    手写源码系列（上）
    下一篇 »
    对虚拟DOM和Dom-Diff的理解？

    引用和评论

    推荐阅读
    头像
    前端多种跨域方式实现原理详解

    ming赞 34阅读 8.5k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 4k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.7k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.2k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    0 条评论
    得票最新