JS--配列要素を連結して文字列を作成する方法

配列要素を連結して文字列を作成する方法

 

【開発環境】

OS：Win11（64ビット）

VSCode1.72.2、

クロム

 

【要素を連結して作成した文字列を取得するには】

Array オブジェクトの join メソッドを使うと、要素を連結して作成した文字列を取得できます。

 

・書式
配列名.join()
配列名.join(区切り文字)

引数に指定した区切り文字でそれぞれの要素の値を連結した文字列を返します。要素の値はいったん文字列に変換され、そのあとで連結されます。
区切り文字を省略した場合はカンマ(,)が指定されたものとして扱われます。

 

サンプル1

let fruit = ['Apple', 120, 'Grapes', 80];

console.log(fruit.join());
> Apple,120,Grapes,80

console.log(fruit.join(' + '));
> Apple + 120 + Grapes + 80

console.log(fruit.join(''));
> Apple120Grapes80サンプル2

let fruit = [['Apple', 120], ['Grapes', 80]];

console.log(fruit.join(' + '));
> Apple,120 + Grapes,80

配列の要素に別の配列が含まれている場合、まず要素の配列が文字列に変換されます。配列を文字列に変換すると、各要素をカンマ(,)で連結した文字列となるため、そのあとで join メソッドの引数で指定された区切り文字で連結されます。

サンプル3
配列に存在しない要素があった場合

let no = [10, 15, , 24];

console.log(no.join(','));
> 10,15,,24

【配列を文字列に変換する】

join メソッドで要素に配列が格納されていた場合などに、配列を文字列に変換するときに使用されるのが toString メソッドです。

・書式
 配列名.toString()

配列に対して toString メソッドを使用すると、配列の各要素をカンマ(,)で連結した文字列が返されます。

サンプル

let fruit = ['Apple', 'Grapes', 'Orange'];

console.log(fruit.toString());
> Apple,Grapes,Orange

JS--配列要素のコピー

配列要素のコピー

【開発環境】

OS：Win11（64ビット）

VSCode1.72.2、

クロム

 

【指定した範囲の要素を持つ新しい配列の作成】

slice メソッドを使うと、引数に指定した範囲の要素を持つ新しい配列を作成できます。

 

・書式
配列名.slice()
配列名.slice(開始インデックス)
配列名.slice(開始インデックス, 終了インデックス)

 

開始インデックスで指定した要素から、終了インデックスの要素の直前の要素までを持つ新しい配列を返します。開始インデックスを省略した場合は 0 (配列の最初の要素)、終了インデックスを省略した場合は 配列名.length (結果として配列の最後の要素まで)が指定したものとして扱われます。

 

サンプルコード

let result = [75, 68, 92, 84, 90];

let newResult = result.slice(1, 3);
console.log(newResult);
＞ [68, 92]新しく取得する配列は インデックス 1 から 2 までの要素を持つ配列となります。もう一つのサンプル

let result = [75, 68, 92, 84, 90];

let newResult = result.slice();
console.log(newResult);
> [75, 68, 92, 84, 90]今回のサンプルでは開始インデックスと終了インデックスがそれぞれ省略した形サンプル2let result = [['Yamada', 75], ['Suzuki', 68]];
let newResult = result.slice(0, 1);

newResult[0][1] = 84;
console.log(newResult[0]);
>> ["Yamada", 84]

console.log(result[0]);//元の配列要素が影響される。
>> ["Yamada", 84]

slice メソッドを使って配列の指定した範囲の要素を持つ新しい配列を作成しましたが、元の配列の要素は別の配列を参照しており、これは複製した配列の要素も同じ配列を参照します。その為、どちらかの配列で要素が参照している配列に対して変更を加えると、同じ配列をもう片方の配列の要素にも影響します。

JS--条件に一致する配列要素の検索方法

条件に一致する配列要素の検索方法

【開発環境】

OS：Win11（64ビット）

VSCode1.72.2、

クロム

 

