當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

写更漂亮的javascript

發布時間：2023/12/13 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了写更漂亮的javascript 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

用更合理的方式寫 JavaScript

聲明變量

1.1 使用let和const代替var
- 不會變的聲明用const
//bad var $cat = $('.cat')//good const $cat = $('.cat')
- 會變動的聲明用let
//bad var count = 1 if (count<10) {count += 1 }//good let count = 1 if (count<10) {count += 1 }
1.2 將所有的 const 和 let 分組

為什么？當你需要把已賦值變量賦值給未賦值變量時非常有用。
// bad let i, len, dragonball,items = getItems(),goSportsTeam = true;// bad let i; const items = getItems(); let dragonball; const goSportsTeam = true; let len;// good const goSportsTeam = true; const items = getItems(); let dragonball; let i; let length;
1.3 在你需要的地方給變量賦值，但請把它們放在一個合理的位置。

為什么？let 和 const 是塊級作用域而不是函數作用域。
// bad - unnecessary function call const checkName = function (hasName) {const name = getName();if (hasName === 'test') {return false;}if (name === 'test') {this.setName('');return false;}return name; };// good const checkName = function (hasName) {if (hasName === 'test') {return false;}const name = getName();if (name === 'test') {this.setName('');return false;}return name; };
? 返回目錄

對象 Objects

2.1 使用字面值創建對象。eslint: no-new-object
// bad const item = new Object();// good const item = {};

2.2 創建有動態屬性名的對象時，使用可被計算的屬性名稱。

為什么？因為這樣可以讓你在一個地方定義所有的對象屬性。
const getKey = function (k) {return `a key named ${k}`; };// bad const obj = {id: 1,name: 'San Francisco', }; obj[getKey('enabled')] = true;// good const obj = {id: 1,name: 'San Francisco',[getKey('enabled')]: true, };

2.3 使用對象方法的簡寫。eslint: object-shorthand
// bad const atom = {value: 1,addValue: function (value) {return atom.value + value;}, };// good const atom = {value: 1,addValue(value) {return atom.value + value;}, };

2.4 使用對象屬性值的簡寫。eslint: object-shorthand

為什么？因為這樣更短更有描述性。
const lukeSkywalker = 'Luke Skywalker';// bad const obj = {lukeSkywalker: lukeSkywalker, };// good const obj = {lukeSkywalker, };
2.5 在對象屬性聲明前把簡寫的屬性分組。

為什么？因為這樣能清楚地看出哪些屬性使用了簡寫。
const anakinSkywalker = 'Anakin Skywalker'; const lukeSkywalker = 'Luke Skywalker';// bad const obj = {episodeOne: 1,twoJedisWalkIntoACantina: 2,lukeSkywalker,episodeThree: 3,mayTheFourth: 4,anakinSkywalker, };// good const obj = {lukeSkywalker,anakinSkywalker,episodeOne: 1,twoJedisWalkIntoACantina: 2,episodeThree: 3,mayTheFourth: 4, };
2.6 ==只==把對象中是無效標識符的屬性用引號括起來。 eslint: quote-props

為什么？通常認為這樣寫更容易閱讀，更好的支持語法高亮，也更容易被許多 JS 引擎優化。
// bad const bad = {'foo': 3,'bar': 4,'data-blah': 5, };// good const good = {foo: 3,bar: 4,'data-blah': 5, };
2.7 不要直接調用 Object.prototype 方法，比如 hasOwnProperty, propertyIsEnumerable,和 isPrototypeOf。

為什么？這些方法有可能被對象本身的方法所遮蔽 - 比如{ hasOwnProperty: false } - 或者, 這個對象是個 null object (Object.create(null))。
// bad console.log(object1.hasOwnProperty(key));// good console.log(Object.prototype.hasOwnProperty.call(object, key));// best const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope. /* or */ import has from 'has'; // https://www.npmjs.com/package/has // ... console.log(has.call(object, key));
2.8 使用對象字面量創建對象時，大括號必須換行。使用對象解構賦值時，如果對象屬性超過2個，必須換行。eslint: object-curly-newline
// bad const original = {a: 1, b: 2}; const {height, largeSize, smallSize} = item;// good const original = {a: 1, b: 2, }; const {height,largeSize,smallSize, } = item; const {height, largeSize} = item;
2.9
單行定義對象時，最后一個成員不以逗號結尾。多行定義的對象，最后一個成員以逗號結尾。
```javascript
// bad
const foo = { k1: v1, k2: v2, };
const bar = {
k1: v1,
k2: v2
};

// good
const foo = { k1: v1, k2: v2 };
const bar = {
k1: v1,
k2: v2,
};
```
? 返回目錄

數組 Arrays

3.1 使用字面值創建數組。eslint: no-array-constructor
// bad const items = new Array();// good const items = [];
3.2 向數組添加元素時使用 Array#push 替代直接賦值。
const someStack = [];// bad someStack[someStack.length] = 'abracadabra';// good someStack.push('abracadabra');

