[[172801]]

Array對象

之前一直在溫故js系列，希望能夠知新，不過最近應業(yè)務要求，在做移動WEB，需求大，任務多。所以，只有像現(xiàn)在閑著的時候才能繼續(xù)溫故js了。

在 JavaScript 中 Array 是一個用來構(gòu)造數(shù)組的全局對象，它是一個高階的類似有序列表的對象，是JavaScript內(nèi)置對象里非常重要的一個。

創(chuàng)建數(shù)組：

數(shù)組字面量

var arr = []; 
 
var arr = [1, 2, 3]; 
 
var arr = [[1],2,[2,[123]]];  

數(shù)組構(gòu)造函數(shù)

var arr = new Array(); //[] 
 
var arr = new Array(1,2,3); //[1, 2, 3] 
 
var arr = new Array(3); //[undefined,undefined,undefined] 參數(shù)3為數(shù)組length 
 
var arr = new Array([1],2,[2,[123]]); //[[1],2,[2,[123]]]  

建議使用數(shù)組字面量方式，性能好，代碼少，簡潔，畢竟代碼少。

Array屬性

length屬性

length屬性返回數(shù)組的長度，是一個可變屬性，表示一個數(shù)組中的元素個數(shù)。

數(shù)組的索引由0開始，所以一個數(shù)組的最前和***的值為限分別是：arr[0]和arr[arr.length-1]

var arr = [1,2,3]; 
arr.length // 3 
arr.length = 2; //改變數(shù)組length，從后往前截取 
arr // [1,2],此時arr.length為2。所以平時我們可以用length來操作數(shù)組（刪除，添加） 
arr.length = 4; 
arr // // [1,2,undefined,undefined],此時arr.length為2,后面填充undefined  

prototype屬性

prototype屬性返回對象類型原型的引用，所有的數(shù)組實例都繼承了這個屬性，所有的數(shù)組方法都定義在 Array.prototype 身上。一般來說，我們經(jīng)常用prototype屬性來擴展數(shù)組方法：

//給數(shù)組添加個方法，返回數(shù)組中的***值 
Array.prototype.max = function() { 
    return Math.max.apply(null,this);  
} 
[1,2,3,4].max(); //4 
 
//給數(shù)組添加個方法，給數(shù)組去重 
Array.prototype.unique = function() { 
    return this.filter((item, index, arr) => arr.indexOf(item) === index); 
} 
[11,2,1,1,2,3,1,2,4,5,23,2].unique(); //[11, 2, 1, 3, 4, 5, 23]  

數(shù)組去重：數(shù)組去重演化

constructor屬性

constructor屬性返回創(chuàng)建對象的函數(shù)，即構(gòu)造函數(shù)。如下：

var arr = [1,2,3]; 
arr.constructor  //function Array() { [native code] } 
arr.constructor === Array  //true  即 new Array 
var a = new Array(); 
a.constructor === Array  //true  

對于數(shù)組來說，這個屬性還是罕見使用的。

數(shù)組判斷

Array.isArray()

Array.isArray() 方法用來判斷某個值是否為Array。如果是，則返回 true，否則返回 false

Array.isArray([]);  //true 
Array.isArray([1,2,3]);  //true 
Array.isArray(new Array());  //true 
Array.isArray();  //false 
Array.isArray({});  //false 
Array.isArray(123);  //false 
Array.isArray('xzavier');  //false  

利用屬性自己寫方法

Array.isArray()在ES5之前不支持，就自己寫。不過現(xiàn)在都到ES6了，可以不管了。

Array.prototype.isArray = Array.prototype.isArray || function() { 
    return Object.prototype.toString.call(this) === "[object Array]"; 
} 
[1,2,3].isArray(); //true  

數(shù)組遍歷

經(jīng)典的for

for (var index = 0; index < arr.length; index++) { 
    console.log(arr[index]); 
} 

 這種寫法很經(jīng)典，就是語句多，但是性能好。

ES5的forEach

arr.forEach(function (value) { 
    console.log(value); 
});  

這種寫法簡潔，但這種方法也有一個小缺陷：你不能使用break語句中斷循環(huán)，也不能使用return語句返回到外層函數(shù)。

不建議的for-in

for (var i in arr) {  
    console.log(arr[i]); 
}  

for-in是為普通對象設計的，你可以遍歷得到字符串類型的鍵，因此不適用于數(shù)組遍歷。但是它能遍歷數(shù)組，作用于數(shù)組的for-in循環(huán)體除了遍歷數(shù)組元素外，還會遍歷自定義屬性。舉個例子，如果你的數(shù)組中有一個可枚舉屬性arr.name，循環(huán)將額外執(zhí)行一次，遍歷到名為“name”的索引。就連數(shù)組原型鏈上的屬性都能被訪問到。所以，不建議使用。

ES6的for-of

for (var value of arr) { 
 
    console.log(value); // 1 2 3 
 }  

這是最簡潔、最直接的遍歷數(shù)組元素的語法。這個方法避開了for-in循環(huán)的所有缺陷。與forEach()不同的是，它可以正確響應break、continue和return語句。

