ホームページ ウェブフロントエンド jsチュートリアル js の 1 次元配列、多次元配列、objects の混合使用_JavaScript スキル

js の 1 次元配列、多次元配列、objects の混合使用_JavaScript スキル

May 16, 2016 pm 03:06 PM
一次元配列 多次元配列

この記事の主な目的は、JavaScript の配列とオブジェクトの混合使用について説明することです。JS の弱いチェック特性により、たとえば、さまざまな種類の変数を同時に JS 配列に格納できます。数値、文字列、文字、オブジェクト、その他のコンテンツを同じ配列に格納します。オブジェクトでも同じことを行うことができます。違いは、オブジェクトがオブジェクト内の各メンバーのエイリアスを指定できるため、次のようにプログラミング中にデータが読みやすくなります。

var arr1 = ["飞鱼", 25, 172, "江苏"];
var person = {name:"飞鱼",age: 25, height:172,province: "江苏"};
ログイン後にコピー
このように、person.name は arr1[0] よりも読みやすく、使いやすいのでしょうか?もちろん、配列とオブジェクトにはそれぞれ独自の利点があります。この記事の焦点は、両方の利点を組み合わせて包括的に使用することです。

1 次元配列 次のコードは、cars という名前の配列を作成します。まず配列を作成し、次に値を 1 つずつ割り当てます

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
ログイン後にコピー
または (圧縮配列): 配列オブジェクト

の作成時に値を割り当てます。

コードをコピー コードは次のとおりです:
varcars=new Array("アウディ","BMW","ボルボ");

または(リテラル配列):変数を作成せず、直接補助しますが、オブジェクトを作成するときに使用される括弧「()」と、値を直接代入するときに使用される角括弧「[]」に注意してください。注意しないとエラーが発生します。


コードをコピー コードは次のとおりです:
varcars=["アウディ","BMW","ボルボ"];

上記は 1 次元配列を作成する 3 つの方法です。 JS にはチェック機能が弱いため、さまざまな型の変数を 1 次元配列に入れることができます。

2 次元配列および多次元配列: 1. 2次元配列の作成方法1: まず1次元配列を作成し、次に1次元配列のすべてのメンバーに対して1次元データを作成します

var persons = new Array();

persons[0] = new Array();
persons[1] = new Array();
persons[2] = new Array();

persons[0][0] = "zhangsan";
persons[0][1] = 25;
persons[1][0] = "lisi";
persons[1][1] = 22;
persons[2][0] = "wangwu";
persons[2][1] = 32;
persons[0] = ["zhangsan", 25];
persons[1] = ["lisi", 21];
persons[2] = ["wangwu", 32];
ログイン後にコピー
前の方法と比較して、この方法ははるかにシンプルで読みやすくなっています。


コードをコピー コードは次のとおりです:
人.長さ = 3

2. 2次元配列の作成方法2: まず1次元配列を作成し、その後1次元配列のすべてのメンバーに値を直接代入します

コードをコピー コードは次のとおりです:
var 人 = new Array();

3. 2次元配列の作成方法3:直接代入

コードをコピー コードは次のとおりです:
var 人 = [["zhangsan", 25], ["lisi", 21], ["wangwu", 32]];

4. 概要 1 番目と 2 番目の方法はより面倒ですが、最初に空の多次元配列を作成し、次に for ループで独自のニーズに応じて値を割り当てることができます。 3 番目の方法は比較的シンプルで、列挙されたデータに使用するのが簡単です。
2 次元配列に関する最後の質問は、2 次元配列または多次元配列の長さはどれくらいかということです。次のコードをテストしてみましょう:

コードをコピー コードは次のとおりです:
document.write("persons = " + people + "
persons.length = " + people.length);

出力結果は次のとおりです:
人 = zhangsan,25,lisi,21,wangwu,32
つまり、多次元配列の length プロパティは、多次元配列内の要素の数ではなく、多次元配列の最初の次元の長さを返します。

5. 多次元配列の要素数を返す方法

次の配列:


コードをコピー コードは次のとおりです:
var 人 = [["zhangsan", 25], ["lisi", 21], ["wangwu", 32]];

通过维数(此处是3)乘以每维元素的个数(此处是2)就可以得出该多维数组的元素个数是6了。但是这并不是保险的做法,因为多维数组中每一个维度的元素个数是可以不一样的,如:

复制代码 代码如下:

var persons = [["zhangsan", 25], ["lisi", 21, 172], ["wangwu", 32]];

该数组的第一维的第二个元素数组包含三个元素,其他的只有两个,这再使用length来计算还是3,因为第一维的元素个数没变嘛。但是再使用上面的方法计算该多维数组的元素个数就不对了。
因此多维数组的length属性和一维数组一样,永远返回第一维数组的元素个数。计算多维数组的元素个数,可以自己创建一个或多个嵌套for循环来计算,如:
在知道数组的维度的情况下,可以针对该数组写算法,如二维数组:

var persons = [["zhangsan", 25], ["lisi", 21], ["wangwu", 32]];
function getArr2ElementNum(arr) {
var eleNum = 0;
if (arr == null) {
return 0;
}
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
eleNum++;
}
}
return eleNum;
}
alert(getArr2ElementNum(persons));
ログイン後にコピー


