站長(zhǎng)資訊網(wǎng)
在javascript中，數(shù)組是有序數(shù)據(jù)的集合，用于對(duì)大量數(shù)據(jù)進(jìn)行存儲(chǔ)，可以一次性存儲(chǔ)多個(gè)數(shù)據(jù)，并且數(shù)組的長(zhǎng)度可以動(dòng)態(tài)的調(diào)整；通過使用數(shù)組，可以在很大程度上縮短和簡(jiǎn)化程序代碼，從而提高應(yīng)用程序的效率。
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
JavaScript 數(shù)組（Array）是有序數(shù)據(jù)的集合，數(shù)組中的每個(gè)成員被稱為元素（Element），每個(gè)元素的名稱（鍵）被稱為數(shù)組下標(biāo)（Index）。數(shù)組的長(zhǎng)度是彈性的、可讀寫的；即數(shù)組的長(zhǎng)度可以動(dòng)態(tài)的調(diào)整。
數(shù)組的作用：對(duì)大量數(shù)據(jù)進(jìn)行存儲(chǔ)，可以一次性存儲(chǔ)多個(gè)數(shù)據(jù)。通過使用數(shù)組，可以在很大程度上縮短和簡(jiǎn)化程序代碼，從而提高應(yīng)用程序的效率。
在 JavaScript 中，您可以使用 Array 對(duì)象定義數(shù)組，此外，Array 對(duì)象中還提供了各種有關(guān)數(shù)組的屬性和方法。
數(shù)組的定義: Array 簡(jiǎn)寫: arr
數(shù)組是JS中的一個(gè)數(shù)據(jù)容器。它是引用類型之一。
它的作用非常簡(jiǎn)單，就是用來裝多個(gè)數(shù)據(jù),并且數(shù)組的長(zhǎng)度可以動(dòng)態(tài)的調(diào)整。
數(shù)組創(chuàng)建的方式:
-
字面量
-
構(gòu)造函數(shù)
字面量語法：var 數(shù)組名 = [成員1, 成員2, 成員3, …] ;
數(shù)組元素之間,逗號(hào)隔開;
構(gòu)造函數(shù)語法： var 數(shù)組名 = new Array(成員1, 成員2, 成員3, …) (至少要是有兩個(gè)或兩個(gè)以上的數(shù)組元素;) 小bug:當(dāng)參數(shù)只有一個(gè)且參數(shù)的類型是數(shù)字時(shí) ,會(huì)被當(dāng)做數(shù)組的長(zhǎng)度 ;
var arr = new Arry(5); console.log(arr); 輸出結(jié)果是:
var數(shù)組名= new Array() ;
var arr = new Array ();//創(chuàng)建一個(gè)新的空數(shù)組
注意Array 0 ，A要大寫
數(shù)組由兩部分組成：
1:索引(也叫下標(biāo)) ,下標(biāo)從0開始;
2.成員(數(shù)組元素): 成員沒有任何限制,可以是任意類型的數(shù)據(jù);可以是字符串 可以是數(shù)字 可以是布爾值 可以是 undefined 可以是null 還可以是數(shù)組;
獲取數(shù)組元素:
數(shù)組的取值: 數(shù)組名[下標(biāo)] ; 下標(biāo)從零開始的;
// 格式：數(shù)組名[下標(biāo)] 下標(biāo)又稱索引
// 功能：獲取數(shù)組對(duì)應(yīng)下標(biāo)的那個(gè)值，如果下標(biāo)不存在，則返回undefined。
var arr = ['red',, 'green', 'blue'];0 1 2
console.log(arr[0]); // red
console.log(arr[2]); // blue
aconsole.log(arr[3]); // 這個(gè)數(shù)組的最大下標(biāo)為2,沒有這個(gè)數(shù)組元素所以輸出的結(jié)果是undefined;
通過索引 添加成員/修改成員:
// 構(gòu)造函數(shù)定義一個(gè)數(shù)組 var arr = new Array('張三', '李四', '王五', '趙六') // 添加成員 arr[4] = '龔七' console.log(arr) //張三', '李四', '王五', '趙六','龔七' // 修改成員 arr[0] = '王老五' console.log(arr) //'王老五', '李四', '王五', '趙六'特殊情況: 通過索引 多設(shè)置成員, 中間會(huì)有斷開,為空; 禁止!
var arr = ["a", "b"];
arr[5] = "good";
console.log(arr); //
遍歷數(shù)組:
數(shù)組的屬性length,就是數(shù)組成員的個(gè)數(shù);
數(shù)組名.length
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
length表示數(shù)組的長(zhǎng)度 它會(huì)跟著數(shù)組實(shí)時(shí)發(fā)生變化(動(dòng)態(tài)監(jiān)測(cè)數(shù)組元素的個(gè)數(shù))
console.log(arr.length) //數(shù)組成員的個(gè)數(shù): 8
length屬性可讀可寫 它也會(huì)影響數(shù)組的成員個(gè)數(shù) 但是我們一般不會(huì)主動(dòng)修改該屬性;
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.length = 3;
console.log(arr.length);
console.log(arr);
數(shù)組元素求和,求平均值:
求數(shù)組元素的最大值:
數(shù)組元素轉(zhuǎn)字符串,并分割開: 推薦: 數(shù)組名.join("連接符")
求數(shù)組中大于10的成員,并挑選出來:
數(shù)組元素的倒敘:
數(shù)組元素的增刪改查;
unshift 頭增 數(shù)組名.unshift("value")
作用：頭部增加 (可以增加多個(gè))
參數(shù):添加的成員,可以是多個(gè);
返回值：數(shù)組的新長(zhǎng)度
var arr = ['張三', '李四', '王五', '趙六']; var result = arr.unshift('王二',劉一) console.log(result); // 6 console.log(arr); // ["王二", "劉一","張三", "李四", "王五", "趙六"]
push 尾增 數(shù)組名.push("value")
作用：尾部增加 (可以增加多個(gè))
參數(shù):添加的成員,可以是多個(gè);
返回值：數(shù)組的新長(zhǎng)度
var arr = ['張三', '李四', '王五', '趙六']; var result = arr.push('王二',"劉一") console.log(result); // 6 console.log(arr); // ["張三", "李四", "王五", "趙六", "王二","劉一"]
shift 頭刪 數(shù)組名.shift() 只刪除第一個(gè),()括號(hào)內(nèi)為空;
作用：刪除數(shù)組的頭部第一項(xiàng)
參數(shù):無;
返回值：被刪除的那一項(xiàng)
var arr = ['張三', '李四', '王五', '趙六']; var result = arr.shift() console.log(result); // 張三 console.log(arr) // ['李四', '王五', '趙六'];
pop 尾刪 數(shù)組名.pop() 只刪除最后一個(gè),()括號(hào)內(nèi)為空;
作用：刪除數(shù)組最后一項(xiàng);
參數(shù):無;
返回值：被刪除的那一項(xiàng)
var arr = ['張三', '李四', '王五', '趙六']; var result = arr.pop(); console.log(result); // 趙六 console.log(arr) //["張三", "李四", "王五"]
concat 拼接,合并; 數(shù)組名.concat("value")
作用：合并
參數(shù)：任意個(gè)、任意類型
返回值：一個(gè)新的合并后的數(shù)組
特點(diǎn)：沒有改變?cè)瓉淼臄?shù)組
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var newArr = arr1.concat(arr2, "good", true, 1);
console.log(arr1); // 1,2,3
console.log(arr2); //4,5,6
console.log(newArr); //1, 2, 3, 4, 5, 6, "good", true, 1
slice 截取 數(shù)組名.slice(start,end) 參數(shù)是下標(biāo); 包括開頭,不包括結(jié)尾;
slice的本質(zhì)是復(fù)制(淺復(fù)制)
作用：截取
參數(shù)：
沒有參數(shù) 截取全部
一個(gè)參數(shù) 從指定位置截取到最后(包括最后)
兩個(gè)參數(shù) 從指定開始位置截取到指定的結(jié)束位置 1. 這兩個(gè)參數(shù)都是下標(biāo) 2. 開始位置(包含) 3. 結(jié)束位置(不包含) 4. 第二個(gè)參數(shù)要比第一個(gè)大;
參數(shù)可以是負(fù)數(shù),負(fù)數(shù)是從后面開始,最后一個(gè)是-1;
特點(diǎn)：不改變?cè)瓟?shù)組
沒有參數(shù) (截取全部的)
var arr = ['張三', '李四', '王五', '趙六'];
var arr1 = arr.slice();
console.log(arr1) // ["張三", "李四", "王五", "趙六"]一個(gè)參數(shù) (從指定位置截取到最后(包括最后))
var arr = ['張三', '李四', '王五', '趙六'];
var arr2 = arr.slice(1);
console.log(arr2) // ["李四", "王五", "趙六"]兩個(gè)參數(shù) (包括開始,不包括結(jié)尾)
var arr = ['張三', '李四', '王五', '趙六'];
var arr3 = arr.slice(1, 3);
console.log(arr3) // ["李四", "王五"]參數(shù)為負(fù)數(shù); (還是第二個(gè)參數(shù)要比第一個(gè)大)
var arr = ['張三', '李四', '王五', '趙六','劉一'];
var arr3 = arr.slice(-3, -1);
console.log(arr3) // ["王五","趙六"]PS: 如果參數(shù)是負(fù)數(shù) 那么表示從后往前數(shù) 最后一個(gè)值是-1
splice 操作數(shù)組 數(shù)組名.splice(參數(shù)1,參數(shù)2,參數(shù)3)
作用：用于操作數(shù)組成員
參數(shù)：
- 參數(shù)1:操作開始位置; (從第幾個(gè)索引號(hào)后開始, 可以看成直接從順序的第幾個(gè)后開始的)
- 參數(shù)2:刪除的成員個(gè)數(shù); (為0,是添加)
- 參數(shù)3:從第三個(gè)參數(shù)開始是添加的成員;
返回值：被刪除的那些成員組成的數(shù)組
特點(diǎn)：會(huì)改變?cè)瓟?shù)組
// 刪除 var arr = ['張三', '李四', '王五', '趙六']; var result = arr.splice(1, 2) console.log(result); // ["李四", "王五"] console.log(arr); // ["張三", "趙六"] ---------------------------------------------------------------------- // 插入 第二個(gè)參數(shù)為0; var arr = ['張三', '李四', '王五', '趙六']; var result = arr.splice(2, 0, '小綿羊'); console.log(result); // [] console.log(arr) // ["張三", "李四", "小綿羊", "王五", "趙六"] ------------------------------------------------------------------------ // 替換 第一個(gè)參數(shù)從哪里開始, 第二個(gè)參數(shù)刪除幾個(gè),第三個(gè)參數(shù)...添加的新成員; var arr =['張三', '李四', '王五', '趙六']; var result = arr.splice(2, 1, '小綿羊', '大綿羊'); console.log(result); // ["王五"] console.log(arr) // ["張三", "李四", "小綿羊", "大綿羊","趙六"]———————————————————————————————–
如果只有一個(gè)參數(shù) 則第二個(gè)參數(shù)默認(rèn)為刪除所有;
var arr = ['張三', '李四', '王五', '趙六'];
var result = arr.splice(2);
console.log(result); // ["王五","趙六"]
console.log(arr) // ["張三", "李四"]
indexOf 數(shù)組名.indexOf("數(shù)組元素")
作用： 查找
參數(shù)：被查找的成員;
返回值：下標(biāo)(索引); 若有該成員返回該索引; 若沒有就返回-1
var arr = ["a", "b", "c", "d", "e", "f"];
var idx = arr.indexOf("d"); //3
var idx = arr.indexOf("aa"); //-1
console.log(idx);
join 數(shù)組名.join("連接符")
作用：轉(zhuǎn)字符串
返回值：數(shù)組元素變成字符串類型,鏈接符相連;
參數(shù)： 拼接符號(hào)(可選)
數(shù)組名.join() 不寫內(nèi)容,默認(rèn)是逗號(hào), ;
數(shù)組名.join(''), '' 沒有空格隔開, 數(shù)組直接相連;
數(shù)組名.join(' ') 空格隔開, 空格
數(shù)組名.join('*')
var arr =['張三', '李四', '王五', '趙六']; var str = arr.join(); console.log(str); // 張三,李四,王五,趙六 var str1 = arr.join('+'); console.log(str1); // 張三+李四+王五+趙六 var str2 = arr.join('❤'); console.log(str2); // 張三❤李四❤王五❤趙六//返回值是數(shù)組元素變成字符串,并連接符相連;
reverse 數(shù)組倒敘 數(shù)組名.reverse() 括號(hào)內(nèi)不跟參數(shù);
作用：將數(shù)組的成員倒序
返回值：倒敘的原數(shù)組
參數(shù)：無
特點(diǎn)：會(huì)改變?cè)瓟?shù)組
var arr =['張三', '李四', '王五', '趙六']; console.log(arr) // ["張三", "李四", "王五", "趙六"] var arr1 = arr.reverse(); console.log(arr1) // ["趙六", "王五", "李四", "張三"] console.log(arr === arr1) // trueconsole.log(arr) // ["趙六", "王五", "李四", "張三"] //會(huì)改變?cè)瓟?shù)組;
其他方法:
sort 排序 數(shù)組名.sort(函數(shù)) 升序或降序
作用：將數(shù)組成員按照指定規(guī)則排序
返回值：排序后原數(shù)組
參數(shù)：規(guī)則函數(shù); 不跟參數(shù)(//不跟參數(shù),會(huì)先轉(zhuǎn)為字符串,然后按照ascii碼排序首字母排;)
特點(diǎn)：會(huì)改變?cè)瓟?shù)組
var arr = [89, 96, 45, 66, 78, 3, 100, 1];
arr.sort(function(a, b) {
return a – b; // 升序
});
console.log(arr); // [1, 3, 45, 66, 78, 89, 96, 100];
————————————————————————-
var arr = [89, 96, 45, 66, 78, 3, 100, 1];
arr.sort(function(a, b) {
return b – a; // 降序
});
console.log(arr); // [100, 96, 89, 78, 66, 45, 3, 1];
————————————————————–
var arr = [89, 96, 45, 66, 78, 3, 100, 1];
arr.sort(); //不跟參數(shù),會(huì)先轉(zhuǎn)為字符串,然后按照ascii碼排序首字母排;
console.log(arr); //[1, 100, 3, 45, 66, 78, 89, 96]
交換兩個(gè)變量的值
var a = 4; var b = 5; // 交換兩個(gè)變量的值要借助第三個(gè)變量 var c = b; b = a; a = c; console.log(a); // 5 console.log(b); // 4
數(shù)組的冒泡排序
for (var j = 0; j < arr.length – 1; j++) {
for (var i = 0; i < arr.length – 1 – j; i++) {
if (arr[i] > arr[i + 1]) {
var temp = arr[i];
arr[i] = arr[i + 1];
arr[i + 1] = temp;
}
}
}———————————————————-
要排序 就要比較大小
先拿著第一個(gè)數(shù)字與第二個(gè)比 如果第一個(gè)大 則交換位置 比完之后 數(shù)組的第二個(gè)位置的數(shù)字一定比第一個(gè)大
再拿著第二個(gè)與第三個(gè)比 比完之后 數(shù)組的第三個(gè)肯定比第二個(gè)位置的數(shù)要大
以此類推 一輪比完之后 最后的數(shù)字一定是最大的
第二輪從頭繼續(xù)比較 第二輪結(jié)束之后 可以確定第二個(gè)最大的數(shù)字
第三輪…
至最后.
// // 外層循環(huán) 決定了內(nèi)層循環(huán)的執(zhí)行次數(shù)
for (var j = 0; j < arr.length – 1; j++) {
// 內(nèi)層循環(huán) 兩兩比較
for (var i = 0; i < arr.length – 1 – j; i++) {
/ / 判定 如果前面大 后面小 則交換
if (arr[i] > arr[i + 1]) {
var temp = arr[i];
arr[i] = arr[i + 1];
arr[i + 1] = temp;
}
}
}
二維數(shù)組
一個(gè)數(shù)組的每一個(gè)成員也是數(shù)組，這就叫做二維數(shù)組。
一維數(shù)組： [1, 2, 3, 4, 5, 6]
二維數(shù)組：
[
[1, 2, 3, 4, 5, 6],
[1, 2, 3, 4, 5, 6],
[1, 2, 3, 4, 5, 6]
…
]
清空數(shù)組的方法:
// 方式1 推薦
arr = [ ];
// 方式2
arr.length = 0;
// 方式3
arr.splice(0, arr.length);
【推薦學(xué)習(xí)：javascript高級(jí)教程】
