JS---配列の値の取得と、代入

配列の値の取得と、代入

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【インデックスを指定して配列の要素へアクセスする】
配列の要素はインデックス(添字)と呼ばれる数値を指定することでアクセスすることができます。

インデックスは配列の一番最初の要素が 0 、次の要素が 1 というように順番に割り当てられています

・書式
配列名[インデックス]

【要素に格納されている値を参照する】
要素を指定して変数に代入することで要素の値を取得する事が出来る

サンプル
let pref = ['Tokyo', 'Osaka', 'Aichi', 'Kyoto'];

console.log(pref[0]);
console.log(pref[1]);
console.log(pref[2]);
console.log(pref[3]);
let pref = ['Tokyo', 'Osaka', 'Aichi', 'Kyoto'];

・結果
Tokyo
Osaka
Aichi
Kyoto

存在しないインデックスを指定した場合
let pref = ['Tokyo', 'Osaka', 'Aichi', 'Kyoto'];

console.log(pref[4]);
結果
undefined

【要素に新しい値を代入する】
配列を作成したあとで、配列の要素に対して新しい値を代入することができます。

・書式
配列名[インデックス] = 値;

サンプル
配列の作成
let pref = ['Tokyo', 'Osaka', 'Aichi', 'Kyoto']; //配列リテラル
console.log(pref);
結果
 ['Tokyo', 'Osaka', 'Aichi', 'Kyoto']

新しい値を代入する
pref[1] = 'Nara';
console.log(pref);
結果
["Tokyo", "Nara", "Aichi", "Kyoto"] //'Osaka'→ 'Nara'

JS---配列の作成方法

配列の作成方法

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【配列リテラルから配列を作成する】
配列リテラルを使って配列を生成する場合は次の書式を使用します

・書式
[要素1, 要素2, 要素3, ...]←配列リテラル
※リテラルは、文字列や数字などのデータ型の値を直接記述する方法

サンプル
配列
let result = [78, 69, 84, 50]; //数字
let fruit = ['apple', 'lemon']; //文字列
let profile = ['Yamada', 24, 'Tokyo', true];　//任意のデータ型

要素が連続して無い配列
let data = [84, , 76];

console.log(data);
結果
[84, empty, 76]

console.log(data[1]);
結果
undefined

【要素の値として式を指定する】
配列を作成する時に要素の値として数値や文字列などのリテラルだけではなく式を指定することができます

・サンプル
let num = 10;
let data = [45, num];

console.log(data);
結果
[45, 10]

計算式も指定出来る
let num = 10;　//リテラル
let data = [num + 5, num * num];　//式

console.log(data);
結果
 [15, 100]

【Arrayオブジェクトから配列を作成する】
Arraya オブジェクトは配列を扱うためのオブジェクトです。今回は、配列リテラルではなく、Array オブジェクトのコンストラクタを使って配列を作成してみる

書式
・new Array(要素1, 要素2, 要素3, ...)
サンプル
let fruit1 = ['apple', 'lemon'];　　　　　　//リテラル
let fruit2 = new Array('apple', 'lemon'); //Arraya

また、作成する要素数だけを指定して配列を作成することも出来る
書式
・new Array(要素数)

サンプル
let data = new Array(5);

console.log(data);
結果
 [empty × 5]　//空の配列が5つ出来る

JS--配列

配列のメリット

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【配列とは】
複数の値を保管・管理するする場合、複数の変数を使うより、一つの配列を使った方が便利である。

サンプル
3人の平均値の計算において、変数と、配列の違いを見てみる。
・変数宣言
let resultYamada
let resultSatou
let resultTakahashi
3人分のデータを入れる
resultYamada = 85;
resultSatou = 78;
resultTakahashi = 92;

平均値を出す
let ave = (resultYamada + resultSatou + resultTakahashi) / 3;
console.log('ave = ' + ave);
・結果
ave = 85

・配列宣言
let result = new Array(85, 78, 92);//初期化する
let sum = 0;

平均値を出す
for (let i = 0 ; i < result.length; i++){
console.log(result[i]);
sum += result[i];
}
console.log('ave = ' + sum / result.length);
・結果
ave = 85

以上

JS--複数のオブジェクトを一つにする方法

複数のオブジェクトを一つにする方法

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【assignメソッドとは】
複数のオブジェクトを一つにまとめたるには Object オブジェクトの assign メソッドを使います。

・書式
Object.assign(コピー先オブジェクト, コピー元オブジェクト1, コピー元オブジェクト2, ...)

1 番目の引数がコピー先となるオブジェクトです。このオブジェクトに対して 2 番目以降のオブジェクトのプロパティを順番にコピーして追加していきます。戻り値は追加が終わったあとのコピー先オブジェクトです。

