JavaScript 之核心語法 [ 數(shù)組 ]

mumumu 發(fā)布于2019-08-23 10:53 / 3418人閱讀

摘要：數(shù)組描述表示可以儲存一個或多個數(shù)據(jù)值的有序集合數(shù)組中儲存的數(shù)據(jù)中可以稱為元素數(shù)組中可以儲存任何類型的數(shù)據(jù)語法字面量方式數(shù)組名稱元素，元素，構(gòu)造函數(shù)方式數(shù)組名稱元素元素函數(shù)方式數(shù)組名稱元素元素長度表示數(shù)組的長度數(shù)組中儲存元素的個數(shù)當(dāng)使用

數(shù)組 描述

表示可以儲存一個或多個數(shù)據(jù)值的有序集合

數(shù)組中儲存的數(shù)據(jù)中可以稱為元素

數(shù)組中可以儲存任何類型的數(shù)據(jù)

語法

字面量方式 - var 數(shù)組名稱 = [ 元素，元素， ... ]

構(gòu)造函數(shù)方式 - var 數(shù)組名稱 = new Array( 元素, 元素, ... )

函數(shù)方式 - var 數(shù)組名稱 = Array( 元素, 元素, ... )

length（長度）

表示數(shù)組的長度（數(shù)組中儲存元素的個數(shù)）

當(dāng)使用構(gòu)造函數(shù)方式或函數(shù)方式來定義數(shù)組，數(shù)組中的元素只有一個，并且為number類型時，表示定義數(shù)組的長度

字面量方式不能定義數(shù)組的長度

定義數(shù)組 字面量方式

/* 字面量方式 */
var arr1 = [];// 定義數(shù)組 - 數(shù)組中沒有任何元素，稱為空數(shù)組
console.log( arr1 );// 顯示 - []
var arr2 = [ 100, "啊哈哈", true ];
console.log( arr2 );// 顯示 - [ 100, "啊哈哈", true ]
var arr9 = [10];// 不能定義數(shù)組的長度
console.log( arr9 );// 顯示 - [ 10 ]

構(gòu)建函數(shù)方式

/* 構(gòu)造函數(shù)方式 */
var arr3 = new Array();
console.log( arr3 );// 顯示 - []
var arr4 = new Array( 100, "呀吼吼吼", true );
console.log( arr4 );// 顯示 - [ 100, "呀吼吼吼", true ]
var arr5 = new Array( 10 );// 定義數(shù)組的長度
console.log( arr5 );// 顯示 - [ <10 empty items> ]

函數(shù)方式

/* 函數(shù)方式 */
var arr6 = Array();
console.log( arr6 );// 顯示 - []
var arr7 = Array( 100, "我的蒼天吶", true );
console.log( arr7 );// 顯示 - [ 100, "我的蒼天吶", true ]
var arr8 = Array( 10 );// 定義數(shù)組的長度
console.log( arr8 );// 顯示 - [ <10 empty items> ]

數(shù)組的類型

可以分為索引數(shù)組和關(guān)聯(lián)數(shù)組

索引數(shù)組

表示數(shù)組中儲存元素的位置用數(shù)字值來表示

數(shù)字值（也可以叫索引值）是從 0 開始

可以根據(jù)索引值來添加數(shù)組中的元素

JavaScript中定義數(shù)組的默認類型為索引數(shù)組

/* 索引數(shù)組 */
/* 定義一個空數(shù)組 */
var arr1 = [];
console.log( arr1 );// 顯示 []
/* 為空數(shù)組中添加元素 */
arr1[0] = 100;// 根據(jù)索引值添加
arr1[1] = "啊哈哈";
arr1[2] = true;
console.log( arr1 );// 顯示 [ 100, "啊哈哈", true ]

稀疏數(shù)組

是索引數(shù)組的另一種表現(xiàn)形式

稀疏數(shù)組的數(shù)組長度和數(shù)組中的有效內(nèi)容不一致

稀疏數(shù)組的位置允許不連續(xù)，沒有定義的位置默認為空（undefined）