for (var value of arr) { 
    if(value == 2){break;} 
    console.log(value);  //1 
}  

數(shù)組方法細說

splice插入、刪除、替換

splice() 方法可以插入、刪除或替換數(shù)組的元素，注意：同時改變了原數(shù)組。

1.刪除-刪除元素，傳兩個參數(shù)，要刪除***項的位置和第二個要刪除的項數(shù)

2.插入-向數(shù)組指定位置插入任意項元素。三個參數(shù)，***個參數(shù)(位置)，第二個參數(shù)(0)，第三個參數(shù)(插入的項)

3.替換-向數(shù)組指定位置插入任意項元素，同時刪除任意數(shù)量的項，三個參數(shù)。***個參數(shù)(起始位置)，第二個參數(shù)(刪除的項數(shù))，第三個參數(shù)(插入任意數(shù)量的項)

var arr = ["q","w","e"];  
//刪除  
var removed = arr.splice(1,1);  
console.log(arr); //q,e  已被改變 
console.log(removed); //w ,返回刪除的項  
//插入  
var insert = arr.splice(0,0,"r"); //從第0個位置開始插入  
console.log(insert); //返回空數(shù)組  
console.log(arr); //r,q,e  
//替換  
var replace = arr.splice(1,1,"t"); //刪除一項，插入一項  
console.log(arr); //r,t,e 
console.log(replace); //q,返回刪除的項  

sort 排序

sort() 方法對數(shù)組的元素做原地的排序，并返回這個數(shù)組。

var arr = [1,2,4,3,1,1,2]; 
 
console.log(arr.sort());//[1, 1, 1, 2, 2, 3, 4]  

然而：

var arr = [1,2,10,4,3,1,1,2]; 
 
console.log(arr.sort());//[1, 1, 1, 10, 2, 2, 3, 4]  

這是因為sort排序可能是不穩(wěn)定的，默認按照字符串的Unicode碼位點排序。

但是，sort()方法接受一個參數(shù)，這個參數(shù)是一個函數(shù)，可選，用來指定按某種順序進行排列的函數(shù)。如果省略，元素按照轉(zhuǎn)換為的字符串的諸個字符的Unicode位點進行排序。

var arr = [1,2,10,4,3,1,1,2]; 
 
console.log(arr.sort(function(a,b){ 
 
return a-b; 
 
})); // [1, 1, 1, 2, 2, 3, 4, 10]  

這個函數(shù)就是我們自己控制了，我們想要什么樣的排序就改變這個參數(shù)函數(shù)的邏輯即可。

slice截取、轉(zhuǎn)化arguments偽數(shù)組

slice()方法可從已有的數(shù)組中返回選定的元素數(shù)組。不會修改原數(shù)組，只會會淺復制數(shù)組的一部分到一個新的數(shù)組，并返回這個新數(shù)組。

語法：arrayObject.slice(start,end) 參數(shù)可為正負。

start    必需。規(guī)定從何處開始選取。如果是負數(shù)，那么它規(guī)定從數(shù)組尾部開始算起的位置。也就是說，-1 指***一個元素，-2 指倒數(shù)第二個元素，以此類推。 
end      可選。規(guī)定從何處結(jié)束選取。該參數(shù)是數(shù)組片斷結(jié)束處的數(shù)組下標。如果沒有指定該參數(shù)，那么切分的數(shù)組包含從 start 到數(shù)組結(jié)束的所有元素。 
         如果這個參數(shù)是負數(shù)，那么它規(guī)定的是從數(shù)組尾部開始算起的元素。 
 
var arr = [1,2,3,4,5]; 
arr.slice(0,3);    //  [1,2,3] 
arr.slice(3);      //  [4,5] 
arr.slice(1,-1);   //  [2,3,4] 
arr.slice(-3,-2);  //  [3] 
var arr1 = arr.slice(0); //返回數(shù)組的拷貝數(shù)組，是一個新的數(shù)組，不是賦值指向  

slice方法經(jīng)常用來截取一個數(shù)組，不過它更常用在將偽數(shù)組轉(zhuǎn)化為真數(shù)組。平時我們的函數(shù)傳的參數(shù)arguments是一個偽數(shù)組，很多數(shù)組的方法不能使用，我們就需要將偽數(shù)組轉(zhuǎn)化為真數(shù)組。 

function test() { 
    var arr = arguments; 
    arr.push('xza'); 
    console.log(JSON.stringify(arr)); 
} 
test(1,2,3);  //arr.push is not a function(…) 因為偽數(shù)組沒有push方法 
 
轉(zhuǎn)換后： 
function test() { 
    var arr = Array.prototype.slice.call(arguments); 
    arr.push('xza'); 
    console.log(JSON.stringify(arr)); 
} 
test(1,2,3); //[1,2,3,"xza"]  

filter 過濾

filter() 方法使用指定的函數(shù)測試所有元素，并創(chuàng)建一個包含所有通過測試的元素的新數(shù)組。簡單來說就是對數(shù)組進行過濾，返回一個過濾過的數(shù)組。

