來到陣列系列的最後一天，今天要一次認識會改變原本陣列的Array Method，再往下看之前，先來個想像力練習，首先，把陣列想成一個書櫃，之後要放進去的元素則是一本本的書。好了，那我們開始吧～

圖片來源：Unsplash

將書放到書櫃

• Array.prototype.push() **括號內放入要加入的元素

const classics = ['The Trial', '1984', 'The Great Gatsby', 'Les Misérables'];

// 在書櫃空白區增加兩本書
const classicsLength = classics.push('On the Road', 'Waiting for Godot');

console.log(classicsLength); // 6
console.log(classics);  // ['The Trial', '1984', 'The Great Gatsby', 'Les Misérables', 'On the Road', 'Waiting for Godot']

• Array.prototype.unshift() **括號內放入要加入的元素

const classics = ['The Trial', '1984', 'The Great Gatsby', 'Les Misérables'];

// 把書往右側推，然後再放入一本書
const classicsLength = classics.unshift('On the Road');

console.log(classicsLength); // 5
console.log(classics); // ['On the Road', 'The Trial', '1984', 'The Great Gatsby', 'Les Misérables']

從書櫃取書

• Array.prototype.pop()

const classics = ['The Trial', '1984', 'The Great Gatsby', 'Les Misérables']

// 拿掉最後一本書
const removed = classics.pop();

console.log(removed);  // Les Misérables
console.log(classics); // [ 'The Trial', '1984', 'The Great Gatsby' ]

• Array.prototype.shift()

const classics = ['The Trial', '1984', 'The Great Gatsby', 'Les Misérables'];

// 拿掉第一本書
const removed = classics.shift();

console.log(removed);  // The Trial
console.log(classics); // [ '1984', 'The Great Gatsby', 'Les Misérables' ]

放書，取書，把書亂塞

• Array.prototype.splice(改動的元素索引, 刪除的元素個素, 要加入的元素)

const classics = ['The Trial', '1984', 'The Great Gatsby', 'Les Misérables'];

// 從1984那本書開始，拿走兩本書
const removed = classics.splice(1, 2);

console.log(removed); // [ '1984', 'The Great Gatsby' ]
console.log(classics); // [ 'The Trial', 'Les Misérables' ]

const classics = ['The Trial', '1984', 'The Great Gatsby', 'Les Misérables'];

// 從1984那本書開始，拿走兩本書，再塞入On the Road那本書
const removed = classics.splice(1, 2, 'On the Road');

console.log(removed); // [ '1984', 'The Great Gatsby' ]
console.log(classics); // [ 'The Trial', 'On the Road', 'Les Misérables' ]

整理書

• Array.prototype.reverse()

const classics = ['The Trial', '1984', 'The Great Gatsby', 'Les Misérables'];


classics.reverse();
console.log(classics); // [ 'Les Misérables', 'The Great Gatsby', '1984', 'The Trial' ]

• Array.prototype.sort() **括號內可選擇性地放入定義排序的函式

註：假設要針對書名做排序，可是如果書名是以冠詞（The/A/An）開頭的話，則以書名的第二個單字做排序依據。

const bookTitles = ['The Trial', 'Normal People', 'The Great Gatsby', 'Give and Take', 'Think Twice', 'Animal Farm', 'An American Odyssey']

// 移除書名的冠詞
function removeArticle(bookTitle) {
  return bookTitle.replace(/^(a |an |the )/i, '').trim();
}

// 由Ａ到Ｚ排序
bookTitles.sort((current, next) => {
  if(removeArticle(current) > removeArticle(next)) {
    return 1;
  } else {
    return -1;
  };
});

不知道replace和trim的朋友，推薦你來個String Methods套餐
不知道/^(a |an |the )/i 是什麼魔法咒語的朋友，咱們明天中秋節一起來研究正規表達式吧～

參考資料：
Array - MDN
JavaScript — Array mutable methods