在多维数组维度过多,嵌套复杂时,通过上面的方法来写针对的算法就太累了,特别是当这个复杂的多维数组还可能随时变换维度的情况下。如下这个复杂的多重嵌套的多维数组:
var arrN = [["zhangsan", 25, [1, "wangyuchu", 54, [123, 34, 16]], 43], ["lisi", 21, 172], ["wangwu", 32, "suzhou"]];
甚至,有些多维嵌套数组比这个还复杂,那怎么计算数组元素个数呢,我写了一个求数组元素个数的函数,不管是一维还多维,也不管是多么复杂的嵌套多维数组,都可以计算出来,算法不麻烦,主要用到了递归的理念:
//判断某个对象是不是数组

function isArray(obj) {
return obj && ( typeof obj === 'object') && (obj.constructor == Array);
}

//eleNum变量初始值为0,用来统计数组元素个数
var eleNum = 0;

//递归计算某个数组元素是不是下一维数组,如果是,则继续递归下去;如果不是,统计元素个数。
function recursion(obj) {
if (isArray(obj)) {
for (var j = 0; j < obj.length; j++) {
if (!isArray(obj[j])) {
eleNum++;
continue;
}
recursion(obj[j]);
}
} else {
eleNum++;
}
}

//arr为要计算数组元素个数的一维或多维数组,通过调用递归函数recursion返回数组元素个数
function getArrNElementNum(arr) {
if (arr == null) {
return 0;
}

recursion(arr);

return eleNum;
}

//随意定义一个复杂的多维嵌套数组
var arrN = [["zhangsan", 25, [1, "wangyuchu", 54, [123, 34, 16]], 43], ["lisi", 21, 172], ["wangwu", 32, "suzhou"]];
//打印出来数组元素个数
alert(getArrNElementNum(arrN));
ログイン後にコピー

对象:
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:

复制代码 代码如下:

var person={firstname:"Bill", lastname:"Gates", id:5566};

上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行:

var person={
firstname : "Bill",
lastname : "Gates",
id    : 5566
};
ログイン後にコピー

对象属性有两种寻址方式:
实例

name=person.lastname;
name=person["lastname"];
ログイン後にコピー

对象和多维数组的混合使用:
         想象这么一个场景,要枚举并统计清华大学(qinghua)、北京大学(beida)、浙江大学(zheda)三所大学一共有多少个系,怎么做?
         首先,建立一个数组,数组中包括着三所学校:

复制代码 代码如下:

var departments = [qinghua, beida, zheda];

        每个学校又有很多不同或相同的学院(xx),如何表示?在这里就要用到数组包含对象了:
复制代码 代码如下:

var departments = [qinghua{xx1, xx2, xx3}, beida{xx4, xx5,
 xx6, xx7}, zheda{xx8, xx9}];

每个学院又有不同的系(d),如何表示?
复制代码 代码如下:

var departments = [qinghua{xx1:[d1, d2], xx2[d3, d5],
 xx3:[d7, d8]}, beida{xx4, xx5, xx6, xx7}, zheda{xx8,
 xx9}];
 //只是举个例子,后面两个大学我就不表示了

上述例子就是一个数组,该数组的元素是学校对象,学校对象有N个学院属性,而每个学院属性又是一个包含多个系的数组,这就是一个典型的多维数组和对象混合使用的例子,可以简单明了的说明和列表学校、学院和系之间的级别、归属和数量关系。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PHP 多次元配列ソートの次元の旅: 1 次元から多次元へ PHP 多次元配列ソートの次元の旅: 1 次元から多次元へ Apr 29, 2024 pm 09:09 PM

1 次元配列は sort() 関数を使用してソートされ、2 次元配列は usort() 関数を使用して内部要素によってソートされ、高次元配列は多層ネストされた usort() 関数を使用して階層要素によってソートされます。分解の問題を層ごとに解決することが鍵となります。

PHPの二次元配列を一次元配列に変換する方法 PHPの二次元配列を一次元配列に変換する方法 Aug 03, 2023 am 11:14 AM

