📈

JavaScript30 DAY7:Array Cardio Day 2実装を通して気になる技術をまとめる

2023/11/06に公開

JavaScript

array

tech

1.記事の目的

前回の続きです。

（前回の記事）

Javascript30というサイトのFUNDAMENTALSタグがついているものを確認しながら、気になる技術をまとめたいと思います。今回はDAY7:Array Cardio Day 2です。
https://javascript30.com/

前回に引き続きArray（配列）のメソッド紹介です。

2.HTML&JS

コードです。今回もCSSなしです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Array Cardio</title>
</head>
<body>
  <p><em>Psst: have a look at the JavaScript Console</em></p>
  <script src="script.js"></script>
</body>
</html>

const people = [
  { name: 'Wes', year: 1988 },
  { name: 'Kait', year: 1986 },
  { name: 'Irv', year: 1970 },
  { name: 'Lux', year: 2015 }
];

const comments = [
  { text: 'Love this!', id: 523423 },
  { text: 'Super good', id: 823423 },
  { text: 'You are the best', id: 2039842 },
  { text: 'Ramen is my fav food ever', id: 123523 },
  { text: 'Nice Nice Nice!', id: 542328 }
];

//　parsonに少なくとも一人以上２０歳以上がいるか確認する。
const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= ２０);

console.log({isAdult});

// parsonが皆２０歳以上か確認する
const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= ２０);

console.log({allAdults});

// commentからidが823423のものを探す
const comment = comments.find(comment => comment.id === 823423);

console.log(comment);

// commentからidが823423のもののインデックス番号を探す
const index = comments.findIndex(comment => comment.id === 823423);

console.log(index);

3.気になったポイント

1.Array.prototype.some()

someメソッドです。

some() メソッドは、指定された関数で実装されているテストに、配列の中の少なくとも 1 つの要素が合格するかどうかを判定します。配列の中で指定された関数が true を返す要素を見つけた場合は true を返し、そうでない場合は false を返します。それ以外の場合は false を返します。配列は変更しません。

コールバック関数に配列の要素が一つでも合格すればtrueを返してくれます。

people.some(person => ((new Date()).getFullYear()) - person.year >= ２０);

このコードの場合、配列の要素（{ name: 'Wes', year: 1988 }など)に対して(new Date()).getFullYear()) - person.year >= ２０がtrueかfalseかという判定をします。

.getFullYear()ってなによ？と気になりました。

2.getFullYear()

Dataオブジェクトから年のみを返してくれます。

(new Date()).getFullYear()　// new Data()で現在のDataオブジェクトを生成して、そこから年だけを返す

3.Array.prototype.find()

find() は Array インスタンスのメソッドで、提供されたテスト関数を満たす配列内の最初の要素を返します。テスト関数を満たす値がない場合は、 undefined を返します。

テスト関数を満たす最初の要素を返してくれます。

comments.find(comment => comment.id === 823423);

このコードの場合、配列の要素（{ text: 'Love this!', id: 523423 }など)に対してcomment.id === 823423があるかどうかを判定し、あれば要素を返し、なければundefinedを返します。

これと似ているけれど、要素それ自体ではなくインデックス番号を返すものが次のfindIndex（）です。

4.Array.prototype.findIndex()

配列内の指定されたテスト関数に合格する最初の要素の位置を返します。テスト関数に合格する要素がない場合を含め、それ以外の場合は -1 を返します。

テスト関数に合格する最初の要素のインデックス番号を返してくれます。なければ-1を返すようです。

comments.findIndex(comment => comment.id === 823423);

このコードの場合、配列の要素（{ text: 'Love this!', id: 523423 }など)に対してcomment.id === 823423があるかどうかを判定し、あればそのインデックス番号を、なければ−１を返します。

4.最後に

配列のメソッドは様々な種類があるので、課題に応じてきちんと使い分けられるようになりたいです。

明らかな技術的間違いなどに気づかれた方はぜひご指摘いただけるとありがたいです。