|
1.數(shù)組基礎(chǔ) ?、?nbsp;數(shù)組概念 array是按照一定順序排列的一組值，每個(gè)值都擁有一個(gè)編號(hào)，編號(hào)從0開始從左向右依次增加 數(shù)組中的元素可以是任何類型的數(shù)據(jù)，元素之間用逗號(hào)分隔，整個(gè)數(shù)組由方括號(hào)（[…]）包裹 ?、?數(shù)組本質(zhì) 本質(zhì)上，數(shù)組是對象類型的一種特殊表現(xiàn)形式， 因此，可以使用 new方式創(chuàng)建數(shù)組 示例：var namelist=new Array（'Jim','John','Bater'）； // ['Jim','John','Bater'] ?、?nbsp;數(shù)組長度 JavaScript中的數(shù)組元素可以是任何類型的數(shù)據(jù)，而在計(jì)算機(jī)內(nèi)存中不同類型的數(shù)據(jù)是分區(qū)存儲(chǔ)的，因此，JavaScript中的數(shù)組元素在內(nèi)存中的存儲(chǔ)位置是不連續(xù)的 無法按照內(nèi)存地址訪問數(shù)組元素，所以計(jì)算數(shù)組長度的時(shí)候只需要計(jì)算數(shù)組元素的個(gè)數(shù)即可，JavaScript通過使用下標(biāo)的方式對數(shù)組元素進(jìn)行標(biāo)記，數(shù)組的下標(biāo)則是連續(xù)的 通過 .length屬性計(jì)算數(shù)組長度，語法：arr . length; length是可寫屬性，如果設(shè)置length長度小于數(shù)組本身長度，那么多余元素會(huì)被舍棄 如果設(shè)置length長度大于數(shù)組本身長度，那么缺少元素用空位補(bǔ)齊 如果設(shè)置length長度不是合法數(shù)值，那么會(huì)報(bào)錯(cuò)“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;數(shù)組遍歷 可以使用 for in快速訪問數(shù)組中的每一個(gè)元素 示例：var nameArr = ['John','Anna','Hauk']; for (var index in nameArr){ console.log(nameArr[index]); } 返回結(jié)果：John Anna Hauk for in循環(huán)遍歷數(shù)組的時(shí)候，index表示數(shù)組中元素的下標(biāo)，是自定義變量 ⑤ 數(shù)組空位 當(dāng)數(shù)組某個(gè)位置是空元素，即兩個(gè)逗號(hào)之間沒有任何值，則該數(shù)組存在空位（hole） var arr = ['John','','Sami']，示例中間引號(hào)所代表的的元素不屬于空位，空位沒有任何值（表現(xiàn)為undefined），但空位占據(jù)數(shù)組length長度 ?、?數(shù)組刪除 delete命令可以刪除數(shù)組中元素的值，從而形成空位，但delete命令并不會(huì)影響 length的屬性 delete命令在使用過程中，是根據(jù)數(shù)組的下標(biāo)來鎖定元素進(jìn)行刪除的 語法：delete 變量名[下標(biāo)]； 2.數(shù)組調(diào)用 數(shù)組調(diào)用指的是數(shù)組元素的調(diào)用，通過 “數(shù)組名[下標(biāo)]” 的方式對數(shù)組元素進(jìn)行訪問 數(shù)組元素每次只能訪問一個(gè)，如果要調(diào)用多個(gè)元素，可以通過循環(huán)語句進(jìn)行連續(xù)調(diào)用 示例： <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.數(shù)組方法 ① isArray，判斷變量是否為數(shù)組 如果是數(shù)組返回 true，否則返回 false，使用對象Array調(diào)用該方法 語法：Array. isArray(變量名); ② valueOf()，返回?cái)?shù)組本身 該方法歸屬于Object對象類型，作用是返回指定對象的原始值，在數(shù)組中的作用是返回?cái)?shù)組本身 （很少使用） 語法：數(shù)組名 .valueOf()； JavaScript中許多內(nèi)置對象都重寫了該函數(shù)，以便更適合自身的功能需要，因此，不同類型對象的 valueOf方法的返回值和返回值類型均有可能不同 ?、?nbsp;toString()，將數(shù)組以字串的形式返回 不僅能夠?qū)?shù)組轉(zhuǎn)換成字符串，布爾值也可以轉(zhuǎn)換，返回值之間默認(rèn)逗號(hào)分隔 語法：數(shù)組名.toString(); ?、?nbsp;push，向數(shù)組末尾追加數(shù)據(jù)，返回當(dāng)前數(shù)組的長度 可以向數(shù)組末尾添加一個(gè)或多個(gè)元素，返回值為追加元素后數(shù)組的長度length 語法：數(shù)組名 .push('item1', 'item2',…); ★ push方法會(huì)改變原數(shù)組內(nèi)容 ?、?nbsp;pop，刪除數(shù)組最后一個(gè)元素 返回值為刪除的這個(gè)元素 語法：數(shù)組名 .pop(); ★ pop方法會(huì)改變原數(shù)組內(nèi)容 ⑥ join，將數(shù)組轉(zhuǎn)換為字符串，默認(rèn)用逗號(hào)隔開 以給定的參數(shù)做為分隔符，將數(shù)組轉(zhuǎn)換為字符串，如果不設(shè)置參數(shù)，則默認(rèn)使用逗號(hào)分隔 語法：數(shù)組名 .join(' 分隔符 '); ⑦ shift()，刪除數(shù)組的第一個(gè)元素 返回值未刪除的這個(gè)元素 語法：數(shù)組名 .shift(); ★ shift方法也會(huì)對原數(shù)組造成影響 ?、?nbsp;unshift()，向數(shù)組前端添加元素 可以向數(shù)組最前端添加一個(gè)或多個(gè)元素，返回值為添加元素后數(shù)組的長度length 語法：數(shù)組名 .unshift('item1','item2',…); ★ unshift方法也會(huì)對原數(shù)組造成影響 ⑨ reverse，數(shù)組反轉(zhuǎn) 將數(shù)組中元素的順序反向排列 語法：數(shù)組名 .reverse(); //括號(hào)內(nèi)不需要任何參數(shù) ★ reverse方法也會(huì)改變原數(shù)組的結(jié)構(gòu) ⑩ slice，數(shù)組截取 slice方法能夠根據(jù)指定的開始和結(jié)束下標(biāo)，對數(shù)組進(jìn)行截取，并生成一個(gè)新的數(shù)組 新數(shù)組的內(nèi)容包括開始下標(biāo)對應(yīng)的元素到結(jié)束下標(biāo)對應(yīng)的前一個(gè)元素，即不包含結(jié)束下標(biāo)所對應(yīng)的元素本身 ★ 語法：數(shù)組名 .slice(index1,index2); //返回值未生成的數(shù)組 slice方法的參數(shù)可以是負(fù)數(shù)，-1代表最后一個(gè)元素，-2代表倒數(shù)第二個(gè)元素，以此類推 如果只寫一個(gè)參數(shù)，則表示對從當(dāng)前下標(biāo)對應(yīng)的元素一直到最后一個(gè)元素進(jìn)行截取 該方法不更改原數(shù)組！ ? splice，數(shù)組截取，并且可以插入新的元素（改變原數(shù)組） splice方法是根據(jù)指定的下標(biāo)和長度數(shù)，對數(shù)組進(jìn)行一定長度的截取，同時(shí)可以根據(jù)增加參數(shù)向數(shù)組中插入一些新元素 返回值為截取元素所構(gòu)成的數(shù)組 語法：數(shù)組名 .splice(index, removeCount, addItem1, addItem2,…); ★ splice方法會(huì)改變原數(shù)組的內(nèi)容 方法中插入新元素的參數(shù)不是必須設(shè)置，前兩個(gè)參數(shù)為必須 ? sort，數(shù)組排序 語法：數(shù)組名 .sort(sortby); 排序順序可以按編碼或數(shù)字，并按升序或降序 默認(rèn)按照數(shù)組中元素的編碼進(jìn)行排序，此時(shí)括號(hào)內(nèi)不需要設(shè)置參數(shù) 也可以設(shè)置sortby函數(shù)定義按數(shù)字排序，參數(shù)sortby必須是函數(shù)，通過函數(shù)指定升序或降序 ★ sort方法會(huì)改變原數(shù)組的內(nèi)容 ? indexOf，對數(shù)組進(jìn)行索引 在數(shù)組中從前向后檢索指定元素，返回值為元素在數(shù)組中第一次出現(xiàn)的下標(biāo)，如果沒有檢索到則返回 -1 indexOf方法的第二個(gè)參數(shù)表示從第幾個(gè)元素開始檢索，是可選參數(shù) 語法：數(shù)組名 .indexOf(item, beginIndex); 第二個(gè)參數(shù)可以設(shè)置負(fù)數(shù)，-1表示從最后一個(gè)（倒數(shù)第一個(gè)）元素開始向后查找 ? lastIndexOf，反序索引 在數(shù)組中從后向前檢索指定元素，返回值為元素在數(shù)組中最后一次出現(xiàn)的下標(biāo)，如果沒有檢索到則返回-1 lastIndexOf方法的第二個(gè)參數(shù)表示從第幾個(gè)元素開始檢索，是可選參數(shù) 語法：數(shù)組名 .lastIndexOf(item, beginIndex); 第二個(gè)參數(shù)可以為負(fù)數(shù)，-1表示從最后一個(gè)元素開始向前查找 ? concat，用于連接兩個(gè)或多個(gè)數(shù)組 語法：array1 .concat(array2,array3,...); ★ 該方法不會(huì)改變原數(shù)組，而僅僅返回連接數(shù)組的一個(gè)副本（新數(shù)組） <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.二維數(shù)組 如果數(shù)組的元素還是數(shù)組，那么外層數(shù)組就稱為二維數(shù)組 語法：var arr=[[array1], [array2], [array3]]; 二維數(shù)組有兩個(gè)下標(biāo)，第一個(gè)下標(biāo)表示外層數(shù)組的下標(biāo)，第二個(gè)下標(biāo)表示內(nèi)層數(shù)組的下標(biāo)，如 arr[1][0]; 二維數(shù)組是數(shù)組的一種特殊形式，數(shù)組的方法對二維數(shù)組任然生效 5.push、unshift練習(xí) <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練習(xí) <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>
|
|
|