3.3 使用擴展運算符 ... 復制數組。
// bad const len = items.length; const itemsCopy = []; let i;for (i = 0; i < len; i++) {itemsCopy[i] = items[i]; }// good const itemsCopy = [...items];
3.4 使用擴展運算符 ... 代替 Array.from 把一個類數組對象轉換成數組。
const foo = document.querySelectorAll('.foo');// good const nodes = Array.from(foo);// best const nodes = [...foo];
3.5 使用 Array.from 代替擴展運算符 ... 來映射迭代器，因為這樣可以避免創建一個中間數組。(array.from可以把類數組或者字符串轉化為數組)
// bad const baz = [...foo].map(bar);// good const baz = Array.from(foo, bar);
3.6 在數組方法的回調中使用return語句。如果函數只有一行代碼，并且只返回了一個表達式，那么可以省略返回值。關聯 7.2. eslint: array-callback-return
// good [1, 2, 3].map((x) => {const y = x + 1;return x * y; });// good [1, 2, 3].map(x => x + 1);// bad - no returned value means `memo` becomes undefined after the first iteration [[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {const flatten = memo.concat(item);memo[index] = flatten; });// good [[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {const flatten = memo.concat(item);memo[index] = flatten;return flatten; });// bad inbox.filter((msg) => {const {subject, author} = msg;if (subject === 'Mockingbird') {return author === 'Harper Lee';} else {return false;} });// good inbox.filter((msg) => {const {subject, author} = msg;if (subject === 'Mockingbird') {return author === 'Harper Lee';}return false; });
3.7 如果數組有多行，請在打開和關閉數組括號前使用換行符。eslint: array-bracket-newline
// bad const arr = [[0, 1], [2, 3], [4, 5], ];const objectInArray = [{id: 1, }, {id: 2, }];const numberInArray = [1, 2, ];// good const arr = [[0, 1], [2, 3], [4, 5]];const objectInArray = [{id: 1,},{id: 2,}, ];const numberInArray = [1,2, ];
3.8 禁止使用稀疏數組。eslint: no-sparse-arrays
// bad const color = ['red',, 'blue'];// good const color = ['red', 'blue'];

? 返回目錄

字符串 Strings

4.1 字符串使用單引號 '' 。eslint: quotes
// bad const name = "Capt. Janeway";// bad - template literals should contain interpolation or newlines const name = `Capt. Janeway`;// good const name = 'Capt. Janeway';
4.2 字符串超過 ==80== 個字節應該使用字符串連接號換行。
4.3 注：過度使用字串連接符號可能會對性能造成影響。jsPerf 和討論。但是打包工具會在打包壓縮后的代碼中處理好字符串的拼接。而且字串連接符號對性能影響有限。
// bad const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';// bad const errorMessage = 'This is a super long error that was thrown because \ of Batman. When you stop to think about how Batman had anything to do \ with this, you would get nowhere \ fast.';// good const errorMessage = 'This is a super long error that was thrown because ' +'of Batman. When you stop to think about how Batman had anything to do ' +'with this, you would get nowhere fast.';

4.4 程序化生成字符串時，使用模板字符串代替字符串連接。eslint: prefer-template template-curly-spacing

為什么？模板字符串更為簡潔，更具可讀性。
// bad const sayHi = function (name) {return 'How are you, ' + name + '?'; };// bad const sayHi = function (name) {return ['How are you, ', name, '?'].join(); };// bad const sayHi = function (name) {return `How are you, ${ name }?`; };// good const sayHi = function (name) {return `How are you, ${name}?`; };

4.5 不要在字符串中使用 eval()，這個方法有要多缺陷。eslint: no-eval

4.6 不要在字符串中使用不必要的轉義字符。 eslint: no-useless-escape

為什么？反斜杠導致代碼不可讀，因此應該在必要的時候使用。
// bad const foo = '\'this\' \i\s \"quoted\"';// good const foo = '\'this\' is "quoted"'; const foo = `my name is '${name}'`;

? 返回目錄

函數 Functions

5.1 使用函數表達式代替函數聲明（頂級函數不受限制）。eslint: func-style

為什么？函數聲明會把整個函數提升（hoisted），這導致在函數定義之前就可以引用該函數。這會影響代碼的可讀性和可維護性。
// bad function foo() {// ... }// good const foo = function () {// ... };
5.2 用括號包裹立即執行函數表達式。 eslint: wrap-iife

為什么？立即執行函數表達式是個單獨的模塊，用括號將函數和表示函數執行的括號包裹起來，會使代碼更清晰。
// 立即執行函數表達式 (IIFE) (function () {console.log('Welcome to the Internet. Please follow me.'); }());
5.3 永遠不要在一個非函數代碼塊（if、while 等）中聲明一個函數，應該把函數賦給代碼塊外部的一個變量。瀏覽器允許你這么做，但它們的解析表現不一致。eslint: no-loop-func
注意: ECMA-262 把 block 定義為一組語句。函數聲明不是語句。閱讀 ECMA-262 關于這個問題的說明
//bad if (foo) {function test () {...} //good let test; if(foo) {test = () => {...} }
5.4 永遠不要把參數命名為 arguments。這將取代原來函數作用域內的 arguments 對象。
// bad const nope = function (name, options, arguments) {// ...stuff... };// good const yup = function (name, options, args) {// ...stuff... };

