前端值得一探究竟特輯 --- 數組的常見API

來自ES5的Array API

1. str.split()

拆分字符串變成數組(對字符串操作)

"we are here".split(" ");  //  ["we", "are", "here"]

2. arr.join()

操作數組變成字符串(對數組操作),不修改原數組

["we", "are", "here"].join("-"); //  "we-are-here"

3. arr.concat()

連接兩數組,返回新數組,不改變原來兩個數組,可用於淺拷貝

[1,2,3].concat([4,5,6]) //  [1, 2, 3, 4, 5, 6]

4. arr.splice(begin,deleteCount,insert)

刪除/拼接。在原數組是刪除[begin, begin+deleteCount-1),並返回被刪除元素組成的新數組,在原數組begin的位置插入後續參數。

	let a = [1, 2, 3, 4];
	let b = a.splice(1,2,"a", "b");
	a // [1, "a", "b", 4]
	b // [2, 3]

5. arr.slice(begin,end)

截取[begin,end),不修改原數組,返回新數組。

	[0, 1, 2, 3, 4].slice(1,3); // [1, 2]

6. arr.sort([compareFunc])

排序,根據字符串UniCode碼(UTF-16 code)。穩定排序修改原數組
可以接收一個compare函數作爲參數。

let a = [12, 1, 23, 2];
a.sort() // [1, 12, 2, 23]
a.sort((a, b) => a - b) // [1, 2, 12, 23]

compare函數接收兩個參數a和b。
初始時刻:a爲第二個待排序元素,b爲第一個待排序元素,返回正數則降序,負數爲升序。這點與MDN上的說法有出入Array.prototype.sort()

compareFunction
Specifies a function that defines the sort order. If omitted, the array elements are converted to strings, then sorted according to each character’s Unicode code point value.
firstEl
The first element for comparison. ???
secondEl
The second element for comparison. ???

實驗可知:

const k = [4, 3, 2, 1]
k.sort((a, b) => {
	let r = a - b;
	console.log('a:', a, 'b:', b, 'r:', r);
	return r;
})
// a: 3 b: 4 r: -1
// a: 2 b: 3 r: -1
// a: 1 b: 2 r: -1
// [1, 2, 3, 4]

當數組長度小於等於10的時候,採用插入排序,大於10的時候,採用快排

const k = [14, 3, 22, 1]
k.sort((a, b) => {
	let r = a - b;
	console.log('a:', a, 'b:', b, 'r:', r);
	return r;
})
// a: 3 b: 14 r: -11
// a: 22 b: 3 r: 19
// a: 22 b: 14 r: 8
// a: 1 b: 14 r: -13
// a: 1 b: 3 r: -2
// [1, 3, 14, 22]

7. arr.reverse

逆轉數組,修改原數組

8. arr.pop

從數組尾部添加元素,修改原數組

9. arr.push

從數組尾部添加元素,修改原數組

10. arr.unshift

從數組頭部添加元素,修改原數組

11. arr.shift

從數組頭部彈出元素,修改原數組

來自ES6的Array API

12. arr.map

映射,一對一,缺少return,默認返回undefined,不改變原數組,但如果數組元素是對象,可以操作元素屬性

13. arr.reduce

彙總,A.reduce((tempResult, item, index) => {...}), tempResult是上一輪循環返回的結果,tempResult可以接收初始值,沒有傳遞初始值時,默認爲A[0],index爲item的下標1,item爲A[1]。不改變原數組,但如果數組元素是對象,可以操作元素屬性,返回最後一輪的return結果。

	let a = [1,2,3,4];
	a.reduce((tempR, item, index) => {
		console.log("tempR", tempR, "item", item, "index", index);
		return item;
	})
	// tempR 1 item 2 index 1
	// tempR 2 item 3 index 2
	// tempR 3 item 4 index 3

14. arr.filter

篩選,返回符合條件(return值爲真)的所有元素。不改變原數組,但如果數組元素是對象,可以操作元素屬性。返回滿足條件的元素組成的新數組,如果沒有符合條件的元素則返回空數組。

15. arr.forEach

調用數組的每個元素,並將元素傳遞給回調函數,返回undefined,不改變原數組,但如果數組元素是對象,可以操作元素屬性

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章