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=https://www.cnblogs.com/husa/p/goods.length;
var putIn=document.getElementById("putIn")
putIn.onclick=function () {
if (storage.value=https://www.cnblogs.com/husa/p/=5){
alert("倉庫已滿！");
}else{
goods.push('貨物');
storage.value=https://www.cnblogs.com/husa/p/goods.length;
}
}
var takeOut=document.getElementById("takeOut");
takeOut.onclick=function () {
if (storage.value=https://www.cnblogs.com/husa/p/=0){
alert('倉庫已空！');
}else{
goods.pop();
storage.value=https://www.cnblogs.com/husa/p/goods.length;
}
}
</script>