1.數組基礎
① 數組概念
array是按照一定順序排列的一組值，每個值都擁有一個編號，編號從0開始從左向右依次增加
數組中的元素可以是任何類型的數據，元素之間用逗號分隔，整個數組由方括號（[…]）包裹
② 數組本質
本質上，數組是對象類型的一種特殊表現形式，
因此，可以使用 new方式創建數組
示例：var namelist=new Array（'Jim','John','Bater'）； // ['Jim','John','Bater']
③ 數組長度
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(…)
④ 數組遍歷
可以使用 for in快速訪問數組中的每一個元素
示例：var nameArr = ['John','Anna','Hauk'];
for (var index in nameArr){
console.log(nameArr[index]);
}
返回結果：John Anna Hauk
for in循環遍歷數組的時候，index表示數組中元素的下標，是自定義變量
⑤ 數組空位
當數組某個位置是空元素，即兩個逗號之間沒有任何值，則該數組存在空位（hole）
var arr = ['John','','Sami']，示例中間引號所代表的的元素不屬於空位，空位沒有任何值（表現為undefined），但空位占據數組length長度
⑥ 數組刪除
delete命令可以刪除數組中元素的值，從而形成空位，但delete命令並不會影響 length的屬性
delete命令在使用過程中，是根據數組的下標來鎖定元素進行刪除的
語法：delete 變量名[下標]；
2.數組調用
數組調用指的是數組元素的調用，通過 “數組名[下標]” 的方式對數組元素進行訪問
數組元素每次只能訪問一個，如果要調用多個元素，可以通過循環語句進行連續調用
示例：
<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.數組方法
① isArray，判斷變量是否為數組
如果是數組返回 true，否則返回 false，使用對象Array調用該方法
語法：Array. isArray(變量名);
② valueOf()，返回數組本身
該方法歸屬於Object對象類型，作用是返回指定對象的原始值，在數組中的作用是返回數組本身 （很少使用）
語法：數組名 .valueOf()；
JavaScript中許多內置對象都重寫了該函數，以便更適合自身的功能需要，因此，不同類型對象的 valueOf方法的返回值和返回值類型均有可能不同
③ toString()，將數組以字串的形式返回
不僅能夠將數組轉換成字符串，布爾值也可以轉換，返回值之間默認逗號分隔
語法：數組名.toString();
④ push，向數組末尾追加數據，返回當前數組的長度
可以向數組末尾添加一個或多個元素，返回值為追加元素后數組的長度length
語法：數組名 .push('item1', 'item2',…);
★ push方法會改變原數組內容
⑤ pop，刪除數組最后一個元素
返回值為刪除的這個元素
語法：數組名 .pop();
★ pop方法會改變原數組內容
⑥ join，將數組轉換為字符串，默認用逗號隔開
以給定的參數做為分隔符，將數組轉換為字符串，如果不設置參數，則默認使用逗號分隔
語法：數組名 .join(' 分隔符 ');
⑦ shift()，刪除數組的第一個元素
返回值未刪除的這個元素
語法：數組名 .shift();
★ shift方法也會對原數組造成影響
⑧ unshift()，向數組前端添加元素
可以向數組最前端添加一個或多個元素，返回值為添加元素后數組的長度length
語法：數組名 .unshift('item1','item2',…);
★ unshift方法也會對原數組造成影響
⑨ reverse，數組反轉
將數組中元素的順序反向排列
語法：數組名 .reverse(); //括號內不需要任何參數
★ reverse方法也會改變原數組的結構
⑩ slice，數組截取
slice方法能夠根據指定的開始和結束下標，對數組進行截取，並生成一個新的數組
新數組的內容包括開始下標對應的元素到結束下標對應的前一個元素，即不包含結束下標所對應的元素本身 ★
語法：數組名 .slice(index1,index2); //返回值未生成的數組
slice方法的參數可以是負數，-1代表最后一個元素，-2代表倒數第二個元素，以此類推
如果只寫一個參數，則表示對從當前下標對應的元素一直到最后一個元素進行截取
該方法不更改原數組！
⑪ splice，數組截取，並且可以插入新的元素（改變原數組）
splice方法是根據指定的下標和長度數，對數組進行一定長度的截取，同時可以根據增加參數向數組中插入一些新元素
返回值為截取元素所構成的數組
語法：數組名 .splice(index, removeCount, addItem1, addItem2,…);
★ splice方法會改變原數組的內容
方法中插入新元素的參數不是必須設置，前兩個參數為必須
⑫ sort，數組排序
語法：數組名 .sort(sortby);
排序順序可以按編碼或數字，並按升序或降序
默認按照數組中元素的編碼進行排序，此時括號內不需要設置參數
也可以設置sortby函數定義按數字排序，參數sortby必須是函數，通過函數指定升序或降序
★ sort方法會改變原數組的內容
⑬ indexOf，對數組進行索引
在數組中從前向后檢索指定元素，返回值為元素在數組中第一次出現的下標，如果沒有檢索到則返回 -1
indexOf方法的第二個參數表示從第幾個元素開始檢索，是可選參數
語法：數組名 .indexOf(item, beginIndex);
第二個參數可以設置負數，-1表示從最后一個（倒數第一個）元素開始向后查找
⑭ lastIndexOf，反序索引
在數組中從后向前檢索指定元素，返回值為元素在數組中最后一次出現的下標，如果沒有檢索到則返回-1
lastIndexOf方法的第二個參數表示從第幾個元素開始檢索，是可選參數
語法：數組名 .lastIndexOf(item, beginIndex);
第二個參數可以為負數，-1表示從最后一個元素開始向前查找
⑮ concat，用於連接兩個或多個數組
語法：array1 .concat(array2,array3,...);
★ 該方法不會改變原數組，而僅僅返回連接數組的一個副本（新數組）
<script>
var arrOne=[100,200,300,400];
var arrTwo=[500,600,700,800];
var arrTogether=arrOne.concat(arrTwo);
arrTogether.push(10);
arrTogether.unshift(1);
console.log(arrTogether);
</script>
4.二維數組
如果數組的元素還是數組，那么外層數組就稱為二維數組
語法：var arr=[[array1], [array2], [array3]];
二維數組有兩個下標，第一個下標表示外層數組的下標，第二個下標表示內層數組的下標，如 arr[1][0];
二維數組是數組的一種特殊形式，數組的方法對二維數組任然生效
5.push、unshift練習
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array</title>
</head>
<body>
<script>
var arrOne=[100,200,300,400];
var arrTwo=[500,600,700,800];
for (var i in arrTwo){
arrOne.push(arrTwo[i]);
}
arrOne.push(10);
arrOne.unshift(1);
console.log(arrOne);
</script>
</body>
</html>
6.push、pop練習
<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>