5.5 不要使用 arguments。可以選擇 rest 語法 ... 替代。eslint: prefer-rest-params

為什么？使用 ... 能明確你要傳入的參數。另外 rest 參數是一個真正的數組，而 arguments 是一個類數組。
// bad const concatenateAll = function () {const args = Array.prototype.slice.call(arguments);return args.join(''); };// good const concatenateAll = function (...args) {return args.join(''); };

5.6 直接給函數的參數指定默認值，不要使用一個變化的函數參數。
// really bad const handleThings = function (opts) {// 不！我們不應該改變函數參數。// 更加糟糕: 如果參數 opts 是 false 的話，它就會被設定為一個對象。// 但這樣的寫法會造成一些 Bugs。//（譯注：例如當 opts 被賦值為空字符串，opts 仍然會被下一行代碼設定為一個空對象。）opts = opts || {};// ... };// still bad const handleThings = function (opts) {if (opts === void 0) {opts = {};}// ... };// good const handleThings = function (opts = {}) {// ... };
5.7 直接給函數參數賦值時需要避免副作用。

為什么？因為這樣的寫法讓人感到很困惑。
var b = 1; // bad const count = function (a = b++) {console.log(a); }; count(); // 1 count(); // 2 count(3); // 3 count(); // 3

5.8 不要使用構造函數的方式創建一個新函數。 eslint: no-new-func

為什么？用構造函數的方式創建函數類似于用 eval() 創建字符串，會有很多缺陷。
// bad var add = new Function('a', 'b', 'return a + b');// still bad var subtract = Function('a', 'b', 'return a - b'); （所以是不使用class語法的意思嗎）
6.9 function 關鍵詞的空格。 eslint: space-before-function-paren space-before-blocks

為什么？保持一致性，這樣在添加和刪除函數時就不需要修改空格了。
// bad const fetch = function(){}; const get = function (){}; const hold = function() {};// good const fetch = function () {};

5.10 優先使用擴展運算符 ... 來調用參數可變的函數。 eslint: prefer-spread

為什么？這樣寫代碼更干凈，不必提供上下文。

```javascript
// bad
const x = [1, 2, 3, 4, 5];
console.log.apply(console, x);

// good
const x = [1, 2, 3, 4, 5];
console.log(...x);

// bad
new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5]));

// good
new Date(...[2016, 8, 5]);

5.11 有默認值的參數總是放在最后一個。

```javascript
// bad
const handleThings = function (opts = {}, name) {
// ...
};
// good
const handleThings = function (name, opts = {}) {
// ...
};
``` ```
5.12 建議函數的圈復雜度(代碼的獨立現行路徑條數)==在20以內==。 eslint: complexity

為什么？這樣可以減少函數的復雜度，使函數容易看懂。

? 返回目錄

箭頭函數

6.1 當你必須使用函數表達式（或傳遞一個匿名函數）時，使用箭頭函數符號。eslint: prefer-arrow-callback, arrow-spacing

為什么？因為箭頭函數創造了新的一個 this 執行環境（譯注：參考 Arrow functions - JavaScript | MDN 和 ES6 arrow functions, syntax and lexical scoping），通常情況下都能滿足你的需求，而且這樣的寫法更為簡潔。

為什么不？如果你有一個相當復雜的函數，你或許可以把邏輯部分轉移到一個函數聲明上。
// bad [1, 2, 3].map(function (num) {const sum = num + 1;return num * sum; });// good [1, 2, 3].map((num) => {const sum = num + 1;return num * sum; });
6.2 如果一個函數適合用一行寫出并且只有一個參數，那就把花括號、圓括號和 return 都省略掉。如果不是，那就不要省略。eslint: arrow-parens, arrow-body-style

為什么？語法糖。在鏈式調用中可讀性很高。
// bad [1, 2, 3].map((number) => {const nextNumber = number + 1;`A string containing the ${nextNumber}.`; });// good [1, 2, 3].map((number) => `A string containing the ${number}.`);// good [1, 2, 3].map((number) => {const nextNumber = number + 1;return `A string containing the ${nextNumber}.`; });// good [1, 2, 3].map((number, index) => ({[index]: number, }));// No implicit return with side effects const foo = function (callback) {const val = callback();if (val === true) {// Do something if callback returns true} };let bool = false;// bad foo(() => bool = true);// good foo(() => {bool = true; });
6.3 如果一個表達式跨行了，必須用括號括起來增強可讀性。

為什么？這使得函數開始和結束的位置非常清晰。
// bad ['get', 'post', 'put'].map((httpMethod) => Object.prototype.hasOwnProperty.call(httpMagicObjectWithAVeryLongName,httpMethod,) );// good ['get', 'post', 'put'].map((httpMethod) => (Object.prototype.hasOwnProperty.call(httpMagicObjectWithAVeryLongName,httpMethod,) ));

