object

array

function

var foo = [1, 2];
var bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9

使用字面量語法創(chuàng)建對(duì)象

// bad
var item = new Object();
// good
var item = {};

不要使用保留字，在IE8中不起作用，更多相關(guān)信息

// bad
var superman = {
  default: { clark: "kent" },
  private: true
};

// good
var superman = {
  defaults: { clark: "kent" },
  hidden: true
};

使用易讀的同義詞代替保留字

// bad
var superman = {
  class: "alien"
};

// bad
var superman = {
  klass: "alien"
};

// good
var superman = {
  type: "alien"
};

使用字面量語法創(chuàng)建數(shù)組

// bad
var items = new Array();

// good
var items = [];

添加數(shù)組元素時(shí)，使用push而不是直接添加

var someStack = [];


// bad
someStack[someStack.length] = "abracadabra";

// good
someStack.push("abracadabra");

需要復(fù)制數(shù)組時(shí)，可以使用slice，jsPerf的相關(guān)文章

var len = items.length;
var itemsCopy = [];
var i;

// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
itemsCopy = items.slice();

使用slice將類數(shù)組對(duì)象轉(zhuǎn)為數(shù)組

function trigger() {
  var args = Array.prototype.slice.call(arguments);
  ...
}

對(duì)字符串使用單引號(hào)

// bad
var name = "Bob Parr";

// good
var name = "Bob Parr";

// bad
var fullName = "Bob " + this.lastName;

// good
var fullName = "Bob " + this.lastName;

超過80個(gè)字符的字符串應(yīng)該使用字符串連接符進(jìn)行跨行

注意：對(duì)長字符串過度使用連接符將會(huì)影響性能。相關(guān)的文章和主題討論： jsPerf & Discussion.

// bad
var 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
var 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
var 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.";

以編程方式創(chuàng)建字符串的時(shí)應(yīng)該使用Array的join方法而不是通過連接符，尤其是在IE中：jsPerf.

var items;
var messages;
var length;
var i;

messages = [{
  state: "success",
  message: "This one worked."
}, {
  state: "success",
  message: "This one worked as well."
}, {
  state: "error",
  message: "This one did not work."
}];

length = messages.length;

// bad
function inbox(messages) {
  items = "

";

  for (i = 0; i < length; i++) {
    items += "
" + messages[i].message + "
";
  }

  return items + "

";
}

// good
function inbox(messages) {
  items = [];

  for (i = 0; i < length; i++) {
    items[i] = "
" + messages[i].message + "
";
  }

  return "

" + items.join("") + "

";
}

函數(shù)表達(dá)式

// anonymous function expression
var anonymous = function() {
  return true;
};

// named function expression
var named = function named() {
  return true;
};

// immediately-invoked function expression (IIFE)
(function() {
  console.log("Welcome to the Internet. Please follow me.");
})();

不要在非函數(shù)塊中(if, while, etc)聲明函數(shù)，盡管瀏覽器允許你分配函數(shù)給一個(gè)變量，但壞消息是，不同的瀏覽器用不同的方式解析它

注意：ECMA-262把塊定義為一組語句，但函數(shù)聲明不是一個(gè)語句：Read ECMA-262’s note
on this issue.

// bad
if (currentUser) {
  function test() {
    console.log("Nope.");
  }
}

// good
var test;
if (currentUser) {
  test = function test() {
    console.log("Yup.");
  };
}

不要命名一個(gè)參數(shù)為arguments，否則它將優(yōu)先于傳遞給每個(gè)函數(shù)作用域中的arguments對(duì)象,

// bad
function nope(name, options, arguments) {
  // ...stuff...
}

// good
function yup(name, options, args) {
  // ...stuff...
}

使用點(diǎn)表示法訪問屬性

var luke = {
  jedi: true,
  age: 28
};

// bad
var isJedi = luke["jedi"];

// good
var isJedi = luke.jedi;

用變量訪問屬性時(shí)要使用下標(biāo)表示法([])

var luke = {
  jedi: true,
  age: 28
};

function getProp(prop) {
  return luke[prop];
}

var isJedi = getProp("jedi");

總是使用var聲明變量，不然其將變?yōu)槿肿兞俊Ｎ覀円朕k法避免全局空間污染

// bad
superPower = new SuperPower();

// good
var superPower = new SuperPower();

使用var聲明每個(gè)變量，這樣很容易添加新的變量聲明，而不用去擔(dān)心用a;替換a,

// bad
var items = getItems(),
    goSportsTeam = true,
    dragonball = "z";

