js陣列常見的一些方法

自我學習記錄（一直會更新?）

常見的方法14種方法：push、pop、unshift、shift、concat、join、slice、splice、reverse、sort、toString、toLocaleString、valueOf、toSource

方法名	說明
push	向陣列的末尾新增一個或多個元素，並返回新陣列的長度。arrayObject.push(newelement1,newelement2,....,newelementX)
pop	刪除並返回陣列的最後一個元素。arrayObject.pop()
unshift	向陣列的開頭新增一個或多個元素，並返回新陣列的長度。arrayObject.unshift(newelement1,newelement2,....,newelementX)
shift	單詞代表去掉的意思：刪除並返回陣列的第一個元素。arrayObject.shift()
concat?	連線兩個或更多的陣列，並返回結果。arrayObject.concat(arrayX,arrayX,......,arrayX)
join?	把陣列的所有元素放入一個字串。元素通過指定的分隔符進行分隔。 arrayObject.join(分隔符)
slice?	從某個已有的陣列返回選定的元素。arrayObject.slice(start,end)：start必選，end可選，返回一個新的陣列，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。該方法並不會修改陣列，而是返回一個子陣列。
splice?	刪除元素，並向陣列新增新元素。arrayObject.splice(index,howmany,item1,.....,itemX)：index（整數，規定新增/刪除專案的位置）和howmany（必需。要刪除的專案數量。如果設定為 0，則不會刪除專案。）必選，item。。。可選。如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的陣列。如果是新增就返回空陣列。
reverse	顛倒陣列中元素的順序。arrayObject.reverse()
sort	對陣列元素進行排序。arrayObject.sort(sortby)sortby可選。規定排序順序。必須是函式。
toString	把陣列轉換為字串，並返回結果。
toLocaleString	把陣列轉換為本地字串。
valueOf	返回陣列物件的原始值
toSource	返回該物件的原始碼

其他好用的方法： foreach（）、map（）、filter（）、reduce（）、reduceRight（）、every（）、some（）、indexOf（）、lastIndexOf()、find（）、findIndex（）、includes（）

方法名	說明
foreach（）	迴圈遍歷陣列，引數（當前處理元素、陣列索引、陣列本身），無返回值
map（）	對映 ,其結果是該陣列中的每個元素都呼叫一個提供的函式後返回的結果，有返回值
filter（）	過濾出滿足過濾條件的陣列，有返回值
reduce（）	迭代陣列的所有項，然後構建一個最終返回的值。reduce()方法從陣列的第一項開始，逐個遍歷到最後。
reduceRight（）	迭代陣列的所有項，然後構建一個最終返回的值。reduceRight()則從陣列的最後一項開始，向前遍歷到第一項。
every（）	判斷陣列中的每一項是否都滿足條件，只有所有項都滿足條件的返回true
some（）	判斷陣列中是否存在滿足條件的項，只要有一項滿足就會返回true
indexOf（）	返回要查詢的項在陣列中出現的第一個索引位置，indexof()是從陣列開頭查詢，如果不存在，則返回-1
lastIndexOf()	返回要查詢的項在陣列中出現的第一個索引位置，lastIndexOf()是從陣列的末尾查詢，如果不存在，則返回-1
find（）	方法返回陣列中滿足提供的測試函式的第一個元素的值。否則返回 undefined。
findIndex（）	方法返回陣列中滿足提供的測試函式的第一個元素的索引。否則返回-1。
includes（）
instanceof	檢測陣列
Array.isArray()	檢測陣列

1.forEach():迴圈遍歷陣列，引數（當前處理元素、陣列索引、陣列本身），無返回值

array.forEach((item, index, array) {
	// do something
}, thisArg)

arr.forEach(item => console.log(item))
複製程式碼

2.map():對映 ,其結果是該陣列中的每個元素都呼叫一個提供的函式後返回的結果，有返回值

let array = arr.map(function callback(currentValue, index, array) {
	// do something
}, thisArg)
複製程式碼

3.filter() 過濾出滿足過濾條件的陣列，有返回值

var array = arr.filter(function callback(currentValue, index, array) {
	// do something
}, thisArg)
複製程式碼

4.reduce() 和 5.reduceRight():

這兩個方法都會實現迭代陣列的所有項，然後構建一個最終返回的值。reduce()方法從陣列的第一項開始，逐個遍歷到最後。而 reduceRight()則從陣列的最後一項開始，向前遍歷到第一項。

