一些JavaScript編碼實用技巧!（值得收藏）

對于任何JavaScript開發(fā)人員來說删壮，這確實是必需要掌握的！

## 1.三元運算符

當您只想if..else在一行中編寫一條語句時舍扰，這是一個很好的代碼保護程序砖茸。

? ? const x = 20;

? ? let answer;

? ? if (x > 10) {

? ? ? ? answer = "greater than 10";

? ? } else {

? ? ? ? answer =? "less than 10";

? ? }

</blockquote>

我們可以這樣優(yōu)化：

? ? const answer = x > 10 ? "greater than 10" : "less than 10";

</blockquote>

您還可以像這樣嵌套您的語句：

? ? const answer = x > 10 ? "greater than 10" : x < 5 ? "less than 5" : "between 5 and 10";

</blockquote>

## 2.短路運算符

在將變量值分配給另一個變量時，您可能要確保源變量不為null碉碉，未定義或為空柴钻。您可以編寫if帶有多個條件的長語句，也可以使用短路運算符垢粮。

? ? if (variable1 !== null || variable1 !== undefined || variable1 !== '') {

? ? let variable2 = variable1;

? ? }

</blockquote>

我們可以這樣優(yōu)化：

? ? const variable2 = variable1? || 'new';

? ? let variable1;

? ? let variable2 = variable1? || 'bar';

? ? console.log(variable2 === 'bar'); // prints true

? ? variable1 = 'foo';

? ? variable2 = variable1? || 'bar';

? ? console.log(variable2); // prints foo

</blockquote>

請注意贴届，如果設置variable1為false或0，bar則將分配值。

## 3.聲明變量

在函數(shù)開始時聲明變量分配是一種很好的做法毫蚓。當同時聲明多個變量時占键，這種簡化方法可以節(jié)省大量時間和空間。

? ? let x;

? ? let y;

? ? let z = 3;

</blockquote>

我們可以這樣優(yōu)化：

? ? let x, y, z=3;

</blockquote>

## 4.if語句

這可能微不足道元潘，但值得一提畔乙。執(zhí)行if檢查時，有時可以省略賦值運算符翩概。

? ? if (likeJavaScript === true)

</blockquote>

我們可以這樣優(yōu)化：

? ? if (likeJavaScript)

</blockquote>

注意：這兩個示例并不完全相等啸澡，因為只要likeJavaScript是真實值，條件檢查就會通過氮帐。

這是另一個例子嗅虏。如果a不等于true，則執(zhí)行某些操作上沐。

? ? let a;

? ? if ( a !== true ) {

? ? // do something...

? ? }

? ? let a;

? ? if ( !a ) {

? ? // do something...

? ? }

</blockquote>

5. JavaScript For循環(huán)

如果您需要純JavaScript且不想依賴外部庫（例如jQuery或lodash）皮服，則此小技巧非常有用。

? ? const fruits = ['mango', 'peach', 'banana'];

? ? for (let i = 0; i < fruits.length; i++)

</blockquote>

我們可以這樣優(yōu)化：

? ? for (let fruit of fruits)

</blockquote>

如果您只想訪問索引参咙，請執(zhí)行以下操作：

? ? for (let index in fruits)

</blockquote>

如果要訪問文字對象中的鍵龄广，這也將起作用：

? ? const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}

? ? for (let key in obj)

? ? console.log(key) // output: continent, country, city

</blockquote>

Array.forEach的簡寫：

? ? function logArrayElements(element, index, array) {

? ? console.log("a[" + index + "] = " + element);

? ? }

? ? [2, 5, 9].forEach(logArrayElements);

? ? // a[0] = 2

? ? // a[1] = 5

? ? // a[2] = 9

</blockquote>

## 6.短路運算

如果目標參數(shù)為null或未定義，則無需編寫六行代碼來分配默認值蕴侧，我們只需使用短路邏輯運算符并僅用一行代碼即可完成相同的操作择同。

? ? let dbHost;

? ? if (process.env.DB_HOST) {

? ? dbHost = process.env.DB_HOST;

? ? } else {

? ? dbHost = 'localhost';

? ? }

</blockquote>

我可以簡化如下：

? ? const dbHost = process.env.DB_HOST || 'localhost';

</blockquote>

## 7.小數(shù)基指數(shù)

