您好,登錄后才能下訂單哦!
譯者按: 人生苦短,我用ES6。
原文: Top 10 ES6 Features Every Busy JavaScript Developer Must Know
譯者: Fundebug
為了保證可讀性,本文采用意譯而非直譯,并且對(duì)源代碼進(jìn)行了大量修改。另外,本文版權(quán)歸原作者所有,翻譯僅用于學(xué)習(xí)。
小編推薦:Fundebug專注于JavaScript、微信小程序、微信小游戲,Node.js和Java線上bug實(shí)時(shí)監(jiān)控。真的是一個(gè)很好用的bug監(jiān)控服務(wù),眾多大佬公司都在使用。
ES6,正式名稱是ECMAScript2015,但是ES6這個(gè)名稱更加簡(jiǎn)潔。ES6已經(jīng)不再是JavaScript最新的標(biāo)準(zhǔn),但是它已經(jīng)廣泛用于編程實(shí)踐中。如果你還沒(méi)用過(guò)ES6,現(xiàn)在還不算太晚...
下面是10個(gè)ES6最佳特性,排名不分先后:
為函數(shù)的參數(shù)設(shè)置默認(rèn)值:
function foo(height, color)
{
var height = height || 50;
var color = color || 'red';
//...
}
這樣寫一般沒(méi)問(wèn)題,但是,當(dāng)參數(shù)的布爾值為false時(shí),是會(huì)出事情的!比如,我們這樣調(diào)用foo函數(shù):
foo(0, "", "")
因?yàn)?strong>0的布爾值為false,這樣height的取值將是50。同理color的取值為'red'。
function foo(height = 50, color = 'red')
{
// ...
}
使用+號(hào)將變量拼接為字符串:
var name = 'Your name is ' + first + ' ' + last + '.'
將變量放在大括號(hào)之中:
var name = `Your name is ${first} ${last}.`
ES6的寫法更加簡(jiǎn)潔、直觀。
使用"\n\t"將多行字符串拼接起來(lái):
var roadPoem = 'Then took the other, as just as fair,\n\t'
+ 'And having perhaps the better claim\n\t'
+ 'Because it was grassy and wanted wear,\n\t'
+ 'Though as for that the passing there\n\t'
+ 'Had worn them really about the same,\n\t'
將多行字符串放在反引號(hào)``之間就好了:
var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`
當(dāng)需要獲取某個(gè)對(duì)象的屬性值時(shí),需要單獨(dú)獲?。?/p>
var data = $('body').data(); // data有house和mouse屬性
var house = data.house;
var mouse = data.mouse;
一次性獲取對(duì)象的子屬性:
var { house, mouse} = $('body').data()
對(duì)于數(shù)組也是一樣的:
var [col1, col2] = $('.column');
對(duì)象中必須包含屬性和值,顯得非常多余:
var bar = 'bar';
var foo = function ()
{
// ...
}
var baz = {
bar: bar,
foo: foo
};
對(duì)象中直接寫變量,非常簡(jiǎn)單:
var bar = 'bar';
var foo = function ()
{
// ...
}
var baz = { bar, foo };
普通函數(shù)體內(nèi)的this,指向調(diào)用時(shí)所在的對(duì)象。
function foo()
{
console.log(this.id);
}
var id = 1;
foo(); // 輸出1
foo.call({ id: 2 }); // 輸出2
箭頭函數(shù)體內(nèi)的this,就是定義時(shí)所在的對(duì)象,而不是調(diào)用時(shí)所在的對(duì)象。
var foo = () => {
console.log(this.id);
}
var id = 1;
foo(); // 輸出1
foo.call({ id: 2 }); // 輸出1
嵌套兩個(gè)setTimeout回調(diào)函數(shù):
setTimeout(function()
{
console.log('Hello'); // 1秒后輸出"Hello"
setTimeout(function()
{
console.log('Fundebug'); // 2秒后輸出"Fundebug"
}, 1000);
}, 1000);
使用兩個(gè)then是異步編程串行化,避免了回調(diào)地獄:
var wait1000 = new Promise(function(resolve, reject)
{
setTimeout(resolve, 1000);
});
wait1000
.then(function()
{
console.log("Hello"); // 1秒后輸出"Hello"
return wait1000;
})
.then(function()
{
console.log("Fundebug"); // 2秒后輸出"Fundebug"
});
var定義的變量未函數(shù)級(jí)作用域:
{
var a = 10;
}
console.log(a); // 輸出10
let定義的變量為塊級(jí)作用域,因此會(huì)報(bào)錯(cuò):(如果你希望實(shí)時(shí)監(jiān)控JavaScript應(yīng)用的錯(cuò)誤,歡迎免費(fèi)使用Fundebug)
{
let a = 10;
}
console.log(a); // 報(bào)錯(cuò)“ReferenceError: a is not defined”
const與let一樣,也是塊級(jí)作用域。
使用構(gòu)造函數(shù)創(chuàng)建對(duì)象:
function Point(x, y)
{
this.x = x;
this.y = y;
this.add = function()
{
return this.x + this.y;
};
}
var p = new Point(1, 2);
console.log(p.add()); // 輸出3
使用Class定義類,更加規(guī)范,且你能夠繼承:
class Point
{
constructor(x, y)
{
this.x = x;
this.y = y;
}
add()
{
return this.x + this.y;
}
}
var p = new Point(1, 2);
console.log(p.add()); // 輸出3
JavaScript一直沒(méi)有官方的模塊化解決方案,開(kāi)發(fā)者在實(shí)踐中主要采用CommonJS和AMD規(guī)范。而ES6制定了模塊(Module)功能。
Node.js采用CommenJS規(guī)范實(shí)現(xiàn)了模塊化,而前端也可以采用,只是在部署時(shí)需要使用Browserify等工具打包。這里不妨介紹一下CommenJS規(guī)范。
module.js中使用module.exports導(dǎo)出port變量和getAccounts函數(shù):
module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
main.js中使用require導(dǎo)入module.js:
var service = require('module.js')
console.log(service.port) // 輸出3000
ES6中使用export與import關(guān)鍵詞實(shí)現(xiàn)模塊化。
module.js中使用export導(dǎo)出port變量和getAccounts函數(shù):
export var port = 3000
export function getAccounts(url) {
...
}
main.js中使用import導(dǎo)入module.js,可以指定需要導(dǎo)入的變量:
import {port, getAccounts} from 'module'
console.log(port) // 輸出3000
也可以將全部變量導(dǎo)入:
import * as service from 'module'
console.log(service.port) // 3000
Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線,F(xiàn)undebug累計(jì)處理了7億+錯(cuò)誤事件,得到了Google、360、金山軟件、百姓網(wǎng)等眾多知名用戶的認(rèn)可。歡迎免費(fèi)試用!
轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/08/21/10-best-es6-feature/
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。