Javascript聲明變量 - 最佳實踐

Question

在閱讀這篇http://www.html5rocks.com/en/tutorials/speed/v8/時，有必要在運行時更改變量的類型會迫使瀏覽器更加努力地工作，而不是保持它們的一致性。

這是否意味着這不是一個好主意：

 var x = {
   alpha:    null,
   bravo:    null,
   charlie:  null,
   delta:    null,
   echo:     null
 }

 x.alpha   = {a:1, b:true}
 x.bravo   = 13
 x.charlie = true
 x.delta   = [1,2,3]
 x.echo    = 'abc'

因為這里的類型從null開始，然后變為object，int，boolean arrary。

或者這更有效：

 var x = {
   alpha:    {},
   bravo:    0,
   charlie:  false,
   delta:    [],
   echo:     ''
 }

 x.alpha   = {a:1, b:true}
 x.bravo   = 13
 x.charlie = true
 x.delta   = [1,2,3]
 x.echo    = 'abc'

我可以理解從數字到數組的更改類型不是一個好主意。 如何在執行期間從null更改為類型？

我讀過的書籍和博客主要是說，當值只在運行時知道時，用null定義變量（而不是undefined）。 從表面看，這似乎是錯誤的，因為使用空類型定義可以避免類型更改。

Answer 1

對這個問題感興趣，我設置了一個小提琴，看看一些不同用例的表現。

打開控制台以查看此小提琴中的數據
http://jsfiddle.net/kmiklas/MFNak/14/

• 沒有初始化，初始化為null和初始化為數字之間似乎沒有什么區別。
• 除數字外，通過將變量初始化為預期類型（原始帖子中的第二個示例）存在性能損失。
  
• 從這些數據可以看出，初始化為零是最佳選擇。

Chrome v32的典型結果，n = 100000000：

number no init: 97.070ms 
number init to null: 98.023ms 
number init to number: 97.246ms 
array no init: 457.494ms 
array init to null: 458.301ms
array init to number: 455.166ms 
array init to array: 836.710ms 
object no init: 508.268ms 
object init to null: 512.312ms 
object init to object: 754.562ms 
number to object: 455.733ms 
array to object: 834.169ms 
object to array: 751.498ms 
~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

代碼相當冗長，但根據SO要求包含在下面。

n = 100000000;
console.time("number no init");
    for (var i = n; i >= 0; i--) { var x; x = 42; };
console.timeEnd("number no init");

console.time("number init to null");
    for (var i = n; i >= 0; i--) { var x = null; x = 42; };
console.timeEnd("number init to null");

console.time("number init to number");
    for (var i = n; i >= 0; i--) { var x = 1; x = 42; };
console.timeEnd("number init to number");

console.time("array no init");
    for (var i = n; i >= 0; i--) { var a; a = [42]; };
console.timeEnd("array no init");

console.time("array init to null");
    for (var i = n; i >= 0; i--) { var a = null; a = [42]; };
console.timeEnd("array init to null");

console.time("array init to number");
    for (var i = n; i >= 0; i--) { var a = 1; a = [42]; };
console.timeEnd("array init to number");

console.time("array init to array");
    for (var i = n; i >= 0; i--) { var a = []; a = [42]; };
console.timeEnd("array init to array");

console.time("object no init");
    for (var i = n; i >= 0; i--) { var a; a = {n:42}; };
console.timeEnd("object no init");

console.time("object init to null");
    for (var i = n; i >= 0; i--) { var a = null; a = {n:42}; };
console.timeEnd("object init to null");

console.time("object init to object");
for (var i = n; i >= 0; i--) { var a = {}; a = {n:42}; };
console.timeEnd("object init to object");

console.time("number to object");
    for (var i = n; i >= 0; i--) { var a = 1; a = {n:42}; };
console.timeEnd("number to object");

console.time("array to object");
    for (var i = n; i >= 0; i--) { var a = []; a = {n:42}; };
console.timeEnd("array to object");

console.time("object to array");
for (var i = n; i >= 0; i--) { var a = {}; a = [42]; };
console.timeEnd("object to array");
console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~');

編輯：

請記住，我只在Chrome 32中測試過。要准確得出這個結論，最好加載這個小提琴並在更受歡迎的桌面和移動瀏覽器中查看結果; 特別是IE和Safari Mobile。

Answer 2

在初始化時，所有javascript變量都被提升到范圍的頂部，其值為undefined 。 直到為變量賦值，才能分配特定類型。

所以你在這里做的是有效地重新分配變量的值和類型兩次。 性能成本可能可以忽略不計，但聲明其值未知的對象的首選做法是使用對象文字：

var x = {};

如果您嘗試訪問不存在的對象的屬性，您將得到未定義（這與測試為null一樣容易）。 但是，如果您說運行之前已知屬性，則沒有理由不立即分配這些屬性，因此......

 x.alpha = {a:1, b:true}
 x.bravo = 13
 x.charlie = true
 x.delta   = [1,2,3]

成為...

var x = {
  alpha:    {a:1, b:true},
  bravo:    13,
  charlie:  true,
  delta:    [1,2,3]
};