JavaScript配列についてさらに詳しく知るのに役立つ記事

JavaScript配列についてさらに詳しく知るのに役立つ記事

配列: 順序付けられたデータの集合

1. 配列の役割:

一度に複数のデータを保存できる

2. 配列の定義:

1. コンストラクタを通じて配列を作成する

文法:

var 配列名 = new Array();
var array = new Array(); // 配列を定義します

//コンストラクタを通じて配列を定義する var array = new Array(); //データのない空の配列

配列内のデータが直接出力される場合は、配列内のデータを直接表示できます。データがない場合、データは表示されません。

var 配列名 = new Array(長さ);

配列にデータがないが長さがある場合、配列内の各値は未定義になります。

コンストラクタを使用して配列を作成する場合、Array(数値)の場合→インデックス配列の長さ(つまり配列要素の数)を参照します。Array(複数の値)の場合→配列にデータがあることを意味し、配列の長さはそのデータの数になります。

2. リテラルを使用して配列を作成する

文法:

var array name = []; // 空の配列

var arr = [];
console.log(arr); //配列[0]

要約:

配列がコンストラクターまたはリテラルによって定義されているかどうかに関係なく、配列に長さがある場合は、デフォルトで undefined になります。

配列要素

配列に格納されている各データは、配列の要素と呼ぶことができます。

たとえば、配列に3つの配列が格納されている場合、この配列には3つの要素があります。

4. 配列の長さ

配列の長さは要素の数です

たとえば、要素が 3 つある場合、配列の長さは 3 になります。

var arr1 = new Array(); //コンストラクタを使用して空の配列を作成します var arrr2 = new Array(5); //コンストラクタを使用して長さ 5 の配列を作成します。この配列には 5 つの値があり、すべて未定義です
var arr3 = new Array(10,20,30,40,50); // コンストラクタは長さ5の配列を作成し、各値には意味があります

5. 配列インデックス(添え字)

配列のインデックス、または配列の添え字。これは、0から始まり長さ-1で終わる配列内のデータを保存またはアクセスするために使用されます。

配列内の位置の値を設定する方法:

配列名[添え字]=値;

例えば:arr[3]=100;

配列内の特定の位置にある値を取得する方法:

var result=配列名[添え字];

console.log(結果);

//配列の4番目の値を取得します。var arr =new Array(10,20,30,40,100);
コンソール.log(arr[4]); //100
// 添え字3の値を1000に変更します
ar[3] = 1000;
//リテラル​​値を使用して配列の長さを取得します。var arr1=[10,20,30,40,50,12];
console.log(arr.length); //6

配列の長さとインデックスの関係:

長さ - 1 = インデックス

6. 配列を使用する際に注意すべき点

1. 配列に格納されるデータは異なる可能性がある

arr=[10,"哈哈",true,null,undefined,new Object()];

2. 配列の長さは変更可能

var arr = [];
    // 配列内の要素の値をインデックスで設定します arr[0] = 10;
    ar[1] = 20;
    console.log(arr.length); //2
    // インデックスで要素の値を取得する console.log(arr[2]); //undefined

3. まとめ

var arr1 = new Array(); // 空の配列 var arr2 = new Array(5); // 長さ 5 の配列、各配列の値は未定義
var arr3 = new Array(1, 2, 3, 4, 5); //長さ 5 の配列、各値に意味があります var arr4 = []; //空の配列 var arr5 = [1, 2, 3]; //長さ 3 の配列 var arr6 = ["red", "blue", 1, true]; //長さ 4 の配列、要素のデータ型が異なります var arr7 = [];
//空の配列を宣言し、配列に値を追加します。arr7[0] = 10;
ar7[1] = 30;

7. 配列の走査

1. 正の順序の走査

var arr=[10,20,30,40,50,60,70,80,90,100];
// i は配列の添え字を表します // 最後の数字の添え字は配列の長さから 1 を引いた値に等しくなります for(var i=0;i<arr.length;i++){
    コンソールにログ出力します。
}

2. 逆順トラバーサル

var arr = [10, 20, 30, 40, 100];
// i は最後の数字を出力し始め、0 に達するとループを終了します for (var i = arr.length - 1; i >= 0; i--) {
    コンソールにログ出力します。
}

8. 配列の一般的なケース

1. 配列内のすべての要素の合計を求める

var arr = [10, 20, 30, 40, 100];
// 加算後の合計を格納するために使用されます var sum = 0;
 (var i = 0; i < arr.length; i++) の場合 {
     合計 += arr[i];
 }
 コンソール.log(合計); //200

2. 配列の平均を求める

