JavaScriptの配列とオブジェクト　追記：配列のメソッド

JavaScript/HTML/CSS JavaScript

配列と添字

JavaScriptで配列は下記のように表現する。

var classes = ['A組', 'B組', 'C組', 'D組'];

変数に入れられる値であれば、何でも配列に入れることができる。

添字で中身の要素を取り出すには、変数[添字の数];

classes[0];

と入力すると"A組"と表示される

配列の添字は０からスタートするので、上記の例で添字と配列は

添字 配列
classes[0]; A組
classes[1]; B組
classes[2]; C組
classes[3]; D組

配列　['A組', 'B組', 'C組', 'D組'];

要素　A組,B組,C組,D組

添字　0, 1, 2, 3

配列の要素を足すには

配列の変数名.push('追加したい要素')

要素の個数を整数値で確認するには

配列の変数名.length
メソッド 説明
.push( 追加するデータ ) 配列の最後に追加
.unshift( 追加するデータ1,データ2,... ) 配列の最初に追加
.pop( ) 最後のデータを削除
.shift( ) 最初のデータを削除

オブジェクト

let 変数名 = {プロパティ名:値,プロパティ名:値,...}
console.log(変数名.プロパティ名);
変数名.プロパティ名 = 新しい値;
  • 変数に複数のプロパティを代入できる(プロパティ = プロパティ名&値のこと)
  • 変数.プロパティ名で値を取得したり変更できる

プロパティの値にfunction関数を持たせることができる

let 変数名 = {
    関数名: function (受取る値の変数名) {
        実行したい処理;
    }
};

配列のメソッド

.find(callback関数)

配列のそれぞれの添字に対し1度ずつcallback関数を実行する(callback関数がtruthyな値を返すまで繰り返す)ない場合はundefinedを返す

例 ))

const 値を格納する変数名 = 配列名.find((引数) => 引数.プロパティ === 一致させたい値);

//例
constconst userDataList = [
    { id: 12, name: '加藤'},
    { id: 25, name: '鈴木'},
    { id: 100, name: '佐々木'},
    { id: 3897, name: '後藤'}
];
const targetData = userDataList.find((data) => data.id === 100);
console.log(targetData.name); // 結果：佐々木

.findIndex(callback関数)

条件を満たす最初のインデックスを取得する

const 値を格納する変数名 = 配列名.findIndex((引数) => 引数 === 一致させたい値);

//例
const arrayList = ['猫','犬','狸','狐'];
const targetIndex = arrayList.findIndex((data) => data === '狸');
console.log(targetIndex); // 結果：2

.forEach( )

配列の全ての項目に対し繰り返しfunctionを実行する

配列.forEach(function(item, index){
    処理を記述
});
  • itemに配列の要素が入りindexに添字が入る