您可能已經(jīng)看到了這一周圍。從本質上講净宵，這是寫數(shù)字而沒有尾隨零的一種奇特的方式敲才。例如，1e7本質上是指1后跟7個零择葡。它代表一個等于10,000,000的十進制基數(shù)（JavaScript將其解釋為浮點類型）紧武。

? ? for (let i = 0; i < 10000; i++) {}

</blockquote>

可以簡化成如下：

? ? for (let i = 0; i < 1e7; i++) {}

? ? // All the below will evaluate to true

? ? 1e0 === 1;

? ? 1e1 === 10;

? ? 1e2 === 100;

? ? 1e3 === 1000;

? ? 1e4 === 10000;

? ? 1e5 === 100000;

</blockquote>

## 8.對象屬性

在JavaScript中定義對象文字可以使工作更加輕松。ES6提供了一種更為簡便的將屬性分配給對象的方法敏储。如果變量名與對象鍵相同阻星，則可以省略一個。

? ? const x = 1920, y = 1080;

? ? const obj = { x:x, y:y };

</blockquote>

簡寫如下：

? ? const obj = { x, y };

</blockquote>

## 9.箭頭函數(shù)

普通函數(shù)很容易以其簡單的形式進行讀寫已添，但是一旦您開始將其嵌套在其他函數(shù)調用中妥箕，它們的確會變得有些冗長和混亂。

? ? function sayHello(name) {

? ? console.log('Hello', name);

? ? }

? ? setTimeout(function() {

? ? console.log('Loaded')

? ? }, 2000);

? ? list.forEach(function(item) {

? ? console.log(item);

? ? });

</blockquote>

重要的是要注意更舞，this箭頭函數(shù)內(nèi)部的值與普通函數(shù)的不同畦幢，因此這兩個示例并非嚴格等效。有關更多詳細信息疏哗，請參見本文有關箭頭函數(shù)語法的內(nèi)容呛讲。

? ? sayHello = name => console.log('Hello', name);

? ? setTimeout(() => console.log('Loaded'), 2000);

? ? list.forEach(item => console.log(item));

</blockquote>

## 10.隱式return

`return`是我們經(jīng)常用來返回函數(shù)最終結果的關鍵字禾怠。帶有單個語句的箭頭函數(shù)將隱式返回其評估結果（該函數(shù)必須省略花括號（{}）才能省略return關鍵字）返奉。

? ? function calcCircumference(diameter) {

? ? return Math.PI * diameter

? ? }

</blockquote>

要返回多行語句（例??如對象文字）贝搁，有必要使用()而不是{}包裝函數(shù)主體。這樣可以確保將代碼作為單個語句進行評估芽偏。

? ? calcCircumference = diameter => (

? ? ? ? Math.PI * diameter;

? ? )

</blockquote>

## 11.默認參數(shù)值

您可以使用該if語句來定義函數(shù)參數(shù)的默認值雷逆。

? ? function volume(l, w, h) {

? ? ? ? if (w === undefined)

? ? ? ? ? ? w = 3;

? ? ? ? if (h === undefined)

? ? ? ? ? ? h = 4;

? ? ? ? return l * w * h;

? ? }

</blockquote>

在ES6中，可以在函數(shù)聲明本身中定義默認值污尉。

? ? volume = (l, w = 3, h = 4 ) => (l * w * h);

? ? volume(2) //output: 24

</blockquote>

## 12.模板文字

您是否不厭倦使用' + '多個變量連接到字符串中膀哲？有沒有更簡單的方法可以做到這一點？

? ? const welcome = 'You have logged in as ' + first + ' ' + last + '.'

? ? const db = 'http://' + host + ':' + port + '/' + database;

</blockquote>

如果您能夠使用ES6被碗，那么您很幸運某宪。您需要做的就是使用反引號，并將${}其括起來锐朴。

? ? const welcome = `You have logged in as ${first} ${last}`;

? ? const db = `http://${host}:${port}/${database}`;

</blockquote>

## 13.銷毀分配

如果您正在使用任何流行的Web框架兴喂，則很有可能會使用對象文字形式的數(shù)組或數(shù)據(jù)在組件和API之間傳遞信息。

? ? const observable = require('mobx/observable');

? ? const action = require('mobx/action');

? ? const runInAction = require('mobx/runInAction');

? ? const store = this.props.store;

? ? const form = this.props.form;

? ? const loading = this.props.loading;

