js數組方法，你記住了嗎？

2018.05.21

最近在做項目的時候，感覺很多方法，又不記得了。所以趕緊補一下…

第一部分：數組自身的方法

常用的方法，靠前展示。

toString()

作用：調用數組每一項的 toString()方法，返回以逗號分隔的字符串

參數：無

返回值：轉化之後的字符串

原數組是否改變：否

let arr = ['a','b','c','d']
let arr1 = arr.toString();
console.log(arr) // ["a", "b", "c", "d"]
console.log(arr1) // a,b,c,d

join()

作用：將數組轉化爲字符串。

參數：分隔符

返回值：拼接之後的字符串

原數組是否改變：否

join()方法，調用每個元素的 toString()方法。並使用指定的分隔符(默認是逗號)進行拼接。
let arr = [1, 2, {name: "zhangsan"}, 3];
let arr1 = arr.join('-');
console.log(arr);//[1, 2, Object, 3]
console.log(arr1) // 1-2-[object Object]-3

push()

作用：在數組末尾添加元素

參數：任意參數

返回值：修改後的數組的長度

原數組是否改變：是

let arr = ['a','b','c','d'];
let arr1 = arr.push('11');
console.log(arr) // ["a", "b", "c", "d", "11"]
console.log(arr1) // 5

pop()

作用：移除數組末尾的最後一項

參數：無

返回值：移除的那一項

原數組是否改變：是

let arr = ['a','b','c','d'];
let arr1 = arr.pop();
console.log(arr) // ["a", "b", "c"]
console.log(arr1) // d

unshift()

作用：在數組開頭添加元素

參數：任意

返回值：修改後的數組長度

原數組是否改變：是

let arr = ['a','b','c','d'];
let arr1 = arr.unshift('11');
console.log(arr) // ["11", "a", "b", "c", "d"]
console.log(arr1) // 5

shift()

作用：刪除數組的第一項

參數：無

返回值：刪除的那一項

原數組是否改變：是

let arr = ['a','b','c','d'];
let arr1 = arr.shift();
console.log(arr) // ["b", "c", "d"]
console.log(arr1) // a

reverse()

作用：反轉數組的順序

參數：無

返回值：反轉順序之後的數組

原數組是否改變：是

let arr = ['a','b','c','d'];
let arr1 = arr.reverse();
console.log(arr) // ["d", "c", "b", "a"]
console.log(arr1) // ["d", "c", "b", "a"]

concat()

作用：合併數組

參數：任意

返回值：合併之後的數組

原數組是否改變：否

let arr = ['a','b','c','d'];
let arrCopy = arr.concat('e',[1,2,3]);
console.log(arr) // ["a", "b", "c", "d"]
console.log(arrCopy) // ["a", "b", "c", "d", "e", 1, 2, 3]

slice()

作用：截取部分數組

參數：起始下標和結束下標

返回值：返回截取的部分數組。不包括結束位置的項。

原數組是否改變：否


let arr1 = arr.slice(1,3)
console.log(arr) // ["a", "b", "c", "d"]
console.log(arr1) // ["b", "c"]

splice()

作用：對數組實現：刪除、插入、替換功能。

參數：見下面

返回值：返回的修改過的項

原數組是否改變：是

刪除：可以刪除任意數量的項，只需指定 2個參數：要刪除的第一項的位置和要刪除的項數。例如， splice(0,2)會刪除數組中的前兩項。

插入：可以向指定位置插入任意數量的項，只需提供 3 個參數：起始位置、 0（要刪除的項數）和要插入的項。例如，splice(2,0,4,6)會從當前數組的位置 2 開始插入4和6。

替換：可以向指定位置插入任意數量的項，且同時刪除任意數量的項，只需指定 3 個參數：起始位置、要刪除的項數和要插入的任意數量的項。插入的項數不必與刪除的項數相等。例如，splice (2,1,4,6)會刪除當前數組位置 2 的項，然後再從位置 2 開始插入4和6。

// 刪除
let arr = ['a','b','c','d'];
let arrRemoved = arr.splice(0,2);
console.log(arr) // ["c", "d"]
console.log(arrRemoved) // ["a", "b"]

// 插入
let arr = ['a','b','c','d'];
let arrInsert = arr.splice(2,0,4,6);
console.log(arr) // ["a", "b", 4, 6, "c", "d"]
console.log(arrInsert) // []

// 替換
let arr = ['a','b','c','d'];
let arrReplace = arr.splice(2,1,4,6);
console.log(arr) // ["a", "b", 4, 6, "d"]
console.log(arrReplace) // ["c"]

indexOf() 和 lastIndexOf()

作用：返回對應項的索引

參數：一個參數或兩個參數

返回值：

原數組是否改變：無

indexOf()：接收兩個參數：要查找的項和（可選的）表示查找起點位置的索引。其中， 從數組的開頭（位置 0）開始向後查找。 

lastIndexOf：接收兩個參數：要查找的項和（可選的）表示查找起點位置的索引。其中， 從數組的末尾開始向前查找。

這兩個方法都返回要查找的項在數組中的位置，或者在沒找到的情況下返回-1。在比較第一個參數與數組中的每一項時，會使用全等操作符。

let arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1
console.log(arr) // [1,3,5,7,7,5,3,1]

forEach()

作用：對數組中的每一項運行給定的函數。

參數：參數是function函數。函數的參數分別爲：值，索引，數組本身

返回值：無 (因此在callback裏面加不加return，效果都是一樣的)

原數組是否改變：這個不確定。跟運行的回調函數有關。

let arr = [1,2,3,4,5];
let arr1 = arr.forEach(function(item,index,array){
    array[index] = item * 10
})
console.log(arr) //  [10,20,30,40,50]
console.log(arr1) // undefined

