JavaScript數(shù)組常用操作技巧匯總
本文實例匯總了JavaScript數(shù)組的常用操作技巧。分享給大家供大家參考。具體如下：
前言
相信大家都用慣了jquery或者underscore等這些類庫中常用的數(shù)組相關(guān)的操作，如$.isArray，_.some，_.find等等方法。這里無非是對原生js的數(shù)組操作多了一些包裝。
這里主要匯總一下JavaScript數(shù)組操作的常用API。相信對大家解決程序問題很有幫助。
一、性質(zhì)
JavaScript中的數(shù)組是一種特殊的對象，用來表示偏移量的索引是該對象的屬性，索引可能是整數(shù)。然而，這些數(shù)字索引在內(nèi)部被轉(zhuǎn)換為字符串類型，這是因為JavaScript對象中的屬性名必須是字符串。
二、操作
1 判斷數(shù)組類型
var array1 = new Array(); // 構(gòu)造器
// 注意：在IE6/7/8下是不支持Array.isArray方法的
alert(Array.isArray(array0));
// 考慮兼容性，可使用
alert(array1 instanceof Array);
// 或者
alert(Object.prototype.toString.call(array1) === '[object Array]');
2 數(shù)組與字符串
非常簡單：由數(shù)組轉(zhuǎn)換為字符串，使用join；由字符串轉(zhuǎn)換為數(shù)組，使用split。
console.log(['Hello', 'World'].join(',')); // Hello,World
// split - 由字符串轉(zhuǎn)換為數(shù)組，使用split
console.log('Hello World'.split(' ')); // ["Hello", "World"]
3 查找元素
相信大家都常用字符串類型indexOf，卻很少知道數(shù)組的indexOf同樣可以用于查找元素。
console.log(['abc', 'bcd', 'cde'].indexOf('bcd')); // 1
//
var objInArray = [
{
name: 'king',
pass: '123'
},
{
name: 'king1',
pass: '234'
}
];
console.log(objInArray.indexOf({
name: 'king',
pass: '123'
})); // -1
var elementOfArray = objInArray[0];
console.log(objInArray.indexOf(elementOfArray)); // 0
從以上可以看出，對于數(shù)組包含對象的這種數(shù)組，indexOf方法并非是經(jīng)過深度比較來得到對應(yīng)的查找結(jié)果，僅僅是比較對應(yīng)元素的引用。
4 數(shù)組連接
使用concat，要注意，使用concat之后會生成一個新的數(shù)組。
var array2 = [4, 5, 6];
var array3 = array1.concat(array2); // 實現(xiàn)數(shù)組連接之后，會創(chuàng)建出新的數(shù)組
console.log(array3);
5 類列表操作
用于添加元素，可分別使用push和unshift，移除元素可分別使用pop和shift。
var array = [2, 3, 4, 5];
// 添加到數(shù)組尾部
array.push(6);
console.log(array); // [2, 3, 4, 5, 6]
// 添加到數(shù)組頭部
array.unshift(1);
console.log(array); // [1, 2, 3, 4, 5, 6]
// 移除最后一個元素
var elementOfPop = array.pop();
console.log(elementOfPop); // 6
console.log(array); // [1, 2, 3, 4, 5]
// 移除第一個元素
var elementOfShift = array.shift();
console.log(elementOfShift); // 1
console.log(array); // [2, 3, 4, 5]
6 splice方法
主要兩個用途：
① 從數(shù)組中間位置添加和刪除元素
② 從原有數(shù)組中，獲取一個新數(shù)組
當然，兩個用途是一氣合成的，有些場景注重用途一，有些則注重用途二。
從數(shù)組中間位置添加和刪除元素，splice方法為數(shù)組添加元素，需提供如下參數(shù)
① 起始索引（也就是你希望開始添加元素的地方）
② 需要刪除的元素的個數(shù)或者是提取的元素的個數(shù)（添加元素時該參數(shù)設(shè)置為0）
③ 想要添加進數(shù)組的元素
nums.splice(3, 0, 4, 5, 6);
console.log(nums); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 緊接著做刪除操作或者提取新的數(shù)組
var newnums = nums.splice(3, 4);
console.log(nums); // [1, 2, 3, 8, 9]
console.log(newnums); // [4, 5, 6, 7]
7 排序
主要介紹reverse和sort兩個方法。數(shù)組反轉(zhuǎn)使用reverse，sort方法不僅可以用于簡單排序，也可以用于復(fù)雜排序。
var array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // [5, 4, 3, 2, 1]
我們先對字符串元素的數(shù)組進行排序
var arrayOfNames = ["David", "Mike", "Cynthia", "Clayton", "Bryan", "Raymond"];
arrayOfNames.sort();
console.log(arrayOfNames); // ["Bryan", "Clayton", "Cynthia", "David", "Mike", "Raymond"]
我們對數(shù)字元素的數(shù)組進行排序
var nums = [3, 1, 2, 100, 4, 200];
nums.sort();
console.log(nums); // [1, 100, 2, 200, 3, 4]
sort方法是按照字典順序?qū)υ剡M行排序的，因此它假定元素都是字符串類型，因此，即使元素是數(shù)字類型，也被認為是字符串類型。這時，可以在調(diào)用方法時傳入一個大小比較函數(shù)，排序時，sort()方法將會根據(jù)該函數(shù)比較數(shù)組中兩個元素的大小，從而決定整個數(shù)組的順序。
return num1 > num2;
};
nums.sort(compare);
console.log(nums); // [1, 2, 3, 4, 100, 200]
var objInArray = [
{
name: 'king',
pass: '123',
index: 2
},
{
name: 'king1',
pass: '234',
index: 1
}
];
// 對數(shù)組中的對象元素，根據(jù)index進行升序
var compare = function(o1, o2) {
return o1.index > o2.index;
};
objInArray.sort(compare);
console.log(objInArray[0].index < objInArray[1].index); // true
8 迭代器方法
主要包含forEach和every、some和map、filter
forEach相信大家都會，主要介紹一下其他四種方法。
every方法接受一個返回值為布爾類型的函數(shù)，對數(shù)組中的每個元素使用該函數(shù)。如果對于所有的元素，該函數(shù)均返回true，則該方法返回true。
// 不生成新數(shù)組的迭代器方法
var isEven = function(num) {
return num % 2 === 0;
};
// 如果都是偶數(shù)，才返回true
console.log(nums.every(isEven)); // true
some方法也接受一個返回值為布爾類型的函數(shù)，只要有一個元素使得該函數(shù)返回true，該方法就返回true。
var isEven = function(num) {
return num % 2 === 0;
};
var nums1 = [1, 2, 3, 4];
console.log(nums1.some(isEven)); // true
map和filter這兩個方法都可以產(chǎn)生新數(shù)組，map返回的新數(shù)組是對原有元素應(yīng)用某個函數(shù)得到的結(jié)果。如：
return grade += 5;
}
var grades = [72, 65, 81, 92, 85];
var newGrades = grades.ma
filter方法和every方法很類似，傳入一個返回值為布爾類型的函數(shù)。和every()方法不同的是，當對數(shù)組中的所有元素應(yīng)用該函數(shù)，結(jié)果均為true時，該方法并不返回true，而是返回一個新數(shù)組，該數(shù)組包含應(yīng)用該函數(shù)后結(jié)果為true的元素。
return num % 2 === 0;
};
var isOdd = function(num) {
return num % 2 !== 0;
};
var nums = [];
for (var i = 0; i < 20; i++) {
nums[i] = i + 1;
}
var evens = nums.filter(isEven);
console.log(evens); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
var odds = nums.filter(isOdd);
console.log(odds); // [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]
三、總結(jié)
以上還存在某些方法在低級瀏覽器不支持的問題，還需要再采用其他方法進行兼容實現(xiàn)。
這些都是常見的可能大家不太容易想到的方法。大家不妨多留意一下。
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
javascript通過className來獲取元素的簡單示例代碼
本篇文章主要是對javascript通過className來獲取元素的簡單示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
下面小編就為大家?guī)硪黄狫avaScript數(shù)組去重的兩種方法推薦。小編覺得聽錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看2016-04-04
Js 回車換行處理的辦法及replace方法應(yīng)用
當我們在文本框里輸入文字敲下回車后，希望在提交后網(wǎng)頁也顯示是換行的效果,可往往并不能如愿以償啊，實在是憤怒啊自己寫了一個回車換行處理的函數(shù)，感興趣的朋友可以了解下啊，希望本文對你有所幫助2013-01-01
本文分享了一個小技巧：javascript解決IE6下hover問題的方法，方法很實用,需要了解的朋友可以參考下2015-07-07
下面小編就為大家?guī)硪黄猨s刪除Array數(shù)組中指定元素的兩種方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)水平滾動菜單導航，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
js點擊返回跳轉(zhuǎn)到指定頁面實現(xiàn)過程
這篇文章主要為大家詳細介紹了js點擊返回跳轉(zhuǎn)到指定頁面實現(xiàn)過程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript設(shè)計模式--橋梁模式引入操作實例分析
這篇文章主要介紹了JavaScript設(shè)計模式--橋梁模式,結(jié)合實例形式分析了JavaScript設(shè)計模式中橋梁模式應(yīng)用操作技巧與注意事項,需要的朋友可以參考下2020-05-05
在JavaScript中,我們經(jīng)常需要對數(shù)據(jù)的類型進行判斷,以便進行相應(yīng)的處理,本文將介紹JavaScript中常見的類型判斷方法,包括typeof、instanceof、Object.prototype.toString() 以及Array.isArray(),并且會詳細解釋它們之間的區(qū)別,需要的朋友可以參考下2023-11-11
JavaScript實現(xiàn)簡單省市聯(lián)動
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單省市聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10