定義
數(shù)組，就是一組相關(guān)的值存儲(chǔ)在一塊連續(xù)的空間內(nèi)
一般的高級(jí)編程語(yǔ)言都有數(shù)組這種數(shù)據(jù)結(jié)構(gòu)
語(yǔ)法
數(shù)組有三種定義方式，如下
-
使用中括號(hào)直接定義數(shù)組
var array = [12,13,14,15,16,17] -
使用 new Array() 方法 傳入數(shù)組元素
var array = new Array('A', 'B','C','D','E') -
使用 new Array() 方法，傳入長(zhǎng)度， 這種不能賦值，只能指定長(zhǎng)度
// 這種方式只能定義數(shù)組的長(zhǎng)度是4（容納4個(gè)元素）， 但并沒有給4個(gè)元素賦初值， 這4個(gè)元素的初始值都是 undefined var array = new Array(4);
JS 的數(shù)組中的數(shù)據(jù)可以不是同一種數(shù)據(jù)類型
<script>
var array = ["A", 12, true];
console.log(array);
</script>
數(shù)組的長(zhǎng)度用 length屬性表示
<script>
var array = ["A", 12, true];
console.log(array.length);
</script>
取值
數(shù)組的取值需要有以下幾點(diǎn)注意
- 數(shù)組定義了下標(biāo)， 傳入下標(biāo)就可以得到某個(gè)值, 值得注意的是， 數(shù)組的下標(biāo)從0開始計(jì)數(shù)
<script>
var array = ["A", 12, true];
console.log(array[0]);
</script>
- 如果我們傳入了一個(gè)超過數(shù)組長(zhǎng)度的下標(biāo)， 則會(huì)返回 undefined
<script>
var array = ["A", 12, true];
console.log(array[3]);
</script>
改值
如果我們要修改數(shù)組當(dāng)中的某個(gè)元素， 我們只需要 用如下語(yǔ)法
<script>
var array = ["A", 12, true];
console.log(array);
array[0] = "B";// 修改數(shù)組中的值
console.log(array);
</script>
如果傳入的數(shù)組下標(biāo)對(duì)應(yīng)的位置本身沒有值， 則相當(dāng)于新增元素
<script>
var array = ["A", 12, true];
console.log(array);// 如果更改了不存在的項(xiàng)，則相當(dāng)于在此數(shù)組下標(biāo)下新增項(xiàng)目
array[5] = "B";
console.log(array);
</script>
數(shù)組作為一種復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，還定義了很多方法幫助我們存取值
| 方法 | 功能 |
|---|---|
| push | 在尾部插入新項(xiàng), 可以一次插入多個(gè)值 |
| pop | 彈出尾部數(shù)據(jù)（在數(shù)組中傷處） |
| unshift | 在頭部插入新元素 |
| shift | 在頭部刪除 |
下面是這些元素的示例
push 方法
<script>
var array = ["ABC", "EFG", "HIJ"];
array.push("EE");
array.push("CC", "DD");
console.log(array);
</script>
pop 彈出尾方法
<script>
var array = ["ABC", "EFG", "HIJ"];
console.log(array.pop());
console.log("after pop array：" + array);
</script>
unshift 數(shù)組頭部插入
<script>
var array = ["ABC", "EFG", "HIJ"];
array.unshift("kaka");
console.log("array:" + array);
</script>
<script>
var array = ["ABC", "EFG", "HIJ"];
console.log(array.shift());
console.log("array:" + array);
</script>
數(shù)組常用方法
在取值的小節(jié)中，我們已經(jīng)介紹過4個(gè)常用方法；事實(shí)上數(shù)組的常用方法遠(yuǎn)不止這些，下面我們來(lái)補(bǔ)充一些
splice 方法
常用于替換、插入、刪除現(xiàn)有數(shù)組元素
-
用于替換數(shù)組中的指定項(xiàng)
<script> var array = ["A", "B", "C", "D", "E", "F", "G", "H"]; // 第一個(gè)參數(shù) 2 表示從數(shù)組下標(biāo) 2 開始替換（包含數(shù)組下標(biāo)2） // 第二個(gè)參數(shù) 4 表示連續(xù)替換4項(xiàng)， 如果長(zhǎng)度大于 字符串剩余長(zhǎng)度， 則取剩余的全部 // 從第三個(gè)參數(shù)開始就是要替換成的內(nèi)容 // 返回值 resultArray 表示 已經(jīng)被替換掉的元素組成的數(shù)組，在本示例中就是 ['C', 'D', 'E', 'F'] var resultArray = array.splice(2, 4, "hello", "world", "akd"); console.log(array); </script> -
此方法還可以在指定位置插入元素
<script> var array = ["A", "B", "C", "D", "E", "F", "G", "H"]; // 第二個(gè)參數(shù)為 0 ，表示連續(xù)替換 0項(xiàng)， 也就是 從 數(shù)組下標(biāo)2開始連續(xù)插入 三個(gè)元素 var resultArray = array.splice(2, 0, "hello", "world", "akd"); console.log(array); console.log(resultArray); </script> -
刪除元素
<script> var array = ["A", "B", "C", "D", "E", "F", "G", "H"]; // 沒有指定的要替換的元素，也就是意味著要?jiǎng)h除 var resultArray = array.splice(2, 3); console.log(array); console.log(resultArray); </script>
slice 方法
常用于 從原有數(shù)組截取到一個(gè)子數(shù)組
-
slice(index1, index2) 方法 截取的子數(shù)組 從 下標(biāo) 為 index1 開始， 到下標(biāo) index2 （不包含index2） 結(jié)束， 并且不會(huì)更改原有數(shù)組
<script> var array = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; // 輸出 ['B', 'C', 'D'] var arraySlice = array.slice(1, 4); console.log("arraySlice:", arraySlice); // 原數(shù)組不會(huì)改變 ['A', 'B', 'C', 'D', 'E', 'F', 'G'] console.log("array:", array); </script> -
slice 如果不提供第二個(gè)參數(shù)（index2）, 則表示從指定索引位置開始到數(shù)組結(jié)束的所有元素都會(huì)截取成為子數(shù)組
<script> var array = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; var arraySplit = array.slice(1); // 輸出 ['B', 'C', 'D', 'E', 'F', 'G'] console.log("arraySplit:", arraySplit); // 輸出 ['A', 'B', 'C', 'D', 'E', 'F', 'G'] console.log("array:", array); </script> -
slice 方法的參數(shù)允許為負(fù)數(shù)， 表示數(shù)組的倒數(shù)第幾項(xiàng)（從右向左 -1 開始 -N結(jié)束）
<script> var array = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; var arraySplit = array.slice(-3, -1); // 輸出 ['E', 'F'] console.log("arraySplit:", arraySplit); console.log("array:", array); </script>
concat() 方法
合并多個(gè)數(shù)組，輸出為一個(gè)， 并且 concat 數(shù)組不會(huì)改變?cè)瓟?shù)組
<script>
var array1 = ['A', 'B', 'C'];
var array2 = ['D', 'E', 'F'];
var array3 = ['G', 'H', 'I'];
var resultArray = array1.concat(array2, array3);
console.log("resultArray:",resultArray);
console.log("原有array1:",array1);
</script>
reverse() 方法
將一個(gè)數(shù)組的順序取反
<script>
var array = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var arraySplit = array.reverse();
// 處處 ['G', 'F', 'E', 'D', 'C', 'B', 'A']
console.log("arraySplit:", arraySplit);
console.log("array:", array);
</script>
indexOf() 方法
給定一個(gè)數(shù)組元素，搜索下標(biāo)，如果元素不存在，則返回-1
<script>
var array = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var index = array.indexOf('C');
// 輸出索引 2
console.log("index:", index);
</script>
includes()方法
給定一個(gè)數(shù)組元素，判斷數(shù)組中是否包含此值，返回布爾類型值
<script>
var array = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var exists = array.includes('C');
// 輸出 true
console.log("exists:", exists);
</script>
排序
數(shù)組排序，就是將一個(gè)無(wú)序的數(shù)組變成一個(gè)有序數(shù)組， 例如 [2， 1， 3] 排序過后 變成 [1, 2, 3]
數(shù)組自帶排序的方法， 這個(gè)方法就是 sort函數(shù)。
sort 排序就是將所有數(shù)組元素轉(zhuǎn)換成字符串，并按照他們的UTF-16碼元值升序排序
sort 函數(shù)是在原有基礎(chǔ)上做的排序， 所以會(huì)影響到原數(shù)組的順序
基本的使用
<script>
var array = [9,2,3,1,8,7,6,5,4];
array.sort();
console.log("array:", array);
</script>
sort 也可以傳入以 函數(shù)作為參數(shù)（函數(shù)作為重要的知識(shí)，我們會(huì)在后面講到）
傳入函數(shù)的作用是影響排序規(guī)則， 排序無(wú)非由兩種 升序（[1,2,3] ） 和 降序 （[3, 2, 1]）
<script>
var array = [9,2,3,1,8,7,6,5,4];
// 下面的函數(shù)更加執(zhí)行結(jié)果 如果 大于 0 則 升序排列， 如果 小于 0 ， 則降序排列
// function(a, b){
// return b-a;
//}
var sortArray = array.sort(function(a, b){
return b-a;
});
console.log("array:", array);
</script>
如果數(shù)組包含空槽（即某些地方?jīng)]有填值被undefined占據(jù)）， 排序后所有的空槽都會(huì)被移動(dòng)到數(shù)組尾部
<script>
var array = [9,2,3,1,8,7,6,5,undefined,4,undefined];
array.sort();
// 輸出 [1, 2, 3, 4, 5, 6, 7, 8, 9, undefined, undefined]
console.log(array);
</script>
如果既希望排序后的結(jié)果是一個(gè)新數(shù)組，并不影響原來(lái)的數(shù)組，可以使用 toSorted方法， toSorted方法其他的特性和 sort 方法一樣
<script>
var array = [9,2,3,1,8,7,6,5,4];
var sortedArray = array.toSorted();
console.log('sortedArray:', sortedArray);
console.log('array:', array);
</script>
關(guān)于數(shù)組排序，還有很多相關(guān)的算法，比如冒泡排序， 快速排序， 這些排序算法因?yàn)樾时容^低，在工作中很難應(yīng)用，所以這部分內(nèi)容我們本節(jié)就不涉及了，如果有緣，以后可能會(huì)水一篇
遍歷
數(shù)組遍歷 就是將數(shù)組 從頭到尾循環(huán)一遍
數(shù)組遍歷有很多現(xiàn)實(shí)意義，舉個(gè)例子，遍歷一個(gè)數(shù)值型數(shù)組，找到當(dāng)中的最大值。
<script>
// 生成一個(gè)隨機(jī)數(shù)組
var array = [];
// 生成一個(gè)隨機(jī)數(shù)組
for(var i = 0 ; i < 10 ; i++) {
array.push(Math.floor(Math.random(10) * 10));
}
console.log(array);
// 遍歷找到最大值
var maxValue = null;
for(var i= 0; i < array.length ; i++) {
if(maxValue == null || array[i] > maxValue) {
maxValue = array[i];
}
}
console.log('最大值為:', maxValue)
</script>
數(shù)組類型檢測(cè)
如果用 typeof 去檢測(cè)數(shù)組，則返回的結(jié)果是object
實(shí)際工作中，可以用 Array.isArray() 方法來(lái)檢測(cè)一個(gè)變量是否是數(shù)組
<script>
var array = [12, 3, 3, 3];
var flag1 = Array.isArray(array);
var flag2 = typeof array;
// true object
console.log(flag1, flag2);
var array = [];
// true
console.log(Array.isArray(array));
</script>
數(shù)組和字符串轉(zhuǎn)換
一個(gè)字符串可以調(diào)用 split 方法轉(zhuǎn)換成數(shù)組
一個(gè)數(shù)組可以使用 join 方法轉(zhuǎn)換成字符串
字符串轉(zhuǎn)數(shù)組
字符串的 split 函數(shù)傳入 分隔符， 就可以分割一個(gè)字符串為數(shù)組
<script>
var str = 'ABCDEFG';
console.log(str.split(''));
var str1 = 'A-B-C-D-E-F-G';
console.log(str1.split('-'));
</script
數(shù)組轉(zhuǎn)字符串
數(shù)組的 join 函數(shù)傳入 連接符， 就可以將一個(gè)數(shù)組轉(zhuǎn)換成字符串
<script>
var array = ['A', 'B', 'C', 'D', "E"];
console.log(array.join('-'));
console.log(array.join(''));
// 默認(rèn)以逗號(hào)分隔
console.log(array.join());
</script>
二維數(shù)組
以普通數(shù)據(jù)類型作為數(shù)組元素的叫一維數(shù)組，那么以數(shù)組作為元素的就叫做 二維數(shù)組
<script>
// 以下是一個(gè)二維數(shù)組的定義
var array = [
['A','B', 'C'],
['D','E', 'F']
];
console.log(array)
</script>
查看上面代碼的輸出結(jié)果
取值
如上面那個(gè)例子，我們想取出打印出元素’F‘應(yīng)該怎么做？
第一步，我們需要找到 F 元素所在內(nèi)層數(shù)組在外層的數(shù)組的下標(biāo)值， 通過觀察為 1
第二步，我們需要找到 F 元素在內(nèi)層數(shù)組 的下標(biāo)值， 通過觀察為 2
所以打印出 E 元素的代碼如下
<script>
// 以下是一個(gè)二維數(shù)組的定義
var array = [
['A','B', 'C'],
['D','E', 'F']
];
console.log(array)
</script>
遍歷
由數(shù)組定義的例子可以看到，二維數(shù)組就是數(shù)組嵌套數(shù)組的形式
那么，如果我們想把二維數(shù)組最內(nèi)層的元素逐個(gè)遍歷出來(lái)， 就需要遍歷兩次，外層數(shù)組遍歷一次，內(nèi)層的數(shù)組也要逐個(gè)遍歷。
<script>
var array = [
['A','B', 'C'],
['D','E', 'F']
];
for(var i = 0 ; i < array.length ; i++) {
for(var j = 0 ; j < array[i].length ; j++) {
console.log(array[i][j])
}
}
</script>
既然有二維數(shù)組，肯定有三維數(shù)組、四維數(shù)組 等等，我們統(tǒng)稱為多維數(shù)組。
事實(shí)上，多維數(shù)組在工作中不太能用的到，既然學(xué)會(huì)了二維數(shù)組，那就等于學(xué)會(huì)了多維數(shù)組。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-707981.html
總結(jié)
此篇水文，我們介紹了如下內(nèi)容， 這里再啰嗦下文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-707981.html
- 數(shù)組的定義和取值
- 數(shù)組的常用方法
- 數(shù)組的遍歷
- 數(shù)組的排序
- 二維數(shù)組
到了這里，關(guān)于Js基礎(chǔ)-復(fù)雜數(shù)據(jù)類型之?dāng)?shù)組的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
