DEV Community

kaede
kaede

Posted on

JavaScript 配列によく使うメソッド

why

配列の操作が鈍ってきているので復習。


Filter -- 引数の条件での絞り込み。

動作

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
Enter fullscreen mode Exit fullscreen mode

このように、条件式を引数に持ってきて、配列からその条件で絞り込む。


プロダクトで使われそうな実例

https://blog.oliverjumpertz.dev/10-important-array-methods-in-javascript-explained

const customers = [
  {
    id: 1,
    address: {
      number: "1-1-1" ,
      zipCode: "123-1111" ,
    } 
  },
  {
    id: 2,
    address: {
      number: "2-2-2",
      zipCode: "123-2222" ,
    } 
  },
]
const getElibgleCustomers = (customers, zipCode) => {
  return customers.filter(
    (customer) => customer.address.zipCode === zipCode
  );
}
const results = getElibgleCustomers(customers, "123-2222")

console.log(results);

// [ { id: 2, address: { number: '2-2-2', zipCode: '123-2222' } } ]

Enter fullscreen mode Exit fullscreen mode

お客さんたちのデータと、絞り込むための条件をもってきて
絞り込んだ。



includes -- 引数の値での絞り込み。

https://blog.oliverjumpertz.dev/10-important-array-methods-in-javascript-explained#heading-5-includes

const numbers = [1, 2, 3, 4, 5];

const includesFive = numbers.includes(5);
Enter fullscreen mode Exit fullscreen mode

配列から引数の条件を含んでいるものだけを絞って返す。



reduce -- 引数の処理を Lisp 的に施す。

https://kei-s-lifehack.hatenablog.com/entry/2021/03/09/js_array_reduce%28func%2C_arg%29_%E3%81%AE%E7%AC%AC%E4%BA%8C%E5%BC%95%E6%95%B0%E3%81%8C%E3%81%82%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%A8%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E3%81%AE%E5%87%A6

Lisp 的な処理。左からひとつひとつ 演算していく。



map -- 引数の関数を配列の要素ひとつひとつに施す。

https://www.w3schools.com/jsref/jsref_map.asp#:~:text=Definition%20and%20Usage,not%20change%20the%20original%20array.

配列の各自に対して、引数の関数の処理を行う。シンプル。

Top comments (0)