freeCodeCamp/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7b8e367417b2b2512b5d	瞭解使用命令式編程的危害	1	301241	understand-the-hazards-of-using-imperative-code

--description--

使用函數式編程是一個好的習慣。 它使你的代碼易於管理，避免潛在的 bug。 但在開始之前，先看看命令式編程方法，以強調你可能有什麼問題。

在英語 (以及許多其他語言) 中，命令式時態用來發出指令。 同樣，命令式編程是向計算機提供一套執行任務的聲明。

命令式編程常常改變程序狀態，例如更新全局變量。 一個典型的例子是編寫 for 循環，它爲一個數組的索引提供了準確的迭代方向。

相反，函數式編程是聲明式編程的一種形式。 通過調用方法或函數來告訴計算機要做什麼。

JavaScript 提供了許多處理常見任務的方法，所以你無需寫出計算機應如何執行它們。 例如，你可以用 map 函數替代上面提到的 for 循環來處理數組迭代。 這有助於避免語義錯誤，如調試章節介紹的 "Off By One Errors"。

考慮這樣的場景：你正在瀏覽器中瀏覽網頁，並想操作你打開的標籤。 下面我們來試試用面向對象的思路來描述這種情景。

窗口對象由選項卡組成，通常會打開多個窗口。 窗口對象中每個打開網站的標題都保存在一個數組中。 在對瀏覽器進行了如打開新標籤、合併窗口、關閉標籤之類的操作後，你需要輸出所有打開的標籤。 關掉的標籤將從數組中刪除，新打開的標籤（爲簡單起見）則添加到數組的末尾。

代碼編輯器中顯示了此功能的實現，其中包含 tabOpen()，tabClose()，和 join() 函數。 tabs 數組是窗口對象的一部分用於儲存打開頁面的名稱。

--instructions--

在編輯器中運行代碼。 它使用了有副作用的方法，導致輸出錯誤。 存儲在 finalTabs.tabs 中的打開標籤的最終列表應該是 ['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab']，但輸出會略有不同。

修改 Window.prototype.tabClose 使其刪除正確的標籤。

--hints--

finalTabs.tabs 應該是 ['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab']

assert.deepEqual(finalTabs.tabs, [
  'FB',
  'Gitter',
  'Reddit',
  'Twitter',
  'Medium',
  'new tab',
  'Netflix',
  'YouTube',
  'Vine',
  'GMail',
  'Work mail',
  'Docs',
  'freeCodeCamp',
  'new tab'
]);

--seed--

--seed-contents--

// tabs is an array of titles of each site open within the window
const Window = function(tabs) {
  this.tabs = tabs; // We keep a record of the array inside the object
};

// When you join two windows into one window
Window.prototype.join = function(otherWindow) {
  this.tabs = this.tabs.concat(otherWindow.tabs);
  return this;
};

// When you open a new tab at the end
Window.prototype.tabOpen = function(tab) {
  this.tabs.push('new tab'); // Let's open a new tab for now
  return this;
};

// When you close a tab
Window.prototype.tabClose = function(index) {

  // Only change code below this line

  const tabsBeforeIndex = this.tabs.splice(0, index); // Get the tabs before the tab
  const tabsAfterIndex = this.tabs.splice(index + 1); // Get the tabs after the tab

  this.tabs = tabsBeforeIndex.concat(tabsAfterIndex); // Join them together

  // Only change code above this line

  return this;
 };

// Let's create three browser windows
const workWindow = new Window(['GMail', 'Inbox', 'Work mail', 'Docs', 'freeCodeCamp']); // Your mailbox, drive, and other work sites
const socialWindow = new Window(['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium']); // Social sites
const videoWindow = new Window(['Netflix', 'YouTube', 'Vimeo', 'Vine']); // Entertainment sites

// Now perform the tab opening, closing, and other operations
const finalTabs = socialWindow
  .tabOpen() // Open a new tab for cat memes
  .join(videoWindow.tabClose(2)) // Close third tab in video window, and join
  .join(workWindow.tabClose(1).tabOpen());
console.log(finalTabs.tabs);

--solutions--

const Window = function(tabs) {
  this.tabs = tabs;
};

Window.prototype.join = function(otherWindow) {
  this.tabs = this.tabs.concat(otherWindow.tabs);
  return this;
};

Window.prototype.tabOpen = function(tab) {
  this.tabs.push('new tab');
  return this;
};

Window.prototype.tabClose = function(index) {
  const tabsBeforeIndex = this.tabs.slice(0, index);
  const tabsAfterIndex = this.tabs.slice(index + 1);

  this.tabs = tabsBeforeIndex.concat(tabsAfterIndex);
  return this;
 };

const workWindow = new Window(['GMail', 'Inbox', 'Work mail', 'Docs', 'freeCodeCamp']);
const socialWindow = new Window(['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium']);
const videoWindow = new Window(['Netflix', 'YouTube', 'Vimeo', 'Vine']);

const finalTabs = socialWindow
  .tabOpen()
  .join(videoWindow.tabClose(2))
  .join(workWindow.tabClose(1).tabOpen());