如何使用JavaScript陣列中的Some方法

  • 更新日期:
文章觀看次數: 638

之前寫的 JavaScript 奇怪的坑 – forEach 跳出循環 – return 居然失效了!? 那一篇中

有提到官方文件中建議的 every 跟 Some 的方法，故今天就來看一下這究竟是在做甚麼吧

JS - forEach 的圖

⬆ 幫大家回憶一下

用處

透過給定函式、測試陣列中是否至少有一個元素符合條件

回傳值為布林 ( 有的話為true，反之則為false )

語法

先來看看Some基本的語法吧

// Arrow function
some((element) => { /* … */ })
some((element, index) => { /* … */ })
some((element, index, array) => { /* … */ })

// Callback function
some(callbackFn)
some(callbackFn, thisArg)

// Inline callback function
some(function (element) { /* … */ })
some(function (element, index) { /* … */ })
some(function (element, index, array) { /* … */ })
some(function (element, index, array) { /* … */ }, thisArg)

單純看到這樣，大家是不是看得很霧煞煞啊 (沒有的話，我晚點再問一次 （；へ：）

開玩笑的，上面的3種常見的呼叫 JavaScript 函式的方式

第一種是 箭頭函式 Arrow function – 比較類似C#的LINQ語法，有匿名函式的特性

第二種則是最簡單的 回呼函式 Callback function – 定義一個function，在其他地方對它進行呼叫

最後一種則是 行內函式 Inline callback function – 直接將呼叫的function寫在some裡面

來看看Some函式 傳入的相關參數吧

array.some(function (element, index, array)

參數必要與否說明
element必要要判斷的值
index可選目前元素的索引
array可選呼叫some函式的array

範例

先來一個最簡單的

判斷數字是否大於10，並回傳 true/false

function isBiggerThan10(element,index,array) {
  console.log('value:'+element+',index:'+index);
  
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10)
[12, 5, 8, 1, 4].some(isBiggerThan10)

這個寫法用到的是上面說到的 Callback function

結果如下

Callback function Example

可以發現當給定的function回傳為true時即會中止 Some函式

用箭頭函式的話，看起來會更簡單

[2, 5, 8, 1, 4].some(x => x > 10);
[12, 5, 8, 1, 4].some(x => x > 10);
Arrow function Example

是不是跟上面達到了一樣的效果

寫在行內的方法其實也很單純，直接把function整個都搬家一下就好

[2, 5, 8, 1, 4].some(function (element,index,array) {
  console.log('value:'+element+',index:'+index);
  return element > 10;
});
[12, 5, 8, 1, 4].some(function (element,index,array) {
  console.log('value:'+element+',index:'+index);
  return element > 10;
});

支援版本

該功能為 ES5 時提出 ( JavaScript2009 )，故目前所有的主流瀏覽器都可以支援

不用擔心語法兼容性的問題

結論

的確是個挺方便的函式，筆者寫了4、5年程式卻都沒用過哈哈 ( 雖然JS非本職 )

下一次應該會介紹array的另一個類似的函式 – every 以及兩者的比較

參考文章 :

🧡如果這篇文章有幫上你的一點點忙，那是我的榮幸

🧡幫我按FB粉絲專頁一個讚，我會很感謝的

✅如有任何疑問，歡迎透過留言或messenger讓我知道 !

標籤

相關文章

發佈留言