JS社區(qū)的每個人都喜歡新的API帅涂、語法以及一些簡單议薪、明了更高效的完成重要任務(wù)的新特性。過去一年ES6帶來了十足的進(jìn)步媳友,下面是6個我最喜歡的JS新增特性斯议。
1.Object[key]
有時候不能在對象變量聲明時設(shè)置所有的key/value,所以得再聲明之后添加key/value醇锚。
let myKey = 'key3';
let obj = {
key1: 'One',
key2: 'Two'
};
obj[myKey] = 'Three';
往好的說這有點不方便哼御,往壞的說這種方式令人疑惑而且有點丑陋。ES6提供給開發(fā)者一種更優(yōu)雅的方式:
let myKey = 'variableKey';
let obj = {
key1: 'One',
key2: 'Two',
[myKey]: 'Three' /* yay! */
};
開發(fā)者可以使用[]
包裹變量從而使用一條語句完成所有的功能焊唬。
2.Arrow Functions
你不需要跟上ES6的所有改變恋昼,箭頭函數(shù)已經(jīng)是許多討論的話題并且也給JS開發(fā)者帶來了一些困惑。即使我可以寫很多博文來說箭頭函數(shù)的特點求晶,但是我想指出箭頭函數(shù)是如何提供一個為簡單函數(shù)壓縮代碼的方法焰雕。
// Adds a 10% tax to total
let calculateTotal = total => total * 1.1;
calculateTotal(10) // 11
// Cancel an event -- another tiny task
let brickEvent = e => e.preventDefault();
document.querySelector('div').addEventListener('click', brickEvent);
無functions
和return
關(guān)鍵詞,有時甚至不需要添加()
芳杏,箭頭函數(shù)為寫函數(shù)提供了一種簡短的代碼書寫方式矩屁。
find/findIndex
JS為開發(fā)者提供了Array.prototype.indexOf
方法來獲取數(shù)組中的指定元素下標(biāo),但是indexOf
并沒有提供一個根據(jù)判斷條件來獲取指定元素的方法爵赵,find
和findIndex
兩個方法提供了取出第一個滿足計算條件的元素和下標(biāo)吝秕。
let age = [12,19,6,4];
let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >= 19); // 1
...擴展修飾符
擴展修飾符表示數(shù)組和可迭代對象在調(diào)用的時候應(yīng)該拆分成單個參數(shù):
// Pass to function that expects separate multiple arguments
// Much like Function.prototype.apply() does
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
// Convert NodeList to Array
let divsArray = [...document.querySelectorAll('div')];
// Convert Arguments to Array
let argsArray = [...arguments];
這個特定的另一個紅利可以把可迭代對象(NodeList
、arguments
)變成真的數(shù)組空幻,以前我們經(jīng)常使用Array.from
或其他方法實現(xiàn)的烁峭。
Template Literals
JS里多行字符起初通過+
和\
來完成的,但是都很難維護(hù)秕铛。許多開發(fā)者甚至一些框架使用<script>
標(biāo)簽來容納模板约郁,然后使用DOM方法的outerHTML
來獲取HTML字符。
ES6提供了Template Literals
使用反引號來容易的創(chuàng)建多行字符串:
// Multiline String
let myString = `Hello
I'm a new line`;
//Basic interpolations
let obj = {x:1,y:2};
console.log(`Your total is: ${obj.x + obj.y}`); // Your total is 3
Default Argument Values
為函數(shù)參數(shù)提供默認(rèn)值在服務(wù)端語言已經(jīng)提供(python但两、php)鬓梅,現(xiàn)在JS也有此能力:
//Basic usage
function great( name = 'Anon' ){
console.log(`Hello ${name}`);
}
great(); // Hello Anon!
//You can have a function too!
function greet( name = 'Anon',callback = function(){} ){
console.log(`Hello ${name}!`);
// No more "callback && callback()" (no conditional)
callback();
}
// Only set a default for one parameter
function greet(name, callback = function(){}) {}
以上列出的6個特性就是ES6提供給開發(fā)者,當(dāng)然還有許多特性谨湘。
評論里提供的:
1 .
const isRequired = () => {throw new Error('param is required');};
const hello = (name = isRequired()) => { console.log(`hello ${name}`) };
2 .
const is = {
get required(){
throw new Error('Required argument')
}
}
import {is} from 'utils'
const foo(name = is.required) => Array.from(name)