はじめに
産休・育休に入って1年間、全くコードを書かなかったら忘れてしまっていた...
頑張れ、脳。記憶力・・!
注意事項
あまり使わない引数や、直感的に理解できるメソッドの説明は省略しています。
下記にピックアップされているメソッドは個人的によく使うものたちで、
全てではありません のでご注意ください。
対象者
- 育休してて忘れている人(私です)
- JavaScript 初〜中級者
Array 編
join
配列の全ての要素を連結して、新しい文字列を作成する
const date = ['2020', '02', '23'];
const result = date.join('.');
console.log(result); // "2020.02.23"
forEach
配列のループ処理
配列の各要素に対して一度ずつ実行する
const animals = ['dog', 'cat', 'fox'];
/**
* # forEach
* value: 現在処理されている配列の要素
* index: 現在処理されている配列の要素のインデックス
* array: 元々の配列(あまり使わないので下記では省略)
*/
animals.forEach((value, index) => {
console.log(index, value);
});
// 0 "dog"
// 1 "cat"
// 2 "fox"
ちなみに Object.keys
と組み合わせることで、 Object の各要素に対して処理を実行できる
const animals = {
dog: 'wan-wan',
cat: 'nya-n',
fox: 'kon-kon'
};
Object.keys(animals).forEach((key, index) => {
console.log(index, key, animals[key]);
});
// 0 "dog" "wan-wan"
// 1 "cat" "nya-n"
// 2 "fox" "kon-kon"
Object.keys
でも 上記のような forEach 処理は実現できるが、
Object の各要素に対して処理を実行する手法として Object.entries
を活用する方法もある。
Object.entries
についての詳細は Object.entries を参照
every
配列の 全て の要素が、与えられた条件を満たしているかどうかチェックする
// 例1
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.every((num) => num < 5);
console.log(result); // false
// 例2
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.every((num) => num < 10);
console.log(result); // true
some
配列の 少なくとも1つ の要素が、与えられた条件を満たしているかどうかチェックする
なお、条件を満たした段階でループは終了する
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.some((num) => num > 3);
console.log(result); // true
// numbers[3]以降は評価されずに終了
filter
与えられた条件を配列要素それぞれに対して実行し、
条件を満たしている新しい配列を作成する
every や some が真偽値なのに対し、こちらは配列を返す (チョット似テル)
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.filter((num) => num < 3);
console.log(result); // [1, 2]
find
与えられた条件を満たしているか、配列要素の頭から実行(検索)し、
条件を満たした 最初の配列の要素 を返す
なお、条件を満たした段階でループは終了する
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.find((num) => num > 3);
console.log(result); // 4
// numbers[4]以降は評価されずに終了
map
配列のすべての要素に対して、与えられた関数をそれぞれ実行し、
関数で返された値で新しく配列を作る
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.map((num) => {
return num * 2;
});
console.log(result); // [2, 4, 6, 8, 10, 12]
reduce
配列の各要素を累積して、1つの累積値にする目的でよく使用する
- 数値なら「配列要素の合算値を求める」
- 文字列なら「全ての文字要素を1つの文字列にする」
- 配列から Object を作る
など
例1: 配列要素の合算値を求める
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
/**
* # reduce
* accumulator: returnされた演算結果 (初期値はarray[0])
* currentValue: 現在処理されている配列の要素 (初期値はarray[1])
* currentIndex: 現在処理されている配列の要素のインデックス (あまり使わないので下記では省略)
* array: 元々の配列 (あまり使わないので下記では省略)
*/
const result = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(result); // 45
|currentIndex| accumulator | currentValue | 戻り値 |
| -----: | ----------------------------------------------: | -------------------------------------------: | -----------: | ----------------------------------------: |
| 1| 1
numbers[0]| 2
numbers[1] | 3
1 + 2 |
| 2| 3
1 回目の戻り値| 3
numbers[2] | 6
3 + 3 |
| 3| 6
2 回目の戻り値 | 4
numbers[3] | 10
6 + 4 |
| 4| 10
3 回目の戻り値 | 5
numbers[4] | 15
10 + 5 |
| 5| 15
4 回目の戻り値 | 6
numbers[5] |21
15 + 6 |
| 6| 21
5 回目の戻り値 | 7
numbers[6] |28
21 + 7 |
| 7| 28
6 回目の戻り値 | 8
numbers[7] |36
28 + 8 |
| 8| 36
7 回目の戻り値 | 9
numbers[8] |45
36 + 9 |
例2: 配列から Object を作る
const animals = [
{ id: 'ZOO01', name: 'cat' },
{ id: 'ZOO02', name: 'dog' },
{ id: 'ZOO03', name: 'fox' }
];
const result = animals.reduce((accumulator, currentValue) => {
accumulator[currentValue.id] = currentValue.name;
return accumulator;
}, {});
console.log(result);
// {
// ZOO01: "cat"
// ZOO02: "dog"
// ZOO03: "fox"
// }
第2引数について
reduce
の第2引数はオプションだが、空の配列を実行するとエラーになる
[].reduce((a, b) => {
return a + b;
});
// Uncaught TypeError: Reduce of empty array with no initial value
予期せぬ実行結果になる可能性があるため、基本的に reduce
には初期値を設定すると安全!
[].reduce((a, b) => {
return a + b;
}, 0);
flat
ネストされた配列構造を平らにする
const numbers = [1, 2, [3, 4]];
numbers.flat();
// [1, 2, 3, 4]
flat メソッドは配列内に空要素があった場合、削除するため要注意
const numbers = [1, 2, ,4];
numbers.flat();
// [1, 2, 4]
includes
特定の要素が含まれているかどうかチェックする
const animals = ['cat', 'dog', 'fox', 'red-panda'];
const hasCats = animals.includes('cat');
console.log(hasCats); // true
const hasPanda = animals.includes('panda');
console.log(hasPanda); // false
String 編
split
文字列を分割して配列にする
const date = `2020/02/23`;
const result = date.split('/');
console.log(result); // ["2020", "02", "23"]
split して分割したものを改めてくっつけたい場合は、 joinを使うと良い
join
についての詳細は join を参照
concat
文字列に別の文字列を連結して、新しい文字列をつくる
const str1 = `Hello.`;
const str2 = `World!`;
const result = str1.concat(str2);
console.log(result); // > "Hello.World!"
startsWith
文字列の先頭が指定した文字列で始まるかどうかチェックする
const str = `Hello.World!`;
const result = str.startsWith('Hel');
console.log(result); // true
includes
文字列中に特定の文字列が含まれているかどうかチェックする
const str = `Tom and Jerry are cat and rat.`;
const result = str.includes('at');
console.log(result); // true
trim
文字列の両端から空白や改行文字(LFやCR)、スペースやタブなどを取り除く
const str = ` Hello!!
`;
const result = str.trim();
console.log(result); // "Hello!!"
padStart
文字列が任意の長さになるよう、指定した文字列で先頭から字詰めする
/**
* # padStart
*
* targetLength: 文字列の長さ。現在の文字列の長さよりも短い場合、現在の文字列が返る
* padString: 字詰め文字列。 targetLength より長い場合は、右からその長さ分が切り捨てられる
*/
'targetString'.padStart(targetLength, padString);
5桁を指定し、空いた部分は頭から*
で字詰め
const targetString = 'abc';
const result = targetString.padStart(5, '*');
console.log(result); // **abc
5桁を指定し、空いた部分は頭から12345
で字詰め
const targetString = 'abc';
const result = targetString.padStart(5, '12345');
console.log(result); // 12abc
targetString + padString が指定した桁数より長い場合は、
padString が右からその長さ分切り捨てられる
12345abc
-> 12abc
Object 編
entries
- オブジェクトを配列に変換する
- Object
{key: value}
-> Array[key, value]
- Object
- Object だけど配列操作を行いたい際などに起点となる便利なメソッド
オブジェクトを配列に変換する
Object.entries
単体を使ってオブジェクトを配列に変換
const animals = {
dog: 'wan-wan',
cat: 'nya-n',
fox: 'kon-kon'
};
const result = Object.entries(animals);
console.log(result);
// [
// ["dog", "wan-wan"],
// ["cat", "nya-n"],
// ["fox", "kon-kon"],
// ]
上記のような形だとあまり使いみちがない(あったらゴメンナサイ)
基本的に Object.entries
で配列にした後、map
でコードの柔軟性を高めると良い
map
についての詳細は map を参照
Object.entries
と map
を組み合わせる
const animals = {
dog: 'wan-wan',
cat: 'nya-n',
fox: 'kon-kon',
};
const result = Object.entries(animals).map(([key, value]) => ({
name: key,
cry: value,
}));
console.log(result);
// [
// {
// name: "dog",
// cry: "wan-wan",
// },
// {
// name: "cat",
// cry: "nya-n",
// },
// {
// name: "fox",
// cry: "kon-kon",
// },
// ];
使いやすい形になった
引用 & 参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object
まとめ
- 1年以上コードを書かないでいると浦島状態
- 頭がリセットされるので、新しい視点でコードを見れるようになる(ぽじてぃぶ)
- 育休はいいぞ
最後までお読みいただき、ありがとうございました!