紅寶書總結-js陣列的相關方法

_會笑的鸚鵡_發表於2019-05-06
JS陣列

陣列的length

  • 此屬性並非只讀

  • 可通過該屬性從陣列的末尾移除項或向陣列中新增新項

var colors = ["res","blue","green"];
colors.length = 2;
alert(colors[2]);
複製程式碼

  • 將length設定為2後會移除最後一項

  • 當length設定值比原有陣列少，會從後開始刪除多餘項

  • 當length設定值比原有陣列多，會在後增加項，值為undefined

  • 末尾新增新項： colors[colors.length] = ...

檢測陣列（不改變原陣列）

instanceof

if(value instanceof Array)

  • 如果存在兩個以上不同的全域性執行環境，從而存在兩個以上不同版本的Array建構函式，此方法不準

Array.isArray

  • 只用來確定是否為陣列，不管它是在哪個全域性執行環境中建立的 if(Array.isArray(value))

轉換方法（均不改變原陣列）

  • 所有物件都具有toLocaleString()、toString()、valueOf()

toString()

  • 陣列的toString就是返回陣列中每個值的字串形式(每個值都呼叫一遍toString)拼接而成的一個以逗號分隔的字串

valueOf()

  • 陣列的valueOf返回的還是陣列

toLocaleString()

  • 陣列的toLocaleString就是返回陣列中每個值的字串形式(每個值都呼叫一遍toLocaleString)拼接而成的一個以逗號分隔的字串

join()(陣列方法)

  • 可以使用不同的分隔符來構建這個字串，此方法只接受一個引數，即用作分隔符的字串
var colors = ["red","green","blue"];
alert(colors.join(","));
alert(colors.join("||"));
複製程式碼

如果陣列中的某一項的值是null或者undefined，那麼該值在join()、toLocaleString()、toString()方法返回的結果中以空字串表示

棧方法（改變原陣列）

pop

  • 從陣列末尾移除最後一項，減少陣列的length值，然後返回移除的項 array.pop()

push

  • 可以接收任意數量的引數，逐個新增到陣列末尾，返回修改後陣列的長度
var count = colors.push("red","green");
複製程式碼

佇列方法（改變原陣列）

shift

  • 移除陣列中的第一個項並返回該項，同時將陣列長度減1

push

unshift

  • 可以在陣列前端新增任意個項並返回新陣列的長度

  • 同時使用unshift()和pop()方法，可以從相反的方向來模擬佇列，即在陣列的前端新增項，從陣列末端移除項

重排序方法（改變原陣列，返回新陣列）

reverse

  • 反轉陣列項的順序
    var values = [1,2,3,4,5];
    values.reverse();
    alert(values);//5,4,3,2,1
複製程式碼

sort

  • 預設下，sort()方法按升序排列陣列項——即最小的值位於最前面，最大的值排在最後面。

  • sort()會呼叫每個陣列項的toString()轉型方法，然後比較得到的字串

  • 即使陣列中的每一項都是數值，sort()方法比較的也是字串

var value = [0,1,5,10,15];
value.sort();
alert(values);//0,1,10,15,5
複製程式碼

因為字串“5”大於“10”、“15”，故而排到了最後

  • sort可以接收一個比較函式，以便指定哪個值位於哪個值前面。比較函式接受兩個引數，返回負數說明第一個引數位於第二個之前，返回正數說明位於之後，返回0說明兩個引數相等

  • 以下提供一個compare方法，對於數值型別或者其valueOf()方法會返回數值型別的物件型別可以使用此方法

function compare(value1,value2){
    return value2 - value1;
}
values.sort(compare);
alert(values);//0,1,5,10,15
複製程式碼

操作方法

concat（不改原陣列，返回新陣列）

  • 基於當前陣列中的所有項建立一個新陣列——對當前陣列進行深複製，然後將接收到的引數新增到這個副本的末尾，最後返回新構建的陣列

  • 如果不給concat()方法傳遞引數，則只是深複製當前陣列並返回副本

  • 如果傳遞給concat的引數是一或多個陣列，則陣列中的每一項都新增到結果陣列中；不是陣列則是簡單地新增到結果陣列的末尾

  • 如果引數為陣列，陣列裡還有陣列，其內的陣列不會拆分

紅寶書總結-js陣列的相關方法

slice（不改原陣列，返回新陣列）

  • 接受一或兩個引數，即要返回項的起始和結束位置。

  • 一個引數時，返回從該引數指定位置開始到當前陣列末尾的所有項

  • 兩個引數時，返回起始和結束位置之間的項——但不包括結束位置的項