// bad
// (compare to above, and try to spot the mistake)
var items = getItems(),
    goSportsTeam = true;
    dragonball = "z";

// good
var items = getItems();
var goSportsTeam = true;
var dragonball = "z";

最后聲明未賦值的變量，這對(duì)于你需要根據(jù)之前已經(jīng)賦值的變量對(duì)一個(gè)變量進(jìn)行賦值時(shí)是很有幫助的

// bad
var i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;

// bad
var i;
var items = getItems();
var dragonball;
var goSportsTeam = true;
var len;

// good
var items = getItems();
var goSportsTeam = true;
var dragonball;
var length;
var i;

在作用域頂端對(duì)變量賦值，這有助于避免變量聲明問題和與聲明提升相關(guān)的問題

// bad
function() {
  test();
  console.log("doing stuff..");

  //..other stuff..

  var name = getName();

  if (name === "test") {
    return false;
  }

  return name;
}

// good
function() {
  var name = getName();

  test();
  console.log("doing stuff..");

  //..other stuff..

  if (name === "test") {
    return false;
  }

  return name;
}

// bad
function() {
  var name = getName();

  if (!arguments.length) {
    return false;
  }

  return true;
}

// good
function() {
  if (!arguments.length) {
    return false;
  }

  var name = getName();

  return true;
}

變量聲明是在作用域的頂端，但是賦值沒有

// we know this wouldn"t work (assuming there
// is no notDefined global variable)
function example() {
  console.log(notDefined); // => throws a ReferenceError
}

// creating a variable declaration after you
// reference the variable will work due to
// variable hoisting. Note: the assignment
// value of `true` is not hoisted.
function example() {
  console.log(declaredButNotAssigned); // => undefined
  var declaredButNotAssigned = true;
}

// The interpreter is hoisting the variable
// declaration to the top of the scope,
// which means our example could be rewritten as:
function example() {
  var declaredButNotAssigned;
  console.log(declaredButNotAssigned); // => undefined
  declaredButNotAssigned = true;
}

匿名表達(dá)式能提升他們的變量名，但不能提升函數(shù)賦值

function example() {
  console.log(anonymous); // => undefined

  anonymous(); // => TypeError anonymous is not a function

  var anonymous = function() {
    console.log("anonymous function expression");
  };
}

命名函數(shù)表達(dá)式會(huì)提升變量名，而不是函數(shù)名或者函數(shù)體

function example() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  superPower(); // => ReferenceError superPower is not defined

  var named = function superPower() {
    console.log("Flying");
  };
}

// the same is true when the function name
// is the same as the variable name.
function example() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  var named = function named() {
    console.log("named");
  }
}

函數(shù)聲明會(huì)提升變量名和函數(shù)體

function example() {
  superPower(); // => Flying

  function superPower() {
    console.log("Flying");
  }
}

更多信息指引：JavaScript Scoping & Hoisting by Ben Cherry.

使用===和!==代替==和!=

比較運(yùn)算符進(jìn)行計(jì)算時(shí)會(huì)利用ToBoolean方法進(jìn)行強(qiáng)制轉(zhuǎn)換數(shù)據(jù)類型，并遵從一下規(guī)則
>Objects的計(jì)算值是true
>Undefined的計(jì)算值是false
>Boolean的計(jì)算值是boolean的值
>Numbers如果是-0，+0或者NaN，則計(jì)算值是false,反之是true
>Strings如果是空，則計(jì)算值是false,反之是true

if ([0]) {
  // true
  // An array is an object, objects evaluate to true
}

使用快捷方式

// bad
if (name !== "") {
  // ...stuff...
}

// good
if (name) {
  // ...stuff...
}

// bad
if (collection.length > 0) {
  // ...stuff...
}

// good
if (collection.length) {
  // ...stuff...
}

對(duì)多行的語句塊使用大括號(hào)

// bad
if (test)
  return false;

// good
if (test) return false;

// good
if (test) {
  return false;
}

// bad
function() { return false; }

// good
function() {
  return false;
}

對(duì)于使用if和else的多行語句塊，把else和if語句塊的右大括號(hào)放在同一行

// bad
if (test) {
  thing1();
  thing2();
}
else {
  thing3();
}

// good
if (test) {
  thing1();
  thing2();
} else {
  thing3();
}

多行注釋使用/** … */，需包含一個(gè)描述、所有參數(shù)的具體類型和值以及返回值

