您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“javascript中的Array對象怎么使用”,內(nèi)容詳細,步驟清晰,細節(jié)處理妥當(dāng),希望這篇“javascript中的Array對象怎么使用”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
//創(chuàng)建一個空數(shù)組 var cars = new Array(); //創(chuàng)建一個指定長度的數(shù)組 var cars = new Array(20); //向構(gòu)造函數(shù)傳遞數(shù)組項 var cars = new Array('Mercedes-benz','BMW','Audi');
這里要注意的是,當(dāng)只傳遞一個參數(shù)給Array構(gòu)造函數(shù)時,如果參數(shù)是數(shù)字則會創(chuàng)建一個指定長度的數(shù)組,如果參數(shù)是一個字符串則創(chuàng)建一個只包含該字符串的長度為1 的數(shù)組。
var cars = new Array(1); //[undefined × 1] var cars = new Array('BMW'); //["BMW"]
另外使用 Array 構(gòu)造函數(shù)創(chuàng)建數(shù)組時也可以省略掉 new 操作符,和上面的一樣只是去掉new關(guān)鍵字即可,這里不做演示。
這種方法使用一對方括號'[]'表示數(shù)組,直接把數(shù)組項書寫在方括號中,多個數(shù)組項之間用逗號 ',' 隔開。注意:為避免兼容性問題請不要在最后一個項后面添加 ‘,’ 。
//創(chuàng)建一個空數(shù)組 var cars = []; //創(chuàng)建一個包含3個項的數(shù)組 var cars = ['Mercedes-benz','BMW','Audi'];
在讀取和設(shè)置數(shù)組的值時,只需通過方括號提供相應(yīng)項的索引即可
var cars = ['Mercedes-benz','BMW','Audi']; console.log(cars[0]); //輸出 “Mercedes-benz” cars[2] = 'Jeep'; //把Audi修改為Jeep cars[3] = 'Audi'; //增加第四項 Audi
通過數(shù)組的 length 屬性可讀取數(shù)組的長度,但是該屬性不是只讀的,通過修改該屬性可以變更數(shù)組的長度。如果新length小于原length則會刪掉原數(shù)組中多余的數(shù)組項;若新length大于原length則數(shù)組中仍保持原來的數(shù)組項,但是length被增加到了新length,當(dāng)訪問這些不存在的項時會返回 undefined。
var cars = ['Mercedes-benz','BMW','Audi']; console.log(cars.length) //3 console.log(cars) //["Mercedes-benz", "BMW", "Audi"] cars.length=2; console.log(cars) //["Mercedes-benz", "BMW"] cars.length=4; console.log(cars) //["Mercedes-benz", "BMW"] cars //["Mercedes-benz", "BMW", undefined × 2]
有兩種方法可以檢測某個對象是否為數(shù)組 value instanceof Array 和 Array.isArray(value)。Array.isArray()方法是ES5中新增的方法,其優(yōu)勢在于當(dāng)頁面中的多個框架間傳遞數(shù)組時,仍可正確返回數(shù)據(jù)類型。
toString() 方法可以返回由數(shù)組中項組成的字符串,項與項之間由“,”連接。當(dāng)進行轉(zhuǎn)換時會調(diào)用數(shù)組中每個項的 toString() 方法;toLocaleString()會返回與tostring類似的結(jié)果,只不過其調(diào)用的是數(shù)組中每項的 toLocaleString();valueOf會返回數(shù)組本身;join()函數(shù)接受一個字符串類型的參數(shù),返回之類似tostring(),不同之處在于該函數(shù)使用傳遞給他的參數(shù)作為數(shù)組項之間的連接符。
通過push()和pop()函數(shù)可實現(xiàn) LIFO(Last-in-first-out)。push() 方法接收任意數(shù)量的參數(shù),把它們逐個添加到當(dāng)前數(shù)組的末尾,返回修改后數(shù)組的長度。而pop()方法則從數(shù)組末尾一處最后一項2,減少數(shù)組的length值,然后返回數(shù)組移除的項。
var cars = new Array(); cars.push('Mercedes-benz','BMW'); // 2 console.log(cars); // ["Mercedes-benz", "BMW"] cars.push('Audi'); // 3 console.log(cars); // ["Mercedes-benz", "BMW", "Audi"] cars.pop(); // "Audi" console.log(cars); // ["Mercedes-benz", "BMW"]
與pop()類似,還有shift()方法,不同之處在于,shift()從數(shù)組的前端移除項。shift配合push使用可以實現(xiàn) FIFO(First-In-First-Out)。
var cars = new Array(); cars.push('Mercedes-benz','BMW'); // 2 console.log(cars); // ["Mercedes-benz", "BMW"] cars.push('Audi'); // 3 console.log(cars); // ["Mercedes-benz", "BMW", "Audi"] cars.shift(); // "Mercedes-benz" console.log(cars); // ["BMW", "Audi"]
該方法會基于當(dāng)前數(shù)組中的所有項創(chuàng)建一個新數(shù)組,先創(chuàng)建一個當(dāng)前數(shù)組的副本,然后將接受到的參數(shù)添加到這個副本的末尾,最后返回新構(gòu)建的數(shù)組。如果沒有為方法提供參數(shù),則會僅復(fù)制當(dāng)前數(shù)組并返回該副本。傳遞給concat()的參數(shù)可以是一個或多個數(shù)組,該方法會將這些數(shù)組中的項都添加到新構(gòu)建的結(jié)果數(shù)組中。如果傳遞的參數(shù)不是數(shù)組,這些值會被簡單的添加到結(jié)果數(shù)組的末尾處。
1.連接2個數(shù)組
const arr = [1, 2, 3].concat([4, 5]) console.log(arr) // [1,2,3,4,5]
2.連接3個數(shù)組
const arr1 = [1, 2] const arr2 = [3, 4] const arr3 = [5, 6] const arr4 = arr1.concat(arr2, arr3) console.log(arr4) // [1, 2, 3, 4, 5, 6]
3.連接值到數(shù)組
const arr1 = [1, 2] const arr2 = 3 const arr3 = [5, 6] const arr4 = arr1.concat(arr2, arr3) console.log(arr4) // [1, 2, 3, 5, 6]
上面提到的方法都是在數(shù)組的結(jié)尾或頭部進行操作,splice() 不同,它可用于在數(shù)組的任意位置刪除指定數(shù)量的項并在當(dāng)前位置插入新項。
刪除任意數(shù)量的項,需指定兩個參數(shù):第一個參數(shù)指定要刪除的第一個項的位置,第二個參數(shù)是要刪除的項數(shù)。如 splice(0,2)會刪除當(dāng)前數(shù)組的前兩項。
插入任意數(shù)量的項,需指定三個參數(shù):第一個參數(shù)指定要插入的第一個項的位置,第二個參數(shù)是0,第三至n個參數(shù)是需要插入的任意的項。如splice(2,0,'a','b')
替換任意數(shù)量的項,需指定三個參數(shù):第一個參數(shù)指定需替換的第一個項的位置,第二個參數(shù)指定需替換的項的個數(shù),第三個以后的參數(shù)為要替換的新項。如splice(2,2,'a','b')
var cars = ['Mercedes-benz','BMW','Audi']; cars.splice(0,1); // ['BMW','Audi']; cars.splice(0,0,"Mercedes-benz"); // ["Mercedes-benz", "BMW", "Audi"] cars.splice(2,1,"Tesla"); // ["Mercedes-benz", "BMW", "Tesla"]
ES5中提供了兩個位置方法 indexOf() 和 lastIndexOf()。這兩個方法都接收兩個參數(shù),第一個參數(shù)為要查找的項,第二個參數(shù)為在數(shù)組中查找時的起點位置。這兩個方法的唯一區(qū)別在于indexOf由前往后查找,lastindexof是由后往前查找。它們都返回要查找的項在數(shù)組中的位置,如果沒找到則返回 -1 。在比較參數(shù)是否與數(shù)組中的項相等時是使用全等操作符(===)。
var cars = ['Mercedes-benz','BMW','Audi','Tesla']; cars.indexOf('BMW'); // 1 cars.indexOf('bmw'); // -1 cars.indexOf('BMW',1); // 1 cars.indexOf('BMW',2); // -1 var cars = ['Mercedes-benz','BMW','Audi','Tesla']; cars.lastIndexOf('BMW'); // 1 cars.lastIndexOf('bmw'); // -1 cars.lastIndexOf('BMW',0); // -1 cars.lastIndexOf('BMW',2); // 1
實際應(yīng)用中經(jīng)常會遇到要對數(shù)組進行排序的情況,javascript中有兩個可以直接用來排序的法:reverse()和sort()。一個用來反轉(zhuǎn)數(shù)組排序,另一個用來排序。
var cars = ['Mercedes-benz','BMW','Audi','Tesla']; var numbers = [1,2,3,14,15,16]; cars.sort(); // ["Audi", "BMW", "Mercedes-benz", "Tesla"] numbers.sort(); // [1, 14, 15, 16, 2, 3] cars.reverse(); // ["Tesla", "Mercedes-benz", "BMW", "Audi"] numbers.reverse(); // [3, 2, 16, 15, 14, 1]
reverse()方法可以反轉(zhuǎn)數(shù)組中的項。sort() 方法在排序時會調(diào)用較數(shù)組中各項的toString()然后進行比較,所以在對numbers 排序后,數(shù)組項“16”排在了"2"和“3”前面。由此可見,默認情況下sort()在排序時并不總是如人所愿。其實sort方法還可以接收一個比較函數(shù)作為參數(shù)以干預(yù)sort()的排序行為。
比較函數(shù)接受兩個參數(shù),第一個參數(shù)應(yīng)該位于第二個參數(shù)前則返回負數(shù),如果兩個參數(shù)相等返回0,如果第一個參數(shù)應(yīng)該位于第二個參數(shù)后面則返回正數(shù)。
numbers.sort(compare); // [1, 2, 3, 14, 15, 16] function compare(item1,item2){ return item1 - item2; }
ES5中定義了迭代數(shù)組的方法,每個方法都接受兩個參數(shù),第一個參數(shù)為要在每個項上執(zhí)行的函數(shù),第二個參數(shù)為作用域?qū)ο螅蛇x)。傳入這些方法的函數(shù)接受3個參數(shù):數(shù)組中的項、該項在數(shù)組中的索引、數(shù)組本身。
every() 對數(shù)組中的每個項執(zhí)行給定函數(shù),如果每項都返回true則返回true。
some() 對數(shù)組中的每個項執(zhí)行給定函數(shù),如果任何一項返回true則返回true。
filter() 對數(shù)組中的每個項執(zhí)行給定函數(shù),返回所有返回值為true的項組成的數(shù)組。
map() 對數(shù)組中的每個項執(zhí)行給定函數(shù),返回每個數(shù)組項的執(zhí)行結(jié)果組成的數(shù)組。
forEach() 對數(shù)組中的每個項執(zhí)行給定函數(shù)。
var cars = ['Mercedes-benz','BMW','Audi','Tesla']; cars.every(function(item, index, arr){return item.length>4}); // false cars.some(function(item, index, arr){return item.length>4}); // true cars.filter(function(item, index, arr){return item.length>4}); // ["Mercedes-benz", "Tesla"] cars.map(function(item, index, arr){return 'New-' + item}); // ["New-Mercedes-benz", "New-BMW", "New-Audi", "New-Tesla"] cars.forEach(function(item, index, arr){ // code });
reduce() 和 reduceRight() 會逐個遍歷數(shù)組中的每個項,并用給定函數(shù)將前兩項的計算結(jié)果作為基礎(chǔ)參與下一個項的計算,依次遞歸,直至結(jié)束。reduceRight與reduce的不同之處僅僅在于遞歸順序的不同,reduceRight是從結(jié)尾向前遞歸。
var numbers = [1, 2, 3, 4, 5, 6, 7]; var sum = numbers.reduce(function(pre, cur, index, arr){ return pre + cur; }); console.log(sum); // 28
讀到這里,這篇“javascript中的Array對象怎么使用”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。