知識星球這不是一篇自稱是 JS 開發者知識聖杯的權威指南。不過裡面絕對有一些我曾經錯過的，有一些我可能是錯用的，還有一些你可能不同意每個JS開發者應該知道的東西。
如何FizzBuzz
譯者註：FizzBuzz是英國學校裡常玩的遊戲，從1數到100，如果遇見了3的倍數要說Fizz，5的倍數到說Buzz，如果即是3的倍數又是5的倍數要說FizzBuzz。
（FizzBuzz測試）通常被認為是一個不錯的編碼練習，用來在面試初期過程中淘汰沒有經驗的開發人員，你會驚訝地發現許多Javascript開發人員不知道如何編寫一個基本的FizzBuzz測試。
FizzBuzz測試沒啥實際用途。它純粹是一個簡單的練習，用來測試候選人潛在的編碼能力。
記住在你將面試前端或Javascript開發崗位的大多數公司中，極有可能會問你一個FizzBuzz問題：你準備好了嗎?
這是經典的FizzBuzz：
記住，你可能會被要求解決FizzBuzz的不同變種。我去面試過一次，被要求解決基本變種，然後另外兩個變種。
這個特別的示例在3的倍數輸出“Fizz”。在5的倍數輸出“Buzz”，在即是3的倍數又是5的倍數輸出“FizzBuzz”。
註意：在早些時候這個實現就有稍微改動。使用條件 if 陳述句，如果它不是一個條件的倍數，數字被打印出來。現有的解決方案可以工作，但沒有列印不滿足條件的數字或使用條件 if。
for (var i = 1; i <= 100; i++) {
if (i % 15 === 0) {
console.log(‘FizzBuzz’);
} else if (i % 3 === 0) {
console.log(‘Fizz’);
} else if (i % 5 === 0) {
console.log(‘Buzz’);
} else {
console.log(i);
}
}
= = 和 = = = 的區別
兩個比較運運算元你可能熟悉。然而，你知道雙重和三重等於比較運運算元之間的區別嗎？Javascript linter告訴你使用三重等於，但你知道為什麼嗎?
= = 雙重等於(又名松等於)不會比較型別，它將在陳述句中將值進行型別轉換。這就是所謂的強制型別轉換，它被認為是一個有害的操作。
console.log(24 == ’24’);
// true
正如你所看到的，帶單引號的24是一個字串，將被轉換成數字。雖然這在某種情況下可能是我們期望的行為，但允許比較運運算元改變型別可能不是你想要做的。
不推薦使用雙重等於，最理智的Javascript linter在預設情況下將丟擲一個錯誤來告訴你使用嚴格的相等比較運運算元來替換。如果你想強制轉換值，在條件外做而不是在裡面。
= = =三重等於(又名嚴格相等)將比較型別，但不會做型別轉換，意味著他們在不被轉換的情況下比較。因為沒有強制型別轉換，三重等於速度更快，作為推薦的方法用來比較各種各樣的值。這意味著如果條件等於true，兩種型別需要相同。
和上面的例子一樣，但是三重等於：
console.log(24 === ’24’);
// false
傳回false的原因是因為我們對一個字串和一個數字進行比較。顯然它們是兩個不同的型別，因此它將傳回false。
我強烈建議你在Mozilla開發者網站閱讀更多關於等於比較符。它有一些很棒的解釋(比我解釋得更好)，還有一些例子。
如何在不使用第三方庫的情況下查詢DOM
你可能知道如何使用jQuery查詢DOM，但你能使用Javascript原生方法而不是透過使用第三方庫來做嗎?
我不只是在談論能夠透過ID或具有特定的class元素查詢頁面元素，我的意思是jQuery傾向使用運算式在DOM查詢元素。
這裡有相當多我們可以使用的原生方法，他們和jQuery一樣強大，用來在頁面查詢一個或多個元素。我們可以使用選擇器比如first-child，last-child等等。你會驚訝有這麼好的原生DOM查詢方法。
學習這些原生方法，併在比如jQuery的地方使用它們：
我在必要時連結了Mozilla開發者檔案做進一步的閱讀。任何地方你看到一個連結，如果是你不太熟悉的東西，我強烈建議你點選它。
- document.getElementById——透過ID查詢元素的經典查詢。
- document.getElementsByClassName——透過className在DOM中查詢元素。
- document.querySelector——這是一個很好的方法。它擁有jQuery $()的所有力量，它是原生的。它將只傳回它發現的第一個元素。
- document.querySelectorAll——幾乎和上面的方法一樣，除了它傳回多個元素，而不僅僅是第一個。
- document.getElementsByTagName——這允許查詢特定標記名的元素。想在頁面或span標簽中找到所有DIV元素嗎？這是你想要的方法。
值得一提的是querySelector和querySelectorAll方法也可以使用在一個元素上，意味著你可以使用這些方法查詢一個元素的內容。
詳讀Element.querySelector 和 Element.querySelectorAll的使用例子。
變數提升
Javascript是一種有趣的語言，變數的宣告，會將宣告提升到作用域的頂部。這意味著你可以在當前作用域(比如一個函式被認為是自己的作用域)定義它之前就取用一個變數。
作為一個經驗法則：永遠在你需要的作用域頂部定義你的變數。如果你在指令碼檔案(或者在函式中)的頂部使用 ‘use strict’；而你在一個變數被定義之前使用它將丟擲一個錯誤。
大多數Javascript linter比如Jshint，當你沒有使用 ‘use strict’的定義會提示，所以提示你應用最佳實踐，這樣在變數定義前你不可能使用它。
一如既往，Mozilla開發人員檔案有一些很好的關於語法和型別的JavaScript文章，這裡有一篇關於變數提升的內容。
如何使用瀏覽器的開發者工具
更具體地是如何除錯Javascript，但也註意到你在開發者工具中用到的其他工具。如何設定斷點和單步進入應用程式的特定子集的程式碼。
這些工具很重要，因為它們可跟蹤潛在的複雜應用程式的執行步驟，找到導致一個問題或特定瓶頸的原因是什麼。瞭解如何設定一個斷點，如何在分子層面（細層面）真正深入到你的程式碼，看看發生了什麼。
理解捆綁在Chrome、Firefox 和後期版本的 Internet Explorer 上的工具是你必不可少的技能，特別是如果你發現自己大量地使用Javascript。同時註意到各種開發工具外掛，比如Google Chrome上的Batarang 擴充套件，它允許你除錯AngularJS應用程式。
使用恰當的工具找到實際問題，不要在此之前盲目地最佳化你的程式碼。在沒有搞清楚問題前解決問題，被稱為過早最佳化，這會浪費時間。
控制檯命令
除了知道如何在Chrome、Firefox 或 Internet Explorer開發工具中使用分析和除錯工具，你還應該註意到各種控制檯命令。
你可能已經知道console.log，還有console.error。但實際上有不少控制檯命令可以使用。
請記住，有些命令在不同瀏覽器下可能無法正常工作。我一直留意應該被現代瀏覽器良好支援的命令串列，但在你往程式碼中加入可能不被支援的命令之前，你得試一試。
- console.log——基本的 logging ，用來記錄在我的程式碼中發生的動作的基本訊息。格式化識別符號在console呼叫時也被支援。
- console.error——在程式碼中記錄錯誤。我在AJAX請求的錯誤回呼和其他會丟擲錯誤的地方使用console.error。和console.log類似，這個方法還包括一個堆疊，用於跟蹤錯誤在哪裡。
- console.dir(物件)——這個方便的方法可以在你的控制檯視窗列印一個Javascript物件的內容。很方便。
- console.group(標題)——這允許你透過一個可選的標題建立一組的控制檯日誌記錄命令。意思你可以將類似的日誌資訊分組，比如當一段程式碼負責一個任務時。
- console.groupCollapsed——和上述方法完全相同，除了最開始是摺疊的，沒有開啟。
- console.groupEnd——這允許你結束上面定義的組。
- console.time(標簽)——允許你測量一段特定的Javascript程式碼執行需要多長時間，以毫秒為單位。對測量可能的瓶頸方法尤其有效。
- console.timeEnd(標簽)——類似於groupEnd方法，這允許你停止計時器記錄功能，同時執行時間將在控制檯打印出來。
- copy(字串)——在Chrome和Firefox控制檯有這個方法，它允許你將一個字串的內容複製到剪貼簿。開啟開發工具，試試它，它有時可以派上用場。
理解 this
this關鍵字，這是不理解其工作原理的Javascript開發人員產生挫敗感的一個最大來源之一。真的很容易落入大量陷阱中的某個：“this”最大的問題是什麼，取決於你的Javascript結構。
在更傳統的程式語言中this是由類實體化的當前物件的一個取用。但Javascript並不是一個傳統的程式語言，所以this實際上屬於擁有方法的物件。
在Javascript中記住this的最簡單方法就是記住它的擁有者，即父親。this的值將總是等於擁有者，除非透過call，apply或者bind改變。
在下麵這個函式中，this實際上是window：
function myFunction() {
console.log(this === window);
// true
}
myFunction();
你可能會想：在一個方法中取用this時為什麼this會等於window？如果你知道答案，那麼很棒，但如果不知道，繼續閱讀，我們將解釋為什麼。
當你像上面定義一個函式，它系結到全域性window這個全域性物件上。記得我們上面提到的，Javascript將this作為擁有方法的物件對待，而不是當前的物件?
將this的值改變成完全屬於它自己的新物件(而不是視窗):
function myFunction() {
console.log(this === window);
// false
}
new myFunction();
程式碼控可能會譴責我剛才做的事情。記住我們只是稍微觸及了基本概念。但如你所見，this的值不再是window。為什麼?
最簡單的解釋是什麼時候我們使用new關鍵字，我們建立一個全新的背景關係(因為new關鍵字)，new運運算元將建立一個全新的物件。
在以下示例中，我們將建立一個虛構的API庫，它有一個方法從伺服器獲取資料。如你所見，我們正在建立一個叫API的物件並添加了方法。
因為我們已經建立了一個新物件，有些神奇的事發生了。背景關係從全域性物件切換到我們建立API物件上。
var API = {
getData: function() {
console.log(this === window);
// false
console.log(this === API);
// true
}
};
API.getData();
如你所見，函式內部的this值取決於它如何被呼叫。因為函式作為API的物件的一部分被呼叫，API物件是this的擁有著，因此this的值是它。
永遠不要認為this的值總是相同的。它基於函式如何被呼叫而改變，但是如果你使用bind，this的值總是等於bing方法上指定的值。
關於”this”的深入閱讀，可以看看 Quirksmode 上的這篇文章。它運行了一些例子並且比我解釋得更好。Mozilla開發人員檔案也有一些關於“this”的很棒解釋，同時有例子（在這裡）。
‘use strict’; ‘use strict’;
之前簡要討論了，使用嚴格樣式(這在ECMAScript 5增加)允許你使用更嚴格的Javascript變數。你在編寫任何Javascript時應該使用它，並且有充分的理由。預設情況下Javascript在讓你做什麼時有點寬容。當你取用一個未宣告的變數同時嘗試做一些你沒有意識到很壞的其它事情時，他會默默地失敗，但Javascript不會告訴你。
在Mozilla Developer這裡有一整篇關於這個主題的文章，我懇求你閱讀，因為它比我深入了更多的細節。
如何寫各種型別的迴圈
你會驚訝地發現我遇到過許多開發人員不知道如何編寫合適的 for. .迴圈，也不知道在Javascript中編寫其他型別的迴圈。能夠遍歷一個陣列或物件是所有Javascript開發人員應該具有的一種必不可少的技能。
沒有一刀切的迴圈，但是你應該知道什麼時候需要，同時應該使用哪一種。你可能熟悉for和while，但也許串列中的其他用的不多。
Javascript中不同型別的迴圈:
- for
- for..in
- for..of (added in ES6)
- forEach
- while
- do..while
For..迴圈
必要的基本迴圈是每一個Javascript開發人員需要知道的。for迴圈是核心，它在陳述句一直保持condition 2等於true時迴圈。
for (condition 1; condition 2; condition 3) {
// Your code
}
Condition 1 – 在迴圈開始之前執行。通常你將定義用於迭代的一個計數器值和陣列的總長度。如果你事先做了設定，可以用一個分號來省略。
Condition 2 – 這是決定迴圈繼續或停止的條件。你一般會將當前的計數器值和陣列的總長度進行比較。這是一個true或false值，如果值等於true，迴圈將繼續執行。這個可以用一個分號來省略，強制你在內部結束迴圈或者你最終也可以得到一個無限迴圈。
Condition 3 – 這在迴圈的每次迭代後執行。最常見的是在這裡自增計數器值(可能在99%的用例)。這個值也可以用一個分號來省略(比如在內部自增你的迴圈)。
For..in 迴圈
每一個Javascript開發人員都應該知道的第二個最重要的迴圈。它允許您遍歷一個物件的屬性即其鍵。讓我們看一個例子，好嗎?
var person = {first_name: ‘Dwayne’, last_name: ‘Charrington’, age: 27, star_sign: ‘Aquarius’};
// The below loop will output:
// “Dwayne”
// “Charrington”
// 27
// “Aquarius”
for (var p in person) {
if (person.hasOwnProperty(p)) {
console.log(person[p]);
}
}
你可能註意到，我使用一個名為hasOwnProperty的方法。這個方法檢查物件是否直接在它的prototype上具有某個指定的屬性，不是一個繼承的值。如果你在for..in迴圈中不使用hasOwnProperty，大多數Javascript linter將丟擲一個錯誤。
For..of 迴圈
這是ES6上一個新特性，因此現在瀏覽器對它支援的不是很好。然而，透過使用transpiler，你現在可以直接使用它。
for. .of迴圈類似for..in，但它只迭代可以迭代的物件。
var fruits = [‘orange’, ‘apple’, ‘squash’, ‘pear’];
for (var fruit of fruits) {
console.log(fruit);
}
for..of 迴圈的好處是，我們現在可以最終得到一個陣列的所有值，例如無需編寫複雜的for迴圈，建立一個索引，並使用一個變數自增某個計數器。它可以說是從一個陣列得到值的最簡單的方法。
forEach迴圈
這是一個有趣的事情，因為即使它是一個迴圈，它不能被認為是一個傳統的迴圈，因為使用時有一些限制。
forEach迴圈也僅適用於陣列，而不是物件。它的優勢是不需要額外的變數定義，因此不會汙染你的作用域，它只是一個方法。
一個迴圈的意義，可能你不需要真正知道是一個迴圈。一直我覺得它很好用，重要的是你在迭代一個陣列的條目時知道你的選擇。
var fruits = [‘apple’, ‘banana’, ‘orange’, ‘grapes’, ‘pear’, ‘passionfruit’];
// The three values on the callback function are:
// element – The element being traversed
// index – The current index of the item in the array starting at 0
// array – The array being traversed (probably mostly irrelevant)
fruits.forEach(function(element, index, array) {
console.log(index, element);
});
有時候你只是想簡單地遍歷一個陣列並得到它的值，修改它們，比如jQuery給我們提供了jQuery.each的形式。
forEach的唯一的缺點是你不能打破這個迴圈。如果你想使用ES5的語法建立一個迴圈，可以用Array.every，你可以在這裡閱讀使用方法。
While迴圈
while迴圈類似於for迴圈，它只接受一個引數，它是一個宣告，等於true或false。所以如果你記得早些時候我們在for迴圈有三個條件，它就是條件2。
While迴圈通常被認為是最快型別的迴圈，這是有爭議的。你不能不承認他們看起來比其他型別的迴圈更乾凈。在某些情況下，他們可以是最快型別的迴圈，因為他們可以具有更少的複雜性。
在我的經驗中，速度最快的while迴圈是自減的while迴圈，在這個迴圈有一個值，自減它直到遇到零(結果為false)。
var i = 20;
while (i–) {
console.log(i);
}
Do. .While迴圈
你不會看到do. .while迴圈像for或while迴圈那種受歡迎地大量使用。但你應該知道do while迴圈如何使用，即使你永遠不會使用它。
while迴圈不會保證一定執行。意思是如果你為while迴圈提供了一個等於false的運算式，它將不會執行。而do…while被保證至少執行一次。
但這並沒有結束。while迴圈在迴圈開始之前執行其條件，do. .while執行在迴圈執行後執行條件。因此為什麼do. .while被保證至少執行一次。迴圈執行，運算式被檢查，然後繼續。
再次Mozilla開發人員檔案有一篇關於大部分的迴圈的優秀文章，在這裡。
基本方法和任務
這裡有一些你在Javascript中真的應該知道的基本方法。從使用陣列到字串，Javascript包含一個有用的方法寶庫。我們在這篇文章中只涉及處理字串和陣列的方法，沒有物件或任何其他型別的東西。
如果你想閱讀更多關於關於Javascript處理各種資料型別，Mozilla開發人員檔案是一個學習更多關於各種方法的很不錯且簡潔的網站。
顯然有些人會對你是否應該知道所有這些東西有意見，也許有一些我已經忽略。我的記憶只能延伸到當前，但這裡有一些我認為大多數開發人員應該知道的。知道如何高效地操縱字串，在我看來是一種必不可少的技能。
處理字串
在Javascript除了使用陣列和物件，你會發現自己處理字串可能不少。即使你真的不會使用字串(或你認為你不會)瞭解這些處理的字串的基本方法是值得做的事情。
- String.replace(regexp | replaceThis，replaceWith |callback)-允許你用另一個值替換一個值，甚至使用一個正則運算式。
- String.concat(‘string1’,‘string2’,etc…)-這個方法允許你將一個或多個字串值連線起來。
- String.indexOf(value)-這個方法允許你找到指定值第一次出現的位置，如果沒有找到傳回-1。
- String.slice(startIndex,endIndex)-這個方法做了它表達的做法。它需要一個開始索引(從零)和一個結束索引，並傳回一個新的字串塊。
- String.split(separator,limit)——這個方法將一個字串分割成由一個或多個條目組成的陣列。
- String.substr(startIndex,length)-該方法將傳回字串中從startIndex開始到指定長度的字元。
- String.toLowerCase-這個方法將傳回呼叫字串的小寫。
- String.toUpperCase-這個方法將傳回呼叫字串的大寫。
- String.trim-呼叫字串開頭和結尾的空格將被刪除。
使用陣列
在日常開發過程中，我發現自己大量處理陣列。他們通常作為儲存資料，跟蹤狀態和當做對映使用的不錯方式。
我認為使用陣列來做一些基本的任務是一個Javascript開發人員的基本技能。這些事情你真的不應該再去問谷歌。
- Array.pop-刪除陣列中的最後一個元素並傳回它
- Array.shift-刪除陣列中的第一個元素並傳回它
- Array.push(val1,val2…)-在一個陣列的尾部新增一個或多個條目。該方法執行後將始終傳回新陣列長度。你可以指定多個逗號分隔值。
- Array.reverse-反轉陣列的順序(第一個元素成為最後一個同時最後一個成為第一個，等等)。
- Array.sort([compareFunction])—允許你透過指定一個比較函式進行陣列排序，比較函式能訪問陣列中需要排序的每一個值。
- Array.join(separator)-這個方法在陣列中取一個或多個條目，並傳回一個由分隔符連線的字串值。如果你不指定一個分隔符，預設值是一個逗號。
- Array.indexOf(value)-這個方法能得到指定值第一次出現的位置，如果沒有找到傳回-1。
還有其他處理陣列的方法沒有列出來，你應該在這裡進一步閱讀。有一些新增到ES6的令人興奮的新方法沒有列在這裡，還有其他應用於具體用例的陣列方法。
Call和Apply之間的區別
這兩個方法容易誤解，同時嚇到了很多開發者。雖然可以不使用call或apply，但他們特別方便，因為它們允許你在執行期間呼叫方法時改變背景關係中的this值。
兩者的區別僅僅是微妙的，但有一個區別。使用call方法將允許你在呼叫一個函式時提供無限逗號分隔的引數。
使用apply方法將允許你呼叫一個方法時使用一個陣列作為提供的引數。這個方法在你想使用一個陣列作為方法呼叫引數以及改變背景關係的this時非常棒。
如果你只是想要在函式上使用一個陣列的值作為引數，ES6提供了spread operator(傳播運算元)。它不允許你更改背景關係的this，但是它允許你使用一個陣列值作為引數。
An example using .call:
function myFunc() {
console.log(arguments);
}
myFunc.call(this, 1, 2, 3, 4, 5);
An example using .apply:
function myFunc() {
console.log(arguments);
}
myFunc.apply(this, [1, 2, 3, 4, 5]);
ES6的新特性意味著未來只在非常有限的情況下，我們需要使用call或apply。感謝 spread operators，arrow functions 和從ES5就能用的bind功能。
熟悉框架/庫
這段時間Javascript框架族最大的競爭者似乎是AngularJS，React.js和Ember。當然還有更多，但這些是最大的，目前最受歡迎(在我看來)。
隨著web應用程式變得複雜起來，這些框架和庫使我們的開發工作變得更舒適。在2015年，一個Javascript開發人員應該知道至少一個jQuery以外的框架或庫，這並不是不合理的期望。
幾乎任何你在搜尋前端或Javascript開發人員看到的工作串列很可能會提到一個或兩個框架的要求或作為加分項的技能。請不要落伍。
Node.js
毫無疑問Node.js已經證明瞭它的價值，並沒有半路失敗的跡象(除非IO.js幹掉它)。幾乎所有前端工具是在其基礎上建立的，並使用Node包管理器，如果你一直還沒有學習Node.js，你應該重新考慮。
因為Node.js的內核是Javascript，學習曲線是不存在的，如果你已經有一點Javascript。你會發現你在配置app中需要使用的包上花了更多的時間，而不是在學習Node.js。
我個人認為Node.js是每個開發人員在2015年需要掌握一種技巧。我不是說過於複雜的深入瞭解它，但足以用它來開發伺服器，原型，測試和其他用例，這些地方Node.js將有利於你的工作流。
當然還有一個叫做IO.js的Node.js分支，目前是完全相同的。最後，你只是在編寫Javascript，儘管有一些小的差異。
測試
曾經有一段時間我們沒有測試Javascript程式碼，它不是許多人認為有必要的東西，因為我們面對的是：事情從未這麼漂亮或複雜地使用。這門語言成長為內在的複雜性，部分歸功於各種前端框架比如AngularJS和伺服器端Javascript Node.js。
隨著Javascript發展，我們用它來做更多的東西，程式碼膨脹，測試就變得很重要，即使不是至關重要的。如果在2015年你不測試您的程式碼，你就錯了。
我最喜歡的測試工具毫無疑問是Karma。還有很多其它工具可以考慮，但Karma尤其適合測試AngularJS應用程式。如果它對AngularJS足夠好，對我來說就已經足夠好了。
工具
2015年，作為一個Javascript開發人員意味著知道如何使用task runners，transpilers,分析器和其他工具，我們藉助它們編寫最好的Javascript程式碼。
有時瀏覽器中捆綁的工具並不總是準確地描述你的應用程式內部發生了什麼。有時你需要使用專業的工具來獲得應用程式的內部工作原理的更詳細資訊。
有用的工具(如果你還沒有使用它們);Gulp，Webpack和BabelJS。這裡還有很多工具，task runners比如Gulp和Grunt，他們對現代Javascript的繁重工作流特別有幫助(如果你還沒有使用它們)。
下載一個單獨的Javascript檔案，包含在我們的頁面中的日子一去不復返了。這個時期包管理器比如NPM和Bower被用來替代手動下載指令碼。
我們使用task runners來合併和壓縮指令碼，測試使用單獨的工具，工作通常更有組織性。
伴隨這樣的Javascript工具，編寫同構的Javascript(伺服器和前端之間共享程式碼庫)。
ES6，又名ECMAScript 6，又名ESNext
儘管瀏覽器在ECMAScript 6大部分好的特性得到支援之前，還有一段時間要走，我們現在可以使用transpilers開始編寫ES6程式碼。
熟悉所有新的API和方法;字串，陣列和其他很酷的功能，比如WeakMaps，Symbols和Classes。在2015年，作為一名開發人員意味著與Javascript語言的變化保持同步。
尤其熟悉Classes的概念。他們只是原型繼承上的語法糖(目前)，但也有打算在ES7中提升classes，使它們更有用，語法糖更少。
進一步的閱讀
在這之外還有很多學習Javascript深入部分的資源，很多比這篇文章更好且更深刻。
- You Might Not Need jQuery
- Mozilla Developer: Javascript Reference & Guide
- JS: The Right Way
- AirBnb’s Javascript Styleguide
結論
還有很多事情我可以繼續談。明顯這篇文章很大，現代Javascript開發人員的期望很多。這篇文章真的只是冰山一角。
請不要把這篇文章做為Javascript開發人員應該知道信條或最終串列。但我已經說過，有些東西，所有Javascript開發人員應該知道，這篇文章是我個人的想法。
如果你有任何改進或發現任何可以擴充套件或補充的，請在下麵評論並讓我知道。
原文出處：ilikekillnerds.com
譯文出處：伯樂線上 – cucr
連結：http://web.jobbole.com/82446/