// bad
// make() returns a new element
// based on the passed in tag name
//
// @param {String} tag
// @return {Element} element
function make(tag) {

  // ...stuff...

  return element;
}

// good
/**
 * make() returns a new element
 * based on the passed in tag name
 *
 * @param {String} tag
 * @return {Element} element
 */
function make(tag) {

  // ...stuff...

  return element;
}

單行注釋使用//，把單行注釋放在語句的上一行，并且在注釋之前空一行

// bad
var active = true;  // is current tab

// good
// is current tab
var active = true;

// bad
function getType() {
  console.log("fetching type...");
  // set the default type to "no type"
  var type = this._type || "no type";

  return type;
}

// good
function getType() {
  console.log("fetching type...");

  // set the default type to "no type"
  var type = this._type || "no type";

  return type;
}

如果你指出的問題需要重新定位或者提出一個(gè)待解決的問題需要實(shí)現(xiàn)，給注釋添加FIXME or TODO 前綴有利于其他開發(fā)者快速理解。這些注釋不同于通常的注釋，因?yàn)樗鼈兪强蓪?shí)施的。這些實(shí)施措施就是FIXME -- need to figure this out or TODO -- need to implement.
使用// FIXME:給一個(gè)問題作注釋

function Calculator() {

  // FIXME: shouldn"t use a global here
  total = 0;

  return this;
}

使用//TODO:給問題解決方案作注釋

function Calculator() {

  // TODO: total should be configurable by an options param
  this.total = 0;

  return this;
}

使用軟制表符設(shè)置兩個(gè)空格

// bad
function() {
????var name;
}

// bad
function() {
?var name;
}

// good
function() {
??var name;
}

在左大括號(hào)之前留一個(gè)空格

// bad
function test(){
  console.log("test");
}

// good
function test() {
  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"
});

在控制語句中（if, while etc），左括號(hào)之前留一個(gè)空格。函數(shù)的參數(shù)列表之前不要有空格

// bad
if(isJedi) {
  fight ();
}

// good
if (isJedi) {
  fight();
}

// bad
function fight () {
  console.log ("Swooosh!");
}

// good
function fight() {
  console.log("Swooosh!");
}

用空白分隔運(yùn)算符

// bad
var x=y+5;

// good
var x = y + 5;

用一個(gè)換行符結(jié)束文件

// bad
(function(global) {
  // ...stuff...
})(this);
// bad
(function(global) {
  // ...stuff...
})(this);?
?
// good
(function(global) {
  // ...stuff...
})(this);?

當(dāng)調(diào)用很長的方法鏈時(shí)使用縮進(jìn)，可以強(qiáng)調(diào)這行是方法調(diào)用，不是新的語句

// 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
var 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
var 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);

在語句塊和下一個(gè)語句之前留一個(gè)空行

// bad
if (foo) {
  return bar;
}
return baz;

// good
if (foo) {
  return bar;
}

return baz;

// bad
var obj = {
  foo: function() {
  },
  bar: function() {
  }
};
return obj;

// good
var obj = {
  foo: function() {
  },

  bar: function() {
  }
};

return obj;

不要在語句前留逗號(hào)

// bad
var story = [
    once
  , upon
  , aTime
];

// good
var story = [
  once,
  upon,
  aTime
];

// bad
var hero = {
    firstName: "Bob"
  , lastName: "Parr"
  , heroName: "Mr. Incredible"
  , superPower: "strength"
};

// good
var hero = {
  firstName: "Bob",
  lastName: "Parr",
  heroName: "Mr. Incredible",
  superPower: "strength"
};

不要有多余逗號(hào)：這會(huì)在IE6、IE7和IE9的怪異模式中導(dǎo)致一些問題；同時(shí)，在ES3的一些實(shí)現(xiàn)中，多余的逗號(hào)會(huì)增加數(shù)組的長度。在ES5中已經(jīng)澄清（source）

 // bad
  var hero = {
    firstName: "Kevin",
    lastName: "Flynn",
  };

  var heroes = [
    "Batman",
    "Superman",
  ];

  // good
  var hero = {
    firstName: "Kevin",
    lastName: "Flynn"
  };

  var heroes = [
    "Batman",
    "Superman"
  ];

恩，這也是規(guī)范一部分

// bad
(function() {
  var name = "Skywalker"
  return name
})()

// good
(function() {
  var name = "Skywalker";
  return name;
})();

// good (guards against the function becoming an argument when two files with IIFEs are concatenated)
;(function() {
  var name = "Skywalker";
  return name;
})();

閱讀更多

