javascript數組的知識點講解
閱讀目錄
- 數組的基本方法如下
- 判斷一個數組中是否有相同的元素；
- 計算一個數組中每個元素在數組中出現的次數；
- Javascript刪除數組重復元素的操作
- Javascript刪除數組里面的某個元素。
- 在javascript中求出2個數組的相同的元素及不同的元素
- Javascript檢測2個數組是否相似
- 如何判斷該對象是否為數組。
- js將類數組對象轉換成數組對象
- 查找數組中最大值與最小值
數組的基本方法如下
該方法用於連接2個或者多個數組。該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。
語法：arrayObject.concat(array1,array2,....arrayx);
連接多個數組，使用逗號隔開；
比如如下代碼演示：
var arr1 = [1,2,3], arr2 = [4,5,6], arr3 = [7,8,9,1,2,3]; console.log(arr1.concat(arr2,arr3)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3] console.log(arr1); // [1,2,3] console.log(arr2); // [4,5,6] console.log(arr3); // [7,8,9,1,2,3]
該方法是把數組中的所有元素放入一個字符串中，元素通過指定的分隔符進行分割的。
語法如下：arrayObject.join(separator);
separator: 指定分隔符對數組中的元素進行分割，如果省略該參數，則會使用逗號作為分隔符。如下代碼演示：
var arrs = []; arrs[0] = "aa"; arrs[1] = "bb"; arrs[2] = "cc"; console.log(arrs.join()); // aa,bb,cc console.log(arrs.join("/")); // aa/bb/cc console.log(arrs.join("-")); // aa-bb-cc
該方法刪除數組的最后一個元素，把數組的長度減1，並且返回它被刪除元素的值，如果數組變為空，則該方法不改變數組，返回undefine值。如下代碼演示：
var arrs = [1,2,3,4]; console.log(arrs.pop()); // 4 console.log(arrs); // [1,2,3]
該方法是向數組末尾添加一個或者多個元素，並返回新的長度。
基本語法：arrayObject.push(newElem1,newElem2,.....newElemX); 演示代碼如下：
var arrs = [1,2,3]; arrs.push(4); console.log(arrs); // [1,2,3,4] arrs.push(5,6); console.log(arrs); // [1,2,3,4,5,6]
該方法用於顛倒數組中元素的順序；
語法如下：arrayObject.reverse();
如下代碼演示：
var arrs = [1,2,3,4]; console.log(arrs.reverse()); //[4,3,2,1]
該方法用於把數組的第一個元素從其中刪除，並返回被刪除的值。如果數組是空的，shift方法將不進行任何操作，返回undefined的值。
如下代碼演示：
var arrs = [1,2,3,4]; console.log(arrs.shift());// 1 console.log(arrs); // [2,3,4] var arrs2 = []; console.log(arrs2.shift()); // undefined console.log(arrs2); // []
1. 該方法是對數組的元素進行排序；sortby參數規定排序順序，且必須是函數。
如果該方法沒有使用參數，則是按字母的字符編碼的順序進行排序。
2. 如果想按其他標准進行排序，就需要提供比較函數，該函數比較2個值，然后返回一個用於說明這2個值的相對順序的數字，比如比較a與b，返回值如下：
若a小於b，在排序后的數組中a應該出現在b之前，則返回一個小於0的值。
若a等於b，在排序后的數組中 a等於b 則返回0；
若a大於b，則返回一個大於0的值；
比如如下代碼演示：
var arrs = ["tugenhua","longen","alibaba"]; console.log(arrs.sort()); // ["alibaba", "longen", "tugenhua"] var arrs2 = ["15","5","8","12"]; console.log(arrs2.sort(function(a,b){ return a - b; // ["5", "8", "12", "15"] }));
該方法用於插入，刪除和替換數組的元素；
基本語法如下：
Array.splice(index,howmany,element1,.....elementX);
Index參數：【必填】是從何處添加/刪除元素，該參數是開始插入或刪除數組元素的下標，必須是數字；
Howmany: 【必須】應該刪除多少個元素，必須是數字，也可以是0，如果未設定該參數，則刪除從index開始到原數組結尾的所有元素；
Element1: 【可選】規定要添加到數組的新元素，從index所指的下標處開始插入；
ElementX: 【可選】 可向數組中添加若干個元素；
如下代碼演示：
// 假如原數組如下 var arrs = [1,2,3,4,5,6]; // 先向數組的第二個位置中添加一個元素8； arrs.splice(1,0,8); console.log(arrs); // [1, 8, 2, 3, 4, 5, 6] // 接着從arrs數組中刪除一個元素2 arrs.splice(2,1); console.log(arrs); // [1, 8, 3, 4, 5, 6] // 再接着從arrs數組中替換一個元素8 使他變為10;如下代碼： arrs.splice(1,1,10); console.log(arrs); // [1, 10, 3, 4, 5, 6]
將數組轉換為一個字符串，並且返回這個字符串；如下代碼演示：
var arrs = [1,2]; console.log(arrs.toString()); // 1,2
該方法是向數組的開頭添加一個或者更多元素，並返回新的長度。
如下代碼演示：
var arrs = [1,2]; arrs.unshift(3); console.log(arrs); //[3, 1, 2]
該方法是從已有的數組中返回指定的元素。
基本語法：arrs.slice(start,end);
start參數【必須】從何處開始選取(包括start)，如果是負數，那么會從尾部選取，比如-1代表最后一個元素，-2代表倒數第二個元素，以此類推。
End參數【可選】規定是從何處結束選取(不包括end)，如果沒有指定該參數，那么數組會包含從start開始到數組結束的所有元素，如果該參數是負數的話，那么它規定的是從數組尾部開始算起的元素。
如下演示：
var arrs2 = [1,2,3]; console.log(arrs2.slice(1)); // [2,3] console.log(arrs2.slice(0,1));// [1] console.log(arrs2.slice(1,-1)); // [2] console.log(arrs2.slice(2,-1)); // [] console.log(arrs2.slice(0)); // [1,2,3]
判斷一個數組中是否有相同的元素
/* * 判斷數組中是否有相同的元素的代碼 */ // 方案一 function isRepeat1(arrs) { if(arrs.length > 0) { var s = arrs.join(","); for(var i = 0,ilen = arrs.length; i < ilen; i+=1) { if(s.replace(arrs[i],"").indexOf(arrs[i])>-1) { return true; } } } return false; } // 方案二 function isRepeat2(arrs) { var hash = {}; if(arrs.length > 0){ for(var i = 0,ilen = arrs.length; i < ilen; i+=1) { if(hash[arrs[i]]) { return true; } hash[arrs[i]] = true; } } return false; } var arrs = [1,4,3,2,5]; console.log(isRepeat1(arrs)); // false var arrs2 = [1,2,3,1]; console.log(isRepeat1(arrs2)); // true var arrs = [1,4,3,2,5]; console.log(isRepeat2(arrs)); // false var arrs2 = [1,2,3,1]; console.log(isRepeat2(arrs2)); // true
計算一個數組中每個元素在數組中出現的次數；
代碼如下：
/* * 計算數組中每個元素在數組中出現的個數 * @param {arrs} 數組 * @method 定義一個新數組，循環當前的數組，使用一個臨時的變量temp保存當前的值，外層for循環定義一次變量count=0，當做計數器，內部再一次循環數組判斷當前的數組與外層的數組某一項是否相等，如是count++; 然后把當前的一項值置為-1，下一次就不會再繼續循環了 * @return {newArrs} 返回一個新數組 */ function arrayElemCount(arrs){ var newArrs = []; if(arrs.length > 0) { for(var i = 0,ilen = arrs.length; i < ilen; i+=1) { var temp = arrs[i]; var count = 0; for(var j = 0,jlen = arrs.length; j < jlen; j+=1) { if(arrs[j] == temp) { count++; arrs[j] = -1; } } newArrs.push(temp + ":" +count); } } return newArrs; } var arrs = [1,2,1,2,3,4,5,6,7,1,2,3]; console.log(arrayElemCount(arrs)); // 打印如下：["1:3", "2:3", "-1:6", "-1:6", "3:2", "4:1", "5:1", "6:1", "7:1", "-1:12", "-1:12", "-1:12"] // 鍵值為-1的，都可以去掉
Javascript刪除數組重復元素的操作
1. 方案一遍歷數組使用indexOf方法，代碼如下：
/* * javascript數組去重方案一 * @param {arrs} 原數組 * @method 新建一個新數組，遍歷原數組，在新數組內使用indexOf查找原數組內的每一項，如果沒有找到，就把當前的項存入新數組里面去，這樣就過濾掉 * 重復項 indexOf方法在IE8及IE8以下不支持，因此有必要封裝一個 * @return {newArrays} 返回新數組 */ function arrayUnique(arrs) { var newArrays = []; for(var i = 0,ilen = arrs.length; i < ilen; i++) { if(newArrays.indexOf) { if(newArrays.indexOf(arrs[i]) == -1) { newArrays.push(arrs[i]); } }else { if(indexOf(arrs[i],newArrays) == -1) { newArrays.push(arrs[i]); } } } return newArrays; } /* * 為了支持IE8及以下瀏覽器需要封裝一個indexOf方法 * @param {arr,arrs} 某一項 原數組 * @return 返回數組某一項 */ function indexOf(arr,arrs){ if(arrs.length > 0) { for(var i = 0,ilen = arrs.length; i < ilen; i+=1) { if(arrs[i] == arr) { return i; } } } return -1; } var arrs = [1,2,3,1,2,3]; console.log(arrayUnique(arrs)); // [1,2,3]
2. 方案二：數組下標判斷法；
/* * 數組下標判斷法 * 思路：先定義一個新數組，循環當前數組，使用indexOf方法，如果在當前的數組的第i項在當前數組中的位置是i項的話，說明該項在數組中並未出現過，存入新數組，否則的話，在原數組中出現過，因此需要過濾掉。性能和第一種方案差不多。 * @return {newArrars} 返回新數組 */ function arrayUnique(arrs) { var newArrays = []; if(arrs.length > 0) { for(var i = 0,ilen = arrs.length; i < ilen; i+=1) { if(arrs.indexOf) { if(arrs.indexOf(arrs[i]) == i) { newArrays.push(arrs[i]); } }else { if(indexOf(arrs[i],arrs) == i) { newArrays.push(arrs[i]); } } } } return newArrays; } /* * 為了支持IE8及以下瀏覽器需要封裝一個indexOf方法 * @param {arr,arrs} 某一項 原數組 * @return 返回數組某一項 */ function indexOf(arr,arrs){ if(arrs.length > 0) { for(var i = 0,ilen = arrs.length; i < ilen; i+=1) { if(arrs[i] == arr) { return i; } } } return -1; } var arrs = [1,2,1,3,1]; console.log(arrayUnique(arrs)); // [1,2,3]
3. 方案三：排序后相鄰去除法
/* * 排序后相鄰去除法 * @method 新建一個新數組，遍歷當前的數組，如果當前的數組某一項不等於新數組的最后一項的話，就把當前的項存入新數組中，最后返回新數組 */ function arrayUnique(arrs) { var newArrays = []; if(arrs.length > 0) { arrs.sort(); for(var i = 0,ilen = arrs.length; i < ilen; i+=1) { if(arrs[i] !== newArrays[newArrays.length - 1]) { newArrays.push(arrs[i]); } } } return newArrays; } var arrs = [1,2,1,3,1]; console.log(arrayUnique(arrs)); // [1,2,3]
4. 方案四：對象鍵值對法
代碼如下：
/* * 對象鍵值法(該方法性能最優) * @method 定義一個空對象和空新數組，遍歷當前的數組，判斷該對象是否存在數組的某一項，如果不存在 * 就當當前的某一項存入新數組去，且當前的項置為-1 目的過濾掉重復的項 */ function arrayUnique(arrs) { var newArrays = []; var hash = {}; if(arrs.length > 0) { for(var i = 0,ilen = arrs.length; i < ilen; i+=1) { if(!hash[arrs[i]]) { hash[arrs[i]] = 1; newArrays.push(arrs[i]); } } } return newArrays; } var arrs = [4,5,2,1,2,1,3,1]; console.log(arrayUnique(arrs)); // [4,5,2,1,3]
Javascript刪除數組里面的某個元素。
方案一：使用indexOf和splice()方法刪除某個元素；
代碼如下：
/* * 為了支持IE8及以下瀏覽器需要封裝一個indexOf方法 * @param {arr,arrs} 某一項 原數組 * @return 返回數組某一項 */ function indexOf(arr,arrs){ if(arrs.length > 0) { for(var i = 0,ilen = arrs.length; i < ilen; i+=1) { if(arrs[i] == arr) { return i; } } } return -1; } /* * 刪除數組里面的某個元素 * @param {elem,arrs} 要刪除的元素 原數組 * 思路：先使用indexOf方法在數組里面找到該元素的位置，然后使用splice()方法刪除一個元素 * @return {elem,arrs} 返回一個對象，對象有2個元素，第一個是被刪除的元素elem鍵，另一個是被刪除元素 后的數組，也就是新數組 [2,3] */ function removeAttrsElem(elem,arrs){ var newElem; if(arrs.length > 0) { var index = indexOf(elem,arrs); if(index > -1) { newElem = arrs.splice(index,1); } } return { elem: newElem, arrs: arrs } } var arrs = [1,2,3]; var elem = 1; console.log(removeAttrsElem(elem,arrs)); // 返回一個對象 {elem:1,arrs:[2,3]}
方案二：直接遍歷數組 取其中某一項 如果某一項與該元素相同的話，直接截取，和第一種方案類似，比第一種方案簡單
/* * 刪除數組里面的某個元素 * @param {elem,arrs} 要刪除的元素 原數組 * 思路：直接遍歷數組 取其中某一項 如果某一項與該元素相同的話，直接截取，和第一種方案類似，比第一種方案簡單 * @return {elem,arrs} 返回一個對象，對象有2個元素，第一個是被刪除的元素elem鍵，另一個是被刪除元素 后的數組，也就是新數組 [2,3] */ function removeAttrsElem(elem,arrs){ var newElem; if(arrs.length > 0) { for(var i =0,ilen = arrs.length; i < ilen; i+=1) { if(arrs[i] == elem) { newElem = arrs.splice(i,1); } } } return { elem: newElem, arrs: arrs } } var arrs = [1,2,3]; var elem = 1; console.log(removeAttrsElem(elem,arrs)); // 返回一個對象 {elem:1,arrs:[2,3]}
在javascript中求出2個數組的相同的元素及不同的元素
思路：先定義一個對象，把A數組轉換成對象，然后遍歷B數組，判斷B數組中某一項是否在A數組那個對象里面 如果在的話，說明B數組與A數組有相同的元素，否則B數組和A數組有不同的元素有哪些；
代碼如下：
/* * 求出2個數組的相同的元素和不同的元素 * 思路：先定義一個對象，把A數組轉換成對象，然后遍歷B數組，判斷B數組中某一項是否在 * A數組那個對象里面 如果在的話，說明有相同的元素，否則為不同的元素 */ function getArrsSameAndDiffElem(arrs1,arrs2){ var hash = {}, sameElemArrs = [], diffElemArrs = []; if(arrs1.length > 0) { for(var i = 0,ilen = arrs1.length; i < ilen;i+=1) { hash[arrs1[i]] = 1; } } if(arrs2.length > 0) { for(var j = 0,jlen = arrs2.length; j < jlen; j+=1) { if(hash[arrs2[j]]) { // 說明有相同的元素，把相同的元素存入sameElemArrs數組里面去 sameElemArrs.push(arrs2[j]); }else { // 說明是不同的元素，把不同的元素存入diffElemArrs數組里面去 diffElemArrs.push(arrs2[j]); } } } return { sameElemArrs: sameElemArrs, diffElemArrs: diffElemArrs } } var arrs1 = ["aac","aab","cfg",'longen','tugenhua','single']; var arrs2 = ["aac","mnc","nba","cba","anta",'tugenhua','single']; console.log(getArrsSameAndDiffElem(arrs1,arrs2)); // 打印出 diffElemArrs = ["mnc","nba","cba","anta"] // 相同的元素 sameElemArrs = ["aac",'tugenhua','single']
如上可以看到 arrs2中與arr1中數組有相同的元素如上，不同的元素也如上；
如果需要判斷arr1中與arr2中數組相同元素及不同的元素，傳遞參數調換位置即可！
Javascript檢測2個數組是否相似
判斷2個數組是否相似的條件：
- 先判斷這兩個對象是否為Array的實例。
- 接着判斷該數組的長度是否一致。
- 判斷該2個對象的類型是否一樣，先對這2個數組先轉換為字符串后，再進行排序比較，如果該2個對象類型的個數一致，長度一致，且都是數組，說明該2個數組是相似的；比如如下：
var arr11 = [11,true]; var arr22 = [false,22];
如上2個數組是相似的，但是如果2個數組如下這樣的話
var arr11 = [11,true]; var arr22 = [false,true];
說明2個數組不相似了~ 代碼如下：
function arraysSimilar(arr1,arr2) { if(!(arr1 instanceof Array) || !(arr2 instanceof Array)) { return false; } if(arr1.length !== arr2.length) { return false; } var arrsLen = arr1.length; var tempArrs1 = [], tempArrs2 = []; for(var i = 0; i < arrsLen; i+=1) { var t1 = Object.prototype.toString.apply(arr1[i]); tempArrs1.push(t1); var t2 = Object.prototype.toString.apply(arr2[i]); tempArrs2.push(t2); } return tempArrs1.sort().join() === tempArrs2.sort().join() ? true : false; } var arr1 = ["aa","cc",false,"bb"]; var arr2 = ["11","cc","11",false]; console.log(arraysSimilar(arr1,arr2)); // true var arr11 = [11,true]; var arr22 = [false,22]; console.log(arraysSimilar(arr11,arr22)); // true
如何判斷該對象是否為數組。
1. typeof
首先我們會想到的是使用typeof來檢測數據類型，但是對於Function, String, Number, Undefined等這幾種基本類型來說，使用typeof來檢測都可以檢測到，比如代碼如下：
function test(){} console.log(typeof 1); // number console.log(typeof test); // function console.log(typeof "yunxi"); // string console.log(typeof undefined); // undefined
但是對於數組或者正則來說，使用typeof來檢測的話，那就滿足不了，因為當我們檢測數組或者正則的話，那么返回的類型將會是一個對象object，如下代碼所示：
console.log(typeof []); // object console.log(typeof /\d+/g); // object
2. Instanceof
由此我們很容易會想到使用instanceof來檢測某個對象是否是數組的實例，該檢測會返回一個布爾型(boolean),如果是數組的話，返回true，否則的話返回false；我們再來看下上面的檢測是否為數組的代碼如下：
console.log([] instanceof Array); // true console.log(/\d+/g instanceof Array); // false
如上可以看到使用instanceof確實可以判斷是否為數組的列子;
3. constructor屬性
在javascript中，每個對象都有一個constructor屬性，它引用了初始化該對象的構造函數，比如判斷未知對象的類型，因此我們可以如下寫一個方法：代碼如下：
function isArray(obj) { return typeof obj == 'object' && obj.constructor == Array } // 測試demo console.log(isArray([])); // true var a = {"a":1}; console.log(isArray(a)); // false var b = [1,2,3]; console.log(isArray(b)); // true console.log(isArray(/\d+/g));// false
如上可以看到，通過調用isArray 方法也可以判斷是否為數組的列子。
我們現在可以看到，對於第二點和第三點分別使用instanceof方法和constructor屬性貌似都可以來判斷是否為數組了，但是也有列外情況，比如在跨框架iframe的時候使用頁面中的數組時，會失敗，因為在不同的框架iframe中，創建的數組是不會相互共享其prototype屬性的；如下代碼測試即可得到驗證~
var iframe = document.createElement('iframe'); document.body.appendChild(iframe); xArray = window.frames[window.frames.length-1].Array; var arr = new xArray("1","2","3","4","5"); //這個寫法IE下是不支持的，標准瀏覽器firefox，chrome下有 console.log(arr); // 打印出 ["1", "2", "3", "4", "5"] console.log(arr instanceof Array); // false console.log(arr.constructor === Array); // false
如上的方法我們都不能來判斷一個對象是否為數組的方式; 但是我們在看ECMA262中可以看到，可以使用 Object.prototype.toString.call()方法來判斷一個對象是否為數組；如下代碼：
function isArray(obj) { return Object.prototype.toString.call(obj) == '[object Array]'; } // 代碼調用 console.log(isArray([])); // true console.log(isArray([1,2,3])); // true var iframe = document.createElement('iframe'); document.body.appendChild(iframe); xArray = window.frames[window.frames.length-1].Array; var arr = new xArray("1","2","3","4","5"); console.log(arr); // ["1","2","3","4","5"] console.log(isArray(arr)); // true
js將類數組對象轉換成數組對象
首先我們來看一下類數組，什么是類數組，類數組有什么特征呢？
具有：有指向對象的數字索引 及 length屬性值；
不具有：它不具有數組的方法，比如push，slice，pop等方法；
Javascript中常見的類數組有arguments, HTMLCollection的集合(比如document.getElementsByClassName,document.getElementsByTagName)等方法，常見的類數組對象有如下：
document.getElementsByClassName, document.getElementsByTagName,document.getElementsByName,arguments等等；比如如下測試代碼：類數組可以有length屬性，可以遍歷，但是它並不是數組的實例，如下代碼：
function elems(){ for(var i = 0, ilen = arguments.length; i < ilen; i+=1) { console.log(arguments[i]); // 循環2次 打印出 1,2 } console.log(arguments instanceof Array);// false } elems(1,2);
我們再來測試下arguments是否和數組一樣有push方法；測試代碼如下：
function test(){ console.log(arguments.push(1)); //arguments.push is not a function } test();
在控制台中打印出 arguments.push is not a function 報錯，說明類數組並不是一個真正的數組，因為它沒有數組的方法；
但是我們可以將類數組轉換為數組，我們可以使用slice()方法call對象；slice()方法可以將一個類數組對象/集合轉換成一個數組，只需要使用數組原型上的slice方法call這個對象，即Array.prototype.slice.call(arguments);即可將類數組轉換為數組，或者我們也可以使用[].slice.call(arguments);來轉換數組；
如下代碼：
function test(){ //var args = [].slice.call(arguments); var args = Array.prototype.slice.call(arguments); console.log(args.push(1)); //1 } test();
使用上面的 [].slice.call()方法和 Array.prototype.slice.call()方法都可以將類數組轉換為數組的，比如上面的args就是轉換后的數組，其后就擁有push()方法；
當然如果我們不嫌麻煩的話，我們可以先在函數內部定義一個新數組，然后使用arguments.length的屬性遍歷每一項，把每一項存入到新數組里面去也是可以的，但是這樣做並沒有上面的好；如下代碼：
function elems(){ var newArrs = []; for(var i = 0, ilen = arguments.length; i < ilen; i+=1) { newArrs[i] = arguments[i]; } console.log(newArrs); // [1,2] } elems(1,2);
查找數組中最大值與最小值
最小值算法如下：
- 將數組中第一個元素賦值給一個變量，把這個變量作為最小值；
- 開始遍歷數組，從第二個元素開始依次和第一個元素進行比較。
- 如果當前的元素小於當前的最小值的話，就把當前的元素值賦值給最小值；
- 移動到下一個元素，繼續對第三步操作；
- 當數組元素遍歷結束時，這個變量存儲的就是最小值；
代碼如下：
// 查找數組中最小值 function arrayMin(arrs){ var min = arrs[0]; for(var i = 1, ilen = arrs.length; i < ilen; i+=1) { if(arrs[i] < min) { min = arrs[i]; } } return min; } // 代碼測試 var rets = [2,4,5,6,7,9,10,15]; console.log(arrayMin(rets));//2
上面是對數組中的數值進行比較的，如果數組中的數字是字符串的話，先要把字符串轉換成數字再進行比較即可，因為字符串比較的不是值，而是ASCII編碼，比如2的ASCLL編碼會大於15的ASCII編碼，因為15的編碼第一個數字是1,2的ASCII編碼肯定大於1的；
求最大值的算法和上面類似：
1.將數組中第一個元素賦值給一個變量，把這個變量作為最大值；
2.開始遍歷數組，從第二個元素開始依次和第一個元素進行比較。
3.如果當前的元素大於當前的最大值的話，就把當前的元素值賦值給最大值；
4移動到下一個元素，繼續對第三步操作；
5.當數組元素遍歷結束時，這個變量存儲的就是最小值；
// 在數組中查找最大值 function arrayMax(arrs) { var max = arrs[0]; for(var i = 1,ilen = arrs.length; i < ilen; i++) { if(arrs[i] > max) { max = arrs[i]; } } return max; } // 代碼測試 var rets = [2,4,5,6,7,9,10,15]; console.log(arrayMax(rets));//15