资讯专栏INFORMATION COLUMN

实例感受-es6的常用语法和优越性

fsmStudy / 2164人阅读

摘要:在重写完了的时候,就个人总结了一下常用的一些常用的语法和比优越的方面。参数字符串是否在原字符串的尾部返回布尔值。第一个大于的成员的索引方法,用于某个数组是否包含给定的值,返回一个布尔值。

1.前言

前几天,用es6的语法重写了我的一个代码库,说是重写,其实改动的并不多,工作量不大。在重写完了的时候,就个人总结了一下es6常用的一些常用的语法和比es5优越的方面。下面提到的语法可能也就是es6新特性的10%-20%,但是开发上占了80%左右的。下面的文章,按照es6常用新特性进行分类,文章提及的实例,有些是我代码库的小实例,有些是自己随便编的,大家知道就好!希望可以帮到大家,如果大家觉得文章有什么地方写错了,或者哪里写得不对,欢迎指出!

1.可能还有些人不知道我说的的代码库是什么,简单的打下广告:这个代码库是我封装了一些javascript常用的小实例,比如:数组去重字符替换常用Dom操作图片懒加载等的57个小实例(查看说明)。代码也上传到github上面了!es5版本--ec-do-1.1.4。es6版本--ec-do-2.0.0。欢迎大家star。也希望大家可以多给意见,或者和大家一起完善这个项目!
2.至于这个代码库的使用方法,去github看一下就知道了,这里不多说!
3.es6发布两年多了,现在都发布了es7,es8了,但是es7和es8更新的东西不多,可以参考下面两个链接!聊聊ES7与ES8特性,10分钟学会ES7+ES8。
2.let const

letvar区别在于,let有块级作用域的的区分概念。

如下实例

//相当于声明了一个全局的i变量。
for(var i=0;i<10;i++){
    console.log(i)
}
console.log("最后的值:"+i)   
 

//j只在这个for循环有效,如果在循环外调用就会报错
for(let j=0;j<10;j++){
    console.log(j)
}
console.log("最后的值:"+j)

还有一个常见的使用场景是:比如一个页面有5个li,索引当然就是0,1,2,3,4。点击某一个li,显示该li的索引。

var oLi= document.querySelectorAll("li")
for (var i = 0,len = oLi.length; i < len; i++){
    oLi[i].onclick = function(){
        console.log(i)
    }
}

这样写,其实无论点击那个li,都是显示5。因为当点击li的时候,上面的代码已经执行完了,那么每个i,就是等于5,就显示5。

用let就不会出现这个问题

var oLi= document.querySelectorAll("li")
for (let i = 0,len = oLi.length; i < len; i++){
    oLi[i].onclick = function(){
        console.log(i)
    }
}

用了let,如果点击第一个li,就显示0,点击第三个li,就显示2。这个大家可以自行尝试下!

说完了let,说下constconst初始化赋值之后就不能再改变赋值。如下图。

这个我目前是用在引用插件,库,或者模块化开发上!

比如上面这个,在开发上可以由于重名而带来的异常!

3.arrow function

箭头函数,使用的频率非常的高!写法也是非常的简洁和清晰!

如下的数组求和实例

//sumArr都是ecDo在这个对象里面的属性,但是大家看到es6和es5的定义方式不一样,是es6简写方式。
//es6写法-隐式返回
sumArr(arr) {
    return arr.reduce((pre, cur) =>pre + cur)
}
//es6写法-显式返回
sumArr(arr) {
    return arr.reduce((pre, cur) =>{return pre + cur})
}
//es5写法
sumArr: function (arr) {
    return arr.reduce(function (pre, cur) {
        return pre + cur
    })
},

还有一个常用的场景是,当使用了setTimeout或者setInterval的时候。如下‘图片懒加载的实例’(代码暂时可以不用看得太细,看图片就好,贴代码是为了让大家看到整个函数,不让大家蒙)。过程不详细说,看es6es5的使用区别!

