Forem

kaede
kaede

Posted on

1 1

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.

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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay