JavaScript の配列を理解する-jsチュートリアル-php.cn

JavaScript の配列を理解する

Susan Sarandon

リリース： 2024-12-21 19:48:21

オリジナル

494 人が閲覧しました

Understanding Arrays in JavaScript

JavaScript の配列

JavaScript では、配列は、順序付けられたデータのコレクションを格納するために使用される特別なタイプのオブジェクトです。配列には、数値、文字列、オブジェクト、さらには他の配列など、さまざまなデータ型の複数の値を保持できます。

1.配列の作成

A.配列リテラルの使用

配列を作成する最も一般的な方法は、角括弧 [] を使用することです。

例:

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

ログイン後にコピー

B. new Array() コンストラクターの使用

このメソッドは、空の配列、または指定された要素を含む配列を作成します。

例:

const numbers = new Array(5); // Creates an array with 5 empty slots
console.log(numbers.length); // Output: 5
const colors = new Array("Red", "Green", "Blue");
console.log(colors); // Output: ["Red", "Green", "Blue"]

ログイン後にコピー

2.配列要素へのアクセス

配列要素には、ゼロベースのインデックスを使用してアクセスします。

例:

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

ログイン後にコピー

要素を更新しています:

const numbers = new Array(5); // Creates an array with 5 empty slots
console.log(numbers.length); // Output: 5
const colors = new Array("Red", "Green", "Blue");
console.log(colors); // Output: ["Red", "Green", "Blue"]

ログイン後にコピー

3.一般的な配列メソッド

A.要素の追加と削除

push(): 配列の末尾に要素を追加します。

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple
console.log(fruits[2]); // Output: Cherry

ログイン後にコピー

pop(): 最後の要素を削除します。

fruits[1] = "Blueberry";
console.log(fruits); // Output: ["Apple", "Blueberry", "Cherry"]

ログイン後にコピー

unshift(): 先頭に要素を追加します。

fruits.push("Mango");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry", "Mango"]

ログイン後にコピー

shift(): 最初の要素を削除します。

fruits.pop();
console.log(fruits); // Output: ["Apple", "Banana"]

ログイン後にコピー

B.要素の検索

indexOf(): 要素のインデックスを検索します。

fruits.unshift("Strawberry");
console.log(fruits); // Output: ["Strawberry", "Apple", "Banana"]

ログイン後にコピー

includes(): 要素が配列内に存在するかどうかを確認します。

fruits.shift();
console.log(fruits); // Output: ["Apple", "Banana"]

ログイン後にコピー

C.配列の変換

map(): 各要素を変換して新しい配列を作成します。

console.log(fruits.indexOf("Banana")); // Output: 1

ログイン後にコピー

filter(): テストに合格した要素を含む新しい配列を作成します。

console.log(fruits.includes("Cherry")); // Output: false

ログイン後にコピー

reduce(): 配列を単一の値に削減します。

const numbers = [1, 2, 3];
const squared = numbers.map((num) => num ** 2);
console.log(squared); // Output: [1, 4, 9]

ログイン後にコピー

D.配列の結合とスライス

concat(): 2 つ以上の配列を結合します。

const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2]

ログイン後にコピー

slice(): 配列の一部を返します。

const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 6

ログイン後にコピー

splice(): 配列に要素を追加または削除します。

const moreFruits = ["Peach", "Grape"];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // Output: ["Apple", "Banana", "Peach", "Grape"]

ログイン後にコピー

4.配列の反復

for ループ:

const sliced = allFruits.slice(1, 3);
console.log(sliced); // Output: ["Banana", "Peach"]

ログイン後にコピー

for...of ループ:

allFruits.splice(1, 1, "Orange");
console.log(allFruits); // Output: ["Apple", "Orange", "Peach", "Grape"]

ログイン後にコピー

forEach() メソッド:

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

ログイン後にコピー

5.多次元配列

配列には他の配列を含めることができ、行列または多次元構造を作成できます。

例:

for (let fruit of fruits) {
  console.log(fruit);
}

ログイン後にコピー

6.配列の並べ替えと反転

sort(): 配列をその場でソートします。

fruits.forEach((fruit) => console.log(fruit));

ログイン後にコピー

reverse(): 要素の順序を逆にします。

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
console.log(matrix[1][2]); // Output: 6

ログイン後にコピー

7.配列の構造化

分割すると、配列から値を抽出して変数に入れることができます。

例:

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

ログイン後にコピー

8.概要

配列は、JavaScript で順序付けられたデータのコレクションを保存するために使用されます。
インデックスを使用して要素にアクセスします。
操作と変換には、push()、map()、filter()、reduce() などの配列メソッドを使用します。
配列は多用途であり、JavaScript でデータの動的なコレクションを処理するために不可欠です。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript の配列を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。