PHP 配列を 2 次元から 1 次元配列に変換する方法: 1. ループ トラバーサルを使用して 2 次元配列を走査し、各要素を 1 次元配列に追加します; 2. 「array_merge」関数を使用して複数の要素をマージします配列を配列に. 二次元配列を「array_merge」関数にパラメータとして渡して一次元配列に変換; 3. 「array_reduce」関数を使用すると、配列内のすべての値を処理できますコールバック関数を介して、最終的に結果を返します。

多次元配列を使用して 2 つの行列を乗算する Python プログラム 多次元配列を使用して 2 つの行列を乗算する Python プログラム Sep 11, 2023 pm 05:09 PM

行列は、行と列に配置された一連の数値です。 m 行 n 列の行列は mXn 行列と呼ばれ、m と n はその次元と呼ばれます。行列は、リストまたは NumPy 配列を使用して Python で作成された 2 次元配列です。一般に、行列の乗算は、最初の行列の行と 2 番目の行列の列を乗算することで実行できます。ここで、最初の行列の列数は 2 番目の行列の行数と等しくなければなりません。入力シナリオと出力シナリオ 2 つの行列 A と B があるとします。これら 2 つの行列の次元は、それぞれ 2X3 と 3X2 です。乗算後の結果の行列は 2 行 1 列になります。 [b1,b2][a1,a2,a3]*[b3,b4]=[a1*b1+a2*b2+a3*a3][a4,a5,a6][b5,b6][a4*b2+a

PHP で複数の配列を 1 つの多次元配列に結合する方法 PHP で複数の配列を 1 つの多次元配列に結合する方法 Jul 09, 2023 pm 01:08 PM

PHP で複数の配列を多次元配列にマージする方法 PHP 開発では、複数の配列を 1 つの多次元配列にマージする必要がよく発生します。この操作は、大規模なデータ コレクションを操作する場合に非常に便利で、データをより適切に整理して処理するのに役立ちます。この記事では、この操作を実現するためのいくつかの一般的な方法を紹介し、参考用のコード例を添付します。方法 1: array_merge 関数を使用する. array_merge 関数は、PHP でよく使用される配列結合関数であり、複数の配列を結合できます。

多次元 PHP 配列を反転する効率的な方法 多次元 PHP 配列を反転する効率的な方法 Apr 29, 2024 am 09:00 AM

多次元 PHP 配列を反転する 2 つの効果的な方法: array_reverse() 関数を再帰的に使用: ネストされた各配列の要素を再帰的に反転します。 PHP7 の array_reverse() 関数: array_reverse() 関数の新しいオーバーロードを使用して、多次元配列を反転します。

PHPで多次元配列をソートする方法 PHPで多次元配列をソートする方法 Jul 07, 2023 pm 12:45 PM

PHP で多次元配列をソートする方法 PHP では、配列は非常に一般的かつ重要なデータ構造であり、一部の複雑なデータ処理では多次元配列がより頻繁に使用されます。ただし、多次元配列のソートは難しい場合があります。この記事では、PHP で多次元配列を並べ替える方法と、具体的なコード例を示します。始める前に、まず多次元配列の構造を理解しましょう。多次元配列とは、配列内の要素も配列であり、入れ子構造を形成していることを意味します。例: $st

PHP で array_walk_recursive 関数を使用して多次元配列に対して再帰操作を実行する方法 PHP で array_walk_recursive 関数を使用して多次元配列に対して再帰操作を実行する方法 Jun 26, 2023 am 11:40 AM

配列は、PHP で非常に一般的なデータ型です。場合によっては、多次元配列が関係する状況に直面することがありますが、この場合、すべての要素に対して同じ操作を実行する必要がある場合は、array_walk_recursive() 関数を使用できます。 array_walk_recursive() 関数は、PHP の非常に強力な再帰関数で、多次元配列に対して再帰操作を実行するのに役立ちます。多次元配列の各要素を再帰的に走査し、それに対応する操作を実行できます。

PHP 配列の詳細な説明: 多次元配列、連想配列などの包括的な分析。 PHP 配列の詳細な説明: 多次元配列、連想配列などの包括的な分析。 Mar 13, 2024 pm 02:36 PM

PHP 配列の詳細な説明: 多次元配列、連想配列などの包括的な分析 PHP の配列は、複数のデータ項目を格納し、インデックスを介してそれらにアクセスできる非常に重要なデータ構造です。 PHP では、配列はインデックス付き配列、連想配列、多次元配列などのさまざまなタイプに分類でき、それぞれのタイプには独自の用途と特性があります。この記事では、配列の宣言、アクセス、走査、操作の方法など、さまざまな種類の PHP 配列について詳しく説明し、読者の理解を助ける具体的なコード例を提供します。 1. インデックス配列のインデックス番号

See all articles