https://segmentfault.com/a/1190000011976770?share_user=1030000010776722

該文章為轉載文章！僅個人喜好收藏文章！

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

let和var區別在于，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，說下const，const初始化賦值之后就不能再改變賦值。如下圖。

這個我目前是用在引用插件，庫，或者模塊化開發上！

比如上面這個，在開發上可以由于重名而帶來的異常！

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的時候。如下‘圖片懶加載的實例’（代碼暫時可以不用看得太細，看圖片就好，貼代碼是為了讓大家看到整個函數，不讓大家蒙）。過程不詳細說，看es6和es5的使用區別！

//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 `剩余時間$ozvdkddzhkzd天${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( "<p>這是<i>" + obj.author+ "</i> " + "寫的一個實例。這個實例是為了" + "<i>" + obj.thing + "</i>"+"<span>寫作日期是："+obj.time+ "</span></p>" );

而使用es6，就簡單多了

let obj={author:'守候',time:'2017.11.8',thing:'看下模板字符串的方便性。' } $("#test").append(`<p> 這是<i>${obj.author}</i> 寫的一個實例。這個實例是為了 <i> ${obj.thing}</i> <span>寫作日期是：${obj.time}</span> </p>` );

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

轉載于:https://www.cnblogs.com/WoAiZmm/p/7831198.html

總結

以上是生活随笔為你收集整理的ES6常用新特性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。