淺談讓你的代碼更簡短，更整潔，更易讀的ES6小技巧
寫在文章前面
這篇文章翻譯自ES6 tips and tricks to make your code cleaner, shorter, and easier to read!. 文章就代碼整潔方面對es6進行了總結。如有錯誤歡迎指出。
template literals 模板字符串
模板字符串使字符串的使用變得比以前更簡單了，他們以反引號開始（`），并且能過使用${變量}來插入變量。我們來比較一下下面兩行代碼。
var fName = 'Peter', sName = 'Smith', age = 43, job= 'photographer';
var a = 'Hi, I\'m ' + fName + ' ' + sName + ', I\'m ' + age + ' and work as a ' + job + '.';
var b = `Hi, I'm ${ fName } ${ sName }, I'm ${ age } and work as a ${ job }.`;
一切都變得很美好了是不是，代碼更易讀了是不是？你可以在大括號內放入任何東西：變量，等式，或者函數(shù)的調用。 我將會在后面的整個文章的示例中使用這些方式。
塊級作用域語法
JavaScript是使用函數(shù)作用域的，這就是為什么我們是為什么我們越來越頻繁的使用匿名的立即執(zhí)行函數(shù)表達式（iife）來實現(xiàn)整個JavaScript文件的封裝。我們這么做是為了把所有的變量隔離在文件內從而避免變量沖突。
現(xiàn)在我們有了塊級作用域和兩個嶄新的塊級作用域的變量聲明
let declaration let命令
這個命令和var很相似但卻又有著顯著的不同。因為他是有塊級作用域的，聲明一個相同名字的新變量可以完全不影響外部的變量。
var a = 'car' ;
{
let a = 5;
console.log(a) // 5
}
console.log(a) // car
因為他是被限制在塊級作用域的，他解決了那道非常經典的面試題：“下面這個代碼的輸出是什么，如何修改讓他運行之后成為你想的那個樣子？”
for (var i = 1; i < 5; i++){
setTimeout(() => { console.log(i); }, 1000);
}
這個例子中，輸出是“5 5 5 5 5”因為變量i在每次迭代中都會改變。
如果我們把var變?yōu)閘et,一切都變了。 現(xiàn)在，每次循環(huán)都會創(chuàng)建一個全新的塊級作用域吧i限制在當前的循環(huán)，他可以理解為這樣：
{let i = 1; setTimeout(() => { console.log(i) }, 1000)}
{let i = 2; setTimeout(() => { console.log(i) }, 1000)}
{let i = 3; setTimeout(() => { console.log(i) }, 1000)}
{let i = 4; setTimeout(() => { console.log(i) }, 1000)}
{let i = 5; setTimeout(() => { console.log(i) }, 1000)}
var 和 let的另外一個區(qū)別是 let 不會像 var一樣被變量提升
{
console.log(a); // undefined
console.log(b); // ReferenceError
var a = 'car';
let b = 5;
}
因為他有更為局限的作用域，以及更能被預測的行為，因此一些人甚至認為你應該使用let來代替var, 除非當你真的特別需要變量提升或者更寬松的作用域范圍，你再使用var
Const
在以前，如果你想在JavaScript中聲明一個常量， 習慣性的做法是使用全大寫來命名。然鵝，這不是真的去保護了這個變量不能被更改---只是讓其他的開發(fā)者知道，這是一個常量，它不應該被更改。
現(xiàn)在我們有了const命令.
const沒有讓變量完全不可變，只是鎖定他的賦值，當你有一個復雜的變量（數(shù)組或者對象）的時候，值還是可以被修改的。
{
const d = [1, 2, 3, 4];
const dave = { name: 'David Jones', age: 32};
d.push(5);
dave.job = "salesman";
console.log(d); // [1, 2, 3, 4, 5]
console.log(dave); // { age: 32, job: "salesman", name: 'David Jones'}
}
Problem with block scoping functions函數(shù)塊級作用域化帶來的問題
函數(shù)的聲明也可以限制在塊級作用域中。
{
bar(); // works
function bar() { /* do something */ }
}
bar(); // doesn't work
但是當你在一個if語句中聲明一個函數(shù)的時候問題來了。
想一下這種情況：
if ( something) {
function baz() { console.log('I passed') }
} else {
function baz() { console.log('I didn\'t pass') }
}
baz();
在ES6之前，這兩個函數(shù)聲明都被變量提升，而且結果一定是I didn't pass 不論條件中的something是什么。但現(xiàn)在我們會得到輸出ReferenceError, 因為 baz一直被限定在塊級作用域內。
Spread 擴展運算符
ES6介紹了...操作符，這個操作符指的就是‘擴展運算符‘。他的主要用途有兩個：1. 將一個數(shù)組或者對象放到一個新的數(shù)組或者對象中 2. 將數(shù)組中的多個參數(shù)合并在一起
第一個用途可能是你將會使用的最多的。所以我們先來看他。
let a = [3, 4, 5]; let b = [1, 2, ...a, 6]; console.log(b); // [1, 2, 3, 4, 5, 6]
如果我們想把一個數(shù)組內的一組參數(shù)傳遞給函數(shù)，這個時候擴展運算符就十分的有用了。
function foo(a, b, c) {
console.log(`a=${a}, b=$, c=${c}`)
}
let data = [5, 15, 2];
foo( ...data); // a=5, b=15, c=2
一個對象也可以擴展的，它會把每個鍵值對寫入新的對象中。（ 對象擴展已經在提議的第四階段，而且將會在es2018中正式出現(xiàn) 。但這種特性目前只被chrome60及以后的版本，F(xiàn)irefox55及以后，node 6.4.0及以后的版本所支持）【譯者注：在2ality博客中的es2018一文中得知，在剛剛結束的TC39會議中，ECMA2018的特性被敲定了。
let car = { type: 'vehicle ', wheels: 4};
let fordGt = { make: 'Ford', ...car, model: 'GT'};
console.log(fordGt); // {make: 'Ford', model: 'GT', type: 'vehicle', wheels: 4}
擴展運算符的另一個特點是，他可以生成一個新的數(shù)組或者對象. 下面的這個例子，就是b就是新建的數(shù)組，但c只是引用同一個數(shù)組。
let a = [1, 2, 3]; let b = [ ...a ]; let c = a; b.push(4); console.log(a); // [1, 2, 3] console.log(b); // [1, 2, 3, 4] 不同的數(shù)組 c.push(5); console.log(a); // [1, 2, 3, 5] console.log(c); // [1, 2, 3, 5] 同一個數(shù)組
第二個用法是把變量聚集到一個數(shù)組里面。當你不知道一個函數(shù)到底有多少的傳參的時候會這個方法會變得非常的有用。
function foo(...args) {
console.log(args);
}
foo( 'car', 54, 'tree'); // [ 'car', 54, 'tree' ]
Default Parameter 參數(shù)默認值
函數(shù)現(xiàn)在可以使用默認的參數(shù)值來定義了。不傳參或者未定義值都被初始化為默認值。但是需要注意的是，null和false都會被強轉為0.
function foo( a = 5, b = 10) {
console.log( a + b);
}
foo(); // 15
foo( 7, 12 ); // 19
foo( undefined, 8 ); // 13
foo( 8 ); // 18
foo( null ); // 10 as null is coerced to 0
默認值的類型可以不僅僅是值類型---還可以是表達式或者函數(shù)。
function foo( a ) { return a * 4; }
function bar( x = 2, y = x + 4, z = foo(x)) {
console.log([ x, y, z ]);
}
bar(); // [ 2, 6, 8 ]
bar( 1, 2, 3 ); //[ 1, 2, 3 ]
bar( 10, undefined, 3 ); // [ 10, 14, 3 ]
Destructuring解構
解構是拆開等號左邊的數(shù)組或者對象的過程。這個數(shù)組或者對象可以來自一個變量，一個函數(shù)，或者一個等式
let [ a, b, c ] = [ 6, 2, 9];
console.log(`a=${a}, b=$, c=${c}`); //a=6, b=2, c=9
function foo() { return ['car', 'dog', 6 ]; }
let [ x, y, z ] = foo();
console.log(`x=${x}, y=${y}, z=${z}`); // x=car, y=dog, z=6
對象類型的結構，可以在花括號內列出對象的鍵來提取鍵值對。
function bar() { return {a: 1, b: 2, c: 3}; }
let { a, c } = bar();
console.log(a); // 1
console.log(c); // 3
console.log(b); // undefined
有時，你可能想提取出值然后費賠給新的變量，這個可以通過在等號左側使用一個“key:variable”(鍵：變量名)來完成。
function baz() {
return {
x: 'car',
y: 'London',
z: { name: 'John', age: 21}
};
}
let { x: vehicle, y: city, z: { name: driver } } = baz();
console.log(
`I'm going to ${city} with ${driver} in their ${vehicle}.`
); // I'm going to London with John in their car.
此外，對象的結構允許給多個變量賦值。
let { x: first, x: second } = { x: 4 };
console.log( first, second ); // 4, 4
對象字面量和屬性的簡潔表達法
當你從許多參數(shù)創(chuàng)建對象字面量的時候，ES6允許你在鍵與變量名字相同的情況下省略該鍵。
let a = 4, b = 7;
let c = { a: a, b: b };
let concise = { a, b };
console.log(c, concise) // {a: 4, b: 7}, {a: 4, b: 7}
這個還可以與解構一起用來使你的代碼更干凈整潔。
function foo() {
return {
name: 'Anna',
age: 56,
job: { company: 'Tesco', title: 'Manager' }
};
}
// pre ES6
let a = foo(), name = a.name, age = a.age, company = a.job.company;
// ES6 destructuring and concise parameters
let { name, age, job: {company}} = foo();
簡潔表示法還可以用于解構對象并把它傳入函數(shù)。方法1和2是你在es6之前要怎么做， 方法三是使用解構和簡潔表達法。
let person = {
name: 'Anna',
age: 56,
job: { company: 'Tesco', title: 'Manager' }
};
// method 1
function old1( person) {
var yearOfBirth = 2018 - person.age;
console.log( `${ person.name } works at ${ person.job.company } and was born in ${ yearOfBirth }.`);
}
// method 2
function old1( person) {
var age = person.age,
yearOfBirth = 2018 - age,
name = person.name,
company = person.job.company;
console.log( `${ name } works at ${ company } and was born in ${ yearOfBirth }.`);
}
// method 3
function es6({ age, name, job: {company}}) {
var yearOfBirth = 2018 - age;
console.log( `${ name } works at ${ company } and was born in ${ yearOfBirth }.`);
}
通過使用ES6，我們能提取出age，name，和 company,而不需要任何其他的變量聲明。
動態(tài)屬性名稱
ES6添加了使用動態(tài)分配的鍵創(chuàng)建或添加屬性的功能。
let city= 'sheffield_';
let a = {
[ city + 'population' ]: 350000
};
a[ city + 'county' ] = 'South Yorkshire';
console.log(a); // {sheffield_population: 350000, sheffield_county: 'South Yorkshire' }
箭頭函數(shù)
箭頭函數(shù)有兩個比較重要的特點： 他們的結構以及他們的this 指向
他們比傳統(tǒng)的函數(shù)有更簡單的結構因為他們不需要關鍵字function 而且他們可以自動返回在箭頭后面的一部分，無論箭頭后面的是什么。
var foo = function( a, b ) {
return a * b;
}
let bar = ( a, b ) => a * b;
如果函數(shù)有多于一個的計算式，可以使用花括號來包起來，然后函數(shù)返回塊作用域返回的任何內容。
箭頭函數(shù)一個最重要的用途之一就是應用在數(shù)組的相關函數(shù)中，像.map，.forEach,.sort等等。
let arr = [ 5, 6, 7, 8, 'a' ]; let b = arr.map( item => item + 3 ); console.log(b); // [ 8, 9, 10, 11, 'a3' ]
在擁有一個更短的表達方式的同時，箭頭函數(shù)還修復了有關于this綁定行為經常出現(xiàn)的問題。ES6之前解決這個問題通常是使用一個self變量來存儲這個指向。
var clickController = {
doSomething: function (..) {
var self = this;
btn.addEventListener(
'click',
function() { self.doSomething(..) },
False
);
}
};
這個this的賦值是一定要做的，因為this的綁定是動態(tài)的。這就意味著this在eventlistener內部和在doSomething內部指的并不是同一個東西。
在箭頭函數(shù)內部，this的綁定是語義上的就是指當前的，而不是動態(tài)的。這也是箭頭函數(shù)的主要設計特點。
雖然這種詞法上的this很棒，但是有些時候，他卻不是我們想要的那樣。
let a = {
oneThing: ( a ) => {
let b = a * 2;
this.otherThing(b);
},
otherThing: ( b ) => {....}
};
a.oneThing(6);
當我們使用a.oneThing(6), 這個this.otherThing(6) 會拋出引用失敗的錯誤，因為this沒有指向對象a,而是指向了環(huán)境作用域。如果你正在使用ES6的代碼使用ES6的語法，這個是你需要注意的事情。
for...of loops (for...of循環(huán))
ES6新添加了一種方式來迭代數(shù)組中的每個值，這個方式是與已經存在的for...in的通過索引的循環(huán)方式不同。
let a = ['a', 'b', 'c', 'd' ];
// ES6
for ( var val of a ) {
console.log( val );
} // "a" "b" "c" "d"
// pre-ES6
for ( var idx in a ) {
console.log( idx );
} // 0 1 2 3
使用新的for ... of循環(huán)，在每個循環(huán)內部保存了一個let val = a[idx]。
數(shù)組，字符串，generator以及從collection 在標準JavaScript中都是可迭代的。普通的對象無法正常的使用for...of來迭代，除非你自己定義一個迭代器。
Number Literals 數(shù)字字面量
ES5代碼很好處理了十進制和十六進制的數(shù)字格式，但并未指定八進制的格式。實際上，八進制在嚴格模式中是被禁止使用的。
ES6 添加了一個全新的格式，在最開始的0后面添加一個o來聲明一個八進制的數(shù)。與此同時，在es6中還添加了二進制格式。
Number( 29 ) // 29 Number( 035 ) // 35 in old octal form. Number( 0o35 ) // 29 in new octal form Number( 0x1d ) // 29 in hexadecimal Number( 0b11101 ) // 29 in binary form
更多
ES6還提供了我們很多很多其他的方式來使我們的代碼更簡潔，更易讀，以及更穩(wěn)定。我的目標時寫一篇這篇文章的延續(xù)，來包括一些ES6中不太知名的部分。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在做網頁時（其實是網頁木馬呵呵），最讓人煩惱的是自己辛辛苦苦寫出來的客戶端IE運行的JAVASCRIPT代碼常常被別人輕易的拷貝，實在讓自己的心里有點不是滋味，要知道自己寫點東西也挺累的2008-06-06
這篇文章主要介紹了npm scripts 使用指南詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
JavaScript 調試器其實有很多。當然這些僅僅是調試器而已，與流行的 Java IDE 是沒有辦法相提并論的。2009-02-02
JavaScript設計模式---單例模式詳解【四種基本形式】
這篇文章主要介紹了JavaScript設計模式---單例模式,結合實例形式詳細分析了JavaScript設模式中單例模式的四種基本形式定義與使用方法,需要的朋友可以參考下2020-05-05
javascript中關于執(zhí)行環(huán)境的雜談
如你所知,javascript里執(zhí)行環(huán)境是作為一個最核心的概念存在的。相信廣大FE筒子們對于這個概念不會陌生，它定義了變量或函數(shù)有權訪問其他數(shù)據(jù)范圍以及其行為。2011-08-08
這篇文章主要介紹了BootStrap實現(xiàn)文件上傳并帶有進度條效果，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-09-09
在IE8上JS實現(xiàn)combobox支持拼音檢索功能
這篇文章主要介紹了在IE8上JS實現(xiàn)combobox支持拼音檢索功能的相關資料，本文介紹的非常詳細，具有參考借鑒價值,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了關于字符串和對象互轉以及JSON.parse()的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了微信小程序開發(fā)常見問題及解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
平時JavaScript逆向需要補環(huán)境或者補一些函數(shù),下面這篇文章主要給大家介紹了關于JS逆向之瀏覽器補環(huán)境的相關資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03