? ? const errors = this.props.errors;

? ? const entity = this.props.entity;

</blockquote>

數(shù)據(jù)對象到達組件后焚志，您需要解壓縮它衣迷。

? ? import { observable, action, runInAction } from 'mobx';

? ? const { store, form, loading, errors, entity } = this.props;

</blockquote>

您甚至可以分配自己的變量名：

? ? const { store, form, loading, errors, entity:contact } = this.props;

</blockquote>

## 14.多行字符串

如果您發(fā)現(xiàn)自己需要在代碼中編寫多行字符串，則可以這樣編寫：

? ? const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'

? ? + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'

? ? + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'

? ? + 'veniam, quis nostrud exercitation ullamco laboris\n\t'

? ? + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'

? ? + 'irure dolor in reprehenderit in voluptate velit esse.\n\t'

</blockquote>

但是酱酬，有一種更簡單的方法壶谒。只需使用反引號即可。

? ? const lorem = `Lorem ipsum dolor sit amet, consectetur

? ? adipisicing elit, sed do eiusmod tempor incididunt

? ? ut labore et dolore magna aliqua. Ut enim ad minim

? ? veniam, quis nostrud exercitation ullamco laboris

? ? nisi ut aliquip ex ea commodo consequat. Duis aute

? ? irure dolor in reprehenderit in voluptate velit esse.`

</blockquote>

## 15.解構運算符

ES6中引入的解構運算符具有多個用例膳沽，這些用例使JavaScript代碼更加高效和有趣汗菜。

? ? // joining arrays

? ? const odd = [1, 3, 5];

? ? const nums = [2 ,4 , 6].concat(odd);

? ? // cloning arrays

? ? const arr = [1, 2, 3, 4];

? ? const arr2 = arr.slice()

</blockquote>

它可以用來替換某些數(shù)組函數(shù)。

? ? // joining arrays

? ? const odd = [1, 3, 5 ];

? ? const nums = [2 ,4 , 6, ...odd];

? ? console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]

? ? // cloning arrays

? ? const arr = [1, 2, 3, 4];

? ? const arr2 = [...arr];

</blockquote>

與該concat()函數(shù)不同挑社，可以使用解構運算符在另一個數(shù)組內(nèi)的任何位置插入一個數(shù)組呵俏。

? ? const odd = [1, 3, 5 ];

? ? const nums = [2, ...odd, 4 , 6];

</blockquote>

您還可以與ES6解構符號結合使用：

? ? const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };

? ? console.log(a) // 1

? ? console.log(b) // 2

? ? console.log(z) // { c: 3, d: 4 }

</blockquote>

## 16.強制參數(shù)

如果未傳遞值，默認情況下滔灶，JavaScript會將函數(shù)參數(shù)設置為undefined普碎。其他一些語言將引發(fā)警告或錯誤。

? ? function foo(bar) {

? ? ? ? if(bar === undefined) {

? ? ? ? ? ? throw new Error('Missing parameter!');

? ? ? ? }

? ? ? ? return bar;

? ? }

</blockquote>

要強制進行參數(shù)分配录平，可以在時使用if語句引發(fā)錯誤undefined麻车。

? ? mandatory = () => {

? ? ? ? throw new Error('Missing parameter!');

? ? }

? ? foo = (bar = mandatory()) => {

? ? ? ? return bar;

? ? }

</blockquote>

## 17. Array.find

如果您曾被要求使用純JavaScript編寫find函數(shù)，那么您可能會使用for循環(huán)斗这。

? ? const pets = [

? ? ? ? { type: 'Dog', name: 'Max'},

? ? ? ? { type: 'Cat', name: 'Karl'},

? ? ? ? { type: 'Dog', name: 'Tommy'},

? ? ? ? ]

? ? function findDog(name) {

? ? ? ? for(let i = 0; i<pets.length; ++i) {

? ? ? ? ? ? if(pets[i].type === 'Dog' && pets[i].name === name) {

? ? ? ? ? ? return pets[i];

? ? ? ? ? ? }

? ? ? ? }

? ? }

</blockquote>

在ES6中动猬，find()引入了一個名為的新數(shù)組函數(shù)。

? ? pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');

? ? console.log(pet); // { type: 'Dog', name: 'Tommy' }

</blockquote>

## 18.對象[鍵]

