陣列的相關方法

阿新 • • 發佈：2018-11-05

JavaScript 提供了多種新增，移除，替換陣列元素的方法，但是有些會影響原來的陣列；有些則不會，它是新建了一個數組。

注意：區分以下兩個方法的不同點：

array.splice() 影響原來的陣列
array.slice() 不影響原來的陣列

新增：影響原陣列

使用 array.push() 和 array.unshift() 新增元素會影響原來的陣列。
**array.push( )**可以接受任意引數，把他們逐個新增至陣列末尾，返回修改後的陣列長度，是一個數字，改變原陣列

var arr = ["a","b","c","d"]
var arr2 = 
arr.push("e")
console.log(arr,arr2)  // ["a","b","c","d","e"]   5

array.ushift( ) 可以接受任意引數，把他們逐個新增至陣列最前端，返回修改後的陣列長度，是一個數字，改變原陣列，

   var arr = ["a","b","c","d"]
   var arr2 =arr.unshift("e")
   console.log(arr,arr2)  // ["e", "a", "b", "c", "d"] 5

新增：不影響原陣列

兩種方式新增元素不會影響原陣列，第一種是 array.concat()

。
**array.concat( )**方法建立並返回一個新陣列，不改變原陣列

var arr = ["1","2","3"]
arr2 = arr.concat("a",[8,[9,10]]);
//  當引數中有一個數組時，會直接新增在後面合併成一個數組，如果是一個二維陣列，則只會合併第一層陣列中的資料，保留二維陣列

console.log(arr,arr2)  //  (3) ["1", "2", "3"] (6) ["1", "2", "3", "a", 8, Array(2)]

第二種方法是使用 JavaScript 的展開（spread）操作符，展開操作符是三個點（…）

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = [...arr1, 'f']; // ['a', 'b', 'c', 'd', 'e', 'f']  
const arr3 = ['z', ...arr1]; // ['z', 'a', 'b', 'c', 'd', 'e']

展開操作符會複製原來的陣列，從原陣列取出所有元素，然後存入新的環境。

移除：影響原陣列

使用 array.pop() 和 array.shift() 移除陣列元素時，會影響原來的陣列。
array.pop( ) 從陣列末尾移出一項，沒有引數，返回被移出的這一項，是一個字串，影響原陣列

       var arr = ["a","b","c","d"]
            var arr2 =arr.pop()
           console.log(arr,arr2)  // ["a","b","c",]  "d"

array.shift() 從陣列第一項移出一項，沒有引數，返回被移出的這一項，是一個字串，影響原陣列

       var arr = ["a","b","c","d"]
       var arr2 =arr.shift()
       console.log(arr,arr2)  // ["b", "c", "d"]  "a"

delete array[ ] 引數為數字，代表將元陣列中的第幾位元素移出，empty佔位，返回布林值，改變原陣列，但不改變長度

var arr = ["a","b","c","d"]
var arr2 =delete arr[1]
console.log(arr,arr2,arr.length)  //  ["a", empty, "c", "d"] true  4

array.pop() 和 array.shift() 返回被移除的元素，你可以通過一個變數獲取被移除的元素。

array.splice() 一共有3個引數，第一個引數為從開始項，第二個引數為移除內容的長度，第三個引數是可選引數，以及第三個之後的引數均為要替換到陣列中的內容，返回移出的內容

var arr = [1,3,2,3,4]
arr.splice(1,2,5,6,7)
console.log(arr)       //[1, 5, 6, 7, 3, 4]

如果第一個引數為0，則表示從第一個開始，如果第二個引數為0，則表示不移除元素，如果沒有第三個引數，則表示不需要替換

移除：不影響原陣列

array.filter() 引數為一個函式，函式接受2個引數，第一個item,為陣列的每一項，第二個index為陣列的下標，基於原陣列建立一個新陣列，新陣列僅包含匹配特定條件的元素。

       var arr1 = ['a', 'b', 'c', 'd', 'e'];
       var arr2 = arr1.filter(item => item  !== 'e');  //["a", "b", "c", "d"]
       var arr3 = arr1.filter(item => item == 'e');  //["e"]

頭函式的獨特性：
單行箭頭函式，’return’ 關鍵字是預設自帶的，不需要手動書寫。
可是，多行箭頭函式就需要明確地返回一個值。

array.slice()（不要與 array.splice() 混淆）
array.slice() 用以擷取陣列中的某一個片段，引數為2個數字，用逗號隔開，第一個為開始，第二個為結束，擷取內容不包含結束項

var arr = [1,2,3,4,5]
arr2=arr.slice(2,4);   //從第二項（數字3）開始擷取，截止到第4項，不包含第四項
console.log(arr,arr2)  //   (5)[1, 2, 3, 4, 5]  (2) [3, 4]

1)引數只有1個數字，則這個表示擷取的起始位置，返回的陣列包含開始項到陣列中所剩餘的所有項
arr3=arr.slice(2);
console.log(arr,arr3) //(5) [1, 2, 3, 4, 5] (3) [3, 4, 5]

2)引數有一個為負數，代表結束位置為陣列中倒數第幾位
arr4=arr.slice(-2);
console.log(arr,arr4) //(5) [1, 2, 3, 4, 5] (3) [ 4, 5]
arr5=arr.slice(1,-2);
console.log(arr,arr5) //[1, 2, 3, 4, 5] (2) [2, 3]

