您好,登錄后才能下訂單哦!
本篇文章為大家展示了深入淺析JavaScript數組類型中的Array,內容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
Array數組類型詳解
在ECMAScript中除了object類型之外,Array數組用的是最常用的類型。ECMAScript數組可以在每一項存儲任何類型的值,無需指定數組的長度,還可以隨著數據的增長來增加數組長度,這些是和其他語言的數組不同的。
1.數組的創建方法
數組字面量方式
var arr = [1,2,3,4,5];// 簡單直接用中括號包裹構建數組
數組構造函數
var arr = new Array(1,2,3,4,5);// 通過內置Array對象構建數組
2.檢測數組
instanceof操作符,在全局環境下可以檢測對象是否為數組,但是如果頁面上存在多個框架時就會存在兩種以上的全局環境,這時候這種方法就有些問題。console.log(arr instanceof Array); // true
Array.isArray()方法就解決了上面的問題,可以快速的檢測對象是否為數組。console.log(Array.isArray(arr)); // true
3.轉換方法
使用toString()方法可以使數組返回字符串。
var arr = [1,2,3,4]; console.log(arr.toString()); // 1,2,3,4
toLocaleString()方法也可以實現
var arr = [1,2,3,4]; console.log(arr.toLocaleString()); // 1,2,3,4
4.棧方法
ECMAScript為數組提供了一種類似于其他語言數組的方法(棧方法),棧是一種數據結構,主要講究先進后出;
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.隊列方法
隊列方法講究先進先出,在列表的末尾添加項,開頭刪除項。
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]
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()反轉數組改變順序
var arr = [1,2,3,4,5]; arr.reverse(); console.log(arr); //輸出[5,4,3,2,1]
sort()方法比較的是字符串,一個一個的字符串進行比較,數值小的在前面,
var arr = [1,6,13,40,15]; arr.sort(); console.log(arr); //輸出[1, 13, 15, 40, 6]
7.操作方法
concat()方法基于當前數組創建一個副本,向后面添加新的對象,然后返回新的數組concat()方法不會影響原數組。
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()方法可以接受一個或者兩個參數,第一個參數表示起始位置,第二個表示結束位置,slice()方法返回起始位置到結束位置的數組slice()方法不會影響原數組。
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()方法,這個方法在我認為算是數組里面最強大的方法啦!他可以傳入三個參數,第一個參數起始位置,第二個參數要刪除的項,第三個參數添加或者替換的對象。可以利用splice()方法對數組進行刪除、添加、替換等操作splice()方法會影響原數組。
var arr = [1,2,3,4,5];// 刪除操作 var arr2 = arr.splice(1,3); // 從下標為1開始刪除3項 console.log(arr); //輸出[1,5] 原數組只剩下第一位和最后一位 console.log(arr2); //輸出[2,3,4] 被刪除的對象生成數組
var arr = [1,2,3,4,5]; // 插入 var arr2 = arr.splice(1,0,2,2);// 從下標1開始插入2,2兩個對象 console.log(arr); //輸出[1,2,2,2,3,4,5] console.log(arr2); //輸出[] 因為沒有刪除對象所以返回空數組
var arr = [1,2,3,4,5]; // 替換 var arr2 = arr.splice(1,2,2,2); // 從下標1開始先刪除兩項然后替換為2,2 console.log(arr); //輸出[1,2,2,4,5] console.log(arr2); //輸出[2,3] 被刪除的元素
8.位置方法
查找數組位置方法有兩種,indexOf()和lastIndexOf()方法都可以接收兩個參數,要查找的項和(可選)查找起始項位置的索引。indexOf()是從前往后找,lastIndexOf()是從后往前找。
var arr = [1,2,3,4,5]; console.log(arr.indexOf(2)); //1 返回下標的位置 console.log(arr.indexOf(2,3)); //-1 從下標3位置開始往后找,沒有找到2返回-1 console.log(arr.lastIndexOf(2,3)); //1 從下標3位置開始往前找
9.迭代方法
ECMAScript5為數組提供了五種迭代方法,每種方法都有兩個參數,要在每一項上運行的函數和(可選)運行該函數的作用域對象——影響this的值。傳入這些方法的函數會接受三個形參(item,index,array):數組項的值、數組對象在數組中的位置、數組對象本身。
every()給定函數后,如果該函數對每一項都返回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()給定函數后,返回true的項組成的數組。
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() 給定函數后,這個方法沒有返回值。本質上和for循環一樣
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] 不會改變原數組也沒有返回值
map()給定函數后,返回每次函數調用的結果組成的數組。
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()給定函數后,如果該函數任一項返回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兩個縮小數組的方法,reduce()和reduceRight()。這兩個方法都會迭代數組所有的項,reduce()是從第一項到最后一項迭代,reduceRight()則是相反的。這兩個方法可以接收兩個參數,要執行的函數和(可選)做為縮小基礎的初始值。執行函數可以傳入四個參數(prev,cur,index,array):前一個值、當前值、數組對象索引、數組對象本身。
var arr = [1,2,3,4,5]; var arr2 = arr.reduce(function(prev,cur,index,array){ return prev * cur; }); console.log(arr2); // 120 前一項乘后一項
上述內容就是深入淺析JavaScript數組類型中的Array,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。