サンプル
let objA = {a:'Ant'};
let objB = {b:'bee'};
let objC = {c:'cicada'};
let allObj = Object.assign(objA, objB, objC);

console.log(allObj);
console.log(objA);
console.log(objB);

結果
{a: "Ant", b: "bee", c: "cicada"}　//" "に成る
{a: "Ant", b: "bee", c: "cicada"}
{b: 'bee'}
※すべてのプロパティを持つ新しいオブジェクトが作成されているのではなく、 assign メソッドの最初の引数のオブジェクトに他のオブジェクトのプロパティが追加されている点に注意してください。

既存のオブジェクトを変更せずにオブジェクトのプロパティを一つにまとめたオブジェクトを取得したい場合は、
→ assign メソッドの最初に引数に空のオブジェクト {} を指定します。

サンプル
let objA = {a:'Ant'};
let objB = {b:'bee'};
let objC = {c:'cicada'};
let allObj = Object.assign({}, objA, objB, objC);

console.log(allObj);
・結果
{a: 'Ant', b: 'bee', c: 'cicada'}

オブジェクトの中に同じプロパティ名を持つプロパティがあった場合は、あとに記述されているプロパティで上書きされます。
サンプル
let objA = {a:'Ant', b:'bee'};
let objB = {c:'cicada', b:'butterfly'};
let allObj = Object.assign({}, objA, objB);

console.log(allObj);
結果
{a: 'Ant', b: 'butterfly', c: 'cicada'}

【オブジェクトの複製を作成する】
空のオブジェクトに対してひとつだけオブジェクトを指定して assign メソッドを呼び出すことでオブジェクトの複製を作成することができます。

サンプル
let obj = {a:'Ant', b:'bee'};
let cloneObj = Object.assign({}, obj);

console.log(cloneObj);
{a: 'Ant', b: 'bee'}

JS--プロパティの追加や値を変更を不可にする方法

プロパティの追加や値を変更を不可にする方法

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【プロパティの変更を禁止する(freeze)】
オブジェクトに対する変更を禁止するには Object オブジェクトの freeze メソッドを使います。

・書式
Object.freeze(オブジェクト)

・サンプル
const user = {
name:'山田太郎',
age:32,
address:'大阪府'
};
//変更する
user.address = '東京都';
console.log(user);
結果
{name: "山田太郎", age: 32, address: "東京都"}

//変更不可にする
Object.freeze(user);
user.address = '大阪府';
console.log(user);
結果
{name: '山田太郎', age: 32, address: '東京都'}

■新しいプロパティを追加と既存のプロパティの削除
サンプル
const user = {
name:'山田太郎',
age:32,
address:'東京都'
};
Object.freeze(user);

user.hobby = '映画'; // 新しいプロパティの追加
delete user.age; // 既存のプロパティの削除

console.log(user);
結果
{name: '山田太郎', age: 32, address: '東京都'}
※追加も、削除も、出来ない

■strict モードを有効にした場合
変更不可にしたあとでプロパティの値を変更しようとしたり新しいプロパティを追加しようとするとエラーになります。

・サンプル
'use strict';

const user = {
name:'山田太郎',
age:32,
address:'大阪府'
};

Object.freeze(user);

user.address = '東京都'; // プロパティの値を変更する
結果
Uncaught TypeError: Cannot assign to read only property 'address' of object '#<Object>'

【配列を変更不可にする】
Object.freeze メソッドはオブジェクトだけではなく配列を引数に指定して呼び出すことができます

サンプル
const point = [48, 72, 65];
Object.freeze(point);

point[1] = 78; // 要素を変更する
point[3] = 54; // 要素を追加する

console.log(point);

console.log(point);
・結果
[48, 72, 65]

【プロパティの値がオブジェクトだった場合】
freeze メソッドを呼び出すことで変更を不可にできるのは、メソッドの引数に指定したオブジェクトのプロパティのみ

サンプル
let user = {
name:'山田太郎',
hobby:['Movie', 'Game']　//配列
};

Object.freeze(user);

user.name = 'Yamada Tarou'; // プロパティの値を変更する
user.hobby[0] = 'Sports'; // 子オブジェクト(配列)の要素の値を変更する

console.log(user.name);
console.log(user.hobby);
・結果
山田太郎 //変更不可
["Sports", "Game"] //変更可能

■子オブジェクトも含めて変更不可にするには
let user = {
name:'山田太郎',
hobby:['Movie', 'Game']
};

Object.freeze(user.hobby);
Object.freeze(user);

user.hobby[0] = 'Sports'; // 子オブジェクト(配列)の要素の値を変更する

console.log(user.hobby);
結果
["Movie", "Game"]