JavaScriptの配列さんをちゃんと覚えたい

配列さんの嫌なところ

• forとforEachって何よ。whileじゃ駄目なんかい
• findとか便利なメソッドが色々あるみたいやんけ。ちょっと吐き出してみーや

というまとめ

ループ処理の種類と使いどころ

while

while(条件式){
  //処理
}

ループが「回数」ではないところがポイント。
例えば直前に定義したlet colorが//処理の中でredになるまでループとか。

こんなループ条件書いたら無限ループしそうで怖いけどｗ

for

for(let i = 0; i < chars.length; i++){
  //処理
}

「回数」を条件にループするやつ。一番頻繁に使うのが上記の配列の要素数配列.lengthで使うやつ。

for..of

for(const char of chars){
  //処理
}

配列を対象にしたforを実装するときにオシャレに簡略化できる方法。
ただiを別途使いたいなら話は別。

for..in

曲者

const langs = {
  Japan: "Japanese",
  America: "English"
};

for(const key in langs){
  console.log(key);
  console.log(langs[key]);
  console.log(langs.key);
}

出力結果

Japan
Japanese
undefined
America
English
undefined

Perlでいうところのkeys()関数みたいなもんで、オブジェクトのキーを取得できる。
なんだけど、取得したキーを使って値にアクセスするときはlangs.keyじゃない。langs[key]になる。なんでじゃ。

forEach

sample.js

const fruits = ["orange", "apple", "lemon"];
for(let i = 0; i < fruits.length; i++){
  console.log(fruits[i]);
}

sample.js

const fruits = ["orange", "apple", "lemon"];
fruits.forEach((fruit) => {
  console.log(fruit);
})

いちいちiを定義しなくていい。あとforEachが関数ではなくて配列のメソッド、というところ。

その他のメソッド

find

配列の要素から条件に一致する要素を探し出す

const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.find((number) => {
  //探索条件を書く
  return number % 3 === 0;
});

console.log(result);

出力結果

3

探索条件の「結果」(True/False)ではなくて、Hitした値が返される。忘れそう。

const charcters = [
  {name: "Ki2neudon", age: 38},
  {name: "TanukiSoba", age: 36},
  {name: "SioRamen", age: 42}
];

const result = characters.find((character) => {
  return character.age >= 40;
});

console.log(result);

出力結果

{name: 'SioRamen', age: 42}

filter

findの条件一致したやつ全部取り出すやつー

const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.filter((number) => {
  //探索条件を書く
  return number % 3 === 0;
});

console.log(result);

出力結果

(2) [3, 6]

map

たぶん前回の記事？で書いたMapとは話が違う。紛らわしくない？
returnの行で各要素に対して行う処理を書き、それを経た新たな配列が作られる。

const numbers = [1,2,3];
const result = numbers.map((number) => {
  return number + 2;
});
console.log(result);

出力結果

(3) [3, 4, 5]