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
複製代碼