從任何一個(gè)代碼塊中 break

你應(yīng)該已經(jīng)知道你可以從任意循環(huán)中 break 和 continue —— 這是一個(gè)相當(dāng)標(biāo)準(zhǔn)的程序設(shè)計(jì)語言結(jié)構(gòu)。但你可能沒有意識到，你可以給循環(huán)添加一個(gè) label ，然后跳出任意層循環(huán)：

outer: for(var i = 0; i < 4; i++) {
    while(true) {
        continue outer;
    }
}

label 特性同樣適用于 break 和 continue。你在 switch 語句中肯定見過 break：

switch(i) {
   case 1:
       break;
}

順便說一句，這是為什么 Crockford 建議你的 case 不應(yīng)該縮進(jìn) —— 因?yàn)?nbsp;break 跳出的是 switch 而不是 case，但是我認(rèn)為縮進(jìn) case 的可讀性更好。你也可以給 switch 語句添加 label：

myswitch: switch(i) {
   case 1:
       break myswitch;
}

你可以做的另一件事是創(chuàng)建任意塊（我知道你可以在 C# 里面這么寫，我期望其他語言也可以）。

{
  {
      console.log("I'm in an abritrary block");
  }
}

因此，我們可以把 label 和 break 放在一起，用來從任意代碼塊中跳出。

outer: {
  inner: {
      if (true) {
        break outer;
      }
  }
  console.log("I will never be executed");
}

注意到，這只適用于 break —— 因?yàn)槟阒荒茉谝粋€(gè)循環(huán)中 continue。我從未見過 label 被使用在 JavaScript 中，我想知道為什么 —— 我想可能因?yàn)槿绻倚枰?break 兩層，說明把這個(gè)代碼塊放在一個(gè)函數(shù)里可能更好，這樣我可以使用一個(gè)單層的 break 或者一個(gè)提前的 return 來達(dá)到同樣的目的。

盡管如此，如果我想要保證每個(gè)函數(shù)只有一個(gè) return 語句（這不是我的菜），那么我可以使用帶 label 的 brock。例如，看下面這個(gè)多個(gè) return 語句的函數(shù)：

function(a, b, c) {
  if (a) {
     if (b) {
       return true;
     }
     doSomething();
     if (c) {
       return c;
     }
  }
  return b;
}

而如果使用 label：

function(a, b, c) {
  var returnValue = b;
  myBlock: if (a) {
     if (b) {
       returnValue = true;
       break myBlock;
     }
     doSomething();
     if (c) {
       returnValue = c;
     }
  }
  return returnValue;
}

還有另一種選擇，用更多代碼塊……

function(a, b, c) {
  var returnValue = b;
  if (a) {
     if (b) {
       returnValue = true;
     } else {
       doSomething();
       if (c) {
         returnValue = c;
       }
    }
  }
  return returnValue;
}

我最喜歡原版，然后是使用 else 的版本，最后才是使用 label 的版本 —— 但是，這可能是因?yàn)槲业膶懘a習(xí)慣？

解構(gòu)一個(gè)已存在的變量

首先，有個(gè)怪異的寫法我無法解釋。貌似 ES3 中你可以添加一個(gè)小括號到一個(gè)簡單的賦值語句左邊的變量上，而這樣寫不會(huì)有問題：

var a;
(a) = 1;
assertTrue(a === 1);

如果你能想到為什么這樣寫可以，請?jiān)诘紫略u論！

解構(gòu)的過程是一個(gè)將變量從一個(gè)數(shù)組或者一個(gè)對象中拉取出來的過程。最常見的是以下例子：

function pullOutInParams({a}, [b]) {
  console.log(a, b);
}
function pullOutInLet(obj, arr) {
  let {a} = obj;
  let [b] = arr;
  console.log(a, b);
}
pullOutInParams({a: "Hello" }, ["World"]);
pullOutInLet({a: "Hello" }, ["World"]);

而你可以不使用 var 或 let 或 const。對數(shù)組你可以讓下面的代碼如你的期望運(yùn)行：

var a;
[a] = array;

但是，對于對象，你必須將整個(gè)賦值語句用小括號括起來：

var a;
({a} = obj);

必須這樣寫的理由是，不加括號無法區(qū)分代碼是解構(gòu)賦值還是塊級作用域，因?yàn)槟憧梢允褂媚涿a塊而 ASI（automatic semi-colon insertion，自動(dòng)插入括號）會(huì)將變量轉(zhuǎn)成可以執(zhí)行的表達(dá)式（如下面的例子所示，能夠產(chǎn)生副作用……），這樣就產(chǎn)生了歧義。

var a = {
   get b() {
     console.log("Hello!");
   }
};
with(a) {
  {
    b
  }
}

回到原始的例子，我們給我們的賦值語句里的變量加了圓括號 —— 你可能認(rèn)為它也適用于解構(gòu)，但它不是。

var a, b, c;
(a) = 1; //這句不是變量解構(gòu)
[b] = [2];
({c} = { c : 3 });