語法：array.filter(function(currentValue,index,arr), thisValue)

function(currentValue, index,arr)    必須。函數(shù)，數(shù)組中的每個元素都會執(zhí)行這個函數(shù) 
 
函數(shù)的三個參數(shù):currentValue必須，當前元素的值； index可選，當期元素的索引值； arr可選，當期元素屬于的數(shù)組對象 
thisValue    可選。對象作為該執(zhí)行回調(diào)時使用，傳遞給函數(shù)，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined" 
 
//用filter給數(shù)組添加個方法，給數(shù)組去重 
Array.prototype.unique = function() { 
    return this.filter((item, index, arr) => arr.indexOf(item) === index); 
} 
[11,2,1,1,2,3,1,2,4,5,23,2].unique(); //[11, 2, 1, 3, 4, 5, 23]  

filter() 不會對空數(shù)組進行檢測，不會改變原始數(shù)組。

concat 連接數(shù)組 

var arr1 = [1,2,3]; 
var arr2 = [4,5,6]; 
var arr3 = arr1.concat(arr2);  //[1, 2, 3, 4, 5, 6] 
arr3.concat(7); //[1, 2, 3, 4, 5, 6, 7]  

我們平時都是這么使用的，如果需要連接兩個數(shù)組的元素時，中間插元素，可以

var arr3 = arr1.concat('xzavier', arr2); //[1, 2, 3, "xzavier", 4, 5, 6] 

不加參數(shù)相當于拷貝，返回數(shù)組的拷貝數(shù)組，是一個新的數(shù)組，并不是指向原來數(shù)組。 

var arr4 = arr1.concat(); //[1,2,3] 
 
var arr5 = arr1; 
 
arr4 === arr1; //false 
 
arr5 === arr1; //true  

插入刪除

前面講了個splice可以在數(shù)組的任何位置插入刪除元素，這兒講的是只能在首尾插入刪除的方法，用起來也很方便。

在數(shù)組尾插入刪除：

push()方法可以接收任意數(shù)量的參數(shù)，把它們逐個添加到數(shù)組的末尾，并返回修改后數(shù)組的長度。 
pop()方法則從數(shù)組末尾移除***一個元素，減少數(shù)組的length值，然后返回移除的元素。 
 
var arr  = [1,2,3]; 
arr.push(4);  // 返回的length 4 
arr.pop();   //返回的刪除值  4 
arr  //[1, 2, 3]  

在數(shù)組頭插入刪除：

unshift()方法為數(shù)組的前端添加一個元素 
shift()方法從數(shù)組前端移除一個元素 
 
var arr  = [1,2,3]; 
arr.unshift(4);  // 返回的length 4 
arr.shift();   //返回的刪除值  4 
arr  //[1, 2, 3]  

其他方法

方法                使用 
concat()         連接兩個或更多的數(shù)組，并返回結(jié)果。 
join()           把數(shù)組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。 
reverse()        顛倒數(shù)組中元素的順序。 
toString()       把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。 
toLocaleString() 把數(shù)組轉(zhuǎn)換為本地數(shù)組，并返回結(jié)果。 
valueOf()        返回數(shù)組對象的原始值 
map()            返回一個由原數(shù)組中的每個元素調(diào)用一個指定方法后的返回值組成的新數(shù)組。 
every()          測試數(shù)組的所有元素是否都通過了指定函數(shù)的測試。 
some()           測試數(shù)組中的某些元素是否通過了指定函數(shù)的測試。 

小試：(歡迎補充和斧正問題，更多方法延伸閱讀：ES6數(shù)組的擴展)

ar arr = ['xzavier',123,'jser']; 
 
console.log(arr.valueOf()); //['xzavier',123,'jser'] 
 
console.log(arr.toString()); //xzavier,123,jser 
 
console.log(arr.toLocaleString()); //xzavier,123,jser 
 
var arr = ['xzavier',123,'jser']; 
 
console.log(arr.join(',')); //xzavier,123,jser 
 
var arr = [1,2,3]; 
 
console.log(arr.reverse()); //[3,2,1] 
 
var numbers = [1, 4, 9]; 
 
var roots = numbers.map(Math.sqrt); //[1,2,3] 
 
numbers //[1,4,9] 
 
roots // [1,2,3] 
 
[2, 5, 1, 4, 3].some(function (element, index, array) { 
 
return (element >= 10); 
 
}); //false 
 
[2, 5, 1, 4, 13].some(function (element, index, array) { 
 
return (element >= 10); 
 
}); //true 
 
[2, 5, 1, 4, 13].every(function (element, index, array) { 
 
return (element >= 10); 
 
}); //false 
 
[2, 5, 1, 4, 13].every(function (element, index, array) { 
 
return (element >= 0); 
 
}); //true  

趣味探索 

[1,2] + [3,4] == "1,23,4";  //true 
++[[]][+[]]+[+[]] == '10';  //true 
console.log ([] == ![]);  //true?