數組方法詳解

數組方法詳解之二——查詢元素及部分數組操作

數組的查詢

1、indexOf/lastIndexOf/includes

arr.indexOf(item, from) 從索引 from 查詢 item，如果找到傳回索引，否則傳回 -1。

arr.lastIndexOf(item, from) — 和上面相同，隻是從尾部開始查詢。

includes 存在相容性問題。（Google 47、火狐43及其以上版本）（移動端：iOS9及其以上，Android 4.4.4以上版本）

arr.includes(item, from) — 從索引 from 查詢 item，如果找到則傳回 true。

let arr = [1, 0, false];

console.log(arr.indexOf(0)) // 1
console.log(arr.indexOf(false)) // 2
console.log(arr.indexOf(null)) // -1

console.log(arr.includes(1)) // true
console.log(arr.includes(null)) // false
           

另外includes還可以識别NaN

let arr = [NaN]
console.log(arr.indexOf(NaN)) // -1
console.log(arr.includes(NaN)) // true
           

2、查找對象數組：find、findIndex

差別：

• find 傳回元素本身
• findIndex 傳回對飲索引

/*
* item 目前元素
* index索引
* array 數組本身
* 如果它傳回true，則查詢停止，傳回 item。如果沒有查詢到，則傳回 undefined
 arr.find((item, index, array) => {
  // 如果查詢到傳回 true
 });
*/
var arr = [
	{name: '張三', age: 18},
	{name: '李四', age: 20}
]
var tempArr1 = arr.find(item => item.age === 18)
var tempArr2 = arr.findIndex(item => item.age === 18)
console.log(tempArr1) // {name: '張三', age: 18}
console.log(tempArr2) // 1
           

3、filter 過濾，用于查詢一類資料

/*
let results = arr.filter((item, index, array) => {
  // 在元素通過過濾器時傳回 true
});
*/
var arr = [
	{name: '張三', age: 18},
	{name: '李四', age: 20},
	{name: '王五', age: 16}
]
var tempArr = arr.filter(item => item.age <= 18)
console.log(tempArr) //[ {name: '張三', age: 18}, {name: '王五', age: 16} ]
           

數組的操作

1、map： 對數組中每個元素進行特定規則的處理。

var numArr = [1, 2, 3, 4]
var newArr = numArr.map(item => item + 1)
console.log(newArr) // [2, 3, 4, 5]
           

2、sort: 對數組進行排序

// 字母
var strArr = ['abc', 'def', 'bcd', 'daf']
console.log(strArr.sort()) // ["abc", "bcd", "daf", "def"]

var arr = [1, 2, 22, 13]
// 數字升序排序
var sortArr = arr.sort((a, b) => a - b)
console.log(sortArr) // [1, 2, 13, 22]
// 數字降序排序
var sortArr = arr.sort((a, b) => a + b)
console.log(sortArr) // [22, 13, 2, 1]
// 複雜型數組依然可以使用sort進行排序, 前提是有指定的辨別符用來判斷大小
var objArr = [{num: 5}， {num: 1}, {num: 7}, {num: 4}]
var sortArr = objArr.sort((second, first) => second.num - first.num)
console.log(sortArr) // [{num: 1}， {num: 4}, {num: 5}, {num: 7}]
           

3、revert 翻轉數組

可用于判斷字元串是否為回文字元串。

var arr = [1, 2, 3, 4, 5]
var reArr = arr.revert()
console.log(reArr) // [5, 4, 3, 2, 1]
           

// 判斷字元串是否回文
var str = 'hellowolleh'
var tempArr = str.split('')
var revertArr = tempArr.revert()
var revertStr = revertArr.join('') // hellowolleh
if (str === revertStr) { // 回源
}
           

4、forEach

為數組的每個元素運作一個函數，注：傳回undefined，不會改變原數組

對比for循環：forEach可以通過過return來結束本次循環（break），但無法結束整個循環體（continue）

let arr = [1, 2, 3]
arr.forEach((item, index, array) => {
 // do something with item
})
           

5、reduce/reduceRight

reduce和forEach、map類似不過參數有所不同

/*
* 第一個參數為每次周遊所執行的函數
* 函數内參數：
* 	previousValue：上一項執行完成後return的值
* 	item：目前項
* 	index：目前項索引
* 	arr：數組本身
* initial：(可選參數)previousValue的初始化資料。當arr為[]且initial為空時，會報錯。是以建議initial始終有值。
*/ 
let value = arr.reduce((previousValue, item, index, arr) => {}[, initial])
           

将一個數組内的值進行累加（包含過濾累加）

let arrNum = [1, 2, 3, 4, 5]
let addValue = arrNum.reduce((sun, current) => {
	console.log(sun) // 依次輸出 0, 1, 3, 6, 10
	return sun+ current 
}, 0)
console.log(addValue) // 15

// 使用initial改變開始值
let addValue = arrNum.reduce((sun, current) => {
	console.log(sun) // 依次輸出 9, 10, 12, 15, 19
	return sun+ current 
}, 9)

// 當arr為空且沒設定initial參數時報錯。
let arr = []
let value = .reduce((sun, current) => sun+ current) // error

// 是喲過濾條件
let arrNum = [1, 2, 3, 4, 5, 6]
let addValue = arrNum.reduce((sun, current) => {
	if (current > 4) { // 累加時去除大于四的值
		return sun
	}
	return sun+ current 
}, 9)
console.log(addValue) // 19
           

reduceRight使用方法和參數與reduce相同，執行順序從數組右邊開始。

擴充：

thisArg：幾乎所有調用函數的數組方法 – 比如 find，filter，map他們都可以接受一個可選的附加參數 thisArg

thisArg 參數的值在 func 中變為 this

let user = {
  age: 18,
  younger(otherUser) {
    return otherUser.age < this.age;
  }
};

let users = [
  {age: 12},
  {age: 16},
  {age: 32}
];

// 找到比 users 小的所有 user
let youngerUsers = users.filter(user.younger, user);

alert(youngerUsers.length); // 2
           

在上面我們使用

user.younger

作為過濾器，并提供

user

作為它的上下文。如果我們沒有提供上下文，

users.filter(user.younger)

會調用

user.younger

作為一個獨立的函數，這時

this=undefined

總結：

• map(func) — 從每個元素調用 func 的結果建立一個新數組。
• sort(func) — 将數組倒序排列，然後傳回。
• reverse() — 在原地颠倒數組，然後傳回它。
• split/join — 将字元串轉換為數組并傳回。
• reduce(func, initial) — 通過為每個元素調用 func 計算數組上的單個值并在調用之間傳遞中間結果。

• forEach(func) — 為每個元素調用 func，不傳回任何東西。

  其他： – Array.isArray(arr) 檢查 arr 是否是一個數組。

  • 請注意，sort，reverse 和 splice 方法修改數組本身。

    arr.some(fn)/arr.every(fn) 檢查數組。

• arr.some(fn)/arr.every(fn) 檢查數組。

  在類似于 map 的數組的每個元素上調用函數 fn。如果任何/所有結果為 true，則傳回 true，否則傳回 false。

• arr.fill(value, start, end) — 從 start 到 end 用 value 重複填充數組。
• arr.copyWithin(target, start, end) — copies its elements from position start till position end into itself, at position target (overwrites existing).将其元素從 start 到 end 在 target 位置複制到 本身（覆寫現有）

這次就到這裡啦~

下次為大家獻上【數組操作】相關的筆試題及對應解析~~