9個超級實用的 ES6 特性,超級實用哦！

1、展開操作符

let?firstHalf?=?[??one?,??two?];let?secondHalf?=?[?three?,??four?,?...firstHalf];

let?firstHalf?=?[??one?,??two?];let?secondHalf?=?[?three?,??four?];for(var?i=0,?i?

const?hero?=?{??name:??Xena?-?Warrior?Princess?,??realName:??Lucy?Lawless}const?heroWithSword?=?{?...hero,?weapon:??sword}

let keys = Object.keys(hero); let obj = {};

for(var i=0; i< keys.length; i++) { ? obj[keys[i]] = keys[props[i]]; }

2、剩余參數

function?add(first,?second,?...remaining)?{??return?first?+?second;}

function?add(first,?second,?...remaining)?{??return?first?+?second?+?remaining.reduce((acc,?curr)?=>?acc?+?curr,?0);}

3、字符串插值

class?Product?{?constructor(name,?description,?price)?{???this.name?=?name;???this.description?=?description;???this.price?=?price;?}getDescription()?{???return?"?Full?description"?+???"?name:?"?+?this.name?+???"?description:?"?+?this.description?}}

getDescription()?{???return?`Full?description:???name:?${this.name}???description?${this.description}???`;}

4、簡寫屬性

function?createCoord(x,?y)?{??return?{????x:?x,????y:?y??}}

function?createCoord(x,?y)?{??return?{????x,????y??}}

5、方法屬性

const?math?=?{??add:?function(a,b)?{?return?a?+?b;?},??sub:?function(a,b)?{?return?a?-?b;?},??multiply:?function(a,b)?{?return?a?*?b;?}}

const?math?=?{??add(a,b)?{?return?a?+?b;?},??sub(a,b)?{?return?a?-?b;?},??multiply(a,b)?{?return?a?*?b;?}}

6、解構賦值

function handle(req, res) { const name = req.body.name; const description = req.body.description; const url = req.url;

log( url endpoint , url);

// 大量代碼邏輯 dbService.createPerson(name, description) }

function handle(req, res) { const { body: { name, description }, url } = req;

log( url endpoint , url);

// 大量代碼邏輯 dbService.createPerson(name, description)

const?array?=?[1,2,3,4,5,6];const?a?=?array[0];const?c?=?array[2];

const array = [1,2,3,4,5,6]; const [a, ,c, ...remaining] = arr;

// remaining = [4,5,6]

function?doSomething(config)?{??if(config.a)?{?...?}??if(config.b)?{?...?}??if(config.c)?{?...?}}

function?doSomething({?a,?b,?c?})?{??if(a)?{?...?}??if(b)?{?...?}??if(c)?{?...?}}

7、數組方法

find()，查找列表中的成員，返回 null 表示沒找到

findIndex()，查找列表成員的索引

some()，檢查某個斷言是否至少在列表的一個成員上為真

includes，列表是否包含某項

const array = [{ id: 1, checked: true }, { id: 2 }]; arr.find(item => item.id === 2) // { id: 2 } arr.findIndex(item => item.id === 2) // 1 arr.some(item => item.checked) // true

const numberArray = [1,2,3,4]; numberArray.includes(2) // true Promises + Async/Await

8、異步方案

function doSomething(cb) { ?setTimeout(() => ?{ ? ?cb( done ) ?}, 3000) }

doSomething((arg) => { console.log( done here , arg); })

function doSomething() { ?return new Promise((resolve, reject) => { ? ?setTimeout(() => ?{ ? ? ?resolve( done ) ? ?}, 3000) ?}) }

doSomething().then(arg => { console.log( done here , arg); })

getUser()??.then(getOrderByUser)??.then(getOrderItemsByOrder)??.then(orderItems?=>?{????//?處理排序后的成員??})

async function getItems() { ?try { ? ?const user = await getUser(); ? ?const order = await getOrderByUser(user); ? ?const items = await getOrderItemsByOrder(order); ? ?return items; ?} catch(err) { ? ?// 在這里處理錯誤，建議返回某個值或者重新拋出錯誤 ?} }

getItems().then(items => { ?// 處理排序后的成員 }

9、模塊

// math.js

export function add(a,b) { return a + b; } export function sub(a,b) { return a - b; }

export default mult(a,b) => a * b;

// main.js import mult, { add, sub } from ?./math ;

mult(2, 4) // 8 add(1,1) ? // 2 sub(1,2) ? // -1

軟件開發

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。