【条件に一致するインデクスを取得する方法】

 findIndex メソッドを使うと、引数に指定したコールバック関数の中で定義した条件式を満たす要素を配列の先頭から検索することができます。

・書式
配列名.findIndex( コールバック関数(要素の値) )
配列名.findIndex( コールバック関数(要素の値, 要素のインデックス) )
配列名.findIndex( コールバック関数(要素の値, 要素のインデックス, 配列) )

findIndex メソッドは配列に含まれる要素を先頭から順に取り出しコールバック関数を呼び出します。

サンプル

let result = [75, 68, 92, 84, 90];

let passIndex = result.findIndex(function(element){//コールバック関数
  return element > 85;
});

console.log(passIndex);
2

次はコールバック関数にアロー関数式を使って見ると
let passIndex = result.findIndex(element => element > 85);//アロー関数式 console.log(passIndex);
2

【条件に一致する要素の値を取得する(findメソッド)】 

find メソッドを使うと、引数に指定したコールバック関数の中で定義した条件式を満たす要素を配列の先頭から検索することができます。

・書式
配列名.find( コールバック関数(要素の値) )
配列名.find( コールバック関数(要素の値, 要素のインデックス) )
配列名.find( コールバック関数(要素の値, 要素のインデックス, 配列) )

find メソッドは配列に含まれる要素を先頭から順に取り出しコールバック関数を呼び出します。コールバック関数は、現在取り出されている要素の値、要素のインデックス、そして配列そのものを引数にして呼び出されます。

サンプル

let result = [75, 68, 92, 84, 90];

let passValue = result.find(function(element){
  return element > 85;
});

console.log(passValue);
92

アロー関数式を使うと

let passValue = result.find(element => element > 85);
console.log(passValue);
92【少なくても一つの要素が条件に一致するか調べる方法】some メソッドを使うと、引数に指定したコールバック関数の中で定義した条件式を満たす要素が配列の中に一つでもあるかどうかを調べる場合に使用します。

・書式
配列名.some( コールバック関数(要素の値) )
配列名.some( コールバック関数(要素の値, 要素のインデックス) )
配列名.some( コールバック関数(要素の値, 要素のインデックス, 配列) )

some メソッドは配列に含まれる要素を先頭から順に取り出しコールバック関数を呼び出します。

サンプル

let result = [75, 68, 92, 84, 90];

let checkOver85 = result.some(function(element){
  return element > 85;
});

