當前位置：首頁 > 網絡編程 > JavaScript > 詳細頁面

WEB前端第二十六課——js數組

時間：2020-08-20來源：www.farandoo.com作者：電腦系統城

1.數組基礎

?、?nbsp;數組概念

　　array是按照一定順序排列的一組值，每個值都擁有一個編號，編號從0開始從左向右依次增加

　　數組中的元素可以是任何類型的數據，元素之間用逗號分隔，整個數組由方括號（[…]）包裹

?、?數組本質

　　本質上，數組是對象類型的一種特殊表現形式，

　　因此，可以使用 new方式創建數組

　　示例：var namelist=new Array（'Jim','John','Bater'）； // ['Jim','John','Bater']

?、?nbsp;數組長度

　　JavaScript中的數組元素可以是任何類型的數據，而在計算機內存中不同類型的數據是分區存儲的，因此，JavaScript中的數組元素在內存中的存儲位置是不連續的

　　無法按照內存地址訪問數組元素，所以計算數組長度的時候只需要計算數組元素的個數即可，JavaScript通過使用下標的方式對數組元素進行標記，數組的下標則是連續的

　　通過 .length屬性計算數組長度，語法：arr . length;

　　　　length是可寫屬性，如果設置length長度小于數組本身長度，那么多余元素會被舍棄

　　　　　　　　　　　　如果設置length長度大于數組本身長度，那么缺少元素用空位補齊

　　　　　　　　　　　　如果設置length長度不是合法數值，那么會報錯“invalid array length”

　　　　示例：var arr=[a,b,c,d];

　　　　　　　arr.length=3;

　　　　　　　console.log(arr.length); //3

　　　　　　　console.log(arr); // [a,b,c]

　　　　　　　console.log(arr[4]); // undefined

　　　　　　　arr.length=-1;

　　　　　　　console.log(arr.length); //Uncaught RangeError: invalid array length(…)

?、?nbsp;數組遍歷

　　可以使用 for in快速訪問數組中的每一個元素

　　示例：var nameArr = ['John','Anna','Hauk'];

　　　　　for (var index in nameArr){

　　　　　　console.log(nameArr[index]);

　　　　　}

　　　　　返回結果：John Anna Hauk

　　for in循環遍歷數組的時候，index表示數組中元素的下標，是自定義變量

?、?nbsp;數組空位

　　當數組某個位置是空元素，即兩個逗號之間沒有任何值，則該數組存在空位（hole）

　　var arr = ['John','','Sami']，示例中間引號所代表的的元素不屬于空位，空位沒有任何值（表現為undefined），但空位占據數組length長度

?、?數組刪除

　　delete命令可以刪除數組中元素的值，從而形成空位，但delete命令并不會影響 length的屬性

　　delete命令在使用過程中，是根據數組的下標來鎖定元素進行刪除的

　　語法：delete 變量名[下標]；

2.數組調用

　　數組調用指的是數組元素的調用，通過 “數組名[下標]” 的方式對數組元素進行訪問

　　數組元素每次只能訪問一個，如果要調用多個元素，可以通過循環語句進行連續調用

　　示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 <html lang="en">
<head>
<meta charset="UTF-8">
<title>Array</title>
<style>
input{
outline: none;
}
</style>
</head>
<body>
<span>名稱</span>
<input type="text" id="nameInput">
<button id="submitButton">提交</button>
<script>
var nameInput=document.getElementById("nameInput");
var submitButton=document.getElementById("submitButton");
submitButton.onclick=function () {
var nameStr=nameInput.value;
var nameArr=nameStr.split(",");
for (var i in nameArr){
console.log(nameArr[i]);
}
}
</script>
</body>
</html>

3.數組方法

　?、?nbsp;isArray，判斷變量是否為數組

　　　　如果是數組返回 true，否則返回 false，使用對象Array調用該方法

　　　　語法：Array. isArray(變量名);

　?、?nbsp;valueOf()，返回數組本身

　　　　該方法歸屬于Object對象類型，作用是返回指定對象的原始值，在數組中的作用是返回數組本身（很少使用）

　　　　語法：數組名 .valueOf()；

　　　　JavaScript中許多內置對象都重寫了該函數，以便更適合自身的功能需要，因此，不同類型對象的 valueOf方法的返回值和返回值類型均有可能不同

　?、?nbsp;toString()，將數組以字串的形式返回

　　　　不僅能夠將數組轉換成字符串，布爾值也可以轉換，返回值之間默認都好分隔

　　　　語法：數組名.toString();

　?、?nbsp;push，向數組末尾追加數據，返回當前數組的長度

　　　　可以向數組末尾添加一個或多個元素，返回值為追加元素后數組的長度length

　　　　語法：數組名 .push('item1', 'item2',…);