3)兩個引數都為負數，同樣是從陣列最後開始數，從1開始計數，不包含結束項
arr6=arr.slice(-2,-3);
console.log(arr,arr6) //[1, 2, 3, 4, 5] (2) []
arr6=arr.slice(-3,-2);
console.log(arr,arr6) //[1, 2, 3, 4, 5] (2) [ 3

替換：影響原陣列

array.splice( ) 如果知道替換哪一個元素，可以使用這個方法
一共有3個引數，第一個引數為從開始項，第二個引數為移除內容的長度，第三個引數是可選引數，以及第三個之後的引數均為要替換到陣列中的內容，返回移出的內容

var arr = [1,3,2,3,4]
arr.splice(1,2,5,6,7)
console.log(arr)       //[1, 5, 6, 7, 3, 4]

如果第一個引數為0，則表示從第一個開始，如果第二個引數為0，則表示不移除元素，如果沒有第三個引數，則表示不需要替換

替換：不影響原陣列

array.map() 建立一個新陣列，並且可以檢查每一個元素，根據特定的條件替換它們。
引數為一個函式，函式可以接受3個引數，第一個item代表陣列的每一項，第二個index代表每項的索引值，第三項為陣列本身，返回一個新陣列，不影響原陣列

const arr1 = ['a', 'b', 'c', 'd', 'e']  
const arr2 = arr1.map(item => {  
 if(item === 'c') {
   item = 'CAT';
 }
 return item;
}); // ['a', 'b', 'CAT', 'd', 'e']

排序：改變原陣列

array.reverse( ) 沒有引數，返回排序後的陣列，方法會將原有的陣列順序翻轉，不產生新的陣列，改變原陣列

   var arr = ["a","b","c","d"]
   var arr2 =arr.reverse()
   console.log(arr,arr2)  //  ["d", "c", "b", "a"]  ["d", "c", "b", "a"]

array.sort( ) 方法會按照升序的方式進行排序，返回排序後的陣列，改變原陣列，

1)不帶引數的時候，以字母表順序排序

var arr = ["a","c","b","d"]
var arr2 =arr.sort();
console.log(arr,arr2)    //   ["a", "b", "c", "d"]

2)如果需要以數值的大小來進行排序，則可以傳入一個回撥函式來處理（要求陣列中必須都是數字）
var arr = ["1","5","3","4"] 
arr2=arr.sort(function(a,b){
		return a-b;   //返回陣列從小到大排序
		return b-a;      //返回陣列從大到小排列
});
console.log(arr,arr2)  //      ["1", "3", "4", "5"]

陣列轉換

array.join( ) ：陣列轉字串
將陣列中所有的元素都轉化為字串並連線在一起，返回最後生成的字串。（也是String.split()方法的逆向操作，後者是將字串分割成若干塊來建立一個數組）

Array.from(類陣列[,回撥函式])：類陣列轉陣列
有三個引數，第一個引數為我們需要轉換的類陣列，第二個引數是一個回撥函式，轉換之後需要執行的程式碼可以寫在這裡(凡是寫在 [ ] 括號中的引數為可選引數，可傳可不傳)，第三個為this指向
返回一個新的陣列，不影響原陣列

console.log(Array.from("123"));   //["1", "2", "3"]

檢測一個值是否是陣列

Array.isArray( val ) 引數為需要檢測的內容，返回布林值，不影響原陣列

		let arr = [1,2,3];
		let arr2 = {1:1,2:3}
		console.log( Array.isArray(arr))  //true
		console.log( Array.isArray(arr2))  //false

遍歷陣列每一項

方法：

Array.prototype.forEach (function(item,index,array){}[,this指向])

引數：

第一個引數為函式：，函式中的引數如下：
item：陣列中的每一項
index：陣列的下標
array: 原陣列

第二個引數為 this 指向，是可選項

是否影響原陣列

不影響

返回值:

如果沒有在函式中return 的話，返回undefined

查詢陣列中首位滿足條件的值

方法：

Array.prototype.findIndex(function(item,index,array){}[,this指向])

引數：

第一個引數為函式：，函式中的引數如下：
item：陣列中的每一項
index：陣列的下標
array: 原陣列

第二個引數為 this 指向，是可選項

是否影響原陣列

不影響

返回值:

有滿足項:返回滿足條件的的資料下標（find方法返回的事滿足該條件的資料）
沒有滿足項：返回-1

查詢陣列中首位滿足條件的值

方法：

Array.prototype.find (function(item,index,array){}[,this指向])

引數：

第一個引數為函式：，函式中的引數如下：
item：陣列中的每一項
index：陣列的下標
array: 原陣列

第二個引數為 this 指向，是可選項

是否影響原陣列

不影響

返回值:

有滿足項:返回滿足條件的的資料（findIndex方法返回的事滿足條件陣列的下標）
沒有滿足項：返回 undefined

陣列的相關方法

新增：影響原陣列

新增：不影響原陣列

移除：影響原陣列

移除：不影響原陣列

替換：影響原陣列

替換：不影響原陣列

排序：改變原陣列

陣列轉換

檢測一個值是否是陣列

遍歷陣列每一項

方法：

引數：

是否影響原陣列

返回值:

查詢陣列中首位滿足條件的值

方法：

引數：

是否影響原陣列

返回值:

查詢陣列中首位滿足條件的值

方法：

引數：

是否影響原陣列

返回值:

相關推薦