5 分鐘掌握 JavaScript 實用竅門

1. 刪除數(shù)組尾部元素

一個簡單方法就是改變數(shù)組的length值:

const?arr?=?[11,?22,?33,?44,?55,?66];

// truncanting

arr.length?=?3;

console.log(arr);?//=> [11, 22, 33]

// clearing

arr.length?=?0;

console.log(arr);?//=> []

console.log(arr[2]);?//=> undefined

2. 使用對象解構(gòu)(object destructuring)來模擬命名參數(shù)

如果需要將一系列可選項作為參數(shù)傳入函數(shù),你很可能會使用對象(Object)來定義配置(Config)虚青。

doSomething({?foo:?'Hello',?bar:?'Hey!',?baz:?42?});

function?doSomething(config)?{

??const?foo?=?config.foo?!==?undefined???config.foo?:?'Hi';

??const?bar?=?config.bar?!==?undefined???config.bar?:?'Yo!';

??const?baz?=?config.baz?!==?undefined???config.baz?:?13;

??// ...

}

不過這是一個比較老的方法了,它模擬了 JavaScript 中的命名參數(shù)。

在 ES 2015 中,你可以直接使用對象解構(gòu):

function?doSomething({?foo?=?'Hi',?bar?=?'Yo!',?baz?=?13?})?{

??// ...

}

讓參數(shù)可選也很簡單:

function?doSomething({?foo?=?'Hi',?bar?=?'Yo!',?baz?=?13?}?=?{})?{

??// ...

}

3. 使用對象解構(gòu)來處理數(shù)組

可以使用對象解構(gòu)的語法來獲取數(shù)組的元素:

const?csvFileLine?=?'1997,John Doe,US,john@doe.com,New York';

const?{?2:?country,?4:?state?}?=?csvFileLine.split(',');

4. 在 Switch 語句中使用范圍值

可以這樣寫滿足范圍值的語句:

function?getWaterState(tempInCelsius)?{

??let?state;


??switch?(true)?{

????case?(tempInCelsius??0):

??????state?=?'Solid';

??????break;

????case?(tempInCelsius?>?0?&&?tempInCelsius??100):

??????state?=?'Liquid';

??????break;

????default:

??????state?=?'Gas';

??}

??return?state;

}

5. await 多個 async 函數(shù)

在使用 async/await 的時候护戳,可以使用 Promise.all 來 await 多個 async 函數(shù)

await?Promise.all([anAsyncCall(),?thisIsAlsoAsync(),?oneMore()])

6. 創(chuàng)建 pure objects

你可以創(chuàng)建一個 100% pure object代嗤,它不從Object中繼承任何屬性或則方法(比如constructor, toString()等)

const?pureObject?=?Object.create(null);

console.log(pureObject);?//=> {}

console.log(pureObject.constructor);?//=> undefined

console.log(pureObject.toString);?//=> undefined

console.log(pureObject.hasOwnProperty);?//=> undefined

7. 格式化 JSON 代碼

JSON.stringify除了可以將一個對象字符化,還可以格式化輸出 JSON 對象

const?obj?=?{

??foo:?{?bar:?[11,?22,?33,?44],?baz:?{?bing:?true,?boom:?'Hello'?}?}

};

// The third parameter is the number of spaces used to

// beautify the JSON output.

JSON.stringify(obj,?null,?4);

// =>"{

// =>????"foo": {

// =>????????"bar": [

// =>????????????11,

// =>????????????22,

// =>????????????33,

// =>????????????44

// =>????????],

// =>????????"baz": {

// =>????????????"bing": true,

// =>????????????"boom": "Hello"

// =>????????}

// =>????}

// =>}"

8. 從數(shù)組中移除重復(fù)元素

通過使用集合語法和 Spread 操作缭付,可以很容易將重復(fù)的元素移除:

const?removeDuplicateItems?=?arr?=>?[...new Set(arr)];

removeDuplicateItems([42,?'foo',?42,?'foo',?true,?true]);

//=> [42, "foo", true]

9. 平鋪多維數(shù)組

使用 Spread 操作平鋪嵌套多維數(shù)組:

const?arr?=?[11,?[22,?33],?[44,?55],?66];

const?flatArr?=?[].concat(...arr);?//=> [11, 22, 33, 44, 55, 66]

不過上面的方法僅適用于二維數(shù)組,但是通過遞歸循未,就可以平鋪任意維度的嵌套數(shù)組了:

function?flattenArray(arr)?{

??const?flattened?=?[].concat(...arr);

??return?flattened.some(item?=>?Array.isArray(item))??

????flattenArray(flattened)?:?flattened;

}


const?arr?=?[11,?[22,?33],?[44,?[55,?66,?[77,?[88]],?99]]];

const?flatArr?=?flattenArray(arr);

//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

希望這些小技巧能幫助你寫好 JavaScript?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末陷猫,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子的妖,更是在濱河造成了極大的恐慌绣檬,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,366評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件嫂粟,死亡現(xiàn)場離奇詭異娇未,居然都是意外死亡,警方通過查閱死者的電腦和手機星虹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評論 3 395
  • 文/潘曉璐 我一進(jìn)店門零抬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人宽涌,你說我怎么就攤上這事平夜。” “怎么了卸亮?”我有些...
    開封第一講書人閱讀 165,689評論 0 356
  • 文/不壞的土叔 我叫張陵忽妒,是天一觀的道長。 經(jīng)常有香客問我兼贸,道長段直,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,925評論 1 295
  • 正文 為了忘掉前任寝受,我火速辦了婚禮坷牛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘很澄。我一直安慰自己京闰,他們只是感情好颜及,可當(dāng)我...
    茶點故事閱讀 67,942評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蹂楣,像睡著了一般俏站。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上痊土,一...
    開封第一講書人閱讀 51,727評論 1 305
  • 那天肄扎,我揣著相機與錄音,去河邊找鬼赁酝。 笑死犯祠,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的酌呆。 我是一名探鬼主播衡载,決...
    沈念sama閱讀 40,447評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼隙袁!你這毒婦竟也來了痰娱?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,349評論 0 276
  • 序言:老撾萬榮一對情侶失蹤菩收,失蹤者是張志新(化名)和其女友劉穎梨睁,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體娜饵,經(jīng)...
    沈念sama閱讀 45,820評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡坡贺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,990評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了箱舞。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拴念。...
    茶點故事閱讀 40,127評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖褐缠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情风瘦,我是刑警寧澤队魏,帶...
    沈念sama閱讀 35,812評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站万搔,受9級特大地震影響胡桨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜瞬雹,卻給世界環(huán)境...
    茶點故事閱讀 41,471評論 3 331
  • 文/蒙蒙 一昧谊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧酗捌,春花似錦呢诬、人聲如沸涌哲。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽阀圾。三九已至,卻和暖如春狗唉,著一層夾襖步出監(jiān)牢的瞬間初烘,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1 272
  • 我被黑心中介騙來泰國打工分俯, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留肾筐,地道東北人。 一個月前我還...
    沈念sama閱讀 48,388評論 3 373
  • 正文 我出身青樓缸剪,卻偏偏與公主長得像吗铐,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子橄登,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,066評論 2 355

推薦閱讀更多精彩內(nèi)容