JavaScript - 配列宣言、追加、削除などの基本的な使用法のクリーンアップ

Javascriptarray

Javascroptでの配列宣言、参照、要素の追加、要素の削除など、配列を扱う基本的な方法を紹介します。

1. 配列宣言

配列はデフォルトで []と宣言できます。空の配列や要素を持つ配列を作成できます。

const arr1 = [];
const arr2 = [44, 56, 33, 21, 51, 77];

console.log(arr1);
console.log(arr2);

Output:

[]
[ 44, 56, 33, 21, 51, 77 ]

new Array()で配列を作成することもできます。

const arr1 = new Array();
const arr2 = new Array(44, 56, 33, 21, 51, 77);

console.log(arr1)
console.log(arr2)

Output:

[]
[ 44, 56, 33, 21, 51, 77 ]

2. 配列タイプの確認

Array.isArray() は、引数に渡されたオブジェクトが配列であれば true を返します。

const arr1 = [44, 56, 33, 21, 51, 77];
const arr2 = new Array(44, 56, 33, 21, 51, 77);

let val = Array.isArray(arr1);
console.log(Array.isArray(arr1));

val = Array.isArray(arr2);
console.log(Array.isArray(arr2));

Output:

true
true

3. Indexで要素を検索、値でIndexを検索

Indexで配列の要素を取得するか、値で配列のIndexが何であるかを見つけることができます。

const arr = [44, 56, 33, 21, 51, 77];

// Get value by index
console.log(arr[0]);
console.log(arr[3]);

// Find index of value
console.log(arr.indexOf(56));
console.log(arr.indexOf(77));

Output:

44
21
1
5

4. 配列に要素を追加、変更、削除

arr[index] = valueのように値を追加または変更できます。インデックスに値が存在する場合は要素の値が変更され、存在しない場合は配列の長さが増加し、値が追加されます。

const arr = [44, 55];

arr[0] = 11;
arr[1] = 22;
arr[2] = 33;
arr[3] = 44;

console.log(arr);

Output:

[ 11, 22, 33, 44 ];

push() や pop() で配列の最後に値を追加または削除できます。 pop() は削除した値を返します。

const arr = [44, 55];

arr.push(66);
arr.push(88);
console.log(arr);

const ret1 = arr.pop();
const ret2 = arr.pop();
console.log(ret1);
console.log(ret2);
console.log(arr);

Output:

[ 44, 55, 66, 88 ]
88
66
[ 44, 55 ]

5. 繰り返し文で配列巡回

次のように、繰り返しステートメントで配列を巡回できます。

const arr = [44, 56, 33, 21];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

Output:

44
56
33
21

6. Slice : 配列の一部だけを切り取り、配列に戻す

slice(start, end) は、Index が start を含み、end 前の Index を含む範囲を切り取り、新しい配列にします。

const arr = [44, 56, 33, 21, 51, 77];

const ret = arr.slice(1, 3);
console.log(ret);

Output:

[ 56, 33 ]

7. Concat: 両方の配列要素を合わせる

arr1.concat(arr2) は、arr1 配列と arr2 配列のすべての要素を持つ新しい配列を作成して返します。既存の配列は変更されません。

const arr1 = [44, 56, 33];
const arr2 = [21, 51, 77];

const ret = arr1.concat(arr2);

console.log(arr1);
console.log(arr2);
console.log(ret);

Output:

[ 44, 56, 33 ]
[ 21, 51, 77 ]
[ 44, 56, 33, 21, 51, 77 ]

8. ソート

sort() は配列要素の値を比較して昇順にソートします。

const arr1 = [44, 56, 33, 21, 51, 77];
const arr2 = ['b', 'w', 's', 'e', 'a'];

arr1.sort();
arr2.sort();

console.log(arr1);
console.log(arr2);

Output:

[ 21, 33, 44, 51, 56, 77 ]
[ 'a', 'b', 'e', 's', 'w' ]

次のようにソートに使用される関数を直接実装することもできます。以下のコードは降順で並べ替えます。

const arr1 = [44, 56, 33, 21, 51, 77]

arr1.sort(function(x, y) {
  return y - x;
})

console.log(arr1);

Output:

[ 77, 56, 51, 44, 33, 21 ]

9. find

find() は、関数で定義された内容で任意の値を見つけて返します。配列のインデックス 0 から順次ナビゲーションを開始します。

function over40(num) {
  return num > 40;
}

function over50(num) {
  return num > 50;
}

const arr1 = [44, 56, 33, 21, 51, 77];

const ret1 = arr1.find(over40);
const ret2 = arr1.find(over50);

console.log(ret1);
console.log(ret2);

Output:

44
56

Related Posts

codechachaCopyright ©2019 codechacha