//es6写法,(如果看到函数参数有不懂的不用急,后面会提到!)
loadImg(className = "ec-load-img", num = 0, errorUrl = null) {
    let oImgLoad = document.getElementsByClassName(className);
    for (let i = 0, len = oImgLoad.length; i < len; i++) {
        //如果图片已经滚动到指定的高度
        if (document.documentElement.clientHeight + document.documentElement.scrollTop > oImgLoad[i].offsetTop - num && !oImgLoad[i].isLoad) {
            //记录图片是否已经加载
            oImgLoad[i].isLoad = true;
            //设置过渡,当图片下来的时候有一个图片透明度变化
            oImgLoad[i].style.cssText = "transition: ""; opacity: 0;";
            if (oImgLoad[i].dataset) {
                this.aftLoadImg(oImgLoad[i], oImgLoad[i].dataset.src, errorUrl, function (o) {
                    //添加定时器,确保图片已经加载完了,再把图片指定的的class,清掉,避免重复编辑
                    setTimeout(()=>{
                        if (o.isLoad) {
                            this.removeClass(o, className);
                            o.style.cssText = "";
                        }
                    }, 1000)
                });
            } else {
                this.aftLoadImg(oImgLoad[i], oImgLoad[i].getAttribute("data-src"), errorUrl, function (o) {
                    //添加定时器,确保图片已经加载完了,再把图片指定的的class,清掉,避免重复编辑
                    setTimeout(()=>{
                        if (o.isLoad) {
                            this.removeClass(o, className);
                            o.style.cssText = "";
                        }
                    }, 1000)
                });
            }
            (function (i) {
                setTimeout(()=>{
                    oImgLoad[i].style.cssText = "transition:all 1s; opacity: 1;";
                }, 16)
            })(i);
        }
    }
}

//es5写法
loadImg: function (className, num, errorUrl) {
    var _className = className || "ec-load-img", _num = num || 0, _this = this,_errorUrl=errorUrl||null;
    var oImgLoad = document.getElementsByClassName(_className);
    for (var i = 0, len = oImgLoad.length; i < len; i++) {
        //如果图片已经滚动到指定的高度
        if (document.documentElement.clientHeight + document.documentElement.scrollTop > oImgLoad[i].offsetTop - _num && !oImgLoad[i].isLoad) {
            //记录图片是否已经加载
            oImgLoad[i].isLoad = true;
            //设置过渡,当图片下来的时候有一个图片透明度变化
            oImgLoad[i].style.cssText = "transition: ""; opacity: 0;"
            if (oImgLoad[i].dataset) {
                this.aftLoadImg(oImgLoad[i], oImgLoad[i].dataset.src, _errorUrl, function (o) {
                    //添加定时器,确保图片已经加载完了,再把图片指定的的class,清掉,避免重复编辑
                    setTimeout(function () {
                        if (o.isLoad) {
                            _this.removeClass(o, _className);
                            o.style.cssText = "";
                        }
                    }, 1000)
                });
            } else {
                this.aftLoadImg(oImgLoad[i], oImgLoad[i].getAttribute("data-src"), _errorUrl, function (o) {
                    //添加定时器,确保图片已经加载完了,再把图片指定的的class,清掉,避免重复编辑
                    setTimeout(function () {
                        if (o.isLoad) {
                            _this.removeClass(o, _className);
                            o.style.cssText = "";
                        }
                    }, 1000)
                });
            }
            (function (i) {
                setTimeout(function () {
                    oImgLoad[i].style.cssText = "transition:all 1s; opacity: 1;";
                }, 16)
            })(i);
        }
    }
}

代码贴了这么多,其实区别就三小块

简单解释一下:当使用箭头函数了,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。(比如上面提到的实例,setTimeout里面的this,原本指向window,但是使用的箭头函数,就指向ecDo这个对象)
原因是箭头函数没有this,它的this是继承外面的,因此内部的this就是外层代码块的this。

4.template string

模板字符串,这个平常使用的频率也非常高,而且也很实用!