/* 稀疏數(shù)組 */
var arr2 = [];
/* 為空數(shù)組中添加元素 */
arr2[0] = 100;// 允許不按照索引值的順序進行添加
arr2[4] = 300;
arr2[8] = 500;
console.log( arr2 );// 顯示 [ 100, <3 empty items>, 300, <3 empty items>, 500 ]
console.log( arr2.length );// 顯示 9（有效數(shù)據(jù)只有三個）

關(guān)聯(lián)數(shù)組

表示數(shù)組中儲存元素的位置用字符串來表示

數(shù)組的長度（length）對關(guān)聯(lián)數(shù)組沒有效果

/* 關(guān)聯(lián)數(shù)組 */
var arr3 = [];
/* 為空數(shù)組中添加元素 */
arr3["name"] = "啊哈哈";// 使用字符串方式添加元素
arr3["nian"] = 100;
arr3["gong"] = "深山";
console.log( arr3 );// 顯示 [ name: "啊哈哈", nian: 100, gong: "深山" ]
console.log( arr3.length );// 顯示 0（length無效）

數(shù)組的調(diào)用

表示提取數(shù)組中數(shù)據(jù)值進行顯示

如果訪問的元素位置未定義過或位置為空，提取的數(shù)據(jù)為 undefined ，語法不報錯

索引數(shù)組

通過索引值來提取對應(yīng)的元素

/* 索引數(shù)組 */
var arr1 = [ "啊哈哈", 100, true ];
/* 調(diào)用具體位置的元素 */
console.log( arr1[0] );// 顯示對應(yīng)數(shù)據(jù)內(nèi)容  啊哈哈
/* 調(diào)用未定義位置的元素 */
console.log( arr1[4] );// 顯示 undefined

稀疏數(shù)組

通過索引值來提取對應(yīng)的元素

/* 稀疏數(shù)組 */
var arr2 = [];
arr2[0] = 100;
arr2[4] = 300;
arr2[8] = 500;
/* 調(diào)用具體位置的元素 */
console.log( arr2[0] );// 顯示對應(yīng)數(shù)據(jù)內(nèi)容  100
/* 調(diào)用未定義位置的元素 */
console.log( arr2[5] );// 顯示 undefined

關(guān)聯(lián)數(shù)組

通過字符串來提取對應(yīng)的元素

/* 關(guān)聯(lián)數(shù)組 */
var arr3 = [];
arr3["name"] = "啊哈哈";
arr3["nian"] = 100;
arr3["gong"] = "深山";
/* 調(diào)用具體位置的元素 */
console.log( arr3["name"] );// 顯示對應(yīng)數(shù)據(jù)內(nèi)容  啊哈哈
/* 調(diào)用未定義位置的元素 */
console.log( arr3["nm"] );// 顯示 undefined

數(shù)組的修改

表示對數(shù)組中的數(shù)據(jù)值進行修改

通過數(shù)組的索引值找到對應(yīng)元素的位置，在通過對指定數(shù)據(jù)進行重新賦值來完成數(shù)組修改

/* 索引數(shù)組 */
var arr1 = [];
arr1[0] = 100;
arr1[1] = 200;
console.log( arr1 );// 顯示 [ 100, 200 ]
/* 對指定元素數(shù)據(jù)進行修改 */
arr1[0] = 400;
console.log( arr1 );// 顯示 [ 400, 200 ]

/* 關(guān)聯(lián)數(shù)組 */
var arr2 = [];
arr2["name"] = "啊哈哈";
arr2["nian"] = 100;
arr2["gong"] = "深山";
console.log( arr2 );// 顯示 [ name: "啊哈哈", nian: 100, gong: "深山" ]
/* 對指定元素數(shù)據(jù)進行修改 */
arr2["name"] = "呀吼吼吼";
console.log( arr2 );// 顯示 [ name: "呀吼吼吼", nian: 100, gong: "深山" ]

數(shù)組的刪除

表示對數(shù)組中的數(shù)據(jù)值進行刪除

使用delete運算符來刪除數(shù)據(jù)值

