JavaScript配列の簡単な紹介

JavaScript配列の簡単な紹介

配列の紹介

配列- Arrayもオブジェクトです

これは通常のオブジェクト関数に似ており、いくつかの値を格納するためにも使用されます。

違いは、通常のオブジェクトは属性値として文字列を使用するのに対し、配列はインデックス操作要素として数値を使用することです。

インデックス: 0から始まる整数

配列の保存パフォーマンスは通常のオブジェクトよりも優れています。開発では、データ保存に配列がよく使用されます。

配列を作成します。

var arr = new Array();
typeof を使用して配列をチェックすると、オブジェクトが返されます。

ここに画像の説明を挿入

配列に要素を追加する

構文: 配列[インデックス] = 値

配列から要素を読み取る

構文: 配列[インデックス]

存在しないインデックスを読み込んだ場合、エラーは報告されず、undefinedが返されます。

配列の長さを取得する

配列の長さ(要素数)を取得するには、 lengthプロパティを使用します。

構文:數組.length

連続配列の場合、 lengthを使用して配列の長さ(要素数)を取得します。

連続していない配列の場合、 length使用すると配列の最大インデックス+1が取得されます。

連続していない配列を作成しないようにしてください。

長さを変更

変更後の長さが元の長さより短い場合、余分な部分は空白のままになります。

変更された長さが元の長さより短い場合、余分な要素は削除されます。

配列の最後の位置に要素を追加する

構文:數組[數組.length] = 值

arr[arr.length] = 70;
arr[arr.length] = 80;
arr[arr.length] = 90;

配列リテラル

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

文法: []

var arr = [] ;

リテラルを使用して配列を作成する場合、配列の作成時に配列内の要素を指定できます。

var arr = [1,2,3,4,5];

コンストラクタを使用して配列を作成する場合、要素を同時に追加することもできます。追加する要素をコンストラクタのパラメータとして渡し、要素を

var arr = 新しい配列(1,2,3,4,5);

知らせ:

[]を使用して要素10の配列を作成します。

var arr = [10];

ここに画像の説明を挿入

コンストラクターを使用して 1 つのパラメーターを持つ配列を作成すると、長さ 10 の空の配列が作成されます。

var arr = 新しい配列(10);
コンソールにログ出力します。
console.log("arr.length="+arr.length);

ここに画像の説明を挿入

配列には任意のデータ型を含めることができます。

var arr = ["孫悟空", 1, true, null, undefined];
コンソールにログ出力します。

ここに画像の説明を挿入

オブジェクトになることができる

var arr = [{name:"孫悟空"}, {name:"朱八戒"}, {name:"沙悟浄"}];
コンソールにログ出力します。

ここに画像の説明を挿入

関数になることができる

var arr = [
    関数(){アラート(1)}、
    関数(){アラート(2)}];

arr[0]()経由で関数を呼び出す

ここに画像の説明を挿入

2次元配列

作成する:

使用[]

var arr = [[1,2,3],[4,5,6],[7,8,9]]; 
//2次元配列の3行3列

new Arrayの使用

  var a = 新しい配列(
			新しい配列(10,20,30)
			新しい配列(11,22,33)
			新しい配列(45,56,67)
		)

要素アクセス配列名 [行添字] [列添字]

(1)二次元配列の転置:

var a = [
    ['a','b','c'],
    ['d','e','f'],
    ['g','h','i'],
    ['i','k','I']
]
var str = ''
for(var i=0;i<a.length;i++){
    (var j=0;j<a[i].length;j++){
        str += a[i][j]+'\t';
    }
    str + = '\n';
}
console.log("転置前:\n",str);
var 変数 = []
(var i=0;i<a[0].length;i++){
    res[i] = []
    (var j=0;j<a.length;j++){
        res[i][j] = a[j][i];
    }
}
console.log("転置後:",res);

ここに画像の説明を挿入

(2)2次元配列を定義し、配列の各行の最大値を出力する