var arr = [10, 20, 30, 40, 100];
// 加算後の合計を格納するために使用されます var sum = 0;
(var i = 0; i < arr.length; i++) の場合 {
    合計 += arr[i];
}
console.log(合計 / arr.length); //40

3.配列の最大値と最小値を見つける

var arr = [10, 20, 30, 40, 100];
// 配列の最初の数値が最大であると仮定し、それを変数に割り当てます var max = arr[0];
// 配列の最初の数値が最小であると仮定し、それを変数に割り当てます var min = arr[0];
(var i = 0; i < arr.length; i++) の場合 {
    //配列の値をmaxと比較します。maxより大きい場合は、その数値をmaxに代入します。
    (最大値<arr[i])の場合{
        最大値 = arr[i];
    }
    //配列内の値を min と比較します。min より小さい場合は、その数値を min に割り当てます。
    もし(最小値>arr[i])であれば
        最小値 = arr[i];
    }
}
コンソール.log(最大); //100
コンソール.log(分); //10

4. バブルソート

var arr = [10, 30, 20, 65, 40, 8, 100];
//小さいものから大きいものへ並べ替える for (var i = 0; i < arr.length; i++) {
    (var j = 0; j < arr.length - i; j++) の場合 {
        もし(arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = 温度;
        }
    }
}
コンソールにログ出力します。
//大きいものから小さいものへ並べ替える for (var i = 0; i < arr.length; i++) {
    (var j = 0; j < arr.length - i; j++) の場合 {
        もし(arr[j] < arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = 温度;
        }
    }
}
コンソールにログ出力します。

バブルソート

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JS配列の一般的な方法とテクニックを学び、マスターになりましょう
  • JavaScript 配列重複排除問題の詳細な研究
  • Javascript配列の重複排除のいくつかの方法の詳細な説明
  • JavaScript配列重複排除の詳細な説明
  • JavaScript配列の一般的なメソッドの例のまとめ
  • JavaScript 配列と非配列オブジェクトのディープ クローンとシャロー クローンの原則の詳細な説明

<<:  DCL を使用して MySQL でユーザーを管理し、権限を制御する方法

>>:  docker ベースの mariadb のインストール構成プロセスの分析

推薦する

Cronジョブを使用してCpanelでPHPを定期的に実行する方法

cpanel 管理バックエンドを開き、「詳細」オプションの下に「Clock Guardian Job...

MySQL ルート パスワードをリセットするときに発生する「不明な列 'password'」問題を解決する方法

夜にMACの電源を入れたところ、突然ルートアカウントがMySQLに正常にログインできなくなったため、...

Linux のメモリ管理とアドレス指定の詳細な紹介

目次1. コンセプトメモリ管理モード住所種別分類例: 2. ページ管理x86 アーキテクチャ 32 ...

Vueのログインとログアウトの詳細な説明

目次ログインビジネスプロセスログイン機能の実装要約するまず、エフェクトの実装プロセスを見てみましょう...

フロントエンドコンポーネント化の基礎知識を詳しく解説

目次コンポーネントの基本概念オブジェクトとコンポーネントの違い成分属性属性とプロパティ属性:財産:ク...

Linux リモート開発に vs2019 を使用する方法

通常、Linux プログラムを開発する場合、次の 2 つのオプションがあります。 Linux上で直接...

ウェブデザイナーが注意すべき 43 のウェブデザインの間違い

これはウェブサイトのユーザビリティに関する記事です。著者は自身の経験に基づいて、ウェブサイトのデザイ...

シェアしたい絶妙なApple風無料アイコン素材18セット

Apple マグカップのアイコンと追加機能 HD ストレージボックス – アドオンパックセイバースノ...

CSS3 でクールなスライス画像カルーセル効果を実現

今日は、CSS を使用してクールな画像カルーセル コンポーネントを作成する方法を学びます。その原理は...

純粋な CSS3 でモバイルの拡大と縮小の効果を実装するためのサンプル コード

この記事では、純粋な CSS3 を使用してモバイル端末での展開と折りたたみの効果を実装するサンプルコ...

DockerがMySQL構成実装プロセスを開始

目次実際の戦闘プロセスまずは主なコマンドと詳細を一つずつ説明しましょう起動が成功したかどうかを確認す...

CentOS 8 Zabbix 4.4 インストール ガイド

Zabbix サーバー環境プラットフォームZABBIX バージョン 4.4セントOS8 MySQL ...

CSS変数を使用してスタイルを変更する方法の例

質問js を使用して CSS 疑似クラス スタイルを変更するにはどうすればよいでしょうか?しかし、j...

HTML ページの先頭に戻るいくつかの実装の概要

最近、ウェブサイトを開発する際にトップに戻るボタンを作成する必要がありますが、私は主にバックエンドの...