此文章用于歸納Array的所有方法
在JavaScript中,除了Object,用得最多的可能就是數組Array了。下面我們將一起來總結一下數組Array的所有方法。
首先總結一下Array
的屬性:
-
Array.length
:返回數組的長度。
然后總結一下Array
的方法:
-
Array.from(arrayLike ,function)
:此方法接受2個參數,第一個參數接受一個類數組對象,第二個參數接受一個映射函數。該方法是將arrayLike
轉換成真正的數組,如果有第二個參數,將會把第一個參數里的每一個元素在function
中作用一遍,并返回結果,構成一個新數組,然后返回該數組。具體操作如下:
function arr(){
return Array.from(arguments, function(num){return num*2});
}
arr(1,2,3,4);//[2, 4, 6, 8]
-
Array.isArray(obj)
:確定輸入的值是否是一個數組,如果是,返回true
如果不是,返回false
。 -
Array.of()
:是創建數組的一種方法,它接受的每一個參數都將作為新構成數組的一個元素。該方法返回構建完成的數組。和Array()
創建數組有稍微不同,具體如下:
Array.of(2); // [2]
Array.of(1, 2, 3); // [1, 2, 3]
Array(2); // [ , ]或者[undefined × 2]
Array(1, 2, 3); // [1, 2, 3]
最后總結Array
實例的方法,也就是array.prototype
的方法:
-
concat()
:該方法用于合并2個或多個數組,不會改變原數組,返回一個新數組。
var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
arr1.concat(arr2);//["a", "b", "c", "d", "e", "f"]
arr1.concat(1,2,3)//["a", "b", "c", 1, 2, 3]
-
copyWithin(target, start = 0, end = this.length)
:該方法接受3個參數,其中第一個參數為目標位置(必選),第二個是起始位置(可選),第三個是結束位置(可選)。該方法的作用是將指定的一部分元素復制到同一個數組指定的位置替換掉,并返回數組。具體代碼如下:
//從第3個位置開始替換倒數第2個到倒數第1個元素,即5
[1,2,3,4,5,6].copyWithin(3,-2,-1)//[1,2,3,5,5,6]
//從第0個位置開始替換第2到第4的元素,即3,4
[1,2,3,4,5,6].copyWithin(0,2,4)//[3,4,3,4,5,6]
-
entries()
:將輸入的數組變為迭代器對象,可使用next()
或者for of
循環。具體代碼如下:
var a = ['a', 'b', 'c'];
var iterator = a.entries();
console.log(iterator.next()); //Object {value: Array(2), done: false}
for (let e of iterator) {
console.log(e);
}
// [1, 'b']
// [2, 'c']
-
every(function)
:該方法接受一個函數作為參數,該函數可以有3個參數,第一個參數是當前正在處理的數組的元素,第二個參數為當前元素的索引,第三個參數為該數組本身。該方法主要的作用是遍歷每一個元素,看是否每一個元素都能通過function
的測試,如果都通過,返回true
,只要有一個沒通過,返回false
。具體代碼如下:
[1,2,3,4,5,6].every(function(item,index){
return item>5
})//false
[1,2,3,4,5,6].every(function(item,index){
return item>0
})//true
-
some(function)
:與every(function)
類似。只要有一個元素滿足條件,返回true
,沒有一個元素滿足條件,返回false
。
[1,2,3,4,5,6].some(function(item,index){
return item>5
})//true
[1,2,3,4,5,6].some(function(item,index){
return item>9
})//false
-
fill(value, start = 0, end = this.length)
:該方法接受3個參數,第一個參數為填充的值,第二個參數和第3個參數與copyWithin()
類似。具體代碼如下:
//用3替換倒數第2個到倒數第1個元素,即5
[1,2,3,4,5,6].fill(3,-2,-1)//[1,2,3,4,3,6]
//用0替換第2到第4的元素,即3,4
[1,2,3,4,5,6].fill(0,2,4)//[1,2,0,0,5,6]
-
filter(function)
:該方法的function
參數與every
類似,不同的地方在于,該方法返回一個通過function
測試的元素組成的新數組。具體代碼如下:
[1,2,3,4,5,6].filter(function(item,index){
return item>5
})//[6]
[1,2,3,4,5,6].filter(function(item,index){
return item>2
})//[3,4,5,6]
-
find(function)
:該方法的function
參數與every
類似,不同的地方在于,該方法返回第一個通過function
測試的元素,如果都沒通過,返回undefined
。具體代碼如下:
[1,2,3,4,5,6].find(function(item,index){
return item>5
})//6
[1,2,3,4,5,6].find(function(item,index){
return item>2
})//3
-
findIndex(function)
:該方法的function
參數與every
類似,不同的地方在于,該方法返回第一個通過function
測試的元素的索引,如果都沒通過,返回-1
。具體代碼如下:
[1,2,3,4,5,6].findIndex(function(item,index){
return item>5
})//5
[1,2,3,4,5,6].findIndex(function(item,index){
return item>2
})//2
-
forEach(function)
:該方法的function
參數與every
類似,不同的地方在于,該方法沒有返回值,只是將數組中每一個元素在函數中作用一遍。具體代碼如下:
var arr = [];
[1,2,3,4,5,6].forEach(function(item,index){
if(item>2){ arr.push(item); }
})
console.log(arr)//[3, 4, 5, 6]
-
includes(element,fromIndex = 0)
:該方法接受2個參數,第一個參數是需要尋找的元素,第二參數可選,為從什么位置開始尋找。如果找到了,返回true
,如果沒找到,返回false
具體代碼如下:
var arr = [1,2,3]
arr.includes(2);//true
arr.includes(5);//false
arr.includes(2,2)//false
-
indexOf(element,fromIndex = 0)
:該方法接受2個參數,第一個參數是需要尋找的元素,第二參數可選,表示從什么位置開始尋找。找到了返回當前元素的位置,如果沒找到,返回-1
具體代碼如下:
var arr = [1,2,3]
arr.indexOf(2);//1
arr.indexOf(5);//-1
arr.indexOf(2,2)//-1
-
lastIndexOf(element,fromIndex = 0)
:該方法接受2個參數,第一個參數是需要尋找的元素,第二參數可選,表示從什么位置開始尋找。如果找到了,返回給定的元素最后一次出現的位置,如果沒找到,返回-1
具體代碼如下:
var arr = [1,2,3,1]
arr.lastIndexOf(2);//3
arr.lastIndexOf(5);//-1
arr.lastIndexOf(2,2)//-1
-
join(separator = ',')
:該方法接受1個參數(可選),將數組的所有元素以separator
連接為字符串,并返回該字符串。具體代碼如下:
var a = ['a', 'b', 'c'];
a.join(); // 'a,b,c'
a.join(', '); // 'a, b, c'
a.join(' + '); // 'a + b + c'
a.join(''); // 'abc'
-
keys()
:該方法作用于entries()
類似,將對象變為可迭代的對象,但還是有所不同。具體代碼如下:
var a = ['a', 'b', 'c'];
var iterator = a.keys();
console.log(iterator.next()); //Object {value: 0, done: false}
for (let e of iterator) {
console.log(e);
}
//1
//2
-
map(function)
:該方法的function
參數與every
類似,不同的地方在于該方法返回一個由function
作用之后的新數組,該方法。具體代碼如下:
[1,2,3,4,5,6].map(function(item,index){
return item*2
})//[2, 4, 6, 8, 10, 12]
-
pop()
:該方法會刪除最后一個元素并返回該元素,被刪除元素的數組長度減少1
。具體代碼如下:
var arr = [1, 2, 3];
arr.pop();//3
console.log(arr); // [1, 2]
-
push(element)
:該方法會在最后添加一個元素并返回該數組的length
。具體代碼如下:
var arr = [1, 2, 3];
arr.push(4);//4
console.log(arr); // [1,2,3,4]
-
reduce(function)
:該方法接受一個function
作為參數,把數組的元素依次放入function
中,得到的結果作為也作為參數傳入function
,一直到所有元素作用完畢,返回最終結果。具體代碼如下:
var arr = [1,2,3,4,5,6]
arr.reduce(function(element1,element2){
return element1+element2
})//21
-
reduceRight(function)
:該方法與reduce()
類似,只不過執行順序是從右往左。具體代碼如下:
var arr = [1,2,3,4,5,6]
arr.reduceRight(function(element1,element2){
return element1+element2
})//21
-
reverse()
該方法是將數組中的元素順序反轉,并返回該數組。具體代碼如下:
var arr = [1,2,3,4,5,6]
arr.reverse()
-
shift()
:該方法和pop()
類似,只不過pop
刪除最后一個元素,shift()
刪除第一個元素。
var arr = [1, 2, 3];
arr.shift();//1
console.log(arr); // [2, 3]
-
slice(start = 0,end=this.length)
:該方法接受2個參數,一個開始的位置,一個結束的位置(不包括結束的位置)。選擇數組的這一部分淺拷貝到一個新數組對象里面,并返回新數組。原數組不會改變。具體代碼如下:
var arr = [1,2,3,4,5,6]
//選擇第2和第4,即3,4
arr.slice(2,4)//[3,4]
console.log(arr)// [1,2,3,4,5,6]
-
splice(start = 0, deleteCount, element ...)
:該方法接受3個參數,第一個參數是修改的開始位置,第二個參數是可選的,表示要移除數組的個數,第3個參數是加入的元素。該方法返回被刪除的數組,并且原數組會被修改。具體代碼如下:
var arr = [1,2,3,4,5,6,7,8]
//從第2開始,刪除4個元素,并添加moonburn字符串
arr.splice(2,4,'moonburn')//[3,4,5,6]
console.log(arr)// [1,2,'moonburn',7,8]
-
sort(compareFunction)
:該方法接受一個參數(可選)。如果不輸入參數,會自發的給數組排序,默認排序順序是根據字符串Unicode碼點。也可以加入compareFunction
,自己排序。具體代碼如下:
var arr = [1,20,3,40,5,60]
arr.sort(function(element1,element2){
return element1>element2
})
console.log(arr)// [1, 3, 5, 20, 40, 60]
-
toLocaleString()
:數組的toLocaleString()
會將所有的元素都作用一遍toLocaleString()
,并拼接為字符串。具體如下:
var arr = [123,new Date(),'string']
arr.toLocaleString()//"123,2017-6-8 11:04:50,string"
-
toString()
和toLocaleString()
類似,只是不帶地域特色。具體如下:
var arr = [123,new Date(),'string']
arr.toString()//"123,Thu Jun 08 2017 11:08:24 GMT+0800 (中國標準時間),string"
-
unshift(element····)
:將一個或多個元素添加到數組的開頭。返回新數組的length
具體代碼如下:
var arr = [1,2,3,4];
arr.unshift('a','b');//6
console.log(arr);//["a", "b", 1, 2, 3, 4]