但是只刪除數(shù)據(jù)值，不刪除數(shù)據(jù)值所占的位置空間

數(shù)組進行刪除后會變成稀疏數(shù)組

var arr = [ 100, "哈哈哈", true ];
/* 使用delete運算符來對指定數(shù)據(jù)內(nèi)容進行刪除 */
delete arr [ 1 ];
/* 刪除后會只刪除數(shù)據(jù)內(nèi)容，但不會刪除數(shù)據(jù)所占的位置 */
console.log( arr );//顯示結(jié)果：[ 100, <1 empty item>, true ]
console.log( arr.length );//顯示數(shù)組中的數(shù)據(jù)個數(shù)  3

數(shù)組的復(fù)制

表示一個數(shù)組對另一個數(shù)組進行復(fù)制

復(fù)制分為深復(fù)制和淺復(fù)制

深復(fù)制

是復(fù)制數(shù)組中的數(shù)據(jù)值

如果對復(fù)制的數(shù)據(jù)內(nèi)容進行修改，不會對復(fù)制的數(shù)組中的數(shù)據(jù)值進行修改

/* 深復(fù)制：是指對數(shù)組中的數(shù)據(jù)值進行復(fù)制 */
var arr1 = [ 100, "呀吼吼", true ];
var arr2 = [];
/* 使用循環(huán)語句對數(shù)組遍歷，獲得數(shù)組中的數(shù)據(jù)內(nèi)容 */
for ( var a = 0; a < arr1.length; a++ ) {
    arr2 [ a ] = arr1 [ a ];//將獲得的數(shù)據(jù)內(nèi)容復(fù)制到另一個數(shù)組中
}
/* 顯示復(fù)制效果 */
console.log( arr2 );// [ 100, "呀吼吼", true ]
/* 如果對復(fù)制的數(shù)據(jù)進行修改原本的數(shù)據(jù)不會被修改 */
arr2[ 1 ] = "哇哈哈";// 修改數(shù)據(jù)
console.log( arr2 );// 修改后效果：[ 100, "娃哈哈", true ]
console.log( arr1 );// 修改后效果：[ 100, "呀吼吼", true ]

淺復(fù)制

是復(fù)制在數(shù)組中儲存的內(nèi)容地址

如果對復(fù)制的數(shù)據(jù)內(nèi)容進行修改，會同時修改被復(fù)制的數(shù)組中的數(shù)據(jù)值

/* 淺復(fù)制：是指對數(shù)組中存放的內(nèi)容地址進行復(fù)制 */
var arr3 = [ 100, "呀吼吼", true ];
var arr4 = [];
arr4 = arr3;
console.log( arr3 );//顯示效果：[ 100, "呀吼吼", true ]
/* 但是要注意如果對數(shù)據(jù)進行修改會同時修改 */
arr4[ 1 ] = "哇哈哈";//修改數(shù)據(jù)
console.log( arr4 );//修改后效果：[ 100, "娃哈哈", true ]
console.log( arr3 );//修改后效果：[ 100, "娃哈哈", true ]

數(shù)組的遍歷

通過循環(huán)語句來獲取數(shù)組中的全部數(shù)據(jù)內(nèi)容

/* for語句遍歷索引數(shù)組 */
var arr1 = [ "啊哈哈", 100, true, undefined, null ];
for ( var i = 0; i < arr1.length; i++ ) {
    console.log( arr1[i] );
}

for...in語句 語法

for ( var 變量 in 數(shù)組 ) {
    語句塊
}

變量 - 表示得到的數(shù)組中的數(shù)據(jù)內(nèi)容

/* for...in語句遍歷索引數(shù)組 */
for ( var s in arr1 ) {
    console.log( arr1[s] );
}

for語句與for...in語句的對比

for語句

循環(huán)的開始和結(jié)束，可以由開發(fā)人員決定

由于稀疏數(shù)組的數(shù)組長度和數(shù)組的有效內(nèi)容不一致，遍歷出的數(shù)據(jù)值，不能過濾掉無效數(shù)據(jù)值