var str = ''
for(var i=0;i<a.length;i++){ //外側のループ: a.length は 2 次元配列の行数を表します for(var j=0;j<a[i].length;j++){ //内側のループ: a[i].length は i 行目の要素 (列) 数を表します
        str += a[i][j]+'\t'
    }
    str += '\n'; //各行の末尾に改行文字を追加します}
コンソールログ(str);
for(var i=0;i<a.length;i++){
    var 最大値 = a[i][0]
    (var j=1;j<a[i].length;j++){
        最大a[i][j]の場合{
            最大値 = a[i][j];
        }
    }
    console.log("行 "+(i+1)+" の最大値は "+max" です)
}

ここに画像の説明を挿入

要約する

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

以下もご興味があるかもしれません:
  • JavaScript で for ループを使用して配列を走査する
  • JavaScript の for ループで配列要素を削除する際の問題
  • JavaScript の for ループと二重 for ループの詳細な説明
  • JavaScript for ループのパフォーマンス テストの例
  • JavaScript の for ループの詳細な理解
  • よく使われるJavaScript配列メソッド
  • JavaScript の基本: ループと配列

<<:  CSS で雨滴アニメーション効果を実装するサンプルコード

>>:  Doubanウェブサイトのウェブサイトコンテンツに小さな変更を加える方法

推薦する

HTML フォーム タグの使用方法を学ぶチュートリアル

HTML のフォームを使用して、ユーザーからさまざまな種類の入力情報を収集できます。フォームは、実際...

レンダリング関数と JSX の詳細

目次1. 基本2. ノード、ツリー、仮想DOM 1. 仮想DOM 3. createElementパ...

フレームセットの共通プロパティ(フレームとウィンドウの分割)

フレームとは、Web ページ画面を複数のフレームに分割したもの(複数の Web ページという形で表示...

Linux でのルーティングと仮想マシン ネットワークの設定に関する詳細なグラフィック説明

ルーティングとは何ですか?ルーティングとは、相互接続されたネットワークを介して送信元ステーションから...

MySQL マスタースレーブ同期における server-id の例の詳細な説明

序文MySQL クラスターを構築する場合、当然のことながら、データの一貫性を確保するために、データベ...

MySQLテーブルを削除する方法

MySQL でテーブルを削除するのは非常に簡単ですが、削除コマンドを実行するとすべてのデータが消えて...

CenterOS7 インストールおよび構成環境 jdk1.8 チュートリアル

1. まずcenterosに付属のJDKをアンインストールします rpm-qa|grepopenjd...

Node.js を使用して png 画像に透明なピクセルがあるかどうかを判断する方法

背景PNG 画像は jpg 画像よりも多くのストレージスペースを占有しますが、PNG 画像の品質は大...

CSS3 を使用して 3D テキスト ホバー効果を実装するサンプル コード

この記事では、3D テキストのホバー変更効果を実現するための CSS3 のサンプル コードを紹介しま...

Vue ページでよりエレガントに画像を紹介する方法

目次エラーのデモンストレーション計算により画像が変わらない場合は直接インポートするCSS変数による画...

コードレイン効果を実現するjQueryプラグイン

この記事では、コードレイン特殊効果を実現するためのjQueryプラグインの具体的なコードを参考までに...

IframeとFRAMEの違いの分析

1. Iframe タグの使用<br />Iframe については、「忘れられた隅」に放...

vue cli で env を使用するガイド

目次序文紹介-公式設定例序文vueCli を使用してプロジェクトを開発したことのある方は、少しがっか...

MySQL 5.7.20 のインストールと設定方法のグラフィック チュートリアル (win10)

この記事では、MySQL 5.7.20のインストールと設定方法を参考までに紹介します。具体的な内容は...

Centos8 で Docker を使用して Django プロジェクトをデプロイする詳細なチュートリアル

導入この記事では、django + uwsgi + nginx デプロイメントを使用して、Docke...