建站
咨詢
售后
建站咨詢
新聞中心
Array對(duì)象
站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到郁南網(wǎng)站設(shè)計(jì)與郁南網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋郁南地區(qū)。
之前一直在溫故js系列，希望能夠知新，不過(guò)最近應(yīng)業(yè)務(wù)要求，在做移動(dòng)WEB，需求大，任務(wù)多。所以，只有像現(xiàn)在閑著的時(shí)候才能繼續(xù)溫故js了。
在 JavaScript 中 Array 是一個(gè)用來(lái)構(gòu)造數(shù)組的全局對(duì)象，它是一個(gè)高階的類似有序列表的對(duì)象，是JavaScript內(nèi)置對(duì)象里非常重要的一個(gè)。
創(chuàng)建數(shù)組：
數(shù)組字面量
- var arr = [];
- var arr = [1, 2, 3];
- var arr = [[1],2,[2,[123]]];
數(shù)組構(gòu)造函數(shù)
- var arr = new Array(); //[]
- var arr = new Array(1,2,3); //[1, 2, 3]
- var arr = new Array(3); //[undefined,undefined,undefined] 參數(shù)3為數(shù)組length
- var arr = new Array([1],2,[2,[123]]); //[[1],2,[2,[123]]]
建議使用數(shù)組字面量方式，性能好，代碼少，簡(jiǎn)潔，畢竟代碼少。
Array屬性
length屬性
length屬性返回?cái)?shù)組的長(zhǎng)度，是一個(gè)可變屬性，表示一個(gè)數(shù)組中的元素個(gè)數(shù)。
數(shù)組的索引由0開(kāi)始，所以一個(gè)數(shù)組的最前和***的值為限分別是：arr[0]和arr[arr.length-1]
- var arr = [1,2,3];
- arr.length // 3
- arr.length = 2; //改變數(shù)組length，從后往前截取
- arr // [1,2],此時(shí)arr.length為2。所以平時(shí)我們可以用length來(lái)操作數(shù)組（刪除，添加）
- arr.length = 4;
- arr // // [1,2,undefined,undefined],此時(shí)arr.length為2,后面填充undefined
prototype屬性
prototype屬性返回對(duì)象類型原型的引用，所有的數(shù)組實(shí)例都繼承了這個(gè)屬性，所有的數(shù)組方法都定義在 Array.prototype 身上。一般來(lái)說(shuō)，我們經(jīng)常用prototype屬性來(lái)擴(kuò)展數(shù)組方法：
- //給數(shù)組添加個(gè)方法，返回?cái)?shù)組中的***值
- Array.prototype.max = function() {
- return Math.max.apply(null,this);
- }
- [1,2,3,4].max(); //4
- //給數(shù)組添加個(gè)方法，給數(shù)組去重
- Array.prototype.unique = function() {
- return this.filter((item, index, arr) => arr.indexOf(item) === index);
- }
- [11,2,1,1,2,3,1,2,4,5,23,2].unique(); //[11, 2, 1, 3, 4, 5, 23]
數(shù)組去重：數(shù)組去重演化
constructor屬性
constructor屬性返回創(chuàng)建對(duì)象的函數(shù)，即構(gòu)造函數(shù)。如下：
- var arr = [1,2,3];
- arr.constructor //function Array() { [native code] }
- arr.constructor === Array //true 即 new Array
- var a = new Array();
- a.constructor === Array //true
對(duì)于數(shù)組來(lái)說(shuō)，這個(gè)屬性還是罕見(jiàn)使用的。
數(shù)組判斷
Array.isArray()
Array.isArray() 方法用來(lái)判斷某個(gè)值是否為Array。如果是，則返回 true，否則返回 false
- Array.isArray([]); //true
- Array.isArray([1,2,3]); //true
- Array.isArray(new Array()); //true
- Array.isArray(); //false
- Array.isArray({}); //false
- Array.isArray(123); //false
- Array.isArray('xzavier'); //false
利用屬性自己寫(xiě)方法
Array.isArray()在ES5之前不支持，就自己寫(xiě)。不過(guò)現(xiàn)在都到ES6了，可以不管了。
- Array.prototype.isArray = Array.prototype.isArray || function() {
- return Object.prototype.toString.call(this) === "[object Array]";
- }
- [1,2,3].isArray(); //true
數(shù)組遍歷
經(jīng)典的for
- for (var index = 0; index < arr.length; index++) {
- console.log(arr[index]);
- }
這種寫(xiě)法很經(jīng)典，就是語(yǔ)句多，但是性能好。
ES5的forEach
- arr.forEach(function (value) {
- console.log(value);
- });
這種寫(xiě)法簡(jiǎn)潔，但這種方法也有一個(gè)小缺陷：你不能使用break語(yǔ)句中斷循環(huán)，也不能使用return語(yǔ)句返回到外層函數(shù)。
不建議的for-in
- for (var i in arr) {
- console.log(arr[i]);
- }
for-in是為普通對(duì)象設(shè)計(jì)的，你可以遍歷得到字符串類型的鍵，因此不適用于數(shù)組遍歷。但是它能遍歷數(shù)組，作用于數(shù)組的for-in循環(huán)體除了遍歷數(shù)組元素外，還會(huì)遍歷自定義屬性。舉個(gè)例子，如果你的數(shù)組中有一個(gè)可枚舉屬性arr.name，循環(huán)將額外執(zhí)行一次，遍歷到名為“name”的索引。就連數(shù)組原型鏈上的屬性都能被訪問(wèn)到。所以，不建議使用。
ES6的for-of
- for (var value of arr) {
- console.log(value); // 1 2 3
- }
這是最簡(jiǎn)潔、最直接的遍歷數(shù)組元素的語(yǔ)法。這個(gè)方法避開(kāi)了for-in循環(huán)的所有缺陷。與forEach()不同的是，它可以正確響應(yīng)break、continue和return語(yǔ)句。
- for (var value of arr) {
- if(value == 2){break;}
- console.log(value); //1
- }
數(shù)組方法細(xì)說(shuō)
splice插入、刪除、替換
splice() 方法可以插入、刪除或替換數(shù)組的元素，注意：同時(shí)改變了原數(shù)組。
1.刪除-刪除元素，傳兩個(gè)參數(shù)，要?jiǎng)h除***項(xiàng)的位置和第二個(gè)要?jiǎng)h除的項(xiàng)數(shù)
2.插入-向數(shù)組指定位置插入任意項(xiàng)元素。三個(gè)參數(shù)，***個(gè)參數(shù)(位置)，第二個(gè)參數(shù)(0)，第三個(gè)參數(shù)(插入的項(xiàng))
3.替換-向數(shù)組指定位置插入任意項(xiàng)元素，同時(shí)刪除任意數(shù)量的項(xiàng)，三個(gè)參數(shù)。***個(gè)參數(shù)(起始位置)，第二個(gè)參數(shù)(刪除的項(xiàng)數(shù))，第三個(gè)參數(shù)(插入任意數(shù)量的項(xiàng))
- var arr = ["q","w","e"];
- //刪除
- var removed = arr.splice(1,1);
- console.log(arr); //q,e 已被改變
- console.log(removed); //w ,返回刪除的項(xiàng)
- //插入
- var insert = arr.splice(0,0,"r"); //從第0個(gè)位置開(kāi)始插入
- console.log(insert); //返回空數(shù)組
- console.log(arr); //r,q,e
- //替換
- var replace = arr.splice(1,1,"t"); //刪除一項(xiàng)，插入一項(xiàng)
- console.log(arr); //r,t,e
- console.log(replace); //q,返回刪除的項(xiàng)
sort 排序
sort() 方法對(duì)數(shù)組的元素做原地的排序，并返回這個(gè)數(shù)組。
- var arr = [1,2,4,3,1,1,2];
- console.log(arr.sort());//[1, 1, 1, 2, 2, 3, 4]
然而：
- var arr = [1,2,10,4,3,1,1,2];
- console.log(arr.sort());//[1, 1, 1, 10, 2, 2, 3, 4]
這是因?yàn)閟ort排序可能是不穩(wěn)定的，默認(rèn)按照字符串的Unicode碼位點(diǎn)排序。
但是，sort()方法接受一個(gè)參數(shù)，這個(gè)參數(shù)是一個(gè)函數(shù)，可選，用來(lái)指定按某種順序進(jìn)行排列的函數(shù)。如果省略，元素按照轉(zhuǎn)換為的字符串的諸個(gè)字符的Unicode位點(diǎn)進(jìn)行排序。
- var arr = [1,2,10,4,3,1,1,2];
- console.log(arr.sort(function(a,b){
- return a-b;
- })); // [1, 1, 1, 2, 2, 3, 4, 10]
這個(gè)函數(shù)就是我們自己控制了，我們想要什么樣的排序就改變這個(gè)參數(shù)函數(shù)的邏輯即可。
slice截取、轉(zhuǎn)化arguments偽數(shù)組
slice()方法可從已有的數(shù)組中返回選定的元素?cái)?shù)組。不會(huì)修改原數(shù)組，只會(huì)會(huì)淺復(fù)制數(shù)組的一部分到一個(gè)新的數(shù)組，并返回這個(gè)新數(shù)組。
語(yǔ)法：arrayObject.slice(start,end) 參數(shù)可為正負(fù)。
- start 必需。規(guī)定從何處開(kāi)始選取。如果是負(fù)數(shù)，那么它規(guī)定從數(shù)組尾部開(kāi)始算起的位置。也就是說(shuō)，-1 指***一個(gè)元素，-2 指倒數(shù)第二個(gè)元素，以此類推。
- end 可選。規(guī)定從何處結(jié)束選取。該參數(shù)是數(shù)組片斷結(jié)束處的數(shù)組下標(biāo)。如果沒(méi)有指定該參數(shù)，那么切分的數(shù)組包含從 start 到數(shù)組結(jié)束的所有元素。
- 如果這個(gè)參數(shù)是負(fù)數(shù)，那么它規(guī)定的是從數(shù)組尾部開(kāi)始算起的元素。
- var arr = [1,2,3,4,5];
- arr.slice(0,3); // [1,2,3]
- arr.slice(3); // [4,5]
- arr.slice(1,-1); // [2,3,4]
- arr.slice(-3,-2); // [3]
- var arr1 = arr.slice(0); //返回?cái)?shù)組的拷貝數(shù)組，是一個(gè)新的數(shù)組，不是賦值指向
slice方法經(jīng)常用來(lái)截取一個(gè)數(shù)組，不過(guò)它更常用在將偽數(shù)組轉(zhuǎn)化為真數(shù)組。平時(shí)我們的函數(shù)傳的參數(shù)arguments是一個(gè)偽數(shù)組，很多數(shù)組的方法不能使用，我們就需要將偽數(shù)組轉(zhuǎn)化為真數(shù)組。
- function test() {
- var arr = arguments;
- arr.push('xza');
- console.log(JSON.stringify(arr));
- }
- test(1,2,3); //arr.push is not a function(…) 因?yàn)閭螖?shù)組沒(méi)有push方法
- 轉(zhuǎn)換后：
- function test() {
- var arr = Array.prototype.slice.call(arguments);
- arr.push('xza');
- console.log(JSON.stringify(arr));
- }
- test(1,2,3); //[1,2,3,"xza"]
filter 過(guò)濾
filter() 方法使用指定的函數(shù)測(cè)試所有元素，并創(chuàng)建一個(gè)包含所有通過(guò)測(cè)試的元素的新數(shù)組。簡(jiǎn)單來(lái)說(shuō)就是對(duì)數(shù)組進(jìn)行過(guò)濾，返回一個(gè)過(guò)濾過(guò)的數(shù)組。
語(yǔ)法：array.filter(function(currentValue,index,arr), thisValue)
- function(currentValue, index,arr) 必須。函數(shù)，數(shù)組中的每個(gè)元素都會(huì)執(zhí)行這個(gè)函數(shù)
- 函數(shù)的三個(gè)參數(shù):currentValue必須，當(dāng)前元素的值； index可選，當(dāng)期元素的索引值； arr可選，當(dāng)期元素屬于的數(shù)組對(duì)象
- thisValue 可選。對(duì)象作為該執(zhí)行回調(diào)時(shí)使用，傳遞給函數(shù)，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"
- //用filter給數(shù)組添加個(gè)方法，給數(shù)組去重
- Array.prototype.unique = function() {
- return this.filter((item, index, arr) => arr.indexOf(item) === index);
- }
- [11,2,1,1,2,3,1,2,4,5,23,2].unique(); //[11, 2, 1, 3, 4, 5, 23]
filter() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)，不會(huì)改變?cè)紨?shù)組。
concat 連接數(shù)組
- var arr1 = [1,2,3];
- var arr2 = [4,5,6];
- var arr3 = arr1.concat(arr2); //[1, 2, 3, 4, 5, 6]
- arr3.concat(7); //[1, 2, 3, 4, 5, 6, 7]
我們平時(shí)都是這么使用的，如果需要連接兩個(gè)數(shù)組的元素時(shí)，中間插元素，可以
- var arr3 = arr1.concat('xzavier', arr2); //[1, 2, 3, "xzavier", 4, 5, 6]
不加參數(shù)相當(dāng)于拷貝，返回?cái)?shù)組的拷貝數(shù)組，是一個(gè)新的數(shù)組，并不是指向原來(lái)數(shù)組。
- var arr4 = arr1.concat(); //[1,2,3]
- var arr5 = arr1;
- arr4 === arr1; //false
- arr5 === arr1; //true
插入刪除
前面講了個(gè)splice可以在數(shù)組的任何位置插入刪除元素，這兒講的是只能在首尾插入刪除的方法，用起來(lái)也很方便。
在數(shù)組尾插入刪除：
- push()方法可以接收任意數(shù)量的參數(shù)，把它們逐個(gè)添加到數(shù)組的末尾，并返回修改后數(shù)組的長(zhǎng)度。
- pop()方法則從數(shù)組末尾移除***一個(gè)元素，減少數(shù)組的length值，然后返回移除的元素。
- var arr = [1,2,3];
- arr.push(4); // 返回的length 4
- arr.pop(); //返回的刪除值 4
- arr //[1, 2, 3]
在數(shù)組頭插入刪除：
- unshift()方法為數(shù)組的前端添加一個(gè)元素
- shift()方法從數(shù)組前端移除一個(gè)元素
- var arr = [1,2,3];
- arr.unshift(4); // 返回的length 4
- arr.shift(); //返回的刪除值 4
- arr //[1, 2, 3]
其他方法
- 方法 使用
- concat() 連接兩個(gè)或更多的數(shù)組，并返回結(jié)果。
- join() 把數(shù)組的所有元素放入一個(gè)字符串。元素通過(guò)指定的分隔符進(jìn)行分隔。
- reverse() 顛倒數(shù)組中元素的順序。
- toString() 把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。
- toLocaleString() 把數(shù)組轉(zhuǎn)換為本地?cái)?shù)組，并返回結(jié)果。
- valueOf() 返回?cái)?shù)組對(duì)象的原始值
- map() 返回一個(gè)由原數(shù)組中的每個(gè)元素調(diào)用一個(gè)指定方法后的返回值組成的新數(shù)組。
- every() 測(cè)試數(shù)組的所有元素是否都通過(guò)了指定函數(shù)的測(cè)試。
- some() 測(cè)試數(shù)組中的某些元素是否通過(guò)了指定函數(shù)的測(cè)試。
小試：(歡迎補(bǔ)充和斧正問(wèn)題，更多方法延伸閱讀：ES6數(shù)組的擴(kuò)展)
- ar arr = ['xzavier',123,'jser'];
- console.log(arr.valueOf()); //['xzavier',123,'jser']
- console.log(arr.toString()); //xzavier,123,jser
- console.log(arr.toLocaleString()); //xzavier,123,jser
- var arr = ['xzavier',123,'jser'];
- console.log(arr.join(',')); //xzavier,123,jser
- var arr = [1,2,3];
- console.log(arr.reverse()); //[3,2,1]
- var numbers = [1, 4, 9];
- var roots = numbers.map(Math.sqrt); //[1,2,3]
- numbers //[1,4,9]
- roots // [1,2,3]
- [2, 5, 1, 4, 3].some(function (element, index, array) {
- return (element >= 10);
- }); //false
- [2, 5, 1, 4, 13].some(function (element, index, array) {
- return (element >= 10);
- }); //true
- [2, 5, 1, 4, 13].every(function (element, index, array) {
- return (element >= 10);
- }); //false
- [2, 5, 1, 4, 13].every(function (element, index, array) {
- return (element >= 0);
- }); //true
趣味探索
- [1,2] + [3,4] == "1,23,4"; //true
- ++[[]][+[]]+[+[]] == '10'; //true
- console.log ([] == ![]); //true?
網(wǎng)頁(yè)題目：溫故js系列（16）-數(shù)組&數(shù)組方法使用詳解
文章URL：http://m.5511xx.com/article/dpschos.html