引數（前一個值，當前值， 索引項， 陣列物件） 回撥函式第一次執行時，accumulator 和 currentValue 的取值有兩種情況：呼叫 reduce 時提供initialValue，accumulator 取值為 initialValue ，currentValue 取陣列中的第一個值；沒有提供 initialValue ，accumulator 取陣列中的第一個值，currentValue 取陣列中的第二個值。

array.reduce(function(accumulator,currentValue,currentIndex,array),initialValue)
複製程式碼

?小試牛刀?

1.url中的查詢引數解析成字典物件

var newurl = 'http://dev.cekid.com:9018/r/products?store_code=8002&citycode=320100&cityname=%E5%90%88%E8%82%A5%E5%B8%82&cityid=340100&entityid=8029&entityname=%E5%90%88%E8%82%A5%E7%BE%8E%E6%B8%B8'
function parseUrl(url) {
	var arr = url.slice(url.indexOf('?')+1).split('&')
	var newArr = arr.reduce((prev, next) => {
		prev[next.split('=')[0]] = next.split('=')[1]
		return prev
	}, {})
	return newArr
}
parseUrl(newurl)
複製程式碼

2.二維陣列降級

function concatArr(arr) {
	var newArr = arr.reduce((prev, next) => {
		return prev.concat(next)
	}, [])
	return newArr
}
concatArr([[1, 2], [2, 3, 4, 1], [2, 2]])
// [1, 2, 2, 3, 4, 1, 2, 2]
複製程式碼

3.陣列求和

function total(arr) {
	let sum = arr.reduce((prev, next) => {
		prev = prev + next
		return prev
	}, 0)
	return sum
}
total([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) // 55
複製程式碼

6.every():判斷陣列中的每一項是否都滿足條件，只有所有項都滿足條件的返回true

function isNumber (arr) {
	let _arr = arr.every((item) => {
		return typeof(item) === 'number'
	})
	return _arr
}
isNumber([1, 2, 3, 4]) // true
isNumber([1, 2, 'sa', 4]) // false
複製程式碼

7.some():判斷陣列中是否存在滿足條件的項，只要有一項滿足就會返回true

function isNumber (arr) {
	let _arr = arr.some((item) => {
		return typeof(item) === 'number'
	})
	return _arr
}
isNumber(['ww', 'mm', 'sa', 4]) // true
isNumber(['ww', 'mm', 'sa', 'true']) // false
複製程式碼

8.indexOf() 和 9.lastIndexOf()

兩個方法都是返回要查詢的項在陣列中出現的第一個索引位置，不同的是indexof()是從陣列開頭查詢，lastIndexOf()是從陣列的末尾查詢，如果不存在，則返回-1 引數（要查詢的項，【可以選的項】查詢起點位置index）

arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])
arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])

// switch 控制是從陣列開始位置查，還是陣列末尾查
function _indexOf(arr, item, index, _switch) {
	return _switch ? arr.indexOf(item, index) : arr.lastIndexOf(item, index)
}

_indexOf([1, 2, 'mm', 3, 2, 'mm', 1], 'mm', 0, true) // 2
_indexOf([1, 2, 'mm', 3, 2, 'mm', 1], 'mm', 6, false) // 5
_indexOf([1, 2, 'mm', 3, 2, 'mm', 1], 'mm', 4, false) // 2
_indexOf([1, 2, 'mm', 3, 2, 'mm', 1], 'mm', 1, false) // -1
複製程式碼

10.find():方法返回陣列中滿足提供的測試函式的第一個元素的值。否則返回 undefined。

11.findIndex():方法返回陣列中滿足提供的測試函式的第一個元素的索引。否則返回-1。

function findV(arr, _switch) {
	let newValue = null
	if (_switch) {
		newValue = arr.find(item => {
			return item > 20
		})
	} else {
		newValue = arr.findIndex(item => {
			return item > 20 
		})
	}
	return newValue
} 
findV([1, 3, 20, 11, 22], true) // 22
findV([1, 3, 20, 11, 22], false) // 4
複製程式碼

12.includes()方法用來判斷一個陣列是否包含一個指定的值，如果是，返回 true或 false。

13.instanceof 和 Array.isArray(): 檢測陣列

var arr = [1, 2, 3, 4, 5, 6]
var arr2 = {}
arr instanceof Array // true
Array.isArray(arr) // true
Array.isArray(arr2) // false
複製程式碼