首頁 web前端 js教程 js一維數組、多維數組和物件的混合使用方法_javascript技巧

js一維數組、多維數組和物件的混合使用方法_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]更容易讀,也更容易使用?當然數組和物件各有優勢,本文的重點是將二者的優勢結合起來,綜合使用。

一維數組
下面的程式碼建立名為 cars 的陣列:先建立數組,再一一賦值

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
登入後複製

或 (condensed array):在建立陣列物件的時候賦值

複製程式碼 程式碼如下:

var cars=new Array("Audi","BMW","Volvo");

或 (literal array):不創建變量,直接輔助,不過注意創建對象時用的小括號“( )”,而直接賦值時用的是方括號“[ ]”,這個一不小心就容易出錯。
實例
複製程式碼 程式碼如下:

var cars=["Audi","BMW","Volvo"];

上面是一維數組的三種創建方式。由於JS的弱檢查性,你可以在一維數組中放不同類型的變數。

二維與多維數組:
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];
登入後複製

相比較上一種方法,這個要簡單易讀多了。

複製程式碼 程式碼如下:

persons.length = 3

       2、建立二維數組方法二:先建立一個一維數組,然後該一維數組的所有成員直接賦值
複製程式碼 程式碼如下:

var persons = new Array();

       3、建立二維數組方法三:直接賦值
複製程式碼 程式碼如下:

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

4、總結
第一種和第二種方法雖然麻煩一些,但貴在可以先建立一個空的多維數組,然後在for迴圈中依照自己的需求進行賦值。第三種方法對於枚舉資料來說就比較簡單易用了。
二維數組的最後一個問題,就是二維數組或多維數組的長度是多少?我們測試一下下面的程式碼:

複製程式碼 程式碼如下:

document.write("persons = " + persons + "
persons.length = " + persons.length);

       輸出的結果是:
            persons = zhangsan,25,lisi,21,wangwu,32
    也就是說,多維數組的length屬性回傳的是多維數組第一維的長度,而不是多維數組中元素的個數。

   5、如何傳回多維數組的元素數量

如下數組:

複製程式碼 程式碼如下:

var persons = [["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 Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1422
52
Laravel 教程
1316
25
PHP教程
1267
29
C# 教程
1239
24
PHP多維數組排序的維度之旅:從一維到多維 PHP多維數組排序的維度之旅:從一維到多維 Apr 29, 2024 pm 09:09 PM

一維數組使用sort()函數進行排序,二維數組使用usort()函數按內部元素排序,高維度數組使用多層嵌套usort()函數按層級元素進行排序,分解問題逐層解決是關鍵。

php數組二維怎麼轉一維數組 php數組二維怎麼轉一維數組 Aug 03, 2023 am 11:14 AM

php數組二維轉一維數組的方法:1、使用循環遍歷,使用循環遍歷二維數組,將每個元素添加到一維數組中;2、使用“array_merge”函數,可以將多個數字組合併為一個數組,將二維數組當作參數傳遞給“array_merge”函數,將其轉換為一維數組;3、使用“array_reduce”函數,可以將數組中的所有值通過一個回調函數來處理,並最後返回一個結果。

Python程式使用多維數組相乘兩個矩陣 Python程式使用多維數組相乘兩個矩陣 Sep 11, 2023 pm 05:09 PM

矩陣是按行和列排列的一組數字。 m行n列的矩陣稱為mXn矩陣,m和n稱為其維度。矩陣是一個二維數組,在Python中使用列表或NumPy數組創建。一般來說,矩陣乘法可以透過將第一個矩陣的行乘以第二個矩陣的列來完成。這裡,第一矩陣的列數應等於第二矩陣的行數。輸入輸出場景假設我們有兩個矩陣A和B,這兩個矩陣的維度分別為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中將多個數組合併為一個多維數組 如何在PHP中將多個數組合併為一個多維數組 Jul 09, 2023 pm 01:08 PM

如何在PHP中將多個數組合併為一個多維數組在PHP開發中,我們經常會遇到將多個數字組合併為一個多維數組的需求。這個操作在操作大數據集合時非常有用,可以幫助我們更好地整理和處理資料。本篇文章將為大家介紹幾種常用的方法來實現這個操作,並附上程式碼範例供參考。方法一:使用array_merge函數array_merge函數是PHP中常用的數組合併函數,它可以將多個數組

反轉多維PHP數組的有效方法 反轉多維PHP數組的有效方法 Apr 29, 2024 am 09:00 AM

反轉多維PHP陣列的兩種有效方法:遞歸使用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數組的各種類型,包括如何聲明、存取、遍歷和操作數組,同時將提供具體的程式碼範例以幫助讀者更好地理解。一、索引​​數組索引數

See all articles