JavaScript常用陣列方法
目錄
目錄函式和方法的區別：
函式function：獨立的function，那麼稱之為是一個函式。
function foo() {}
方法method：當我們的一個函式屬於某一個物件時，我們稱這個函式是這個物件的方法。
var obj = {
foo: function() {}
}
obj.foo()
例如，對一個數組的操作方法：filter，我們就稱之為是一個方法。
// filter：過濾
var nums = [10, 5, 11, 100, 55]
nums.filter((item) => item > 10)
在以下對陣列的操作中，我們統稱方法。
文章中通用常量意義：
item：某一項。當作為引數時，為遍歷陣列中的每一項。當作為返回值時，意思為某項資料，可以為任意型別。
index：下標。當作為引數時，為遍歷陣列中的item在陣列中下標。當作為返回值時，意思為下標。
arr：陣列。當作為返回值時，意思為改變陣列本身。當作為引數時，意思為自身陣列。
length：陣列長度。當作為返回值時，意思為陣列長度
newarr：新陣列。當作為返回值時，意思為產生一個新陣列，
boolean：布林值。當作為方法體時以為：條件的返回值為布林值。
num：數值型別。
start：陣列遍歷開始下標（包含）
end：陣列遍歷結束下標（不包含）
陣列基礎遍歷方法。
for：
for(var i = 0, len = arr.length; i < len; i++ ){
console.log(arr[i])
}
for基礎迴圈可以用來遍歷陣列，字串，類陣列，DOM節點等。
for of：
for (let item of arr) {
console.log(item);
}
for of：for-of獲取的是陣列的值。可以使用 break、continue、return 來中斷迴圈遍歷。
for in：
for (let value in arr) {
console.log(value);
}
for in：一般用於對物件的遍歷，但也可以用於陣列。用於陣列遍歷時，for-in獲取的是陣列的索引
var arr = [10, 7, 9, 100, 11]
for (let value in arr) {
console.log(value);
}
// 0 1 2 3 4
陣列的基礎操作方法。
push：尾部追加元素
var length = arr.push(item)
push() 方法用於對陣列尾部插入新的元素。返回值為追加後的陣列長度。
var nums = [10, 7, 9, 100, 11]
var length = nums.push(2)
console.log(length) // 2
pop：尾部移出元素
var item = arr.pop()
pop() 方法用於刪除陣列的最後一個元素並返回刪除的元素。無參，返回值為刪除的元素。
var nums = [10, 7, 9, 100, 11]
var item = nums.pop()
console.log(item) // 11
unshift：頭部追加元素
var length = arr.unshift(item)
unshift() 方法用於對陣列頭部插入新的元素。返回值為追加後的陣列長度。
shift：頭部移出元素
var item = arr.unshift()
shift() 方法用於對陣列頭部插移出元素。返回值為追出後的元素。
splice：刪除新增替換
var newarr = arr.splice(index, howmany, item)
splice() 方法用於對陣列元素進行刪除新增替換操作。返回值為刪除的元素組成的陣列。
index（必填）：陣列下標，代表從第幾個元素開始執行操作。
howmany（可選）：規定刪除多少個元素，如果未規定此引數，則刪除從 index 開始到原陣列結尾的所有元素。
item（可選）：插入元素，可以為多個。從下標位置插入。
var nums = [10, 7, 9, 100, 11]
var newarr= nums.splice(2,2,99,77,55)
console.log(newarr) // [9, 100]
console.log(nums) // [10, 7, 99, 77, 55, 11]
注意：splice() 方法會改變原陣列。
concat：連線
newarr = arr.concat(nums1, nums2)
concat() 方法用於連線兩個或多個數組。
var nums1 = [2,5,7,9]
var nums2 = [1,3,55]
var newarr = []
var newarr = newarr.concat(nums1, nums2)
concat() 方法不會改變原陣列。
join：分割
Str = arr.join(separator)
separator：分割符，如果為空，則已 “，” 分割。
join() 方法用於把陣列中的所有元素轉換一個字串。
var nums = [10, 7, 9, 100, 11]
var Str = nums.join('x')
console.log(Str) // 10x7x9x100x11
slice：切割
newarr = arr.slice(start, end)
從陣列的 [start, end）位置擷取陣列元素。
slice() 方法可從已有的陣列中返回選定的元素。
slice() 方法可提取字串的某個部分，並以新的字串返回被提取的部分。
注意： slice() 方法不會改變原始陣列。
includes：查詢
boolean = arr.includes(value, start)
value（必填）: 查詢的元素，可以為字串或數值。
start（可選）：開始查詢的位置下標。
includes() 方法用於判斷字串是否包含指定的子字串。返回值為布林值。
indexOf：查詢
index = arr.indexOf(value, start)
value（必填）: 查詢的元素，可以為字串或數值。
start（可選）：開始查詢的位置下標。
indexOf() 方法用於判斷字串是否包含指定的子字串。返回值為查詢到下標，若為查詢到則為 -1。
lastIndexOf()方法類似，返回值為 value 最後一次出現的下標 。
es6中帶來的陣列高階方法。
接下來是es6中帶來的陣列高階方法。
高階函式：一個函式如果接收另一個函式作為引數，或者該函式會返回另外一個函式作為返回值的函式，那麼這個函式就稱之為是一個高階函式。
陣列的高階方法通常會接收一個回撥函式作為引數，在回撥中遍歷陣列，執行操作。
forEach：迭代（列舉）
arr.forEach((item, index, arr) => { 寫想要列舉的操作 })
forEach 方法不會改變原陣列，也沒有返回值；
var nums = [10, 7, 9, 100, 11]
nums.forEach((item) => {
if (item > 10) {
console.log(item)
}
}) // 100, 11
forEach無法使用 break 跳出迴圈。使用 return 時，效果和在 for 迴圈中使用 continue 一致。
forEach如果想要跳出迴圈，可以通過 throw new Error() 丟擲錯誤的方式實現。
var nums = [10, 7, 9, 100, 11]
nums.forEach((item) => {
if (item == 100) {
throw new Error("miss 100")
} else {
console.log(item)
}
}) // 10 7 9 Error: miss 100
filter：過濾
newarr = arr.filter((item, index, arr) => boolean)
例子：
var nums = [10, 7, 9, 100, 11]
var newNums = nums.filter((item) => {
return item % 2 === 0 // 偶數
})
console.log(newNums) // [10, 100]
console.log(nums) // [10, 5, 11, 100, 55]
返回值是過濾後的新陣列
map：對映
newarr = arr.map((item, index, arr) => { 寫指定方法體 })
map() 方法返回一個由原陣列中的每個元素呼叫一個指定方法後的返回值組成的新陣列。
var nums = [10, 7, 9, 100, 11]
var newNums = nums.map((item) => {
return item * 10
})
console.log(newNums) // [100, 50, 110, 1000, 550]
console.log(nums) // [10, 5, 11, 100, 55]
注意：map 方法中的 callback 函式只需要接受一個引數，就是正在被遍歷的陣列元素本身。
但這並不意味著 map 只給 callback 傳了一個引數（會傳遞3個引數）。這個思維慣性可能會讓我們犯一個很容易犯的錯誤。
// 下面的語句返回什麼呢:
["1", "2", "3"].map(parseInt);
// 你可能覺的會是[1, 2, 3]
// 但實際的結果是 [1, NaN, NaN]
// num.parseInt() , parseInt()接收兩個引數，第一個為要轉換的字串，第二個引數是進位制數（2-36之間）如果省略該引數或其值為 0，則數字將以 10 為基礎來解析，超過返回NaN。
// map的 callback，會給它傳遞三個引數:當前正在遍歷的元素, 元素索引, 原陣列本身。第三個引數被忽略
// 所以就相當於執行了，parseInt("1", 0)，parseInt("2", 1)，parseInt("3", 2),
// 正確的寫法應該為：
function returnInt(element){
return parseInt(element,10);
}
["1", "2", "3"].map(returnInt);
// 返回[1,2,3]
find：查詢
item = arr.find((item, index, arr) => { boolean })
find()方法用於獲取陣列中符合指定條件的第一個元素。沒有找到返回 undefined。
var family = [
{ name: 'xiaoming', age: 18 },
{ name: 'xiaocheng', age: 40 },
{ name: 'xiaoli', age: 42 }
]
var item = family.find((item) => {
return item.name === 'xiaoming'
})
console.log(item) // { name: 'xiaoming', age: 18 }
注意，返回的item為淺拷貝。
item.name = 'kkk'
console.log(family)
/*
* {name: 'kkk', age: 18}
* {name: 'xiaocheng', age: 40}
* {name: 'xiaoli', age: 42}
*/
這裡就反應出 find() 方法返回的結果記憶體指向依然是 family 所指向的記憶體地址，
所以這裡返回的是淺拷貝的資料。
findIndex：查詢下標
index = arr.findIndex((item, index, arr) => { boolean })
findIndex() 返回符合條件的陣列第一個元素位置（索引），沒有找到符合條件則返回 -1。
var family = [
{ name: 'xiaoming', age: 18 },
{ name: 'xiaocheng', age: 40 },
{ name: 'xiaoli', age: 42 }
]
var index = family.findIndex((item) => {
return item.name === 'xiaoming'
})
console.log(index) // 0
後續遇到常用的，我會慢慢更新的~~~