執(zhí)行強(qiáng)制類型轉(zhuǎn)換的語句。

Strings:
//  => this.reviewScore = 9;

// bad
var totalScore = this.reviewScore + "";

// good
var totalScore = "" + this.reviewScore;

// bad
var totalScore = "" + this.reviewScore + " total score";

// good
var totalScore = this.reviewScore + " total score";

使用parseInt對(duì)Numbers進(jìn)行轉(zhuǎn)換，并帶一個(gè)進(jìn)制作為參數(shù)

var inputValue = "4";

// bad
var val = new Number(inputValue);

// bad
var val = +inputValue;

// bad
var val = inputValue >> 0;

// bad
var val = parseInt(inputValue);

// good
var val = Number(inputValue);

// good
var val = parseInt(inputValue, 10);

無論出于什么原因，或許你做了一些”粗野”的事；或許parseInt成了你的瓶頸；或許考慮到性能，需要使用位運(yùn)算，都要用注釋說明你為什么這么做

// good
/**
 * parseInt was the reason my code was slow.
 * Bitshifting the String to coerce it to a
 * Number made it a lot faster.
 */
var val = inputValue >> 0;

注意：當(dāng)使用位運(yùn)算時(shí)，Numbers被視為64位值，但是位運(yùn)算總是返回32位整型(source)。對(duì)于整型值大于32位的進(jìn)行位運(yùn)算將導(dǎo)致不可預(yù)見的行為。Discussion.最大的有符號(hào)32位整數(shù)是2,147,483,647

2147483647 >> 0 //=> 2147483647
2147483648 >> 0 //=> -2147483648
2147483649 >> 0 //=> -2147483647
Booleans:
var age = 0;

// bad
var hasAge = new Boolean(age);

// good
var hasAge = Boolean(age);

// good
var hasAge = !!age;

避免單字母名稱，讓名稱具有描述性

// bad
function q() {
  // ...stuff...
}

// good
function query() {
  // ..stuff..
}
當(dāng)命名對(duì)象、函數(shù)和實(shí)例時(shí)使用駱駝拼寫法
// bad
var OBJEcttsssss = {};
var this_is_my_object = {};
function c() {}
var u = new user({
  name: "Bob Parr"
});

// good
var thisIsMyObject = {};
function thisIsMyFunction() {}
var user = new User({
  name: "Bob Parr"
});

當(dāng)命名構(gòu)造函數(shù)或類名時(shí)，使用駝峰式寫法

// bad
function user(options) {
  this.name = options.name;
}

var bad = new user({
  name: "nope"
});

// good
function User(options) {
  this.name = options.name;
}

var good = new User({
  name: "yup"
});

命名私有屬性時(shí)使用前置下劃線

// bad
this.__firstName__ = "Panda";
this.firstName_ = "Panda";

// good
this._firstName = "Panda";
保存this引用時(shí)使用_this
// bad
function() {
  var self = this;
  return function() {
    console.log(self);
  };
}

// bad
function() {
  var that = this;
  return function() {
    console.log(that);
  };
}

// good
function() {
  var _this = this;
  return function() {
    console.log(_this);
  };
}

命名函數(shù)時(shí)，下面的方式有利于堆棧跟蹤

// bad
var log = function(msg) {
  console.log(msg);
};

// good
var log = function log(msg) {
  console.log(msg);
};

注意：IE8和怪異模式下命名函數(shù)表示，戳此：http://kangax.github.io/nfe/
如果文件作為一個(gè)類被導(dǎo)出，文件名應(yīng)該和類名保持一致

// file contents
class CheckBox {
  // ...
}
module.exports = CheckBox;

// in some other file
// bad
var CheckBox = require("./checkBox");

// bad
var CheckBox = require("./check_box");

// good
var CheckBox = require("./CheckBox");

對(duì)于屬性，訪問器函數(shù)不是必須的

如果定義了存取器函數(shù)，應(yīng)參照getVal() 和 setVal(‘hello’)格式.

// bad
dragon.age();

// good
dragon.getAge();

// bad
dragon.age(25);

// good
dragon.setAge(25);

如果屬性時(shí)boolean，格式應(yīng)為isVal() or hasVal().

// bad
if (!dragon.age()) {
  return false;
}

// good
if (!dragon.hasAge()) {
  return false;
}

創(chuàng)建get() and set()函數(shù)時(shí)不錯(cuò)的想法，但是要保持一致

function Jedi(options) {
  options || (options = {});
  var lightsaber = options.lightsaber || "blue";
  this.set("lightsaber", lightsaber);
}

