Theme NexT works best with JavaScript enabled

ShunNien's Blog

不積跬步,無以致千里;不積小流,無以成江海。

0%

JS30紀錄 07-Array Cardio

目標

練習陣列操作,主要熟練 some、 every、 find、 findIndex、 slice 這幾個陣列操作語法,需要直接搭配 console 來觀看。

Demo | Github

處理步驟

步驟 1.

操作 people 陣列,利用 some 與 every 檢查是否符合大於等於 19 歲的元素。

步驟 2.

操作 comment 陣列, find 類似 filter ,只是 find 只會回傳一個找尋到的元素。
而 findIndex 會回傳找到元素的索引。

步驟 3.

針對 comment 刪除指定元素,因為此次指定使用 slice ,不然可以採用 splice 更好處理。

  • 建立一個新陣列
  • 利用 slice 取出陣列
  • 利用 ... 語法糖連結陣列

筆記與備註事項

JavaScript 部分

Array.prototype.some()

The some() method tests whether at least one element in the array passes the test implemented by the provided function.

資料來源MDN
  • 用來判斷是否有元素符合所設定的條件
  • 只會回傳 true 或 false
1
2
[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

Array.prototype.every()

every() 方法會使用傳入的回呼函示來測試所有在陣列中的元素
資料來源 - MDN

  • 陣列中的所有元素,都必須符合設定的條件
  • 全部符合條件回傳 true ,只要有一元素不符合就回傳 false
1
2
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

Array.prototype.find()

find() 方法,如果一個在陣列中的元素滿足提供的測試函數,則返回一個在陣列中的值。否則回傳 undefined

資料來源MDN

Array.prototype.findIndex()

findIndex() 方法將依據提供的測試函式,尋找陣列中符合的元素,並返回其 index (鍵值)。如果沒有符合的對象,將返回 -1 。

資料來源MDN

Array.prototype.slice()

The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.

Syntax

arr.slice([begin[, end]])

1
2
3
4
5
6
7
8
9
10
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
資料來源MDN
  • 取得陣列中指定區段的元素,將回傳新的陣列
  • 語法中 begin 與 end 參數表示陣列元素的索引,都是從 0 開始
  • 回傳的陣列,會依照 end 參數的前一位,也就是 end 參數指定的元素是不會回傳的

參考資料

歡迎關注我的其它發布渠道