6.4 入參必須用括號括起來。eslint: arrow-parens

為什么？保持代碼清晰和一致性。
// bad [1, 2, 3].map(num => num * num);// good [1, 2, 3].map((num) => num * num);// bad [1, 2, 3].map(num => {const sum = num + 1;return num * sum; });// good [1, 2, 3].map((num) => {const sum = num + 1;return num * sum; });
6.5 避免混用箭頭函數的語法 (=>) 和比較運算符 (<=, >=)。 eslint: no-confusing-arrow
// bad const itemHeight = item => item.height > 1000 ? item.largeSize : item.smallSize;// bad const itemHeight = (item) => item.height > 1000 ? item.largeSize : item.smallSize;// good const itemHeight = (item) => (item.height > 1000 ? item.largeSize : item.smallSize);// good const itemHeight = (item) => {const {height,largeSize,smallSize,} = item;return height > 1000 ? largeSize : smallSize; };

? 返回目錄

模塊 Modules

7.1 總是使用模組 (import/export) 而不是其他非標準模塊系統。你可以編譯為你喜歡的模塊系統。

為什么？模塊化是未來趨勢。
// bad const AirbnbStyleGuide = require('./AirbnbStyleGuide'); module.exports = AirbnbStyleGuide.es6;// ok import AirbnbStyleGuide from './AirbnbStyleGuide'; export default AirbnbStyleGuide.es6;// best import {es6} from './AirbnbStyleGuide'; export default es6;
7.2 不要使用通配符 import。

為什么？這樣能確保你只有一個默認 export。
// bad import * as AirbnbStyleGuide from './AirbnbStyleGuide';// good import AirbnbStyleGuide from './AirbnbStyleGuide';
7.3 不要從 import 中直接 export。

為什么？雖然一行代碼簡潔明了，但讓 import 和 export 各司其職讓事情能保持一致。
// bad // filename es6.js export {es6 as default} from './airbnbStyleGuide';// good // filename es6.js import {es6} from './AirbnbStyleGuide'; export default es6;

7.4 不要多次 import 同一個文件。eslint: no-duplicate-imports

Why? 多個地方引入同一個文件會使代碼難以維護。
// bad import foo from 'foo'; // … some other imports … // import {named1, named2} from 'foo';// good import foo, {named1, named2} from 'foo';// good import foo, {named1,named2, } from 'foo';

? 返回目錄

Iterators and Generators

8.1 不要使用 iterators。使用高階函數例如 map() 和 reduce() 替代 for-of 和 for-in。eslint: no-iterator no-restricted-syntax

為什么？這加強了我們不變的規則。處理純函數的回調值更易讀，這比它帶來的副作用更重要。

使用 map()、every()、filter()、find()、findIndex()、reduce()、some()...來遍歷數組，使用 Object.keys()、Object.values()、Object.entries() 生成數組以便遍歷對象。
const numbers = [1, 2, 3, 4];// bad let sum = 0; for (let num of numbers) {sum += num; }sum === 10;// good let sum = 0; numbers.forEach((num) => {sum += num; }); sum === 10;// best (use the functional force) const sum = numbers.reduce((total, num) => total + num, 0); sum === 10;
8.2 現在還不要使用 generators。

為什么？因為它們現在還沒法很好地編譯到 ES5。

? 返回目錄

屬性 Properties

9.1 使用 . 來訪問對象的屬性。eslint: dot-notation
const luke = {jedi: true,age: 12, };// bad const isJedi = luke['jedi'];// good const isJedi = luke.jedi;
9.2 當通過變量訪問屬性時使用中括號 []。
const luke = {jedi: true,age: 12, };const getProp = (prop) => {return luke[prop]; }const isJedi = getProp('jedi');

? 返回目錄

變量 Variables

11.1 不要鏈式的給變量賦值。eslint: no-multi-assign

為什么？鏈式變量賦值會創建隱式的全局變量。
// bad (function example() {// JavaScript interprets this as// let a = ( b = ( c = 1 ) );// The let keyword only applies to variable a; variables b and c become// global variables.let cat = dog = bird = 1; }());console.log(cat); // throws ReferenceError console.log(dog); // 1 console.log(bird); // 1// good (function example() {let cat = 1;let dog = cat;let bird = cat; }());console.log(cat); // throws ReferenceError console.log(dogb); // throws ReferenceError console.log(bird); // throws ReferenceError// the same applies for `const`

10.2 避免使用累加和累減符號 (++, --)。 eslint no-plusplus

為什么？根據 eslint 文檔，累加和累減會受到自動插入分號的影響，并可能導致一些意外情況發生。
// bad const array = [1, 2, 3]; let num = 1; num++; --num;let sum = 0; let truthyCount = 0; for (let i = 0; i < array.length; i++) {let value = array[i];sum += value;if (value) {truthyCount++;} }// good const array = [1, 2, 3]; let num = 1; num += 1; num -= 1;const sum = array.reduce((a, b) => a + b, 0); const truthyCount = array.filter(Boolean).length;