var colors = ["red","green","blue","yellow","purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);

alert(colors2);//green,blue,yellow,purple
alert(colors3);//green,blue,yellow
複製程式碼

起始項從0算起

如果slice()方法的引數中有一個負數，則用陣列長度加上該數來確定相應的位置。如：5項的陣列呼叫slice(-2,-1)，與slice(3,4)一致

如果結束位置小於起始位置，則返回空陣列

splice（改變原陣列，返回被刪除的資料）

  1. 刪除：可刪除任意項，只需指定2個引數:要刪除的第一項的位置和要刪除的項數
  2. 插入：在指定位置插入任意數量的項，只需提供3個引數：起始位置、0（要刪除的項數）和要插入的項。插入多項可以再傳入任意多個項
  3. 替換：可以向指定位置插入任意數量的項，只需指定3個引數：起始位置、要刪除的項數和要插入的任意數量的項。插入的項數不必與刪除的項數相等

如果沒有刪除任何數，則返回一個空陣列

var colors = ["red","green","blue"];
var removed = colors.splice(0,1);//刪除第一項
alert(colors);//green,blue
alert(removed);//red,返回的陣列中只包含一項

removed = colors.splice(1,0,"yellow","orange");//從位置1開始插入兩項（是從1位置之後）
alert(colors);//green,yellow,orange,blue
alert(removed);//返回的是一個空陣列

removed = colors.splice(1,1,"red","purple");
alert(colors);//green,red,purple,orange,blue
alert(removed);//yellow,返回的陣列中只包含一項
複製程式碼

位置方法（不改原陣列）

indexOf和lastIndexOf

  • 接收兩個引數：要查詢的項和（可選的）表示查詢起點位置的索引

  • indexOf()方法從陣列開頭（0）開始向後查詢，lastIndexOf()方法則從陣列的末尾開始向前查詢（索引對應的值也是從末尾開始算）

  • 找到則返回在陣列中的位置並停止查詢；沒找到則返回-1.比較第一個引數和陣列中的每一項時，會使用全等操作符

var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4,4));//5
alert(numbers.lastIndexOf(4,4));//從末尾開始數到第四項，然後再進行查詢，結果為3

var person = {name:"Nicholas"};
var people = [{name:"Nicholas"}];

var morePeople = [person];

alert(people.indexOf(person)); //-1
alert(morePeople.indexOf(person)); //0
複製程式碼

迭代方法（不改原陣列）

  • 每個方法都接收兩個引數：要在每一項上執行的函式和（可選的）執行該函式的作用域物件——影響this的值（這個值極少用，且不能用在給定函式裡）

紅寶書總結-js陣列的相關方法

  • 傳入這些方法的函式會接收三個引數：陣列項的值，該項在陣列中的位置和陣列物件本身

這些給定函式（forEach的外）都必須有返回值

有時，使用這些迭代方法相當於迴圈進行某些操作，但是不能使用break/continue進行中斷。如果必須使用，還是使用for迴圈比較好

every

  • 陣列每一項執行給定函式，如果給定函式對每一項都返回true，則返回true
var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array){
    return (item > 2);
})
alert(everyResult);//false

複製程式碼

filter

  • 陣列每一項執行給定函式，返回給定函式返回true的項組成的陣列
var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item,index,array){
    return (item > 2);
})
alert(filterResult);//[3,4,5,4,3]
複製程式碼

forEach

  • 只 每一項執行給定函式，此方法沒有返回值
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item,index,array){
    //執行某些操作
})
複製程式碼

map

  • 陣列每一項執行給定函式，返回每次函式呼叫的結果組成的陣列
var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item,index,array){
    return (item > 2);
})
alert(mapResult);//[2,4,6,8,10,8,6,4,2]
複製程式碼

some

  • 陣列每一項執行給定函式，如果給定函式對任一項返回true，則返回true
var numbers = [1,2,3,4,5,4,3,2,1];
var someResult = numbers.some(function(item,index,array){
    return (item > 2);
})
alert(someResult);//true
複製程式碼

歸併方法

reduce和reduceRight

  • 迭代陣列所有項，構建一個最終返回的值

  • reduce()方法從陣列的第一項開始；reduceRight()從陣列的最後一項開始

  • 接收兩個引數：一個在每一項上呼叫的函式和（可選的）作為歸併基礎的初始值

  • reduce的給定函式接收4個引數：前一值、當前值、項的索引和陣列物件。這個函式返回的任何值都會作為第一個引數自動傳給下一項。第一次迭代發生在陣列的第二項上，因此第一個引數是陣列的第一項，第二個引數就是陣列的第二項

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev,cur,index,array){
    return prev+cur;
});
alert(sum);
複製程式碼
  • reduceRight的作用類似，只是方向相反

相關文章