由于關(guān)聯(lián)數(shù)組的數(shù)組長度無效，所以無法使用for語句進行循環(huán)遍歷

for...in語句

循環(huán)只能從開始到結(jié)束

在遍歷稀疏數(shù)組時可以過濾掉無效數(shù)據(jù)值，直接得到有效數(shù)據(jù)值

for...in語句可以對關(guān)聯(lián)數(shù)組進行遍歷

/* 稀疏數(shù)組 */
var arr2 = [];
arr2[0] = 100;
arr2[4] = 300;
arr2[8] = 500;
/* for語句遍歷稀疏數(shù)組 */
for ( var a = 0; a < arr2.length; a++ ) {
    /* 得到全部數(shù)據(jù)值，包括無效數(shù)據(jù)值 */
    console.log( arr2[a]);
}
/* for...in語句遍歷稀疏數(shù)組 */
for ( var b in arr2 ) {
    /* 可以得到數(shù)組中的有效數(shù)據(jù)值 */
    console.log( arr2[b] );
}

/* 關(guān)聯(lián)數(shù)組 */
var arr3 = [];
arr3["name"] = "啊哈哈";
arr3["nian"] = 100;
arr3["gong"] = "深山";
/* for語句遍歷關(guān)聯(lián)數(shù)組 */
for ( var x = 0; x < arr3.length; x++ ) {
    /* 關(guān)聯(lián)數(shù)組沒有數(shù)組長度，所以無法遍歷 */
    console.log( arr3[x] );
}
/* for...in語句遍歷關(guān)聯(lián)數(shù)組 */
for ( var y in arr3 ) {
    /* 可以遍歷到數(shù)組中的數(shù)據(jù)值 */
    console.log( arr3[y] );
}

GPU云服務(wù)器云服務(wù)器 javascript核心 javascript 語法 javascript語法 javascript核心技術(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96781.html

發(fā)表評論

登陸后可評論

0條評論

mumumu

男|高級講師

我要關(guān)注我要私信

TA的文章

軟件測試就是簡單的點點點嗎？？？

閱讀 2109·2021-10-12 10:12
??程序人生 | 為什么越來越多的人用Python來做自動化測試？

閱讀 821·2021-09-24 09:47
CUBECLOUD：六周年慶鉅惠，洛杉磯VPS套餐年付五折，全場85折優(yōu)惠

閱讀 1233·2021-08-19 11:12
Typecho 主題制作記錄

閱讀 3520·2019-08-29 13:06
原生js實現(xiàn)省市區(qū)三級聯(lián)動插件

閱讀 734·2019-08-26 11:43
2分鐘通過javascript的opener方式實現(xiàn)調(diào)用父窗口方法示例

閱讀 2625·2019-08-23 17:20
ReactElement源碼解析

閱讀 1187·2019-08-23 16:52
放棄jQuery, 使用原生js

閱讀 2652·2019-08-23 14:27

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript 之核心語法 [ 數(shù)組 ]

相關(guān)文章

【JavaScript】核心語法之數(shù)組

JavaScript 闖關(guān)記

**函數(shù) - Javascript語法基礎(chǔ) - Javascript核心**

數(shù)組 - Javascript語法基礎(chǔ) - Javascript核心

**《JavaScript 闖關(guān)記》之對象**

發(fā)表評論

0條評論

mumumu

男|高級講師

TA的文章

軟件測試就是簡單的點點點嗎？？？

??程序人生 | 為什么越來越多的人用Python來做自動化測試？

CUBECLOUD：六周年慶鉅惠，洛杉磯VPS套餐年付五折，全場85折優(yōu)惠

Typecho 主題制作記錄

原生js實現(xiàn)省市區(qū)三級聯(lián)動插件

2分鐘通過javascript的opener方式實現(xiàn)調(diào)用父窗口方法示例

ReactElement源碼解析

放棄jQuery, 使用原生js

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript 之 核心語法 [ 數(shù)組 ]

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript 之核心語法 [ 數(shù)組 ]