如下实例:到某一个时间的倒计时

//es6写法
getEndTime(endTime) {
    let startDate = new Date(); //开始时间,当前时间
    let endDate = new Date(endTime); //结束时间,需传入时间参数
    let t = endDate.getTime() - startDate.getTime(); //时间差的毫秒数
    let d = 0,
        h = 0,
        m = 0,
        s = 0;
    if (t >= 0) {
        d = Math.floor(t / 1000 / 3600 / 24);
        h = Math.floor(t / 1000 / 60 / 60 % 24);
        m = Math.floor(t / 1000 / 60 % 60);
        s = Math.floor(t / 1000 % 60);
    }
    return `剩余时间${d}天${h}小时${m}分钟${s}秒"`;
}
//es5写法
getEndTime: function (endTime) {
    var startDate = new Date(); //开始时间,当前时间
    var endDate = new Date(endTime); //结束时间,需传入时间参数
    var t = endDate.getTime() - startDate.getTime(); //时间差的毫秒数
    var d = 0,
        h = 0,
        m = 0,
        s = 0;
    if (t >= 0) {
        d = Math.floor(t / 1000 / 3600 / 24);
        h = Math.floor(t / 1000 / 60 / 60 % 24);
        m = Math.floor(t / 1000 / 60 % 60);
        s = Math.floor(t / 1000 % 60);
    }
    return "剩余时间" + d + "天 " + h + "小时 " + m + " 分钟" + s + " 秒";
}

可能大家还不觉得模板字符串怎么好用,那么接下来再说一个实例,比如往一个div添加一大段的html内容时。es5的做法是