map()

作用：map就是‘映射’。對數組中的每一項運行給定函數

參數：參數是function函數。函數參數分別是：值，索引，數組本身。

返回值：調用函數之後的結果組成的數組

原數組是否改變：否

let arr = [1,2,3,4,5];
let arr1 = arr.map(function(item,index,array) {
   return item = item * 10
})
console.log(arr) // [1, 2, 3, 4, 5]
console.log(arr1) // [10,20,30,40,50]

filter()

作用：‘過濾’。對數組中每一項運行給定的函數。

參數：參數是function函數。函數有三個參數：值，索引，數組本身

返回值：調用函數之後的結果組成的數組。

原數組是否改變：不確定。因爲跟運行的函數有關。

let arr = [1,2,3,4,5];
let arr1 = arr.filter(function(item,index) {
   return item > 3
})
console.log(arr) // [1, 2, 3, 4, 5]
console.log(arr1) // [ 4, 5]

every()

作用：判斷數組中的每一項是否滿足條件。

參數：參數是函數function。函數有三個參數：值，索引，數組本身

返回值：數組中的所有項滿足條件，才返回 true

原數組是否改變：涉及運行的函數，因此不確定

let arr = [1,2,3,4,5];
let arr1 = arr.every(function(item,index) {
   return item < 10
})
console.log(arr) // [1, 2, 3, 4, 5]
console.log(arr1) // true

some()

作用：判斷數組中的是否有滿足條件的一項。

參數：參數是函數function。函數有三個參數：值，索引，數組本身

返回值：數組中的有一項滿足條件，才返回 true

原數組是否改變：涉及運行的函數，因此不確定

let arr = [1,2,3,4,5];
let arr1 = arr.some(function(item,index) {
   return item < 2
})
console.log(arr) // [1, 2, 3, 4, 5]
console.log(arr1) // true

reduce() 和 reduceRight()

作用：迭代數組的所有項，然後構建一個最終返回的值。

參數：callback[, initialValue]

返回值：數組迭代之後，整體的迭代結果。

原數組是否改變：涉及運行的函數，因此不確定

reduce()方法從數組的第一項開始，逐個遍歷到最後。而 reduceRight()則從數組的最後一項開始，向前遍歷到第一項。

參數說明：
callback迭代函數，有四個參數（prev, cur, index, array）
prev 前一個值，（initialValue || 數組第一項 || 上一次迭代的結果）
cur 當前迭代項
index 當前迭代項索引
array 迭代的原數組
initialValue 迭代的基礎值，不傳基礎值是數組第一項


// 數組求和
let arr = [1, 2, 3];
let sum = arr.reduce((prev, cur, index, array) => {
    return prev + cur;
});
console.log(arr, sum); // [ 1, 2, 3 ] 6

// 傳initialValue 基礎值的示例
let sum1 = arr.reduce((prev, cur, index, array) => {
    return prev + cur;
}, 10);
// 返回的值是：10+1+2+3
console.log(arr, sum1); // [ 1, 2, 3 ] 16

sort()

作用：將數組升序排列

參數：默認無參數 | 接收一個比較函數

返回值：升序之後的數組

原數組是否改變：是

let arr = ['b','c','d','a'];
let arr1 = arr.sort();
console.log(arr); // ["a", "b", "c", "d"]
console.log(arr1) // ["a", "b", "c", "d"]

在排序時，sort()方法會調用每個數組項的toString()轉型方法，然後比較得到的字符串，以確定如何排序。即使數組中的每一項都是數值，sort()方法比較的也是字符串，因此會出現以下的這種情況
let array = [13, 24, 51, 3];
let array1 = array.sort();
console.log(array); // [13, 24, 3, 51]
console.log(array1) // [13, 24, 3, 51]

爲了解決這個問題：sort方法可以接收一個比較函數。比較函數接收兩個參數，如果第一個參數應該位於第二個之前則返回一個負數，如果兩個參數相等則返回 0，如果第一個參數應該位於第二個之後則返回一個正數。
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
array = [13, 24, 51, 3];
console.log(array.sort(compare)); // [3, 13, 24, 51]

如果需要通過比較函數產生降序排序的結果，只要交換比較函數返回的值即可：
function compare(value1, value2) {
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return -1;
} else {
return 0;
}
}
array = [13, 24, 51, 3];
console.log(array.sort(compare)); // [51, 24, 13, 3]

find()

作用：查找數組中第一個符合條件的元素，返回該元素

參數：參數是函數function。函數的三個參數是：值，索引，數組本身。

返回值：符合條件的第一個元素

原數組是否改變：涉及到函數，不確定。

let arr = [1, 2, 3, 4, 5];
let arr1 = arr.find((item, index, array) => {
    return item > 2;
})
console.log(arr); // [1, 2, 3, 4, 5] 
console.log(arr1) // 3

findIndex()

作用：查找數組中第一個符合條件的元素的索引。並返回索引。

參數：參數是函數function。函數的三個參數是：值，索引，數組本身。

返回值：符合條件的第一個元素的索引

原數組是否改變：涉及到函數，不確定。

let arr = [1, 2, 3, 4, 5];
let arr1 = arr.findIndex((item, index, array) => {
    return item > 2;
})
console.log(arr); // [1, 2, 3, 4, 5] 
console.log(arr1) // 2

js數組方法，你記住了嗎？

第一部分：數組自身的方法

物理機開關機

前端進階（隨手記）------src、href和rel的區別

前端進階(隨手記)------原型鏈解析(proto和prototype的區別)

使用WampServer爲Hbuilder編輯器配置Web服務器

前端進階者（隨手記）------框架、類庫和架構的區別

前端進階者（流水記）----創建和使用對象（用作對象的函數稱爲方法）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結