一、概述
Array是JavaScript的內置對象,同時也是一個構造函數,可以用它生成新的數組。
作爲構造函數時,Array可以接收參數,但是不同的參數,會是Array產生不同的行爲。
1、無參數時,返回一個空數組。
2、單個參數時,如果該參數時正整數,則這個正整數表示新數組的長度;如果該參數是非正整數(比如,字符串,布爾,對象等),則該值是新數組的成員。
3、多個參數時,這些參數都是新數組的成員。
var a1 = new Array(); var a2 = new Array(2); var a3 = new Array("abc"); var a4 = new Array([1,2]); var a5 = new Array(1,2); console.log(a1); // [] console.log(a2); // [undefined × 2] console.log(a3); //["abc"] console.log(a4); //[Array[2]] console.log(a5); // [1, 2]
可以看到Array的構造函數行爲很不一致,因此,不建議使用它生成新的數組,直接使用數組的字面量是更好地方法。
二、Array對象的靜態方法
2.1、isArray方法
Array.isArray()方法用來判斷一個值是否是數組。他可以彌補typeof運算符的不足。
var a = [1,2,3]; typeof a // "object" Array.isArray(a) // true
上面代碼表示,typeof運算符只能顯示數組的類型是Object,而Array.isArray方法可以對數組返回true。
三、Array對象實例的方法
以下這些Array對象實例的方法,都是數組實例才能使用,如果不想出創建實例,只是想單純的調用這些方法,可以寫成 [].method.call(調用對象,參數) 的形式,或者Array.prototype.method.call(調用對象,參數) 的形式。
3.1、valueOf方法,toString方法
valueOf方法,返回數組本身。
var a = [1,2,3]; console.log(a.valueOf()); // [1,2,3]
toString 方法返回數組的字符串形式。
var a = [1,2,3]; a.toString() // "1,2,3" var a = [1,2,3,[4,5,6]]; a.toString() // "1,2,3,4,5,6"
3.2、 push方法 pop方法
push方法用於在數組的末端添加一個或者多個元素,並返回添加後數組的長度。
var a = []; a.push(1) // 1 a.push("a") // 2 a.push(true, {}) // 4 a // [1, "a", true, {}]
如果需要合併兩個數組,可以這樣寫。
var a1 = [1,2,3]; var a2 = [4,5,6]; Array.prototype.push.apply(a1,a2); console.log(a1.toString()); // 1,2,3,4,5,6 a1.push.apply(a1,a2); // 1,2,3,4,5,6
上面兩種寫法等於 a1.push(4,5,6);
pop方法用於刪除數組的最後一個元素,並返回該元素。
var a1 = [1,2,3]; console.log(a1.pop()); //3 console.log(a1.toString()); //1,2
對於空數組使用pop方法,不會報錯,而是會返回undefined
[].pop() // undefined
3.3、join方法 concat方法
join方法以參數作爲分隔符,將所有的數組成員組成一個字符串返回。如果不提供參數,默認使用逗號作爲分隔符。
var a1 = [1,2,3,4]; console.log(a1.join()); //1,2,3,4 console.log(a1.join("-")); //1-2-3-4
通過函數的call方法,join方法(Array.prototype.join)也可以用於字符串。
Array.prototype.join.call("hello", "-")); // "h-e-l-l-o"
concat方法將新數組的成員,添加到原數組的尾部,然後返回一個新數組,常用於鏈接多個數組。
["hello"].concat(["world"]) // ["hello", "world"] [1,2,3].concat(4,5,6) // [1, 2, 3, 4, 5, 6]
上面代碼表明,concat方法的參數可以是一個或者多個數組,以及原始類型的值。
如果不提供參數,concat方法返回當前數組的一個淺拷貝。所謂“淺拷貝”,指的是如果數組成員包括複合類型的值(比如對象),則新數組拷貝的是該值的引用。
var o = {a:1}; var oldArray = [o]; var newArray = oldArray.concat(); o.a = 2;newArray[0].a // 2
上面代碼中,原數組包含一個對象,concat方法生成的新數組包含這個對象的引用。所以,改變原對象以後,新數組跟着改變。事實上,只要原數組的成員中包含對象,concat方法不管有沒有參數,總是返回該對象的引用。
concat方法也可以用於將對象合併爲數組,但是必須藉助call方法。
[].concat.call({ a: 1 }, [2]) // [{a:1}, 2] // 等同於 [2].concat({a:1})
3.4、shift方法 unshift方法
shift方法用於刪除數組的第一個元素,並返回該元素。
var a = ['a', 'b', 'c']; a.shift(); // 'a' a; // ['b', 'c']
shift方法可以遍歷並清空一個數組。
var list = [1,2,3,4,5,6,7,8,9,10]; var item; while (item = list.shift()) { console.log(item); } list // []
unshift方法用於在數組的第一個位置添加元素,並返回添加新元素後的數組長度。
var a = ['a', 'b', 'c']; a.unshift('x'); // 4 a // ['x', 'a', 'b', 'c']
3.5、reverse方法
reverse方法用於顛倒數組中元素的順序,使用這個方法以後,返回改變後的原數組。
var a = ['a', 'b', 'c']; a.reverse() // ["c", "b", "a"] a // ["c", "b", "a"]
3.6、slice方法
slice方法返回指定位置的數組成員組成的新數組,原數組不變。它的第一個參數爲起始位置(從0開始),第二個參數爲終止位置(但該位置的元素本身不包括在內)。如果省略第二個參數,則一直返回到原數組的最後一個成員。
var a = ["a","b","c"]; a.slice(1,2) // ["b"] a.slice(1) // ["b", "c"] a.slice(0) // ["a","b","c"] a.slice(-2) // ["b", "c"] a.slice(4) // [] a.slice(2, 6) // ["c"] a.slice(2, 1) // []
上面代碼表示,如果slice方法的參數是負數,則從尾部開始選擇的成員個數;如果參數值大於數組成員的個數,或者第二個參數小於第一個參數,則返回空數組。
slice方法的一個重要應用,是將類似數組的對象轉爲真正的數組。
Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 }) // ['a', 'b'] Array.prototype.slice.call(document.querySelectorAll("div")); Array.prototype.slice.call(arguments);
上面代碼的參數都不是數組,但是通過call方法,在它們上面調用slice方法,就可以把它們轉爲真正的數組。
3.7、splice方法
splice方法用於刪除元素,並可以在被刪除的位置添加入新的數組元素。它的返回值是被刪除的元素。需要特別注意的是,該方法會改變原數組。
splice的第一個參數是刪除的起始位置,第二個參數是被刪除的元素個數。如果後面還有更多的參數,則表示這些就是要被插入數組的新元素。
var a = ["a","b","c","d","e","f"]; a.splice(4,2) // ["e", "f"] a // ["a", "b", "c", "d"]
上面代碼從原數組位置4開始,刪除了兩個數組成員。
var a = ["a","b","c","d","e","f"]; a.splice(4,2,1,2); // ["e", "f"] a; // ["a", "b", "c", "d", 1, 2]
上面代碼除了刪除成員,還插入了兩個新成員。
如果只是單純地插入元素,splice方法的第二個參數可以設爲0。
var a = [1,1,1]; a.splice(1,0,2) // [] a // [1, 2, 1, 1]
如果只提供第一個參數,則實際上等同於將原數組在指定位置拆分成兩個數組。
var a = [1,2,3,4]; a.splice(2) // [3, 4] a // [1, 2]
3.8、sort方法
sort方法對數組元素進行排序,默認是按照字典順序排序。排序後,原數組將被改變。
["d","c","b","a"].sort() // ["a", "b", "c", "d"] [4,3,2,1].sort() // [1, 2, 3, 4] [11,101].sort() // [101, 11]
sort方法可以接受一個參數,表示按照自定義方法進行排序。該參數是一個函數,本身又接受兩個參數,表示進行比較的兩個元素。如果返回值大於0,表示第一個元素排在第二個元素後面;其他情況下,都是第一個元素排在第二個元素前面。
var a = [10111,1101,111]; a.sort() // [10111, 1101, 111] function f(a,b){ return a-b; } a.sort(f) // [111, 1101, 10111] [ { name: "張三", age: 30 }, { name: "李四", age: 24 }, { name: "王五", age: 28 } ].sort(function(o1, o2) { return o1.age - o2.age; }) // [ // { name: "李四", age: 24 }, // { name: "王五", age: 28 }, // { name: "張三", age: 30 } // ]
四、ECMA Script5新加入的的數組方法
ECMAScript 5新增了9個數組實例的方法,分別是map,forEach, filter,every,some,reduce,reduceRight,indexOf和lastIndexOf。其中前7個與函數式(functional)操作有關。
這些方法也可以在數組上使用,也可以在字符串和類似數組的對象上使用,這是它們不同於傳統數組方法的一個地方。
在用法上,這些方法的參數是一個函數,這個作爲參數的函數本身又接受三個參數;數組的當前元素elem、該元素的位置index和整個數組arr(詳見下面的實例),另外,上下文對象(context)可以作爲第二個參數,傳入forEach(),every(),some(),filter(),map()方法,用來綁定函數運行時的上下文。
注意:IE8以下版本的瀏覽器不支持這些方法。
4.1、map方法、forEach方法
map方法對所有元依次調用一個函數,根據函數結果返回一個新數組。
[1, 2, 3].map(function(elem, index, arr){ return elem * elem; }); // [1, 4, 9]
通過函數的call方法,map方法可以用於字符串。
[].map.call('abc', function (x) { return x.toUpperCase() }) // [ 'A', 'B', 'C' ] // 或者 'abc'.split('').map(function (x) { return x.toUpperCase() }) // [ 'A', 'B', 'C' ]
forEach方法對所有元素依次執行一個函數,它與map的區別在於不返回新數組,而是對原數組的成員執行某種操作,甚至可能改變原數組的值。
[1, 2, 3].forEach(function(elem, index, arr){ console.log("array[" + index + "] = " + elem); }); // array[0] = 1 // array[1] = 2 // array[2] = 3 var arr = [1, 2, 3]; arr.forEach(function(elem, index, arr){ arr[index] = elem + 1; }); console.log(arr.toString()); //2,3,4
從上面代碼可以看到,map和forEach的參數格式是一樣的,都是一個函數。該函數接受三個參數,分別是當前元素、當前元素的位置(從0開始)、整個數組。
這兩個方法都可以接受第二個參數,用來綁定函數中的this關鍵字。
["foo", "bar"].forEach(func.bind(this)); ["foo", "bar"].forEach(func, this);
上面的兩行代碼是等價的。下面是一個實例;
var arr = [1, 2, 3]; var out = []; arr.map( function(elem,index,arr){this.push(elem*elem)}, out); console.log(out.toString()); // 1,4,9
上面代碼表示,如果提供一個數組作爲第二個參數,則函數內部的this關鍵字就指向這個數組。
4.2、filter方法
filter方法依次對所有數組成員調用一個測試函數,返回結果爲true的成員組成一個新數組返回。
var a = [1,2,3,4,5,6].filter(function(elem,index,arr){ return elem>3; }); console.log(a.toString()); //4,5,6
上面代碼將大於3的原數組成員,作爲一個新數組返回。類似於一個篩選器。
filter方法的參數必須是一個返回布爾值的函數。該函數的第一個參數是當前數組成員的值,這是必需的,後兩個參數是可選的,分別是當前數組成員的位置和整個數組。
var a = [1,2,3,4,5,6].filter(function(elem,index,arr){ return index % 2 == 0; }); console.log(a.toString()); //1,3,5
4.3、some方法 every方法
這兩個方法類似“斷言”(assert),用來判斷數組成員是否符合某種條件。
some方法對所有元素調用一個測試函數,只要有一個元素通過該測試,就返回true,否則返回false。
[1, 2, 3, 4, 5].some(function(elem, index, arr){ return elem >= 3; }); // 返回true
上面代碼表示,如果存在大於等於3的數組成員,就返回true。
every方法對所有元素調用一個測試函數,只有所有元素通過該測試,才返回true,否則返回false。
[1, 2, 3, 4, 5].every(function(elem, index, arr){ return elem >= 3; }); // 返回false
上面代碼表示,只有所有數組成員大於等於3,才返回true。
從上面的代碼可以看到,some和every的使用方法與map和forEach是一致的,參數完全一模一樣。也就是說,它們也可以使用第二個參數,用來綁定函數中的this關鍵字。
4.4、reduce方法、reduceRight方法
這兩個方法的作用,是依次處理數組中的每一個元素,最終累計爲一個值。這兩個方法的差異在於,reduce對數組元素的處理順序是從左到右(從第一個成員到最後一個成員),reduceRight則是從右到左(從最後一個成員到第一個成員),其它的地方也一樣。
reduce方法的第一個參數是一個處理函數。該函數接受四個參數,分別是:
1、用來累計的變量(即當前狀態),默認值爲0.
2、數組的當前元素
3、當前元素在數組中的序號(從0開始)
4、原數組
這四個參數之中,只有前兩個是必須的,後兩個則是可選的。
var arr = [1,2,3,4,5]; var sum = arr.reduce(function( sum, elem ){ return sum + elem; }); console.log(sum); //15
上面代碼的參數sum表示累計變量,默認爲0,elem則是數組的當前元素。reduce方法依次將每個數組元素加入sum,最終返回它們的總和15。
利用reduce方法,可以寫一個數組求和的sum方法。
Array.prototype.sum = function (){ return this.reduce(function (partial, value){ return partial + value; } )}; [3,4,5,6,10].sum(); // 28
如果要對累計變量指定初值,可以把它放在reduce方法的第二個參數。
var arr = [1,2,3,4,5]; var sum = arr.reduce(function( sum, elem ){ return sum + elem; },10); console.log(sum); // 25
上面代碼指定參數x的初值爲10,所以數組元素從10開始累加,最終結果爲25。
4.5、indexOf 和 lastIndexOf方法
ECMAScript 5新增的9個方法之中,有2個與函數式編程無關,分別是indexOf和lastIndexOf。
indexOf方法返回給定元素在數組中第一次出現的位置,如果沒有出現則返回-1。
var a = ['a','b','c']; a.indexOf('b') // 1 a.indexOf('y') // -1
indexOf方法還可以接受第二個參數,表示搜索的開始位置。
['a','b','c'].indexOf('a', 1) // -1
上面代碼從位置1開始搜索字符a,結果爲-1,表示沒有搜索到。
lastIndexOf方法返回給定元素在數組中最後一次出現的位置,如果沒有出現則返回-1。
var arr = [1,2,3,4,5]; console.log(arr.indexOf(2)); // 1
indexOf方法還可以接受第二個參數,表示搜索的開始位置。
var arr = [1,2,3,4,5]; console.log(arr.indexOf(2,3)); // -1
上面是因爲沒有找到,所以反悔了 -1。
lastIndexOf方法返回給定元素在數組中最後一次出現的位置,如果沒有出現則返回-1。
var a = [2, 5, 9, 2]; a.lastIndexOf(2)// 3 a.lastIndexOf(7)// -1
注意,如果數組中包含NaN,這兩個方法不適用。
[NaN].indexOf(NaN) // -1 [NaN].lastIndexOf(NaN) // -1
這是因爲這兩個方法內部,使用嚴格相等運算符(===)進行比較,而NaN是唯一一個不等於自身的值。