您知道嗎表箭，F(xiàn)oo.bar也可以寫成Foo['bar']赁咙，首先，似乎沒有理由應該這樣寫。但是彼水，此符號為您提供了編寫可重用代碼的基礎崔拥。

考慮以下簡化的驗證功能示例：

? ? function validate(values) {

? ? ? ? if(!values.first)

? ? ? ? ? ? return false;

? ? ? ? if(!values.last)

? ? ? ? ? ? return false;

? ? ? ? return true;

? ? }

? ? console.log(validate({first:'Bruce',last:'Wayne'})); // true

</blockquote>

此功能可以完美地完成其工作。但是凤覆，請考慮以下情況：您有很多表單需要應用驗證链瓦，但是具有不同的字段和規(guī)則。構建可以在運行時配置的通用驗證功能不是很好嗎盯桦？

? ? // object validation rules

? ? const schema = {

? ? ? ? first: {

? ? ? ? ? ? required:true

? ? ? ? },

? ? ? ? last: {

? ? ? ? ? ? required:true

? ? ? ? }

? ? }

? ? // universal validation function

? ? const validate = (schema, values) => {

? ? for(field in schema) {

? ? ? ? if(schema[field].required) {

? ? ? ? if(!values[field]) {

? ? ? ? ? ? return false;

? ? ? ? }

? ? }

? ? return true;

? ? }

? ? console.log(validate(schema, {first:'Bruce'})); // false

? ? console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

</blockquote>

現(xiàn)在我們有了一個驗證函數(shù)慈俯，我們可以在所有形式中重復使用，而無需為每種形式編寫自定義驗證函數(shù)拥峦。

## 19. Double Bitwise NOT簡寫

按位運算符是您在初學者JavaScript教程中了解的功能之一贴膘，而您永遠無法在任何地方實現(xiàn)它們。此外略号，如果您不處理二進制刑峡，誰愿意使用1和0？

但是璃哟，Double Bitwise NOT運算符有一個非常實用的用例氛琢。您可以用它代替Math.floor()。Double Bitwise NOT運算符的優(yōu)點是執(zhí)行相同操作的速度更快随闪。您可以在此處閱讀有關Bitwise運算符的更多信息阳似。

? ? Math.floor(4.9) === 4? //true

</blockquote>

可以這樣寫：

? ? ~~4.9 === 4? //true

</blockquote>

## 20.指數(shù)冪速記

? ? Math.pow(2,3); // 8

? ? Math.pow(2,2); // 4

? ? Math.pow(4,3); // 64

</blockquote>

可以這樣寫：

? ? 2**3 // 8

? ? 2**4 // 4

? ? 4**3 // 64?

</blockquote>

## 21.將字符串轉換為數(shù)字

有時，您的代碼會收到字符串格式的數(shù)據(jù)铐伴，但需要以數(shù)字格式進行處理撮奏。沒什么大不了的，我們可以執(zhí)行快速轉換当宴。

? ? const num1 = parseInt("100");

? ? const num2 =? parseFloat("100.01");

</blockquote>

可以這樣寫：

? ? const num1 = +"100"; // converts to int data type

? ? const num2 =? +"100.01"; // converts to float data type

</blockquote>

## 22.對象屬性分配

考慮以下代碼：

? ? let fname = { firstName : 'Black' };

? ? let lname = { lastName : 'Panther'}

</blockquote>

您如何將它們合并為一個對象畜吊？一種方法是編寫一個將數(shù)據(jù)從第二個對象復制到第一個對象的函數(shù)。不幸的是户矢，這可能不是您想要的-您可能需要創(chuàng)建一個全新的對象而不更改任何現(xiàn)有對象玲献。最簡單的方法是使用Object.assignES6中引入的功能：

? ? let full_names = Object.assign(fname, lname);

</blockquote>

您還可以使用ES8中引入的對象解構符號：

? ? let full_names = {...fname, ...lname};

</blockquote>

可以合并的對象屬性的數(shù)量沒有限制。如果確實具有具有相同屬性名稱的對象梯浪，則值將按照它們被合并的順序被覆蓋捌年。

## 23.按位索引

使用數(shù)組執(zhí)行查找時，該indexOf()函數(shù)用于檢索要查找的項目的位置挂洛。如果找不到該項目礼预，-1則返回該值。

? ? if(arr.indexOf(item) > -1) { // Confirm item IS found

? ? }

? ? if(arr.indexOf(item) === -1) { // Confirm item IS NOT found

? ? }

</blockquote>

在JavaScript中虏劲，數(shù)字0被認為是“虛假的”托酸，而大于或小于數(shù)字0則被認為是“真實的”褒颈。結果，必須編寫這樣的正確代碼励堡。

? ? if(~arr.indexOf(item)) { // Confirm item IS found

? ? }

? ? if(!~arr.indexOf(item)) { // Confirm item IS NOT found

? ? }

? ? 除了以外谷丸，bitwise(~)運算符將返回真實值-1。否定它就像這樣做一樣簡單!~念秧。另外淤井，我們也可以使用以下includes()功能：

? ? if(arr.includes(item)) { // Returns true if the item exists, false if it doesn't

? ? }

</blockquote>

## 24. Object.entries（）

這是ES8中引入的一項功能布疼，使您可以將文字對象轉換為鍵/值對數(shù)組摊趾。請參閱以下示例：

? ? const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };

? ? const arr = Object.entries(credits);

? ? console.log(arr);

? ? /** Output:

? ? [ [ 'producer', 'John' ],

? ? [ 'director', 'Jane' ],

? ? [ 'assistant', 'Peter' ]

? ? ]

? ? **/

</blockquote>

## 25. Object.values（）

這也是ES8中引入的新功能，其功能與相似Object.entries()游两，但沒有關鍵部分：

? ? const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };

? ? const arr = Object.values(credits);

? ? console.log(arr);

? ? /** Output:

? ? [ 'John', 'Jane', 'Peter' ]

? ? **/

</blockquote>

如果您感覺文章對您有幫助砾层，請幫忙點個贊吧！謝謝贱案！??

查看原文點擊<a >這里</a>

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末肛炮，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子宝踪，更是在濱河造成了極大的恐慌侨糟，老刑警劉巖，帶你破解...
沈念sama閱讀 219,270評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件瘩燥，死亡現(xiàn)場離奇詭異秕重，居然都是意外死亡，警方通過查閱死者的電腦和手機厉膀，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,489評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門溶耘，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人服鹅，你說我怎么就攤上這事凳兵。” “怎么了企软？”我有些...
開封第一講書人閱讀 165,630評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵庐扫，是天一觀的道長。經(jīng)常有香客問我仗哨，道長形庭，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,906評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任藻治，我火速辦了婚禮碘勉，結果婚禮上，老公的妹妹穿的比我還像新娘桩卵。我一直安慰自己验靡，他們只是感情好倍宾，可當我...
茶點故事閱讀 67,928評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著胜嗓，像睡著了一般高职。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上辞州，一...
開封第一講書人閱讀 51,718評論 1贊 305
城市分裂傳說
那天怔锌，我揣著相機與錄音，去河邊找鬼变过。笑死埃元，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的媚狰。我是一名探鬼主播岛杀，決...
沈念sama閱讀 40,442評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼崭孤！你這毒婦竟也來了类嗤？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 39,345評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤辨宠，失蹤者是張志新（化名）和其女友劉穎遗锣，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體嗤形，經(jīng)...
沈念sama閱讀 45,802評論 1贊 317
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡精偿，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,984評論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了派殷。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片还最。...
茶點故事閱讀 40,117評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖毡惜，靈堂內(nèi)的尸體忽然破棺而出拓轻，到底是詐尸還是另有隱情，我是刑警寧澤经伙，帶...
沈念sama閱讀 35,810評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布扶叉，位于F島的核電站，受9級特大地震影響帕膜，放射性物質發(fā)生泄漏枣氧。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,462評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一垮刹、第九天我趴在偏房一處隱蔽的房頂上張望达吞。院中可真熱鬧，春花似錦荒典、人聲如沸酪劫。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,011評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽覆糟。三九已至刻剥，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間滩字，已是汗流浹背造虏。一陣腳步聲響...
開封第一講書人閱讀 33,139評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留麦箍，地道東北人漓藕。一個月前我還...
沈念sama閱讀 48,377評論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長得像内列，于是被迫代替她去往敵國和親撵术。傳聞我的和親對象是個殘疾皇子背率，可洞房花燭夜當晚...
茶點故事閱讀 45,060評論 2贊 355

一些JavaScript編碼實用技巧!（值得收藏）

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