iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

前端藏寶圖系列 第 5

就決定是你了 - 陣列系列III

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

使用目的 方法名稱 回傳值
增加陣列元素(至陣列末端) Array.prototype.push() 陣列的新長度
增加陣列元素(至陣列起始) Array.prototype.unshift() 陣列的新長度
移除陣列最後一個元素 Array.prototype.pop() 移除的元素,如果是空陣列,則回傳 undefined
移除陣列第一個元素 Array.prototype.shift() 移除的元素,如果是空陣列,則回傳 undefined
增加/移除陣列元素(可自行指定位置) Array.prototype.splice() 被刪除的元素陣列,如果沒有刪除任何元素則回傳空陣列
要將陣列有規律的排序 Array.prototype.sort() 排序後的陣列
將陣列的排序顛倒 Array.prototype.reverse() 反轉後的陣列


圖片來源: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();
}

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

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

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


上一篇
就決定是你了 - 陣列系列 II
下一篇
深不可測的海 - Regular Expression
系列文
前端藏寶圖30

2 則留言

0
南國ㄟ安迪
iT邦新手 5 級 ‧ 2021-09-20 15:33:21

1984!!!
期待正則表達式~

0
Hooo
iT邦新手 5 級 ‧ 2021-09-20 17:55:43

謝謝佳萱大大安利我文章~~陣列系列太精彩 收收收

我要留言

立即登入留言