ccc
こんにちわ！東京都内でサラリーマンをしているAI・育児ブロガーのCCCです。 AI(人工知能)と子育てに関する記事を執筆しています。 WebシステムをベースとしたAIを活用することで生活をより便利にする方法を紹介し、育児について衣食住における役立つグッズや情報を配信しています。
JavaScriptにおける配列の扱い方を教えてください。
ccc
JavaScriptはクライアント側で実行されるオブジェクト指向型のスクリプト言語です。主にブラウザ上で実行され、ユーザのアクションに応じて動的にWebページの内容を書き換えたり、フォームに入力された内容をチェックしたりといったことがクライアント側で実現できます。また、Ajaxという仕組みを利用することで、Webサーバーとブラウザとの間で非同期通信を行えるので、ページを切り替えることなくページの内容を書き換えることができます。Web系AIとJavaScriptの親和性はピカイチで、AIをWebブラウザから使うためのライブラリが公開されています。
ccc
今回はJavaScriptの使い方として、JavaScriptにおける配列の扱い方をサンプルを用いて解説します。
配列を作成
配列の要素をカンマ(,)で区切って全体を括弧[]で囲います。
let temp=["apple", "lemon", "orange"];
console.log(temp);
//["apple", "lemon", "orange"]配列の要素に新しい値を代入
配列の要素に新しい値を代入できます。
let temp=["apple", "lemon", "orange"];
temp[0]="cherry";
console.log(temp);
//["cherry", "lemon", "orange"]多次元配列
配列の要素に配列を格納することで、多次元配列が作れます。
let temp=[
["apple", 100],
["lemon", 50],
["orange", 30]
];
console.log(temp[0][0], temp[1][0], temp[2][0]);
console.log(temp[0][1], temp[1][1], temp[2][1]);
//apple lemon orange
//100 50 30配列の要素数を取得
lengthプロパティは配列の要素数を返します。
let temp=["apple", "lemon", "orange"];
console.log(temp.length);
//3配列に要素を追加
配列末尾に要素を追加できます。配列末尾のインデックスはlengthプロパティから取得できます。
let temp=["apple", "lemon", "orange"];
temp[temp.length]="melon";
console.log(temp);
//["apple", "lemon", "orange", "melon"]配列の要素を削除
pop()は配列の要素を削除するメソッドです。引数に削除したい要素のインデックスを指定します。
let temp=["apple", "lemon", "orange"];
temp.pop(1);
console.log(temp);
//["apple", "orange"]配列の要素のインデックスと値を順に取り出す
forEach()は配列の要素のインデックスと値を順に取り出すメソッドです。
次の例では、配列の要素を順に取り出し、コールバック関数に値を渡しています。
let temp=["a", "b", "c"];
temp.forEach(function(value){
console.log(value);
});
//a
//b
//cコールバック関数はアロー関数を使って次のように記述することもできます。
let temp=["a", "b", "c"];
temp.forEach(value=>{
console.log(value);
});
//a
//b
//cコールバック関数(またはアロー関数)の第2引数に変数を指定することで、インデックスも取得することができます。
let temp=["a", "b", "c"];
temp.forEach((value,index)=>{
console.log(index, value);
});
//0 "a"
//1 "b"
//2 "c"指定した値を持つインデックスを取得
indexOf()は指定した値を持つ要素を配列の先頭から検索してインデックスを返すメソッドです。オプションで第2引数に検索を開始するインデックスを指定することができます。検索見つからなかったときは-1が返されます。
let temp=["a", "b", "c"]; let index=temp.indexOf("b"); console.log(index);//1let index=temp.indexOf("b",2); console.log(index);//-1
条件に一致するインデックスを取得
findIndex()は、配列の要素の値を順に取り出してコールバック関数に値を渡した後、条件式の戻り値がtrueのとき、その要素のインデックスを返します。
let temp=[3, 6, 9];
let index2=temp.findIndex(function(value){
return value>6;
});
console.log(index2);
//2アロー関数を使って次のように記述することもできます。
let temp=[3, 6, 9];
let index2=temp.findIndex(value=>{
return value>6;
});
console.log(index2);
//2条件に一致する要素の値を取得
findIndex()は、配列の要素の値を順に取り出してコールバック関数に値を渡した後、条件式の戻り値がtrueのとき、その要素の値を返します。
let temp=[3, 6, 9];
let value2=temp.find(function(value){
return value>6;
});
console.log(value2);
//9アロー関数を使って次のように記述することもできます。
let temp=[3, 6, 9];
let value2=temp.find(value=>{
return value>6;
});
console.log(value2);
//9条件を満たす要素があるかどうかを調べる
some()は条件式を満たす要素があるかどうかを調べてtrueまたはfalseを返すメソッドです。
let temp=[3, 6, 9];
let temp2=temp.some(value=>{
return value>6;
});
console.log(temp2);
//true全ての要素が条件に一致するかどうかを調べる
every()は全ての要素が条件に一致するかどうかを調べてtrueまたはfalseを返すメソッドです。
let temp=[3, 6, 9];
let temp2=temp.every(value=>{
return value>2;
});
console.log(temp2);
//true配列を文字列に変換
toString()は配列をカンマ(,)で連結した文字列に変換するメソッドです。
let temp=["a", "b", "c"];
console.log(temp.toString());
//a,b,c配列の要素を並び替える
sort()は配列の要素の値を昇順(または降順)に並び替えるメソッドです。
配列の2つの要素(a, b)をアロー関数に渡し、1つ目の要素の値から2つ目の要素の値を引いた値を返り値とします。
返り値が0より小さいときはaをbより小さい順にソートし、返り値が0のときは何もせず、返り値が0より大きいときはbをaより小さい順にソートする仕組みです。
let temp=[30, 10, 20]
temp.sort((a,b)=>{
return a-b;
});
//[10, 20, 30]降順にしたいときは引き算を逆にします。
let temp=[30, 10, 20]
temp.sort((a,b)=>{
return b-a;
});
//[30, 20, 10]配列の全ての要素に同じ処理を行う
map()は配列の全ての要素に同じ処理を行って、新しい配列を生成するメソッドです。
次の例では、toUpperCaseメソッドを使って配列の全ての要素の値を大文字に変換しています。
let temp=["apple", "lemon", "orange"];
let temp2=temp.map(value=>{
return value.toUpperCase();
});
console.log(temp2);
//["APPLE", "LEMON", "ORANGE"]配列の要素の値を条件でフィルタリング
filter()は条件を満たした要素だけを集めて新しい配列を生成するメソッドです。
let temp=[1, 2, 3, 4, 5, 6, 7, 8, 9];
let temp2=temp.filter(value=>{
return value>5;
});
console.log(temp2);
//[6, 7, 8, 9]配列の要素の値を合計
reduce()は配列の全ての要素の値を合計するメソッドです。
次の例では、合計保管用の変数(sum)と要素の値(value)をアロー関数に渡し、sumにvalueを加算した値を戻り値としています。明示的にsumを0で初期化しています。
let temp=[1, 2, 3];
let temp2=temp.reduce((sum, value)=>sum+value, 0);
console.log(temp2);
//6