10.3 避免使用魔法數字（白名單如下）。 eslint no-magic-numbers

為什么？魔法數字讓人難難以明白開發者的意圖是什么，破壞代碼的可讀性和可維護性。
// 以下為魔法數字白名單 let magicNumberIgnore = [];// baisc number magicNumberIgnore = magicNumberIgnore.concat([-1, 0, 100, 1000, 10000 ]);// datetime number magicNumberIgnore = magicNumberIgnore.concat([12, 24, 60, 3600 ]);// httpcode number magicNumberIgnore = magicNumberIgnore.concat([200,301, 302, 303, 304,400, 401, 402, 403, 404,500, 501, 502, 503, 504 ]);// bit number magicNumberIgnore = magicNumberIgnore.concat([1024 ]);// number 1-49 for (i = 1; i <= 49; i++) {if (magicNumberIgnore.indexOf(i) === -1) {magicNumberIgnore.push(i);}} // bad let soldNum = 102; let initNum = 80;// good const APPLE = 102; const STOCK = 80; let soldNum = APPLE; let initNum = STOCK;

? 返回目錄

Hoisting

11.1 var 聲明會被提升至該作用域的頂部，但它們賦值不會提升。let 和 const 被賦予了一種稱為「暫時性死區（Temporal Dead Zones, TDZ）」的概念。這對于了解為什么 typeof 不再安全相當重要。
// 我們知道這樣運行不了 // （假設 notDefined 不是全局變量） const example = function () {console.log(notDefined); // => throws a ReferenceError };// 由于變量提升的原因， // 在引用變量后再聲明變量是可以運行的。 // 注：變量的賦值 `true` 不會被提升。 const example = function () {console.log(declaredButNotAssigned); // => undefinedvar declaredButNotAssigned = true; };// 編譯器會把函數聲明提升到作用域的頂層， // 這意味著我們的例子可以改寫成這樣： const example = function () {let declaredButNotAssigned;console.log(declaredButNotAssigned); // => undefineddeclaredButNotAssigned = true; };// 使用 const 和 let const example = function () {console.log(declaredButNotAssigned); // => throws a ReferenceErrorconsole.log(typeof declaredButNotAssigned); // => throws a ReferenceErrorconst declaredButNotAssigned = true; };
11.2 匿名函數表達式的變量名會被提升，但函數內容并不會。
const example = function () {console.log(anonymous); // => undefinedanonymous(); // => TypeError anonymous is not a functionvar anonymous = function() {console.log('anonymous function expression');}; };
11.3 命名的函數表達式的變量名會被提升，但函數名和函數內容并不會。
const example = function () {console.log(named); // => undefinednamed(); // => TypeError named is not a functionsuperPower(); // => ReferenceError superPower is not definedvar named = function superPower() {console.log('Flying');}; };// the same is true when the function name // is the same as the variable name. const example = function () {console.log(named); // => undefinednamed(); // => TypeError named is not a functionvar named = function named() {console.log('named');} };
11.4 函數聲明的名稱和函數體都會被提升。
const example = function () {superPower(); // => Flyingfunction superPower() {console.log('Flying');} };
想了解更多信息，參考 Ben Cherry 的 JavaScript Scoping & Hoisting。

? 返回目錄

比較運算符和等號

12.1 使用 === 和 !== 而不是 == 和 !=。eslint: eqeqeq
12.2 條件表達式例如 if 語句通過抽象方法 ToBoolean 強制計算它們的表達式并且總是遵守下面的規則：
- 對象被計算為 true
- Undefined 被計算為 false
- Null 被計算為 false
- 布爾值 被計算為 布爾的值
- 數字如果是 +0、-0、或 NaN 被計算為 false, 否則為 true
- 字符串 如果是空字符串 '' 被計算為 false，否則為 true
if ([0] && []) {// true// an array (even an empty one) is an object, objects will evaluate to true }
12.3 布爾值使用簡寫，但是需要顯示比較字符串和數字。
// bad if (isValid === true) {// ... }// good if (isValid) {// ... }// bad if (name) {// ... }// good if (name !== '') {// ... }// bad if (collection.length) {// ... }// good if (collection.length > 0) {// ... }
12.4 想了解更多信息，參考 Angus Croll 的 Truth Equality and JavaScript。

12.5 當 case 和 default 包含的子句中有詞法聲明時，用大括號包裹。(例如 let, const, function, and class). eslint: no-case-declarations

為什么？詞法聲明在整個 switch 塊中是可見的，但只有在代碼執行到 case 中變量被賦值時才會被初始化，當多個 case 子句中定義相同的變量是時會出現問題。
// bad switch (foo) {case 1:let xx = 1;break;case 2:const yy = 2;break;case 3:const func = function () {// ...};break;default:get(); }// good switch (foo) {case 1: {let xx = 1;break;}case 2: {const yy = 2;break;}case 3: {const func = function () {// ...};break;}case 4:bar();break;default: {get();} }

12.6 三元表達式不能嵌套使用。 eslint: no-nested-ternary
// bad const foo = maybe1 > maybe2? "bar": value1 > value2 ? "baz" : null;// split into 2 separated ternary expressions const maybeNull = value1 > value2 ? 'baz' : null;// better const foo = maybe1 > maybe2? 'bar': maybeNull;// best const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

12.7 避免出現不必要的三元表達式。 eslint: no-unneeded-ternary
// bad const foo = maybe1 ? maybe1 : maybe2; const bar = correct ? true : false; const baz = wrong ? false : true;// good const foo = maybe1 || maybe2; const bar = !!correct; const baz = !wrong;

12.8 當混用操作符時，要用括號括起來。唯一的例外是標準的算術運算符 (+, -, *, & /)，因為它們很容易理解。 eslint: no-mixed-operators

為什么？這提高了代碼的可讀性，并且使得開發者的意圖很清晰。
// bad const foo = p1 && p2 < 0 || p3 > 0 || p4 + 1 === 0;// bad const bar = p1 ** p2 - 5 % p4;// bad // one may be confused into thinking (p1 || p2) && p3 if (p1 || p2 && p3) {return p4; }// good const foo = (p1 && p2 < 0) || p3 > 0 || (p4 + 1 === 0);// good const bar = (p1 ** p2) - (5 % p4);// good if (p1 || (p2 && p3)) {return p4; }// good const bar = p1 + (p2 / p3 * p4);

? 返回目錄

代碼塊 Blocks

13.1 使用大括號包裹所有的多行代碼塊。eslint: nonblock-statement-body-position
// bad if (test)return false;// good if (test) {return false; }// good if (test) {return false; }// bad const func = function () {return false};// good const func = function () {return false; };
13.2 如果通過 if 和 else 使用多行代碼塊，把 else 放在 if 代碼塊關閉括號的同一行。eslint: brace-style
// bad if (test) {thing1();thing2(); } else {thing3(); }// good if (test) {thing1();thing2(); } else {thing3(); }

13.3 如果 if 代碼塊中肯定會執行 return 語句，那么后面的 else 就沒必要寫了。如果在 else if 代碼塊中又有 if，并且 if 代碼塊會執行return 語句，那么可以分拆成多個 if 代碼塊。 eslint: no-else-return
// bad const foo = function () {if (correct) {return correct;} else {return wrong;} };// bad const cats = function () {if (correct) {return correct;} else if (wrong) {return wrong;} };// bad const dogs = function () {if (correct) {return correct;} else {if (wrong) {return wrong;}} };// good const foo = function () {if (correct) {return correct;}return wrong; };// good const cats = function () {if (correct) {return correct;}if (wrong) {return wrong;}return false; };//good const dogs = function (correct) {if (correct) {if (confuse) {return wrong;}} else {return confuse;} };

? 返回目錄

注釋 Comments

14.1 所有的注釋開頭都加一個空格，這樣更利于閱讀。eslint: spaced-comment
// bad //is current tab const active = true;// good // is current tab const active = true;// bad /***make() returns a new element*based on the passed-in tag name*/ const make = function (tag) {// ...return element; };// good /*** make() returns a new element* based on the passed-in tag name*/ const make = function (tag) {// ...return element; };
14.2 給注釋增加 FIXME 或 TODO 的前綴可以幫助其他開發者快速了解這是一個需要復查的問題，或是給需要實現的功能提供一個解決方式。這將有別于常見的注釋，因為它們是可操作的。使用 FIXME -- need to figure this out 或者 TODO -- need to implement。
14.3 使用 // FIXME: 標注問題。
class Calculator {constructor() {// FIXME: shouldn't use a global heretotal = 0;} }
14.4 使用 // TODO: 標注問題的解決方式。
class Calculator {constructor() {// TODO: total should be configurable by an options paramthis.total = 0;} }

? 返回目錄

空格 Whitespace

15.1 使用 4 個空格作為縮進。eslint: indent
// bad const func = function () { ??const name = ''; }// bad const func = function () { ?const name = ''; }// good const func = function () { ????const name = ''; }
15.2 在大括號前放一個空格。eslint: space-before-blocks
// bad const test = function (){console.log('test'); }// good const test = function () {console.log('test'); }// bad dog.set('attr',{age: '1 year',breed: 'Bernese Mountain Dog', });// good dog.set('attr', {age: '1 year',breed: 'Bernese Mountain Dog', });
15.3 在控制語句（if、while 等）的小括號前放一個空格。在函數調用及聲明中，不要在函數的參數列表前加空格。eslint: keyword-spacing
// bad if(isJedi) {fight (); }// good if (isJedi) {fight(); }// bad const fight = function() {console.log ('Swooosh!'); }// good const fight = function () {console.log('Swooosh!'); }
15.4 使用空格把運算符隔開。eslint: space-infix-ops
// bad const i=j+5;// good const i = j + 5;
15.5 在文件末尾插入一個空行。eslint: eol-last
// bad import {es6} from './AirbnbStyleGuide';// ... export default es6; // bad import {es6} from './AirbnbStyleGuide';// ... export default es6;? ? // good import {es6} from './AirbnbStyleGuide';// ... export default es6;?
15.6 在使用長方法鏈時進行縮進。使用前面的點 . 強調這是方法調用而不是新語句。eslint: newline-per-chained-call no-whitespace-before-property
// bad $('#items').find('.selected').highlight().end().find('.open').updateCount();// bad $('#items').find('.selected').highlight().end().find('.open').updateCount();// good $('#items').find('.selected').highlight().end().find('.open').updateCount();// bad const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true).attr('width', (radius + margin) * 2).append('svg:g').attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')').call(tron.led);// good const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true).attr('width', (radius + margin) * 2).append('svg:g').attr('transform', `translate(${ radius + margin },${ radius + margin })`).call(tron.led);// good const leds = stage.selectAll('.led').data(data);
15.7 在塊末和新語句前插入空行。
// bad if (foo) {return bar; } return baz;// good if (foo) {return bar; }return baz;// bad const obj = {foo() {},bar() {}, }; return obj;// good const obj = {foo() {},bar() {}, };return obj;

15.8 不要在 block 代碼塊中加空行。 eslint: padded-blocks
// bad const bar = function () {console.log(foo);};// bad if (baz) {console.log(qux); } else {console.log(foo);}// bad class Foo {constructor(bar) {this.bar = bar;} }// good const bar = function () {console.log(foo); };// good if (baz) {console.log(qux); } else {console.log(foo); }

15.9 不要在小括號中加空格。 eslint: space-in-parens
// bad const bar = function ( foo ) {return foo; };// good const bar = function (foo) {return foo; };// bad if ( foo ) {console.log(foo); }// good if (foo) {console.log(foo); }

15.10 不要在中括號中加空格。 eslint: array-bracket-spacing
// bad const foo = [ 1, 2, 3 ]; console.log(foo[ 0 ]);// good const foo = [1, 2, 3]; console.log(foo[0]);

15.11 不要在大括號中加空格。 eslint: object-curly-spacing
// bad const foo = { clark: 'kent' };// good const foo = {clark: 'kent'};

15.12 盡量控制一行代碼在==100==個字符以內（包括空格）。字符串、字符串模板和 URL 不受限制。eslint: max-len

為什么？這么做保證了可讀性和可維護性。
// bad const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;// bad $.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));// good const foo = jsonData&& jsonData.foo&& jsonData.foo.bar&& jsonData.foo.bar.baz&& jsonData.foo.bar.baz.quux&& jsonData.foo.bar.baz.quux.xyzzy;// good $.ajax({method: 'POST',url: 'https://airbnb.com/',data: {name: 'John',}, }).done(() => {// do something...}).fail(() => {// do something...});

? 返回目錄

逗號 Commas

16.1 行首逗號：禁用。eslint: comma-style
// bad const story = [once, upon, aTime ];// good const story = [once,upon,aTime, ];// bad const hero = {firstName: 'Ada', lastName: 'Lovelace', birthYear: '1815', superPower: 'computers' };// good const hero = {firstName: 'Ada',lastName: 'Lovelace',birthYear: '1815',superPower: 'computers', };
16.2 增加結尾的逗號：需要。eslint: comma-dangle

為什么? 這會讓 git diffs 更干凈。另外，像 babel 這樣的轉譯器會移除結尾多余的逗號，也就是說你不必擔心老舊瀏覽器的尾逗號問題。
// bad - git diff without trailing comma const hero = {firstName: 'Florence', - lastName: 'Nightingale' + lastName: 'Nightingale', + inventorOf: ['coxcomb graph', 'modern nursing'] };// good - git diff with trailing comma const hero = {firstName: 'Florence',lastName: 'Nightingale', + inventorOf: ['coxcomb chart', 'modern nursing'], };// bad const hero = {firstName: 'Dana',lastName: 'Scully' };const heroes = ['Batman','Superman' ];// good const hero = {firstName: 'Dana',lastName: 'Scully', };const heroes = ['Batman','Superman', ];// bad const createHero = function (firstName,lastName,inventorOf ) {// does nothing };// good const createHero = function (firstName,lastName,inventorOf, ) {// does nothing };// good (note that a comma must not appear after a "rest" element) const createHero = function (firstName,lastName,inventorOf,...heroArgs ) {// does nothing };// bad createHero(firstName,lastName,inventorOf );// good createHero(firstName,lastName,inventorOf, );// good createHero(firstName,lastName,inventorOf,...heroArgs );

? 返回目錄

分號 Semicolons

17.1 使用分號。eslint: semi

Why? When JavaScript encounters a line break without a semicolon, it uses a set of rules called Automatic Semicolon Insertion to determine whether or not it should regard that line break as the end of a statement, and (as the name implies) place a semicolon into your code before the line break if it thinks so. ASI contains a few eccentric behaviors, though, and your code will break if JavaScript misinterprets your line break. These rules will become more complicated as new features become a part of JavaScript. Explicitly terminating your statements and configuring your linter to catch missing semicolons will help prevent you from encountering issues.
// bad - raises exception const luke = {} const leia = {} [luke, leia].forEach(jedi => jedi.father = 'vader')// bad - raises exception const reaction = "No! That's impossible!" (async function meanwhileOnTheFalcon(){// handle `leia`, `lando`, `chewie`, `r2`, `c3p0`// ... }())// bad - returns `undefined` instead of the value on the next line - always happens when `return` is on a line by itself because of ASI! const foo = foo() {return'search your feelings, you know it to be foo' };// good const luke = {}; const leia = {}; [luke, leia].forEach((jedi) => {jedi.father = 'vader'; });// good const reaction = "No! That's impossible!"; (async function meanwhileOnTheFalcon(){// handle `leia`, `lando`, `chewie`, `r2`, `c3p0`// ... }());// good const foo = foo() {return 'search your feelings, you know it to be foo'; };
Read more.

? 返回目錄

類型轉換

18.1 在語句開始時執行類型轉換。
18.2 字符串：eslint: no-new-wrappers
// => this.reviewScore = 9;// bad const totalScore = new String(this.reviewScore); // typeof totalScore is "object" not "string"// bad const totalScore = this.reviewScore + ''; // invokes this.reviewScore.valueOf()// bad const totalScore = this.reviewScore.toString(); // isn’t guaranteed to return a string// good const totalScore = String(this.reviewScore);
18.3 對數字使用 parseInt 轉換，并帶上類型轉換的基數。（不強制）eslint: radix no-new-wrappers
const inputValue = '4';// bad const val = new Number(inputValue);// bad const val = +inputValue;// bad const val = inputValue >> 0;// bad const val = parseInt(inputValue);// good const val = Number(inputValue);// good const val = parseInt(inputValue, 10);
18.4 如果因為某些原因 parseInt 成為你所做的事的瓶頸而需要使用位操作解決性能問題時，留個注釋說清楚原因和你的目的。
// good /*** 使用 parseInt 導致我的程序變慢，* 改成使用位操作轉換數字快多了。*/ const val = inputValue >> 0;
18.5 注: 小心使用位操作運算符。數字會被當成 64 位值，但是位操作運算符總是返回 32 位的整數（參考）。位操作處理大于 32 位的整數值時還會導致意料之外的行為。關于這個問題的討論。最大的 32 位整數是 2,147,483,647：
2147483647 >> 0 //=> 2147483647 2147483648 >> 0 //=> -2147483648 2147483649 >> 0 //=> -2147483647
18.6 布爾：eslint: no-new-wrappers
const age = 0;// bad const hasAge = new Boolean(age);// good const hasAge = Boolean(age);// good const hasAge = !!age;

? 返回目錄

命名規則

19.1 避免單字母命名（e、i、j、v、k、t除外）。避免超長變量名（長度不超過60）。命名應具備描述性和可讀性。eslint: id-length
// bad const q = function () {// ...stuff... };// bad const getWebBeibei11MaylikeRecommendPageSize20Page1XidMTcxNTM2Njcxsa = function () {// ...stuff... };// good const query = function () {// ...stuff..。 };
19.2 使用駝峰式命名對象、函數和實例。（對象的屬性不限制）eslint: camelcase
// bad const OBJEcttsssss = {}; const this_is_my_object = {};// good const thisIsMyObject = {}; const thisIsMyFunction = function () {}
19.3 使用帕斯卡式命名構造函數或類。eslint: new-cap
// bad function user(options) {this.name = options.name; }const bad = new user({name: 'nope', });// good class User {constructor(options) {this.name = options.name;} }const good = new User({name: 'yup', });
19.4 別保存 this 的引用。使用箭頭函數或 Function#bind。
// bad const foo = function () {const self = this;return function() {console.log(self);}; };// bad const foo = function () {const that = this;return function() {console.log(that);}; };// good const foo = function () {return () => {console.log(this);}; };
19.5 如果你的文件只輸出一個類，那你的文件名必須和類名完全保持一致。
// file contents class CheckBox {// ... } export default CheckBox;// in some other file // bad import CheckBox from './checkBox';// bad import CheckBox from './check_box';// good import CheckBox from './CheckBox';
19.6 當你導出默認的函數時使用駝峰式命名。你的文件名必須和函數名完全保持一致。
const makeStyleGuide = function () { }export default makeStyleGuide;
19.7 當你導出單例、函數庫、空對象時使用帕斯卡式命名。
const AirbnbStyleGuide = {es6: {} };export default AirbnbStyleGuide;

? 返回目錄

轉載于:https://www.cnblogs.com/huyuzhu/p/9138790.html

總結

以上是生活随笔為你收集整理的写更漂亮的javascript的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：翼支付甜橙白条是什么？翼支付甜橙白条介绍
下一篇：构建SpringBoot第一个Demo