var obj={
    author:"守候",
    time:"2017.11.8",
    thing:"看下模板字符串的方便性。"
}
$("#test").append(
  "

这是" + obj.author+ " " + "写的一个实例。这个实例是为了" + "" + obj.thing + ""+"写作日期是:"+obj.time+ "

" );

而使用es6,就简单多了

let obj={
    author:"守候",
    time:"2017.11.8",
    thing:"看下模板字符串的方便性。"
}
$("#test").append(
  `

这是${obj.author} 写的一个实例。这个实例是为了 ${obj.thing} 写作日期是:${obj.time}

` );
5.destructuring

解构赋值这个用得算是比较多的,简单明了,就是一个简写方式!

//es5
var name="守候"
var sex="男"
var info= {name:name, sex: sex}
console.log(info)  //Object {name: "守候", sex: "男"}

//es6
let name="守候"
let sex="男"
let info= {name, sex}
console.log(info)  //Object {name: "守候", sex: "男"} 

//es6也可以反过来 
let info={name: "守候", sex: "男"};
let {name,sex}=info;
console.log(name,sex)// "守候" "男"
6.default, rest

default,就是函数参数的默认值,很好理解
比格式化处理字符串这个函数

//es6写法
formatText(str, size = 3, delimiter = ",") {
    let regText = "B(?=(w{" + size + "})+(?!w))";
    let reg = new RegExp(regText, "g");
    return str.replace(reg, delimiter);
}
//es5写法
formatText: function (str, size, delimiter) {
    var _size = size || 3, _delimiter = delimiter || ",";
    var regText = "B(?=(w{" + _size + "})+(?!w))";
    var reg = new RegExp(regText, "g");
    return str.replace(reg, _delimiter);
}

rest这个我不知道怎么说,看下面的实例吧

function param(first,...all){
    console.log(first)
    console.log(all)
    console.log(Object.prototype.toString.call(all))
}
animals("第一个", "第二个", "第三个")  

这样写,all就是一个数组,不用像arguments那样转成数组!

7.export & import

这两个对应的就是对应的特性就是,模块化开发,这个可以说是最实用的一个新特性了!功能也强大,但是写起来就很简单!就几个代码!看图吧!

封装模块的时候,用export把模块暴露出去

需要使用的时候,用import引进行来,完事

顺便提一下,另一个按需引入的方法

8.API推荐 8-1.字符串 repeat

repeat方法返回一个新字符串,表示将原字符串重复n次。

"守候".repeat(3)
//"守候守候守候"
includes & startsWith & endsWith

includes:是否找到了参数字符串,返回布尔值。
startsWith:参数字符串是否在原字符串的头部,返回布尔值。
endsWith:参数字符串是否在原字符串的尾部,返回布尔值。

三个方法都接受两个参数,第一个参数是参数字符串,第二个是开始检索的位置

var str="我就是守候"
str.startsWith("我就是")//true
str.startsWith("我")//true
str.startsWith("我",2)//false
str.startsWith("守候")//false
str.endsWith("守候")//true
str.includes("守候")//true
str.includes("我",3)//false
padStart & padEnd

padStart:如果字符串不够指定长度,在头部补全指定字符
padEnd:如果字符串不够指定长度,在尾部补全指定字符

两个方法都接收两个参数,第一个是指定字符串的最小长度,第二个用来补全的字符串。如果指定字符串的长度,等于或大于指定的最小长度(第一个参数)。就直接返回原字符串,如果忽略第二个参数,就使用空格补全原字符串!

var str="守候"
str.padEnd(10,"123")//"守候12312312"
str.padStart(10,"123")//"12312312守候"
str.padEnd(10)//"守候        "
str.padStart(10)//"        守候"
str.padStart(1)//"守候"
str.padEnd(1)//"守候"
8-2.数值 isNaN

检查一个值是否为NaN

Number.isNaN(NaN)//true
Number.isNaN(15)//false
isInteger

判断一个值是否为整数,需要注意的是,比如1和1.0都是整数。

Number.isInteger(1)//true
Number.isInteger(1.0)//true
Number.isInteger(1.1)//false
sign

判断一个数到底是正数、负数、还是零

Math.sign(-10)// -1
Math.sign(10)// +1
Math.sign(0)// +0
Math.sign(-0)// -0
Math.sign(NaN)// NaN
Math.sign("10")// +1
Math.sign("守候")// NaN
Math.sign("")// 0
Math.sign(true)// +1
Math.sign(false)// 0
Math.sign(null)// 0
trunc

去除一个数的小数部分,返回整数部分

Math.trunc(1.1)//1
Math.trunc(-1.1)//-1
Math.trunc(-0.1)//-0
Math.trunc("123.456")//123
Math.trunc("守候")//NaN
8-3.对象 assign

用于对象的合并,复制到目标对象。

var _name={name:"守候"},sex={sex:"男"},city={"city":"广州"}
Object.assign(_name,sex,city)//{name: "守候", sex: "男", city: "广州"}

var info1={name:"守",sex:"男"},info2={name:"候",city:"广州"}
Object.assign(info1,info2)//{name: "候", sex: "男", city: "广州"}

克隆原来这样对象,这样克隆对象,修改了info1或者info3,不会影响info3或者info1,但是Object.assign并不是深拷贝。详细的可以参考我之前的文章--对象深浅拷贝

var info1={name:"守",sex:"男"}
var info3=Object.assign(info1,{})//{name:"守",sex:"男"}
keys

根据对象自身可遍历的键名进行遍历,返回一个数组

var info={name: "守候", sex: "男", city: "广州"}
Object.keys(info)//["name", "sex", "city"]
values

根据对象自身可遍历的键值进行遍历,返回一个数组

Object.values(info)//["守候", "男", "广州"]
entries

根据对象自身可遍历的键值对进行遍历,返回一个数组

Object.entries(info)//[["name", "守候"],["sex", "男"],["city", "广州"]]
8-4.数组 from

from用于将两类对象转为真正的数组:类似数组的对象和可遍历的对象

Array.from("守候")//["守", "候"]
//常见的使用方式还有-将Dom集合和arguments转成真正的数组
let oLi = document.querySelectorAll("li");
Array.from(oLi ).forEach(function (item) {
  console.log(item);
});

// arguments对象
function fn() {
  let args = Array.from(arguments);
}
//顺便说下Set
let newSet = new Set(["a", "b","a","c"])
Array.from(newSet) // ["a", "b","c"] 
//ES6 新增的数据结构--Set。它类似于数组,但是成员的值都是唯一的,不重复的。
//相信大家很容易想到怎么用了,比如数组去重,用Set实现就简单多了。   
removeRepeatArray(arr) {
    //return [Array.from(arr)]
    return [...new Set(arr)]
}
find

find方法,用于找出第一个符合条件的数组成员。如果没找到符合条件的成员就返回underfind

//第一个大于2的成员
[1, 2, 3, 4].find((n) => n > 2)//3
findIndex

findIndex方法,用于找出第一个符合条件的数组成员的索引。

//第一个大于2的成员的索引
[1, 2, 3, 4].findIndex((n) => n > 2)//2
includes

includes方法,用于某个数组是否包含给定的值,返回一个布尔值。如果没找到符合条件的成员就返回underfind

[1, 2, 3].includes(2)//true
[1, 2, 3].includes(5)//false
[1, 2, NaN].includes(NaN)//true
9.小结

好了,关于es6的常用语法和比es5优越的方面区别,就说到这里了,这些是我在平常开发用的比较多。如果想详细学习es6,移步到阮一峰的-ECMAScript 6 入门。这些语法相信在开发了已经占了很大的一个比重了!当然如果大家还有什么好的语法,API推荐,或者觉得我哪里写错了,写得不好,欢迎给出宝贵的意见,指点下迷津。也期待大家相互学习,一起进步!

-------------------------华丽的分割线--------------------
想了解更多,关注关注我的微信公众号:守候书阁

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89744.html

相关文章

  • ES6-7

    摘要:的翻译文档由的维护很多人说,阮老师已经有一本关于的书了入门,觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中,显得越来越重要。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

    mudiyouyou 评论0 收藏0
  • JavasScript重难点知识

    摘要:忍者级别的函数操作对于什么是匿名函数,这里就不做过多介绍了。我们需要知道的是,对于而言,匿名函数是一个很重要且具有逻辑性的特性。通常,匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归 递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果...

    forsigner 评论0 收藏0
  • 简简单单说个闭包

    摘要:一般情况下,在函数结束后,函数中变量等就应该被销毁,偏偏这个闭包就是个特例和中的和都保留着。同理,这个变量对应的闭包保存了这个信息。由于退出了函数后,函数并没有并销毁,这个闭包的信息也没销毁,因此后续可以利用这些信息。 闭包的作用 一句话,闭包的作用:将方法存于变量。 至于闭包的原因或者目的,或者说,为什么将方法存于变量,稍后再说。 闭包的条件 为了尽量避免用一大段话描述一个概念,我们...

    yagami 评论0 收藏0
  • 简简单单说个闭包

    摘要:一般情况下,在函数结束后,函数中变量等就应该被销毁,偏偏这个闭包就是个特例和中的和都保留着。同理,这个变量对应的闭包保存了这个信息。由于退出了函数后,函数并没有并销毁,这个闭包的信息也没销毁,因此后续可以利用这些信息。 闭包的作用 一句话,闭包的作用:将方法存于变量。 至于闭包的原因或者目的,或者说,为什么将方法存于变量,稍后再说。 闭包的条件 为了尽量避免用一大段话描述一个概念,我们...

    Binguner 评论0 收藏0
  • npm + webpack + es6 初体验

    摘要:当然,我们需要先下载配置下载和配置下载下载的加载器下载完了,要去进行配置,配置完的文件如下可以看到,和之前的相比,增加了一个的配置。 准备 下载Node.js和npm 一个命令行工具(我的是git bash)。不是必须的,用自带的命令行也可以。 创建一个文件夹,作为根目录,比如 npm-webpack-es6 这时,你将看到一个空文件夹 开始 命令行打开至根目录 键入 npm i...

    seasonley 评论0 收藏0

发表评论

0条评论

fsmStudy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<