JavaScript數(shù)組類型Array相關(guān)的屬性與方法詳解
Array數(shù)組類型詳解
在ECMAScript中除了object類型之外，Array數(shù)組用的是最常用的類型。ECMAScript數(shù)組可以在每一項存儲任何類型的值，無需指定數(shù)組的長度，還可以隨著數(shù)據(jù)的增長來增加數(shù)組長度，這些是和其他語言的數(shù)組不同的。
1.數(shù)組的創(chuàng)建方法
數(shù)組字面量方式
var arr = [1,2,3,4,5];// 簡單直接用中括號包裹構(gòu)建數(shù)組
數(shù)組構(gòu)造函數(shù)
var arr = new Array(1,2,3,4,5);// 通過內(nèi)置Array對象構(gòu)建數(shù)組
2.檢測數(shù)組
instanceof操作符，在全局環(huán)境下可以檢測對象是否為數(shù)組，但是如果頁面上存在多個框架時就會存在兩種以上的全局環(huán)境，這時候這種方法就有些問題。console.log(arr instanceof Array); // true
Array.isArray()方法就解決了上面的問題，可以快速的檢測對象是否為數(shù)組。console.log(Array.isArray(arr)); // true
3.轉(zhuǎn)換方法
使用toString()方法可以使數(shù)組返回字符串。
var arr = [1,2,3,4]; console.log(arr.toString()); // 1,2,3,4
toLocaleString()方法也可以實現(xiàn)
var arr = [1,2,3,4]; console.log(arr.toLocaleString()); // 1,2,3,4
4.棧方法
ECMAScript為數(shù)組提供了一種類似于其他語言數(shù)組的方法（棧方法），棧是一種數(shù)據(jù)結(jié)構(gòu)，主要講究先進后出；
- push()方法向數(shù)組末尾添加元素(可以添加多項)
- pop()方法向末尾刪除最后一項(一次只能刪除一項)
var arr = [1,2,3,4]; arr.push(5,6,7); // 向末尾添加5,6,7 console.log(arr); //輸出[1,2,3,4,5,6,7] arr.pop(); // 刪除最后一項 console.log(arr); //輸出[1,2,3,4,5,6]
5.隊列方法
隊列方法講究先進先出，在列表的末尾添加項，開頭刪除項。
- push()方法上面講到了末尾添加一項或多項
- shift()方法開頭刪除
var arr = [1,2,3,4]; arr.push(5,6,7); // 向末尾添加5,6,7 console.log(arr); //輸出[1,2,3,4,5,6,7] arr.shift(); // 刪除第一項 console.log(arr); //輸出[2,3,4,5,6,7]
- pop()方法刪除末尾最后一項
- unshift()方法向開頭添加一項或多項元素
var arr = [1,2,3,4]; arr.unshift(5,6,7); // 向開頭添加5,6,7 console.log(arr); //輸出[1,2,3,4,5,6,7] arr.pop(); // 刪除最后一項 console.log(arr); //輸出[5,6,7,1,2,3]
6.重排序方法
reverse()反轉(zhuǎn)數(shù)組改變順序
var arr = [1,2,3,4,5]; arr.reverse(); console.log(arr); //輸出[5,4,3,2,1]
sort()方法比較的是字符串，一個一個的字符串進行比較，數(shù)值小的在前面，
var arr = [1,6,13,40,15]; arr.sort(); console.log(arr); //輸出[1, 13, 15, 40, 6]
7.操作方法
concat()方法基于當(dāng)前數(shù)組創(chuàng)建一個副本，向后面添加新的對象，然后返回新的數(shù)組concat()方法不會影響原數(shù)組。
var arr = [1,6,13,40,15]; var arr2 = arr.concat(2,2,2); console.log(arr); //輸出[1, 6, 13, 40, 15] console.log(arr2); //輸出[1, 6, 13, 40, 15,2,2,2]
slice()方法可以接受一個或者兩個參數(shù)，第一個參數(shù)表示起始位置，第二個表示結(jié)束位置，slice()方法返回起始位置到結(jié)束位置的數(shù)組slice()方法不會影響原數(shù)組。
var arr = [1,6,13,40,15]; var arr2 = arr.slice(2); var arr3 = arr.slice(1,3); console.log(arr); //輸出[1,6,13,40,15] console.log(arr2); //輸出[13, 40, 15] console.log(arr3); //輸出[6, 13]
splice()方法，這個方法在我認為算是數(shù)組里面最強大的方法啦！他可以傳入三個參數(shù)，第一個參數(shù)起始位置，第二個參數(shù)要刪除的項，第三個參數(shù)添加或者替換的對象?？梢岳胹plice()方法對數(shù)組進行刪除、添加、替換等操作splice()方法會影響原數(shù)組。
var arr = [1,2,3,4,5];// 刪除操作 var arr2 = arr.splice(1,3); // 從下標(biāo)為1開始刪除3項 console.log(arr); //輸出[1,5] 原數(shù)組只剩下第一位和最后一位 console.log(arr2); //輸出[2,3,4] 被刪除的對象生成數(shù)組
var arr = [1,2,3,4,5]; // 插入 var arr2 = arr.splice(1,0,2,2);// 從下標(biāo)1開始插入2,2兩個對象 console.log(arr); //輸出[1,2,2,2,3,4,5] console.log(arr2); //輸出[] 因為沒有刪除對象所以返回空數(shù)組
var arr = [1,2,3,4,5]; // 替換 var arr2 = arr.splice(1,2,2,2); // 從下標(biāo)1開始先刪除兩項然后替換為2,2 console.log(arr); //輸出[1,2,2,4,5] console.log(arr2); //輸出[2,3] 被刪除的元素
8.位置方法
查找數(shù)組位置方法有兩種，indexOf()和lastIndexOf()方法都可以接收兩個參數(shù)，要查找的項和（可選）查找起始項位置的索引。indexOf()是從前往后找，lastIndexOf()是從后往前找。
var arr = [1,2,3,4,5]; console.log(arr.indexOf(2)); //1 返回下標(biāo)的位置 console.log(arr.indexOf(2,3)); //-1 從下標(biāo)3位置開始往后找，沒有找到2返回-1 console.log(arr.lastIndexOf(2,3)); //1 從下標(biāo)3位置開始往前找
9.迭代方法
ECMAScript5為數(shù)組提供了五種迭代方法，每種方法都有兩個參數(shù)，要在每一項上運行的函數(shù)和（可選）運行該函數(shù)的作用域?qū)ο蟆绊憈his的值。傳入這些方法的函數(shù)會接受三個形參（item,index,array）：數(shù)組項的值、數(shù)組對象在數(shù)組中的位置、數(shù)組對象本身。
every()給定函數(shù)后，如果該函數(shù)對每一項都返回true，則返回true。
var arr = [1,2,3,4,5];
var arr2 = arr.every(function(item,index,array){
return item > 3;
});
console.log(arr2); // false 必需每項都滿足條件才可以
filter()給定函數(shù)后，返回true的項組成的數(shù)組。
var arr = [1,2,3,4,5];
var arr2 = arr.filter(function(item,index,array){
return item > 3;
});
console.log(arr2); // 4,5 只有4,5滿足條件
forEach() 給定函數(shù)后，這個方法沒有返回值。本質(zhì)上和for循環(huán)一樣
var arr = [1,2,3,4,5];
arr.forEach(function(item,index,array){
console.log(item); // 1,2,3,4,5
});
console.log(arr); // [1,2,3,4,5] 不會改變原數(shù)組也沒有返回值
map()給定函數(shù)后，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。
var arr = [1,2,3,4,5];
var arr2 = arr.map(function(item,index,array){
return item * 2;
});
console.log(arr2); // [2,4,6,8,10]
some()給定函數(shù)后，如果該函數(shù)任一項返回true，則返回true。
var arr = [1,2,3,4,5];
var arr2 = arr.some(function(item,index,array){
return item > 4;
});
console.log(arr2); // true 5>4返回true
10.縮小方法
ECMAScript5新增了2兩個縮小數(shù)組的方法，reduce()和reduceRight()。這兩個方法都會迭代數(shù)組所有的項，reduce()是從第一項到最后一項迭代，reduceRight()則是相反的。這兩個方法可以接收兩個參數(shù)，要執(zhí)行的函數(shù)和（可選）做為縮小基礎(chǔ)的初始值。執(zhí)行函數(shù)可以傳入四個參數(shù)（prev,cur,index,array）：前一個值、當(dāng)前值、數(shù)組對象索引、數(shù)組對象本身。
var arr = [1,2,3,4,5];
var arr2 = arr.reduce(function(prev,cur,index,array){
return prev * cur;
});
console.log(arr2); // 120 前一項乘后一項
總結(jié)
到此這篇關(guān)于JavaScript數(shù)組類型Array相關(guān)的屬性與方法的文章就介紹到這了,更多相關(guān)js數(shù)組Array的屬性與方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
一道面試題引發(fā)的對javascript類型轉(zhuǎn)換的思考
本文主要介紹了javascript類型轉(zhuǎn)換的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
老司機們，你知道JSON.stringify還有第二個和第三個可選參數(shù)嗎？它們是什么呢？是不是感到不可思議？下面這篇文章就來給大家介紹了一些你可能不知道的JSON.stringify的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2017-08-08
js針對ip地址、子網(wǎng)掩碼、網(wǎng)關(guān)的邏輯性判斷
這篇文章主要介紹了js針對ip地址、子網(wǎng)掩碼、網(wǎng)關(guān)的邏輯性判斷，感興趣的小伙伴們可以參考一下2016-01-01
本文主要介紹了js實現(xiàn)抽獎效果的方法實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要向大家推薦一個原生js實現(xiàn)淘寶購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
下面小編就為大家分享一篇js 兩數(shù)組去除重復(fù)數(shù)值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了基于javascript實現(xiàn)右下角浮動廣告效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
位運算符是在數(shù)字底層(即表示數(shù)字的32個數(shù)位)進行操作的,下面這篇文章主要給大家介紹了一些你可能不知道的JavaScript位運算符的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
underscore之function_動力節(jié)點Java學(xué)院整理
因為underscore本來就是為了充分發(fā)揮JavaScript的函數(shù)式編程特性，所以也提供了大量JavaScript本身沒有的高階函數(shù)。本文重點給大家介紹underscore之function知識，感興趣的的朋友一起學(xué)習(xí)吧2017-07-07
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)密碼框輸入驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09