了解語(yǔ)言的新特性是非常重要的一件事。之前一直都搞不太明白ES6之后藤违,JS版本命名的規(guī)范阔籽。網(wǎng)上很多人也沒有弄得太清楚湿诊。在ES6之后,ECMAScript委員會(huì)決定換一種命名方式璧亚,也就是以年份來命名。現(xiàn)在我也簡(jiǎn)單總結(jié)了一下一些新的規(guī)范的內(nèi)容,至于具體的提案大家可以在github上看到相關(guān)內(nèi)容框喳。
Array.prototype.includes
本質(zhì):語(yǔ)法糖
年份:2016
Array.prototype.includes 判斷數(shù)組是否包含對(duì)應(yīng)的值。
原本寫法
if(arr.indexOf(el) !== -1){
// do something
}
新寫法
if(arr.includes(el,bl)){
// do something
}
Exponentiation Operator
本質(zhì):語(yǔ)法糖
年份:2016
Exponentiation Operator 冪運(yùn)算符厦坛。計(jì)算冪運(yùn)算五垮。
原本寫法
let mi = Math.pow(2,3)
// 8
新寫法
let mi = 2 ** 3;
// 8
冪運(yùn)算符號(hào),更便捷的寫法杜秸,也是和其他語(yǔ)言接軌放仗。
Object.values / Object.entries
本質(zhì):語(yǔ)法糖
年份:2017
Object.values / Object.entries Object對(duì)象上的兩個(gè)方法,類似于Object.keys撬碟。返回的都是相應(yīng)的數(shù)組诞挨。
String.prototype.padStart / String.prototype.padEnd
年份:2017
String.prototype.padStart / String.prototype.padEnd 在String原型上新添加了兩個(gè)方法呢蛤。提案上說惶傻,因?yàn)檫@兩個(gè)方法用的很多,但是現(xiàn)在很多實(shí)現(xiàn)實(shí)際上很低效其障。因此很有必要提出银室。同時(shí),原本提案叫padLeft和padRight之后的一次會(huì)議修改成現(xiàn)在的名字。
效果很簡(jiǎn)單就是蜈敢,給字符串填充字符達(dá)到指定長(zhǎng)度辜荠,默認(rèn)填充的是空格。同時(shí)注意扶认,他返回的是一個(gè)新的字符串而不是在原本字符串上進(jìn)行修改侨拦。另一點(diǎn),第一個(gè)參數(shù)是maxLength辐宾,所以當(dāng)你的填充字符是多個(gè)的時(shí)候狱从。他只會(huì)填充到指定長(zhǎng)度,不會(huì)在繼續(xù)填充了叠纹。
// String.prototype.padStart( maxLength [ , fillString ] )
"liwei".padStart(10);
// " liwei"
"liwei".padStart(10,"o");
// "oooooliwei"
// String.prototype.padEnd( maxLength [ , fillString ] )
"liwei".padStart(10);
// "liwei "
"liwei".padStart(10,"o1");
// "liweio1o1o"
Object.getOwnPropertyDescriptors
年份:2017
Object.getOwnPropertyDescriptors(obj) 返回指定對(duì)象 obj 上自有屬性對(duì)應(yīng)的屬性描述符季研。這個(gè)方法的引入是為了解決兩個(gè)對(duì)象之間復(fù)制的問題。原有的Object.assign
方法使用了簡(jiǎn)單的get和set方法來復(fù)制其鍵為key的屬性誉察,這就導(dǎo)致了對(duì)象的一些屬性沒有辦法復(fù)制(比如Object.defineProperties方法操作的那些)与涡。比如getter,setter,不可寫,枚舉
等屬性就無法被Object.assign
復(fù)制持偏。
const obj = {
[Symbol('foo')]: 123,
get bar() { return 'abc' },
};
console.log(Object.getOwnPropertyDescriptors(obj));
// Output:
// { [Symbol('foo')]:
// { value: 123,
// writable: true,
// enumerable: true,
// configurable: true },
// bar:
// { get: [Function: bar],
// set: undefined,
// enumerable: true,
// configurable: true } }
拷貝對(duì)象屬性
const source = {
set foo(value) {
console.log(value);
}
};
console.log(Object.getOwnPropertyDescriptor(source, 'foo'));
// { get: undefined,
// set: [Function: foo],
// enumerable: true,
// configurable: true }
const target2 = {};
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
console.log(Object.getOwnPropertyDescriptor(target2, 'foo'));
// { get: undefined,
// set: [Function: foo],
// enumerable: true,
// configurable: true }
Trailing commas in function parameter lists and calls(尾隨逗號(hào))
年份:2017
尾隨逗號(hào)驼卖,意思是允許在函數(shù)參數(shù)和函數(shù)調(diào)用時(shí)參數(shù)最后寫一個(gè)逗號(hào)。這主要是因?yàn)閰?shù)列表很多時(shí)候都會(huì)在格式化時(shí)鸿秆,把參數(shù)列表格式化成一行一行的酌畜。而這樣就導(dǎo)致在你需要添加一個(gè)新參數(shù)的時(shí)候,需要修改兩行卿叽。這就會(huì)在git等版本管理系統(tǒng)當(dāng)中造成你修改了兩行的情況桥胞。因此加入了這個(gè)新的特性來優(yōu)化。
async/await
本質(zhì):語(yǔ)法糖
年份:2017
async/await 函數(shù)考婴,本質(zhì)上就是Promise的一個(gè)語(yǔ)法糖贩虾,能夠讓你更順暢的去寫Promise。同時(shí)也能讓你很簡(jiǎn)單的通過try/catch進(jìn)行錯(cuò)誤處理沥阱。
原寫法
new Promise((resolve,reject)=>{
//dosomething
resolve('1');
}).then((value)=>{
return value+'2';
}).then((value)=>{
return value+'3';
}).catch((err)=>{
console.log(err);
})
這樣的寫法雖然比原來的回調(diào)地獄要好很多了缎罢,但是依然不夠直觀。當(dāng)我們有了async/await函數(shù)進(jìn)行配合的時(shí)候考杉,我們就能更輕松的編寫異步函數(shù)了屁使。
新寫法
async function doSomething() {
const result = await getDataFromNet(); //從網(wǎng)絡(luò)獲取
return result;
}
async function doHere() {
try {
let a = await doSomething();
console.log(a);
} catch (error) {
console.log(error);
}
}
值得注意的是,要使用async標(biāo)記的函數(shù)一定要在前面加await奔则,而要用await關(guān)鍵字蛮寂,一定要在async函數(shù)中。
本質(zhì)上async函數(shù)返回的就是一個(gè)Promise的對(duì)象易茬,你如果用await那么拿到的就是他resolve的值酬蹋,如果沒有用await那么你拿到的就是Promise他本身及老。因此,是可以配合使用Promise的相關(guān)方法的范抓,比如骄恶。all,race等方法匕垫。
async function logPosts () {
try {
let user_id = await fetch('/api/users/username')
let post_ids = await fetch('/api/posts/${user_id}')
let promises = post_ids.map(post_id => {
return fetch('/api/posts/${post_id}')
}
let posts = await Promise.all(promises)
console.log(posts)
} catch (error) {
console.error('Error:', error)
}
}
Shared memory and atomics
年份:2017
這份提案主要是js的多線程相關(guān)的僧鲁,為了實(shí)現(xiàn)線程間的數(shù)據(jù)交換,共享內(nèi)存象泵,原子操作寞秃。很復(fù)雜,感興趣的請(qǐng)看這篇博文吧:
SharedArrayBuffer and Atomics - Web 的多線程并發(fā)編程