20個(gè)你需要知道的JavaScript簡寫代碼片段
英文 | https://javascript.plainenglish.io/20-javascript-short-hands-you-need-to-know-in-2021-c0ed25a40837
翻譯 | 楊小二
// OPTIONAL CHAINING EXAMPLElet character = {name: 'Dean Winchester',age: 34,car: 'Chevy Imala (Baby)',enemy_demons: [ 'Abadon', 'Yellow Eyes', 'Crowley' ],enemy_angels: [ 'Zacharia', 'Michael', 'Lucifer' ],family: {mother: 'Mary',father: 'John',brother: 'Sam',}}const friend = character.friend?.name;console.log(friend) // undefined
這是更簡略的，而不是必須做這樣的事情來檢查真值：
const friend = character.friend && character.friend.name;2、 箭頭函數(shù)
我們都習(xí)慣了使用 function 關(guān)鍵字來編寫函數(shù)聲明。但是很糟糕。它們也有范圍限制。
使用箭頭函數(shù)，你可以受益于它們的作用域性質(zhì)——箭頭函數(shù)綁定到它們的父作用域，因此，你可以在許多情況下取消 .bind 方法。此外，它們看起來很漂亮。
// REGULAR FUNCTION DECLARATIONfunction my_cats(a,b,c) {return `My cats names are: ${a}, ${b} & ${c}`;}my_cats('Tom', 'Marty', 'Jimmy');// ARROW FUNCTIONlet my_cats = (a,b,c) => {return `My cats names are: ${a}, ${b} & ${c}`;};my_cats('Tom', 'Marty', 'Jimmy');
單行箭頭函數(shù)的示例 - 它允許你省略 return 關(guān)鍵字和 {} ：
// SINGLE LINE ARROW FUNCTIONS WITHOUT RETURN KEYWORD OR {}let oldest_cat = c => `${c} is the oldest one`;oldest_cat('Jimmy'); // Jimmy is the oldest one
3、 展開運(yùn)算符
這個(gè)允許你將元素從一個(gè)數(shù)組復(fù)制到另一個(gè)數(shù)組，連接/合并數(shù)組、對(duì)象等等。但由于這不完全是速成課程，讓我們看一個(gè)簡單的例子：
//------------------------------------------------// COPY ELEMENTS FROM ONE ARRAY INTO ANOTHER ARRAY//------------------------------------------------const fruits = ['apple', 'mangoe', 'papaya'];const updated_fruits = ['banana', ...fruits];console.log(updated_fruits); // [ 'banana', 'apple', 'mangoe', 'papaya' ]//-------------------// MERGING TWO ARRAYS//-------------------const my_cats = ['Jimmy', 'Marty', 'Max'];const your_cats = ['George', 'Botsoe', 'Benny'];const our_cats = [...my_cats, ...your_cats];console.log(our_cats); // [ 'Jimmy', 'Marty', 'Max', 'George', 'Botsoe', 'Benny' ]//----------------// MERGING OBJECTS//----------------const profile = {name: 'Dean Winchester',age: 34,car: 'Chevy Imala (Baby)'}const list_of_enemies = {enemy_demons: ['Abadon', 'Yellow Eyes', 'Crowley'],enemy_angels: ['Zacharia', 'Michael', 'Lucifer']}const character = {...profile,...list_of_enemies}console.log(character);/*{name: 'Dean Winchester',age: 34,car: 'Chevy Imala (Baby)',enemy_demons: [ 'Abadon', 'Yellow Eyes', 'Crowley' ],enemy_angels: [ 'Zacharia', 'Michael', 'Lucifer' ]}*/
4、 真/假檢查器
關(guān)于真/假檢查器，但考慮一下這樣的事情：
let Dean = {name: 'Dean Winchester',age: 34,car: 'Chevy Imala (Baby)',enemy_demons: [ 'Abadon', 'Yellow Eyes', 'Crowley' ],enemy_angels: [ 'Zacharia', 'Michael', 'Lucifer' ],family: {mother: 'Mary',father: 'John',}}let supernatural = (cr1, cr2) => {let main_char = cr1;let second_char = cr2;console.log(main_char, second_char); // {...} undefined// IF FALSY (undefined, null)if (!second_char) {second_char = {...main_char,name: 'Sam Winchester',age: 31,};console.log(main_char, second_char);}}supernatural(Dean);// LINE 26's OUTPUT:/*{name: 'Dean Winchester',age: 34,car: 'Chevy Imala (Baby)',enemy_demons: [ 'Abadon', 'Yellow Eyes', 'Crowley' ],enemy_angels: [ 'Zacharia', 'Michael', 'Lucifer' ],family: { mother: 'Mary', father: 'John' }}{name: 'Sam Winchester',age: 31,car: 'Chevy Imala (Baby)',enemy_demons: [ 'Abadon', 'Yellow Eyes', 'Crowley' ],enemy_angels: [ 'Zacharia', 'Michael', 'Lucifer' ],family: { mother: 'Mary', father: 'John' }}*/
在第 20 行，我們檢查 second_char 的值是否為假，用 ! 表示。人家就是這么簡單！編寫這樣的代碼將為你節(jié)省大量時(shí)間并縮短你的代碼，從而使其更清晰，更高級(jí)的開發(fā)人員。
非常好，我們開始介紹下一位參賽者！
5、三元運(yùn)算符
在檢查你的貓是否愛你時(shí)，將不可避免地使用 if/else 或 switch 編寫大量額外代碼。考慮這個(gè)簡單的例子：
// REGULAR IF/ELSEconst cat_love_checker = (status) => {if (status === false) {return 'Sigh... my cat does not love me :(';} else {return 'Aha! My cat does love me!';}}cat_love_checker(false); // Sigh... my cat does not love me :(// TERNARY OPERATORconst cat_love_checker = status => (status === false ? 'Sigh... my cat does not love me :(' : 'Aha! My cat does love me!');cat_love_checker(false); // Sigh... my cat does not love me :(
在第 14 行，我們首先檢查 status 是否等于 false，如果是，我們返回一個(gè)字符串 Sigh... my cat does not love me :( 。否則，我們返回另一個(gè)字符串——很高興我們的貓確實(shí)愛我們 . 基本上，如果 ? 之前的語句評(píng)估為 true ，則返回 ? 右側(cè)的任何內(nèi)容。
6、聲明變量
聲明變量實(shí)際上是所有編碼中最簡單的事情之一。然而，某些聲明變量的方法比其他方法更冗長，需要更多的努力，編寫更多的代碼。讓我們看一些例子：
// REGULAR WAYlet fav_num;let fav_fruit = 'Apple';console.log(fav_num); // undefinedconsole.log(fav_fruit); // 'Apple'// SHORTER WAYlet fav_num, fav_fruit = 'Banana';console.log(fav_num); // undefinedconsole.log(fav_fruit); // 'Banana'// ASSIGNING MULTIPLE VALUES (LONGER WAY)let older_bro, younger_bro;older_bro = 'Dean';younger_bro = 'Sammie';console.log(older_bro, younger_bro); // Dean Sammie// SHORTER WAYlet [older_bro, younger_bro] = ['Dean', 'Sammie'];console.log(older_bro, younger_bro); // Dean Sammie
7、十進(jìn)制基數(shù)
你告訴你的貓（或狗或任何其他寵物）多少次你愛它們？如果你和我一樣，那肯定至少有一百萬次……（一個(gè)小時(shí)）。但是，如果我要寫一個(gè)簡短的腳本來告訴我的貓這個(gè)，我用更短的方式來寫它，它會(huì)花費(fèi)更少的代碼（廢話）。讓我們比較一下兩者：
// LONGER WAY-------- ??for (let i = 0; i < 1000000; i++) {console.log('I love my cat!'); // OUTPUTS A MILLION TIMES}// SHORTER WAY ----- ??for (let i = 0; i < 1e7; i++) {console.log('I love my cat!'); // OUTPUTS A MILLION TIMES}
基本上，e 后面的數(shù)字代表 1 后面 0 的個(gè)數(shù)。例如 100 = 1e2（因?yàn)閿?shù)字 1 后面有 2 個(gè)零）等等。（你可能不應(yīng)該運(yùn)行上面的代碼片段，因?yàn)樗赡軙?huì)導(dǎo)致你的瀏覽器崩潰！）
8、 For 循環(huán)簡寫
當(dāng)對(duì)整個(gè)數(shù)組進(jìn)行直接循環(huán)時(shí)，沒有任何時(shí)髦的東西，我們習(xí)慣于編寫傳統(tǒng)的 for 循環(huán)，現(xiàn)在甚至是 forEach 。但如果我為你引入 for of 循環(huán)呢？檢查出 p：
// LONGER WAYlet song = ['eenine', 'meenie', 'miney', 'mo'];for (let i = 0; i < song.length; i++) {console.log(song[i]); // eenie meenie miney mo}// SHORTER WAYfor (const word of song) {console.log(word); // eenie meenie miney mo}
9、Implicit Return
現(xiàn)在我們已經(jīng)在之前的一些示例中看到了這一點(diǎn)，我們可以在箭頭函數(shù)中省略花括號(hào)和 return 關(guān)鍵字：
let name_printer = name => (`My name is ${name}... James ${name}`);name_printer('Bond'); // My name is Bond... James Bond
請注意我們在這里省略的 3 件事：
大括號(hào)
返回關(guān)鍵字
分號(hào)（在函數(shù)體內(nèi)）
10、模板文字
現(xiàn)在你可能想知道，“這 ${something} 生意是什么？”。我的朋友，這是一個(gè)節(jié)省時(shí)間的……一個(gè)模板文字是……文字。將我們的字符串包裹在反引號(hào) `` 中，我們可以在將變量注入到我們的字符串中的同時(shí)輸出一個(gè)常規(guī)字符串！
一個(gè)可靠的例子：
let poem_name = 'Baba Black Sheep';console.log(`My favorite poem is ${poem_name}.`); // My favorite poem is Baba Black Sheep.
11、 默認(rèn)參數(shù)
現(xiàn)在，在對(duì)參數(shù)執(zhí)行任何操作之前，你有多少次必須檢查參數(shù)是否為空值？大概是 1e7 次吧？引入默認(rèn)參數(shù)，你可以在其中為參數(shù)賦值：
// REGULAR PASSED PARAMETERSconst sum_genetator = (a, b) => {console.log(a + b);}sum_genetator(2, 5); // 7// DEFAULT PARAMETERSconst sum_genetator = (a, b=10) => {console.log(a + b);}sum_genetator(2); // 12sum_genetator(2, undefined); // 12
即使我們明確地將第二個(gè)值設(shè)置為 undefined ，我們的默認(rèn)參數(shù)優(yōu)先并保留我們在第 9 行傳入的參數(shù)值。
12、多行字符串
這個(gè)沒有描述，很簡單：
// REGULAR WAY USING /n TO DENOTE NEW LINEconst message_to_cat = 'You are the best cat in the whole world\n' +'You are the best cat in the whole world\n' +'You are the best cat in the whole world\n' +'You are the best cat in the whole world\n';// USING BACK-TICKSconst message_to_dog = `You are the goodest boy ever. You are the goodest boy ever.You are the goodest boy ever. You are the goodest boy ever. You are the goodest boy ever.You are the goodest boy ever. You are the goodest boy ever. You are the goodest boy ever.`
13、 強(qiáng)制性參數(shù)
在處理多個(gè)參數(shù)時(shí)，有時(shí)你可能偶爾會(huì)得到一些未定義或 null 的信息……無論哪種方式，為了以防萬一，最好進(jìn)行 null 檢查。
與其編寫一個(gè) if 語句每次都檢查 undefined 或 null ，為什么不只用一個(gè)函數(shù)來執(zhí)行此操作并與我們的參數(shù)并行調(diào)用該函數(shù)呢？大家來看看：
const error_handler = (property) => {throw new Error(`Error: ${property} is required!`);}const monitor_roads = (car=error_handler('Car'), speed=error_handler('Speed')) => {console.log(`Your ${car} was going at a speed of ${speed}mph.`);}monitor_roads('Ferrari', 240); // Your Ferrari was going at a speed of 240mph.monitor_roads('Ferrari'); // Error: Speed is required!
14、對(duì)象屬性值
如果你希望對(duì)象鍵的值與變量名稱相同，ES6 允許你將變量名稱傳遞到對(duì)象中。
區(qū)別在于第 8 行和第 30 行：
//------------// LONGER WAY//------------let older_bro = 'Dean';let younger_bro = 'Sammie';let badass_angel = 'Castiel';let team_supreme = {older_bro: older_bro,younger_bro: younger_bro,badass_angel: badass_angel}console.log(team_supreme);/*{older_bro: 'Dean',younger_bro: 'Sammie',badass_angel: 'Castiel'}*///------------// SHORTER WAY//------------let older_bro = 'Dean';let younger_bro = 'Sammie';let badass_angel = 'Castiel';let team_supreme = { older_bro, younger_bro, badass_angel };console.log(team_supreme);/*{older_bro: 'Dean',younger_bro: 'Sammie',badass_angel: 'Castiel'}*/
15、將字符串轉(zhuǎn)換為數(shù)字
使用 Javascript，有一些眾所周知的方法可以將字符串轉(zhuǎn)換為數(shù)字，其中一些流行的方法是 parseInt() 和 Number() 。
但是使用 + 運(yùn)算符有一個(gè)鮮為人知的技巧，它只是簡單地在字符串/變量之前添加：
let age = '85';console.log(parseInt(age)); // 85console.log(Number(age)); // 85console.log(+age); // 85
16、對(duì)象鍵
還記得那些痛苦的日子，你不得不手動(dòng)迭代一個(gè)對(duì)象來獲取它的鍵，然后執(zhí)行一些乏味的邏輯......我只是想想就覺得累了。
但是，幸運(yùn)的是，我們有一個(gè)簡潔的小方法，可以通過單行代碼為我們解決問題：
let cat = {name: 'Jimmy boy',age: 5,breed: 'British Shorthair',favorite_word: 'Meow',favorite_food: 'Chimkens'}console.log(Object.keys(cat)); // [ 'name', 'age', 'breed', 'favorite_word', 'favorite_food' ]
Object.keys 返回一個(gè)數(shù)組，我們可以迭代它并使用這些鍵做任何我們需要做的事情。
17、 對(duì)象值
同樣，我們可以使用 Object.values 方法對(duì)對(duì)象的值執(zhí)行相同的操作！一探究竟：
let cat = {name: 'Jimmy boy',age: 5,breed: 'British Shorthair',favorite_word: 'Meow',favorite_food: 'Chimkens'}console.log(Object.values(cat)); // [ 'Jimmy boy', 5, 'British Shorthair', 'Meow', 'Chimkens' ]
18、合并數(shù)組
我們可以使用擴(kuò)展運(yùn)算符輕松合并數(shù)組（我們在前面的示例中看到了這一點(diǎn)）：
let my_fav_snacks = ['PBJ', 'Toast', 'Cannoli'];let your_fav_snacks = ['Chex Mix', 'Bhajiyaas', 'Samosas'];let our_fav_snacks = [...my_fav_snacks, ...your_fav_snacks, 'Pancakes'];console.log(our_fav_snacks);/*['PBJ','Toast','Cannoli','Chex Mix','Bhajiyaas','Samosas','Pancakes']*/
我們使用 spread 語法從本質(zhì)上復(fù)制每個(gè)數(shù)組中的所有元素并將它們注入另一個(gè)數(shù)組，同樣，我們還添加了一個(gè)額外的元素 Pancakes。
19、簡短評(píng)估
基本上，如果 and && 運(yùn)算符左側(cè)的變量計(jì)算結(jié)果為 true ，我們執(zhí)行 && 之后的任何內(nèi)容。一探究竟：
// LONG VERSIONconnected_to_db ? send_data() : retry();// SHORT VERSIONconnected_to_db && send_data();
20、字符串比較（我最喜歡的）
假設(shè)你正在編寫一個(gè)算法來從數(shù)組中刪除重復(fù)項(xiàng)。傳統(tǒng)上，你必須編寫一個(gè)復(fù)雜的解決方案，這會(huì)占用你大量寶貴的時(shí)間。介紹 localeCompare ：
let names = ['Aron', 'Elon', 'Tom', 'Tom'];let result = [];const remove_dupes = arr => {for (let i = 0; i < arr.length; i++) {if (arr[i].localeCompare(arr[i + 1]) != 0) {result.push(arr[i]);}}return result;};remove_dupes(names); // [ 'Aron', 'Elon', 'Tom' ]
總結(jié)
以上就是20個(gè)關(guān)于JavaScript的簡寫代碼片段。我真的希望這些對(duì)你有所幫助，這些簡寫的示例，可以幫助你工作時(shí)節(jié)省時(shí)間和精力的好方法，它們使你的代碼更加流暢和可擴(kuò)展。
最后，謝謝你的時(shí)間！并感謝你的閱讀。
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號(hào)