console.log(checkOver85);
> truelet checkUnder60 = result.some(function(element){
  return element > false

■アロー関数式を使う
let result = [75, 68, 92, 84, 90];

let checkOver85 = result.some(element => element > 85);
console.log(checkOver85);
> true

let checkUnder60 = result.some(element => element < 60);
console.log(checkUnder60);
> false

【すべての要素が条件を満たしているかどうか】 
every メソッドを使うと、引数に指定したコールバック関数の中で定義した条件式を配列のすべての要素が満たすかどうかを調べる場合に使用します。

・書式
配列名.every( コールバック関数(要素の値) )
配列名.every( コールバック関数(要素の値, 要素のインデックス) )
配列名.every( コールバック関数(要素の値, 要素のインデックス, 配列) )

サンプル

let result = [75, 68, 92, 84, 90];

let checkOver60 = result.every(function(element){
  return element > 60;
});

console.log(checkOver60);
> true

let checkUnder90 = result.every(function(element){
  return element < 90;
});

console.log(checkUnder90);
> falseアロー関数式を使用すると

let result = [75, 68, 92, 84, 90];

let checkOver85 = result.every(element => element > 60);
console.log(checkOver85);
> true

let checkUnder60 = result.every(element => element < 90);
console.log(checkUnder60);
> false

JS--配列の検索

配列の検索

 

【開発環境】

OS：Win11（64ビット）

VSCode1.72.2、

クロム

 

【配列の先頭から検索する(indexOfメソッド)】

Array オブジェクトの indexOf メソッドを使うと指定した値を持つ要素を配列の先頭から検索する。

 

・書式

配列名.indexOf(値)
配列名.indexOf(値, 開始インデックス)

・注意
引数に指定した値を持つ要素を配列の先頭から順に検索し、一致したものが見つかった場合はそのインデックスを返します。見つからなかった場合は -1 が返されます。

サンプル

let week = ['Mon', 'Sat', 'San', 'Sat', 'Fri'];
一致する場合
let indexSat = week.indexOf('Sat');
console.log(indexSat);
 1
一致しない場合
let indexTue = week.indexOf('Tue');
console.log(indexTue);
 -1※indexOf メソッドは配列の先頭から要素を検索していきます。引数に指定した値と一致する要素が複数あった場合、先頭から検索して最初に見つかった要素のインデックスを返します。

サンプル

let week = ['Mon', 'Sat', 'San', 'Sat', 'Fri'];

let indexSat = week.indexOf('Sat', 2);//値、開始位置
console.log(indexSat);結果3※引数に指定した値はインデックス 1 の要素に格納されていますが、検索の開始位置にインデックス 2 を指定したのでインデックス 2 以降の要素で引数に指定した値を格納している要素のインデックスが返されました。

【配列の最後から検索する(lastIndexOfメソッド)】

Array オブジェクトの lastIndexOf メソッドを使うと指定した値を持つ要素を配列の最後から検索することができます。

・書式

配列名.lastIndexOf(値)
配列名.lastIndexOf(値, 開始インデックス)

サンプル

・配列名.lastIndexOf(値)

let week = ['Mon', 'Sat', 'San', 'Sat', 'Fri'];
let indexSat = week.lastIndexOf('Sat');//最後から2番目を指す
console.log(indexSat);
> 3

let indexTue = week.lastIndexOf('Tue');//値がない場合
console.log(indexTue);
> -1

配列名.lastIndexOf(値, 開始インデックス)

let week = ['Mon', 'Sat', 'San', 'Sat', 'Fri'];

let indexSat = week.lastIndexOf('Sat', 2);
console.log(indexSat);
> 1

引数に指定した値はインデックス 3 の要素に格納されていますが、検索の開始位置にインデックス 2 を指定したのでインデックス 2 以前の要素で引数に指定した値を格納している要素のインデックスが返されました。

 

 

JS---配列と配列を結合する

配列と配列を結合する

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

【concatメソッドを使った配列の結合】
Array オブジェクトの concat メソッドを使うと配列に対して別の配列を結合した新しい配列を取得することができます。

・書式
配列名.concat(配列)
配列名.concat(配列, 配列, ...)
配列名.concat(値, 値, ...)

サンプル
let fruit = ['Apple', 'Melon', 'Orange'];
let fruitAll = fruit.concat(['Peach', 'Grapes']);　//結合

console.log(fruitAll);
結果
 ['Apple', 'Melon', 'Orange', 'Peach', 'Grapes']

元の配列は変わらない
console.log(fruit);
['Apple', 'Melon', 'Orange']

concat メソッドの引数には配列だけでなく値も指定できる。
let fruitAll = fruit.concat('Peach', ['Grapes', 'Strawberry']);

console.log(fruitAll);
結果
 ['Apple', 'Melon', 'Orange', 'Peach', 'Grapes', 'Strawberry']

【concatメソッドを使った配列のコピー】
concat メソッドの引数を省略した場合は元の配列を複製したものを戻り値として返します。

サンプル
let fruit = ['Apple', 'Melon', 'Orange'];
let copyFruit = fruit.concat();

console.log(copyFruit);
結果
 ['Apple', 'Melon', 'Orange']

複製された配列は元の配列は別の配列オブジェクトとなります。その為、複製した配列に変更を加えても元の配列には影響しません。

サンプル
let fruit = ['Apple', 'Melon', 'Orange'];
let copyFruit = fruit.concat();

copyFruit[1] = 'Grapes';
console.log(copyFruit);
・結果
 ['Apple', 'Grapes', 'Orange']

console.log(fruit);　//コピー元の配列には影響されない
結果
 ['Apple', 'Melon', 'Orange']

以上