Jedi.prototype.set = function(key, val) {
  this[key] = val;
};

Jedi.prototype.get = function(key) {
  return this[key];
};

在原型對(duì)象上定義方法，而不是用新對(duì)象重寫它。重寫使繼承變?yōu)椴豢赡埽褐刂迷蛯⒅貙懻麄€(gè)基類

function Jedi() {
  console.log("new jedi");
}

// bad
Jedi.prototype = {
  fight: function fight() {
    console.log("fighting");
  },

  block: function block() {
    console.log("blocking");
  }
};

// good
Jedi.prototype.fight = function fight() {
  console.log("fighting");
};

Jedi.prototype.block = function block() {
  console.log("blocking");
};

方法應(yīng)該返回this，有利于構(gòu)成方法鏈

// bad
Jedi.prototype.jump = function() {
  this.jumping = true;
  return true;
};

Jedi.prototype.setHeight = function(height) {
  this.height = height;
};

var luke = new Jedi();
luke.jump(); // => true
luke.setHeight(20); // => undefined

// good
Jedi.prototype.jump = function() {
  this.jumping = true;
  return this;
};

Jedi.prototype.setHeight = function(height) {
  this.height = height;
  return this;
};

var luke = new Jedi();

luke.jump()
  .setHeight(20);

寫一個(gè)自定義的toString()方法是可以的，只要確保它能正常運(yùn)行并且不會(huì)產(chǎn)生副作用

function Jedi(options) {
  options || (options = {});
  this.name = options.name || "no name";
}

Jedi.prototype.getName = function getName() {
  return this.name;
};

Jedi.prototype.toString = function toString() {
  return "Jedi - " + this.getName();
};

當(dāng)在事件對(duì)象上附加數(shù)據(jù)時(shí)（無論是DOM事件還是如Backbone一樣擁有的私有事件），應(yīng)傳遞散列對(duì)象而不是原始值，這可以讓隨后的貢獻(xiàn)者給事件對(duì)象添加更多的數(shù)據(jù)，而不必去查找或者更新每一個(gè)事件處理程序。舉個(gè)粟子，不要用下面的方式：

// bad
$(this).trigger("listingUpdated", listing.id);

...

$(this).on("listingUpdated", function(e, listingId) {
  // do something with listingId
});

應(yīng)該按如下方式：

// good
$(this).trigger("listingUpdated", { listingId : listing.id });

...

$(this).on("listingUpdated", function(e, data) {
  // do something with data.listingId
});

模塊應(yīng)該以 ! 開始，這能確保當(dāng)腳本連接時(shí)，如果畸形模塊忘記導(dǎo)入，包括最后一個(gè)分號(hào)，不會(huì)產(chǎn)生錯(cuò)誤。Explanation

文件應(yīng)該以駝峰式命名，放在同名的文件夾中，和單出口的名稱相匹配

定義一個(gè)noConflict()方法來設(shè)置導(dǎo)出模塊之前的版本,并返回當(dāng)前版本。

在模塊的頂部申明’use strict";

// fancyInput/fancyInput.js

!function(global) {
  "use strict";

  var previousFancyInput = global.FancyInput;

  function FancyInput(options) {
    this.options = options || {};
  }

  FancyInput.noConflict = function noConflict() {
    global.FancyInput = previousFancyInput;
    return FancyInput;
  };

  global.FancyInput = FancyInput;
}(this);

jQuery對(duì)象變量使用前綴$

// bad
var sidebar = $(".sidebar");

// good
var $sidebar = $(".sidebar");
緩存jQuery查詢
// bad
function setSidebar() {
  $(".sidebar").hide();

  // ...stuff...

  $(".sidebar").css({
    "background-color": "pink"
  });
}

// good
function setSidebar() {
  var $sidebar = $(".sidebar");
  $sidebar.hide();

  // ...stuff...

  $sidebar.css({
    "background-color": "pink"
  });
}

使用級(jí)聯(lián)$(‘.sidebar ul’)或父子$(‘.sidebar > ul’)選擇器進(jìn)行DOM查詢。jsPerf

在范圍內(nèi)使用find進(jìn)行jQuery對(duì)象查詢

// bad
$("ul", ".sidebar").hide();

// bad
$(".sidebar").find("ul").hide();

// good
$(".sidebar ul").hide();

// good
$(".sidebar > ul").hide();

// good
$sidebar.find("ul").hide();

譯文出處：http://www.ido321.com/1520.html