[TIL] Javascript_Array

≪配列|Array|emdw≫:関連するデータを収集し、グループとして管理するデータ型.

複数のデータを1つの変数に格納する

文字列、数値、booleanを含むすべてのデータ型を格納可能

listは順番に並べられており、配列を取り出す際に[]を使用してインデックス

を読み込みます.

1.シナリオの作成

各要素はカッコ内でカンマで区切られ、配列は変数に格納されます.

2. Accessing Elements

配列内の各要素には、ゼロから始まるインデックスがあります.

let student = ['gemma', 'monica', 'dani']

配列をポップアップするときに、四角カッコに索引を挿入します.

예)
alert(student[0]); 

//print : 'gemma'

3. Update Elements

インデックスを使用して既存の値を新しい値に変更

let seasons = ['Winter', 'Spring', 'Summer', 'Fall'];
 
seasons[3] = 'Autumn';
console.log(seasons); 

//Output: ['Winter', 'Spring', 'Summer', 'Autumn']

4. Arrays with let and const

letとconstではconstは定数なので変更できません.
配列の[]私の値は変更できます

let condiments = ['Ketchup', 'Mustard', 'Soy Sauce', 'Sriracha'];
const utensils = ['Fork', 'Knife', 'Chopsticks', 'Spork'];

condiments[0] = 'Mayo';
console.log(condiments); // print : ['Mayo', 'Mustard', 'Soy Sauce', 'Sriracha']

condiments = ['Mayo']; // print : ['Mayo']

utensils[3] = 'Spoon';

console.log(utensils); // print : ['Fork', 'Knife', 'Chopsticks', 'Spoon']

5. .length property

配列にいくつかの要素があることを知りたいとき.lengthプロパティが使用可能

const hobbies = ['singing', 'reading', 'running'];

console.log(objectives.length);

// print : 3

6. .push() Method

Jsメソッドの1つです.Push()配列の末尾にアイテムを追加
-push()は、単一の引数またはカンマで区切られた複数の引数を使用できます.

const hobbies = ['running', 'reading', 'driving'];

hobbies.push('studying', 'riding');

console.log(hobbies);

//print : ['running', 'reading', 'driving', 'studying', 'riding']

7. .pop() Method

配列の最後の項目を削除
.pop()パラメータを受け入れず、最後の要素を削除する

const hobbies = ['running', 'reading', 'driving', 'studying', 'riding'];

hobbies.pop();

console.log(hobbies);

// print : ['running', 'reading', 'driving', 'studying']

8.その他の方法

.slice(시작인덱스, 종료인덱스) :

開始インデックスが指定されていない場合は0からスライスし、

負の値を指定すると、アレイの末尾の長さ(slice(-2)面アレイの最後の2つの要素が抽出されたことを示す

終了インデックスが指定されていない場合は、アレイの末尾

にスライスします.

負の値を指定すると、アレイの末尾の長さ(slice(2,-1)が3番目の要素から2番目の要素に抽出されることを示す)

let num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
num.slice(3, 5) // [4, 5]
num.slice(-3) // [8, 9, 10]
num.slice(-3, 9) // [8, 9]
num.slice(5, -4) // [6]

.splice(시작인덱스, 제거할요소수, 추가할 요소):追加する要素を入力しない限り、

のみ削除

const name = ['a', 'b', 'c', 'd', 'e']
name.splice(2, 0, 'x');
//print : ['a', 'b', 'x', 'c', 'd', 'e']

name.splice(0, 0, 'y'); 
//print : ['y', 'a', 'b', 'x', 'c', 'd', 'e']

name.splice(2, 1); //b 삭제
//print : ['y', 'a', 'x', 'c', 'd', 'e']

.shift():タイル前面から項目を削除

unshift():タイルの前に項目を追加

indexOf():索引位置の検索

includes():検査配列の値はtrue/false

lastIndexOf():同じ値がある場合、indexOf()は最初の値のindexを示し、lastIndexOf()は最後の値のindex

を出力する

concat():2つのシナリオをマージ

const color = ['blue', 'gray', 'pink'];
const color2 = ['white', 'black'];

const newColor = color.concat(color2);
console.log(newColor);

//output:  ["blue", "gray", "pink", "white", "black"]

9.配列と関数

const color = ['white', 'blue', 'yellow']
function addcolor(arr) {
  arr.push('black');
}

addcolor(color);
console.log(color); // ['white', 'blue', 'yellow', 'black']

10. Nested Arrays

アレイストレージの異なるアレイをネストされたアレイと呼ぶ

const nestedArr = [[1], [2, 3]];

ネスト配列にアクセスするには、カッコとインデックス値を他の要素の一致として使用します

const nestedArr = [[1], [2, 3]];
 
console.log(nestedArr[1]); // Output: [2, 3]

ネストされた配列の要素にアクセスするには、より多くのカッコ

を使用します.

const nestedArr = [[1], [2, 3]];
 
console.log(nestedArr[1]); // Output: [2, 3]
console.log(nestedArr[1][0]); // Output: 2

アレイと繰り返し文

1)for文の使用

function get_student() {
	return ['gemma', 'monica', 'dani'];
}
student = get_student();
for(i = 0; i < student.length; i++) {
	document.write(student[i].toUpperCase() + '<br>');
}

2) for...利用する

function get_student() {
	return ['gemma', 'monica', 'dani'];
}
student = get_student();

for (let std of student) {
  console.log(std);
}

3)forEach for Each(value:、indexL、array:)の使用

function get_student() {
	return ['gemma', 'monica', 'dani'];
}
student = get_student();

student.forEach(function(std, index, array) {
    console.log(std, index, array);
})

/*output 
gemma 0 (3) ["gemma", "monica", "dani"]
monica 1 (3) ["gemma", "monica", "dani"]
dani 2 (3) ["gemma", "monica", "dani"] */

通常arrayは表示されませんが、functionの代わりに=>を使用します.

student.forEach((std, index) => {
  console.log(std, index);
});

위처럼 한줄만 있는 경우는 중괄호도 생략되어 아래와 같이 더 간략하게 작성할 수 있음

student.forEach((std, index) => console.log(std, index));