　　　　★ push方法會改變原數組內容

　?、?nbsp;pop，刪除數組最后一個元素

　　　　返回值為刪除的這個元素

　　　　語法：數組名 .pop();

　　　　★ pop方法會改變原數組內容

　?、?nbsp;join，將數組轉換為字符串，默認用逗號隔開

　　　　以給定的參數做為分隔符，將數組轉換為字符串，如果不設置參數，則默認使用逗號分隔

　　　　語法：數組名 .join(' 分隔符 ');

　?、?shift()，刪除數組的第一個元素

　　　　返回值未刪除的這個元素

　　　　語法：數組名 .shift();

　　　　★ shift方法也會對原數組造成影響

　?、?nbsp;unshift()，向數組前端添加元素

　　　　可以向數組最前端添加一個或多個元素，返回值為添加元素后數組的長度length

　　　　語法：數組名 .unshift('item1','item2',…);

　　　　★ unshift方法也會對原數組造成影響

　?、?reverse，數組反轉

　　　　將數組中元素的順序反向排列

　　　　語法：數組名 .reverse(); //括號內不需要任何參數

　　　　★ reverse方法也會改變原數組的結構

　?、?nbsp;slice，數組截取

　　　　slice方法能夠根據指定的開始和結束下標，對數組進行截取，并生成一個新的數組

　　　　新數組的內容包括開始下標對應的元素到結束下標對應的前一個元素，即不包含結束下標所對應的元素本身 ★

　　　　語法：數組名 .slice(index1,index2); //返回值未生成的數組

　　　　slice方法的參數可以是負數，-1代表最后一個元素，-2代表倒數第二個元素，以此類推

　　　　如果只寫一個參數，則表示對從當前下標對應的元素一直到最后一個元素進行截取

　　　　該方法不更改原數組！

　　? splice，數組截取，并且可以插入新的元素（改變原數組）

　　　　splice方法是根據指定的下標和長度數，對數組進行一定長度的截取，同時可以根據增加參數向數組中插入一些新元素

　　　　返回值為截取元素所構成的數組

　　　　語法：數組名 .splice(index, removeCount, addItem1, addItem2,…);

　　　　★ splice方法會改變原數組的內容

　　　　方法中插入新元素的參數不是必須設置，前兩個參數為必須

　　? sort，數組排序

　　　　語法：數組名 .sort(sortby);

　　　　默認按照數組中元素的編碼進行排序，此時括號內不需要設置參數

　　　　也可以設置sortby函數自定義排序規則

　　? indexOf，對數組進行索引

　　　　在數組中從前向后檢索指定元素，返回值為元素在數組中第一次出現的下標，如果沒有檢索到則返回 -1

　　　　indexOf方法的第二個參數表示從第幾個元素開始檢索，是可選參數

　　　　語法：數組名 .indexOf(item, beginIndex);

　　　　第二個參數可以設置負數，-1表示從最后一個（倒數第一個）元素開始向后查找

　　? lastIndexOf，反序索引

　　　　在數組中從后向前檢索指定元素，返回值為元素在數組中最后一次出現的下標，如果沒有檢索到則返回-1

　　　　lastIndexOf方法的第二個參數表示從第幾個元素開始檢索，是可選參數

　　　　語法：數組名 .lastIndexOf(item, beginIndex);

　　　　第二個參數可以為負數，-1表示從最后一個元素開始向前查找

4.二維數組

　　如果數組的元素還是數組，那么外層數組就稱為二維數組

　　語法：var arr=[[array1], [array2], [array3]];

　　二維數組有兩個下標，第一個下標表示外層數組的下標，第二個下標表示內層數組的下標，如 arr[1][0];

　　二維數組是數組的一種特殊形式，數組的方法對二維數組任然生效

5.push、pop練習

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 <html lang="en">
<head>
<meta charset="UTF-8">
<title>Array_push&pop</title>
<style>
input{
outline: none;
}
</style>
</head>
<body>
<span>倉庫</span>
<input type="text" id="storage">
<button id="putIn">入庫</button>
<button id="takeOut">出庫</button>
<script>
var storage=document.getElementById("storage");
var goods=[];
storage.value=goods.length;
var putIn=document.getElementById("putIn")
putIn.onclick=function () {
if (storage.value==5){
alert("倉庫已滿！");
}else{
goods.push('貨物');
storage.value=goods.length;
}
}
var takeOut=document.getElementById("takeOut");
takeOut.onclick=function () {
if (storage.value==0){
alert('倉庫已空！');
}else{
goods.pop();
storage.value=goods.length;
}
}
</script>
</body>
</html>

WEB前端第二十六課——js數組

相關信息

熱門系統總排行

裝機必備

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載