前言
相信大家都用慣了jquery或underscore等這些類別庫中常用的陣列相關的操作,如$.isArray,_.some,_.find等等方法。這裡無非是原生js的陣列操作多了一些包裝。
這裡主要總結一下JavaScript陣列操作的常用API。相信對大家解決程序問題很有幫助。
一、性質
JavaScript中的陣列是一種特殊的對象,用來表示偏移量的索引是該對象的屬性,索引可能是整數。然而,這些數字索引在內部被轉換為字串類型,這是因為JavaScript物件中的屬性名稱必須是字串。
二、操作
1 判斷數組類型
var array0 = []; // 字面量 var array1 = new Array(); // 构造器 // 注意:在IE6/7/8下是不支持Array.isArray方法的 alert(Array.isArray(array0)); // 考虑兼容性,可使用 alert(array1 instanceof Array); // 或者 alert(Object.prototype.toString.call(array1) === '[object Array]');
2 數組與字串
非常簡單:由數組轉換為字串,使用join;由字串轉換為數組,使用split。
// join - 由数组转换为字符串,使用join console.log(['Hello', 'World'].join(',')); // Hello,World // split - 由字符串转换为数组,使用split console.log('Hello World'.split(' ')); // ["Hello", "World"]
3 查找元素
相信大家都常用字串類型indexOf,卻很少知道數組的indexOf同樣可以用來查找元素。
// 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
從以上可以看出,對於數組包含對象的這種數組,indexOf方法並非是經過深度比較來得到對應的查找結果,僅僅是比較對應元素的引用。
4 陣列連接
使用concat,要注意,使用concat之後會產生一個新的陣列。
var array1 = [1, 2, 3]; var array2 = [4, 5, 6]; var array3 = array1.concat(array2); // 实现数组连接之后,会创建出新的数组 console.log(array3);
5 類別清單操作
用於新增元素,可分別使用push和unshift,移除元素可分別使用pop和shift。
// push/pop/shift/unshift var array = [2, 3, 4, 5]; // 添加到数组尾部 array.push(6); console.log(array); // [2, 3, 4, 5, 6] // 添加到数组头部 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方法
主要兩個用途:
① 從數組中間位置添加和刪除元素
② 從原有數組中,獲取一個新數組
當然,兩個用途是一氣合成的,有些場景注重用途一,有些則注重用途二。
從數組中間位置添加和刪除元素,splice方法為數組添加元素,需提供以下參數
① 起始索引(也就是你希望開始添加元素的地方)
②
需要刪除的元素的數量或是提取的元素的數量(添加元素時該參數設定為0)
③ 想要添加進數組的元素
var nums = [1, 2, 3, 7, 8, 9]; nums.splice(3, 0, 4, 5, 6); console.log(nums); // [1, 2, 3, 4, 5, 6, 7, 8, 9] // 紧接着做删除操作或者提取新的数组 var newnums = nums.splice(3, 4); console.log(nums); // [1, 2, 3, 8, 9] console.log(newnums); // [4, 5, 6, 7]
7 排序
主要介紹reverse和sort兩個方法。陣列反轉使用reverse,sort方法不僅可以用於簡單排序,也可以用於複雜排序。
// 反转数组 var array = [1, 2, 3, 4, 5]; array.reverse(); console.log(array); // [5, 4, 3, 2, 1] 我们先对字符串元素的数组进行排序 var arrayOfNames = ["David", "Mike", "Cynthia", "Clayton", "Bryan", "Raymond"]; arrayOfNames.sort(); console.log(arrayOfNames); // ["Bryan", "Clayton", "Cynthia", "David", "Mike", "Raymond"]
我們對數字元素的數組進行排序
// 如果数组元素时数字类型,sort()方法的排序结果就不能让人满意了 var nums = [3, 1, 2, 100, 4, 200]; nums.sort(); console.log(nums); // [1, 100, 2, 200, 3, 4]
sort方法是按照字典順序對元素進行排序的,因此它假定元素都是字串類型,因此,即使元素是數字類型,也被認為是字符串類型。這時,可以在呼叫方法時傳入一個大小比較函數,排序時,sort()方法將會根據該函數比較數組中兩個元素的大小,從而決定整個數組的順序。
var compare = function(num1, num2) { 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 } ]; // 对数组中的对象元素,根据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方法接受一個傳回值為布林類型的函數,對數組中的每個元素使用該函數。如果對於所有的元素,則函數均傳回true,則該方法傳回true。
var nums = [2, 4, 6, 8]; // 不生成新数组的迭代器方法 var isEven = function(num) { return num % 2 === 0; }; // 如果都是偶数,才返回true console.log(nums.every(isEven)); // true some方法也接受一个返回值为布尔类型的函数,只要有一个元素使得该函数返回true,该方法就返回true。 var isEven = function(num) { return num % 2 === 0; }; var nums1 = [1, 2, 3, 4]; console.log(nums1.some(isEven)); // true
map和filter這兩個方法都可以產生新數組,map傳回的新數組是對原有元素應用某個函數所得到的結果。如:
var up = function(grade) { return grade += 5; } var grades = [72, 65, 81, 92, 85]; var newGrades = grades.ma
filter方法和every方法很類似,傳入一個傳回值為布林類型的函數。和every()方法不同的是,當對數組中的所有元素應用該函數,結果均為true時,該方法並未傳回true,而是傳回一個新數組,該數組包含應用函數後結果為true的元素。
var isEven = function(num) { 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]
三、總結
以上還存在某些方法在低階瀏覽器不支援的問題,還需要再採用其他方法進行相容實作。
這些都是常見的可能大家不太容易想到的方法。大家不妨多留意一下。
希望本文所述對大家的javascript程式設計有所幫助。