對數(shù)值進(jìn)行解構(gòu)

解構(gòu)的另一個(gè)方面你可能也沒有意識到，屬性名不是必須要是不帶引號的字符串，它們也可以是數(shù)值：

`var {1 : a} = { 1: true };`

或者帶引號的字符串：

`var {"1" : a} = { "1": true };`

或者你可能想要用一個(gè)計(jì)算的表達(dá)式作為名字：

var myProp = "1";
var {[myProp] : a} = { [myProp]: true };

這會(huì)很容易寫出造成困惑的代碼：

var a = "a";
var {[a] : [a]} = { a: [a] };

類聲明是塊級作用域的

函數(shù)聲明會(huì)被提升，意味著你可以將函數(shù)聲明寫在函數(shù)調(diào)用之后：

func();
function func() {
  console.log("Fine");
}

函數(shù)表達(dá)式與此相反，因?yàn)橘x值一個(gè)變量的時(shí)候，變量聲明被提升，但是具體賦值沒有被提升。

func(); // func 被聲明, 但是值為 undefined, 所以這里拋出異常： "func is not a function"
var func = function func() {
  console.log("Fine");
};

類（Classes）成為 ES6 流行的部分，并且已被廣泛吹捧為函數(shù)的語法糖。所以你可能會(huì)認(rèn)為以下代碼是可以工作的：

new func();

class func {
  constructor() {
    console.log("Fine");
  }
}

然而，盡管它基本上是語法糖，但前面的代碼是不能工作的。這實(shí)際上等價(jià)于：

new func();

let func = function func() {
  console.log("Fine");
}

這意味著我們的 func 調(diào)用在暫時(shí)性死區(qū)（TDZ），這會(huì)導(dǎo)致引用錯(cuò)誤。

同名參數(shù)

我認(rèn)為不可能指定同名的參數(shù)，然而，卻可以！

function func(a, a) {
  console.log(a);
}

func("Hello", "World");
// 輸出 "World"

在嚴(yán)格模式下不行：

function func(a, a) {
  "use strict";
  console.log(a);
}

func("Hello", "World");
// 在 chrome 下報(bào)錯(cuò) - SyntaxError: Strict mode function may not have duplicate parameter names

typeof 不安全

在 ES6 之前，眾所周知使用 typeof 總是能安全地找出某個(gè)變量的定義，不管它是否被聲明：

if (typeof Symbol !== "undefined") {
  // Symbol 可用
}
// 下面的代碼拋異常，如果 Symbol 沒有被聲明 
if (Symbol !== "undefined") {
}

但是，現(xiàn)在這個(gè)在不使用 let 或者 const 聲明變量的時(shí)候才好使。因?yàn)橛辛?TDZ，會(huì)導(dǎo)致變量未聲明時(shí)產(chǎn)生引用錯(cuò)誤。從本質(zhì)上講，變量被提升到塊級作用域的開始，但是在聲明前的任何訪問都會(huì)產(chǎn)生引用錯(cuò)誤。在 JSHint 的作用域管理中，我必須記錄一個(gè)變量的用法，如果它使用 let 或者 const 聲明于當(dāng)前塊級作用域或者它的父級作用域，提前訪問就會(huì)有引用錯(cuò)誤。而如果是使用 var 語句聲明的，那么它就是可用的，但是 JSHint 會(huì)給出一個(gè)警告，而如果它沒有被聲明，那么它使用全局作用域，JSHint 可能會(huì)有另外一種警告。

if (typeof Symbol !== "undefined") {
  // Symbol 不可用，產(chǎn)生 reference error
}
let Symbol = true;

新數(shù)組

我總是避免使用 new Array 構(gòu)造函數(shù)，一部分原因是因?yàn)樗膮?shù)既可以是一個(gè)長度又可以是一個(gè)元素列表：

new Array(1); // [undefined]
new Array(1, 2); // [1, 2]

但是，一個(gè)同事最近使用它遇到了一些我以前沒有見過的東西：

var arr = new Array(10);
for(var i = 0; i < arr.length; i++) {
  arr[i] = i;
}
console.dir(arr);

上面的代碼產(chǎn)生一個(gè) 0 到 9 的數(shù)組。然而，如果將它重構(gòu)為使用 map：

var arr = new Array(10);
arr = arr.map(function(item, index) { return index; });
console.dir(arr);

現(xiàn)在我得到了一個(gè)數(shù)組，第 8 個(gè)元素等于 8，但是其他所有的值依然是 undefined。看一下 map 的 polyfill 實(shí)現(xiàn)，它循環(huán)每一個(gè)元素（這是為什么 index 是正確的），但是它使用的是 in 來檢查一個(gè)屬性是否被設(shè)置。你如果使用數(shù)組直接量，也會(huì)得到同樣的結(jié)果。

var arr = [];
arr[9] = undefined;
// or
var arr = [];
arr.length = 10;

以上就是7個(gè)令人驚訝的JavaScript特性詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript特性的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論