JS內置對象之數組詳解

JS中的內置對象

1

JS中的常用的內置對象有：String，Array，Math，Date。今天我們來詳解一下數組的創建及其常用方法。

數組的創建：

使用數組構造函數： var arr = new Array（）;

在這裡需要說明的是()中可以是預先知道數組要保存的項目數量;也可以向Array構造函數中傳遞數組應包含的項。

使用數組字面量表示方法：var arr = [1,2,3];

1

Array的棧方法

push()

語法：arr.push();

功能：把參數添加到arr的尾部

返回值：把指定的值添加到數組後的新長度

unshift()

語法：arr.unshift();

功能：把參數添加到arr的開頭

返回值：把指定的值添加到數組後的新長度

pop()

語法：arr.pop();

功能：刪除arr的最後一個元素

返回值：被刪除的元素

shift()

語法：arr.shift();

功能：刪除arr的第一個元素

返回值：被刪除的元素

2

Array的轉換方法

join()

語法：arr.join();

功能：把arr中所有元素放入字元串

返回值：字元串

3

Array的重排序方法

reverse()

語法：arr.reverse();

功能：顛倒數組中元素的順序

返回值：顛倒順序後的數組

sort()

語法：arr.sort();

功能：對數組進行排序

返回值：重新排序後的數組

我們來看一個例子：

var arr = [24,12,13,88,9];

var newArr = arr.sort();

console.log(newArr);

大家認為列印的出來應該是9,12,13,24,88才對吧，可是結果呢

我們會發現9明明是最小的，但是卻排在了最後面，這是因為sort()其實是把每一個數組項都調用了toString()方法，先將數組項轉成字元串，再按字元串來排序，所以「9」就成為了最大的。

如果我們希望按照數字大小來排序的話，可以給sort()傳入比較函數作為參數。

從小到大排序：arr.sort（function（a，b））;

從大到小排序：arr.sort（function（a，b））;

這個時候我們再將數組排序就會出現我們想要的結果。

var arr = [24,12,13,88,9];

var newArr = arr.sort（function（a，b））;

console.log（newArr）;

如果你想從大到小排序只需要將比較函數中的返回值改一下就OK了。

Array中的連接方法：concat()

語法：arr.concat();

功能：用於連接兩個或多個數組

返回值：連接後的數組

Array中的截取方法：slice()

語法：arr.slice(start，end);

功能：從已有的數組中返回選定的元素

返回值：數組

參數說明：

start和end是數組中的索引，即整數;

start是必需的，規定了從何處開始選取;

end是可選的，規定了從何處結束選取，如果沒有指定end時，截取的數組包含從start開始到數組結束的所有元素;

截取範圍是start到end-1的元素，end不包含在截取範圍內;

slice()的參數中有負數，則用數組長度加上該數來確定相應的位置。

Array中的splice方法：可以實現刪除，插入，替換功能

刪除功能

語法：arr.splice(index，count);

功能：刪除從index開始的count個元素

返回值：含有被刪除元素的數組

參數說明：index是開始刪除的元素的索引；

count是刪除的項目數，如果為0，則不會刪除;如果不設置，則刪除從index開始的所有數組項。

插入功能

語法：arr.splice(index，0，item1..... itemx);

功能：在指定位置前插入指定內容

返回值：空數組

參數說明：index是起始位置的索引;

0是要刪除的項數(因為插入不需要刪除數組項，所以是0);

item1... itemx是要插入的內容。

替換功能

語法：arr.splice(index，count，item1..... itemx);

功能：在指定位置前插入指定內容，同時刪除任意數量的項

返回值：從原始數組中刪除的項（如果沒有刪除任何項，則返回空數組）

參數說明：index是起始位置的索引;

count是要刪除的項數;

item1... itemx是插入的內容。

ECMAScript中為數組實例添加了兩個位置方法：indexOf和lastIndexOf

indexOf()

語法：arr.indexOf(searchValue，startIndex);

功能：從數組的開頭開始向後查找

返回值：查找的項在數組中的位置，沒有找到的情況下返回-1

lastIndexOf()

語法：arr.lastIndexOf(searchValue，startIndex);

功能：從數組的末尾開始查找

返回值：查找的項在數組中的位置，沒有找到的情況下返回-1

說明：這兩個方法在比較第一個參數與數組中的每一項時，將使用===操作符，即要求查找的項必須嚴格相等;

兼容性問題，支持的瀏覽器有：IE9 +，FireFox2 +，Chrome，Safari3。

ES6

ECMAScript 6為數組增添的新方法：map()，reduce()，filter()

map()

語法：arr.map(函數);

功能：相當於讓arr的每個數據執行了一次()中的方法，例：

function add(a){

return b =a*a;

}

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

var newArr = arr.map(add);

console.log( newArr);

reduce()

語法：arr.reduce(函數);

功能：把一個函數作用在arr的每一個元素上，它必須接收兩個參數，reduce()把結果繼續和序列的下一個元素做累積計算。例：要把[1,2,3,4,5,6]變換成整數123456，就可以用reduce()做到

function changeNumber(x,y){

return x * 10 + y;

}

var arr = [1,2,3,4,5,6];

var newArr = arr.reduce(changeNumber);

console.log(newArr);

filter()

語法：arr.filter(函數);

功能：用於把Array的某些元素過濾掉，然後返回剩下的元素，和map()類似，Array的filter()也接收一個函數。和map()不同的是，filter()把傳入的函數依次作用於每個元素，然後根據返回值是true還是false決定保留還是丟棄該元素。

例：利用filter()刪除數組中的偶數項

function deleteOushu(x){

return x % 2 !== 0;

}

var arr = [1,2,3,4,5,6,7,8,9,10];

var newArr = arr.filter(deleteOushu);

console.log(newArr);

filter()接受的回調函數可以有多個參數，第一個參數表示arr的某個元素，第二個參數表示元素在arr中的位置，第三個參數表示數組本身：

var arr =["a","b","c"];

var newArr = arr.filter(function(element,index,self){

console.log(element); //依次列印"a","b","c"

console.log(index); //依次列印0,1,2

console.log(self); //列印arr本身

return true；

})

轉發小詩一首

在季節的車上，

如果你要提前下車，

請別推醒裝睡的我，

這樣我可以沉睡到終點，

假裝不知道你已經離開。

——張嘉佳

《旅行青蛙》你有沒有收到『蛙兒子』寄來的好看圖片呢？歡迎分享

程序員食堂

精彩不要錯過

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！