JS數組方法總覽及遍歷方法耗時統計

國慶7天假,6天加班,苦澀😂。javascript

由於對數組的處理方法有些仍是有點模糊,所以這裏整理彙總一下,方便往後本身查閱。😜java

0一、push(value)將value添加到數組的最後,返回數組長度(改變原數組)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.push(1)
console.log(result)       // 6
console.log(a)            // [1, 2, 3, 4, 5, 1] 原數組被改變

// More
a = [1, 2, 3, 4, 5]
result = a.push('a', 'b') // 可一次添加多個值
console.log(result)       // 7
console.log(a)            // [1, 2, 3, 4, 5, 'a', 'b']
複製代碼

0二、unshift()添加元素到數組的開頭,返回數組的長度(改變原數組)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.unshift(1)
console.log(result)           // 6
console.log(a)                // [1, 1, 2, 3, 4, 5]

// More
result = a.unshift('a', 'b')  // 可一次添加多個值
console.log(result)           // 8
console.log(a)                // ['a', 'b', 1, 1, 2, 3, 4, 5]
複製代碼

0三、pop()刪除數組中最後一個元素,返回被刪除元素(改變原數組)

// Base
let a = [5]
let result = a.pop()
console.log(result)   // 5
console.log(a)        // []

// More
result = a.pop()      // 數組元素爲空後會返回undefined
console.log(result)   // undefined
console.log(a)        // []
複製代碼

0四、shift()刪除數組第一個元素,返回刪除的元素(改變原數組)

// Base
let a = [5]
let result = a.shift()
console.log(result)      // 5
console.log(a)           // []

// More
result = a.shift()       // 數組元素爲空後會返回undefined
console.log(result)      // undefined
console.log(a)           // []
複製代碼

0五、join(value)將數組用value鏈接爲字符串(不改變原數組)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.join(',')
console.log(result)   // '1,2,3,4,5'
console.log(a)        // [1, 2, 3, 4, 5]

// More
let obj = {
  toString() {
    console.log('調用了toString()方法!')
    return 'a'
  },
  toValue() {
    console.log('toValue()方法!')
    return 'b'
  }
}
result = a.join(obj) // 使用對象時會調用對象自身的toString方法轉化爲字符串,咱們這裏重寫了toString,從而覆蓋了原型鏈上的toString
// 調用了toString()方法!
console.log(result)   // 1a2a3a4a5
console.log(a)        // [1, 2, 3, 4, 5]

// join的一個相對的方法是字符串的split方法
console.log('1a2a3a4a5'.split('a')) // [1, 2, 3, 4, 5]
複製代碼

0六、reverse()反轉數組(改變原數組)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.reverse()
console.log(result)   // [5, 4, 3, 2, 1]
console.log(a)        // [5, 4, 3, 2, 1]

// More
a = [1, [2, 3], [4, 5]]
result = a.reverse()
console.log(result)   // [[4, 5], [2, 3], 1]
console.log(a)        // [[4, 5], [2, 3], 1]
// 能夠看到這裏的反轉只是基於數組的第一層,屬於淺反轉。

// 一個簡單的深反轉,使用遞歸實現
const deepReverse = (array) => {
  let temp = array.reverse()
  temp.forEach(v => {
    if(Object.prototype.toString.call(v) === '[object Array]') {
      deepReverse(v)
    }
  })
  return temp
}
a = [1, [2, 3], [4, 5]]
result = deepReverse(a)
console.log(result)    // [[5, 4], [3, 2], 1]
複製代碼

0七、slice(start, end)返回新數組,包含原數組索引start的值到索引end的值,不包含end(不改變原數組)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.slice(2, 4)
console.log(result)   // [3, 4]
console.log(a)        // [1, 2, 3, 4, 5]

// More
console.log(a.slice(1))         // [2, 3, 4, 5] 只有一個參數且不小於0,則今後索引開始截取到數組的末位
console.log(a.slice(-1))        // [5] 只有一個參數且小於0,則從倒數|start|位截取到數組的末位
console.log(a.slice(-1, 1))     // [] 反向截取,不合法返回空數組
console.log(a.slice(1, -1))     // [2, 3, 4] 從第一位截取到倒數第一位,不包含倒數第一位
console.log(a.slice(-1, -2))    // [] 反向截取,不合法返回空數組
console.log(a.slice(-2, -1))    // [4] 倒數第二位截取到倒數第一位
複製代碼

0八、splice(index, count, value)從索引爲index處刪除count個元素,插入value(改變原數組)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.splice(1, 2, 0)
console.log(result)   // [2, 3]
console.log(a)        // [1, 0, 4, 5]

// More
a = [1, 2, 3, 4, 5]
console.log(a.splice(-2))                   // [4. 5]
console.log(a)                              // [1, 2, 3]

a = [1, 2, 3, 4, 5]
console.log(a.splice(-1))                   // [5]
console.log(a)                              // [1, 2, 3, 4] 當參數爲單個且小於0時,將從數組的倒數|index|位截取到數組的末位

a = [1, 2, 3, 4, 5]
console.log(a.splice(0))                    // [1, 2, 3, 4, 5]
console.log(a)                              // []

a = [1, 2, 3, 4, 5]
console.log(a.splice(1))                    // [2, 3, 4, 5]
console.log(a)                              // [1] 當參數爲單個且不小於0時,將從當前數表明的索引位開始截取到數組的末位

a = [1, 2, 3, 4, 5]
console.log(a.splice(-1, 2))                // [5]
console.log(a)                              // [1, 2, 3, 4] 從倒數第一位開始截取兩個元素,元素不夠,只返回存在的元素

a = [1, 2, 3, 4, 5]
console.log(a.splice(0, 2, 'a', 'b', 'c'))  // [1, 2]
console.log(a)                              // ["a", "b", "c", 3, 4, 5] 截取後將value一次填充到數組被截取的位置,value的數量大於截取的數量時,數組中剩餘的元素後移
複製代碼

0九、sort()對數組元素進行排序(改變原數組)

// Base
let a = [31, 22, 27, 1, 9]
let result = a.sort()
console.log(result)   // [1, 22, 27, 31, 9]
console.log(a)        // [1, 22, 27, 31, 9]

// More
a = ['c', 'ac', 'ab', '1c', 13, 12, '13', '12', '3', '2', '1b', '1a', 1, 'aa', 'a', 3, 'b', 2]
a.sort()
console.log(a) // [1, 12, "12", 13, "13", "1a", "1b", "1c", "2", 2, "3", 3, "a", "aa", "ab", "ac", "b", "c"]
                      // 能夠看出sort排序是根據位來進行排序,而非值的大小,先比較第一位數字在前,字母在後,若相同則比較後面位(實際是比較各個值轉化爲字符串後的各個位點的unicode位點)
a = [31, 22, 27, 1, 9]
a.sort((a, b)=>{
  return a - b
})
console.log(a)        // [1, 9, 22, 27, 31] 按數值大小正序排列

a = [31, 22, 27, 1, 9]
a.sort((a, b)=>{
  return b - a
})
console.log(a)        // [31, 27, 22, 9, 1] 按數值大小倒序排列
複製代碼

十、toString()將數組中的元素用逗號拼接成字符串(不改變原數組)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.toString()
console.log(result)   // 1,2,3,4,5
console.log(a)        // [1, 2, 3, 4, 5]
複製代碼

十一、indexOf(value)從索引爲0開始,檢查數組是否包含value,有則返回匹配到的第一個索引,沒有返回-1(不改變原數組)

// Base
let a = [1, 2, 3, 2, 5]
let result = a.indexOf(2)
console.log(result)   // 1
console.log(a)        // [1, 2, 3, 2, 5]

result = a.indexOf(6)
console.log(result)   // -1
console.log(a)        // [1, 2, 3, 2, 5]
複製代碼

十二、lastIndexOf(value)從最後的索引開始,檢查數組是否包含value,有則返回匹配到的第一個索引,沒有返回-1(不改變原數組)

// Base
let a = [1, 2, 3, 2, 5]
let result = a.lastIndexOf(2)
console.log(result)   // 3
console.log(a)        // [1, 2, 3, 2, 5]

result = a.lastIndexOf(6)
console.log(result)   // -1
console.log(a)        // [1, 2, 3, 2, 5]
複製代碼

1三、concat(value)將數組和/或值鏈接成新數組(不改變原數組)

// Base
let a = [1, 2], b = [3, 4], c = 5
let result = a.concat(b, c)
console.log(result)   // [1, 2, 3, 4, 5]
console.log(a)        // [1, 2]

// More
b = [3, [4]]
result = a.concat(b, c)
console.log(result)   // [1, 2, 3, [4], 5] concat對於嵌套數組沒法拉平
console.log(a)        // [1, 2]
複製代碼

1四、fill(value, start, end)使用給定value填充數組,從索引start開始end結束,不包含end(改變原數組)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.fill(0, 2, 3)
console.log(result)             // [1, 2, 0, 4, 5]
console.log(a)                  // [1, 2, 0, 4, 5]

// More
a = [1, 2, 3, 4, 5]
console.log(a.fill(1))          // [1, 1, 1, 1, 1] 參數一個時,將該參數覆蓋填充到數組每一項
a = [1, 2, 3, 4, 5]
console.log(a.fill(1, 2))       // [1, 2, 1, 1, 1] 只有start時,從索引start開始填充到數組末位
a = [1, 2, 3, 4, 5]
console.log(a.fill(1, -2))      // [1, 2, 3, 1, 1] 只有start且爲負數時,從倒數|start|位開始填充到數組末位
複製代碼

1五、flat()將二維數組變爲一維數組(不改變原數組)

// Base
let a = [1, 2, 3, [4, 5]]
let result = a.flat()
console.log(result)   // [1, 2, 3, 4, 5]
console.log(a)        // [1, 2, 3, [4, 5]]

let a = [1, 2, 3, [4, 5, [6, 7, [8, 9]]]]
let result = a.flat()
console.log(result)   // [1, 2, 3, 4, 5, [6, 7, [8, 9]]] 很顯然只能將第二層嵌套數組「拉平」
console.log(a)        // [1, 2, 3, [4, 5, [6, 7, [8, 9]]]]
複製代碼

1六、flatMap()至關於map與flat的結合(不改變原數組)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.flatMap((currentValue)=>{
  return [currentValue, currentValue * 2]
})
console.log(result)   // [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
console.log(a)        // [1, 2, 3, 4, 5]
複製代碼

1七、copyWithin(target, start, end)將數組從start到end索引的元素(不包含end)複製到target開始的索引位置(改變原數組)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.copyWithin(0, 3, 5)  
console.log(result)                 // [4, 5, 3, 4, 5]
console.log(a)                      // [4, 5, 3, 4, 5] 索引3到5的元素爲4和5,複製到從0開始的位置,替換掉了1和2

// More
a = [1, 2, 3, 4, 5]
console.log(a.copyWithin(2))        // [1, 2, 1, 2, 3] 參數只有一個時,start默認爲0,end默認爲數組長度-1
複製代碼

1八、entries()返回一個新的Array迭代器對象,可用for...of遍歷(不改變原數組)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.entries()
console.log(result.next())   // {value: [0, 1], done: false} value數組中第一個元素爲索引,第二元素爲索引對應的值
...
console.log(result.next())   // {value: [4, 5], done: false}
console.log(result.next())   // {value: undefined, done: true}
console.log(result)          // Array Iterator {}
console.log(a)               // [1, 2, 3, 4, 5]

result = a.entries()
for(let value of result) {
  console.log(value)
}
// [0, 1]
// [1, 2]
// [2, 3]
// [3, 4]
// [4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
result = a.entries()
for(let v of result) { }
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // 運行三次,三次的耗時數 518ms 515ms 530ms
複製代碼

1九、keys()返回一個新的Array迭代器對象,可用for...of遍歷(不改變原數組)

let a = [1, 2, 3, 4, 5]
let result = a.keys()
console.log(result.next())   // {value: 0, done: false} value爲索引 
...
console.log(result.next())   // {value: 3, done: false}
console.log(result.next())   // {value: 4, done: false}
console.log(result)          // Array Iterator {}
console.log(a)               // [1, 2, 3, 4, 5]

result = a.keys()
for(let value of result) {
  console.log(value)
}
// 0
// 1
// 2
// 3
// 4

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
result = a.keys()
for(let v of result) { }
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // 運行三次,三次的耗時數 223ms 262ms 300ms
複製代碼

20、values()返回一個新的迭代器(不改變原數組)

let a = [1, 2, 3, 4, 5]
let result = a.values()
console.log(result.next())   // {value: 1, done: false} value爲索引 
...
console.log(result.next())   // {value: 4, done: false}
console.log(result.next())   // {value: 5, done: false}
console.log(result)          // Array Iterator {}
console.log(a)               // [1, 2, 3, 4, 5]

result = a.values()
for(let value of result) {
  console.log(value)
}
// 1
// 2
// 3
// 4
// 5

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
result = a.values()
for(let v of result) { }
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // 運行三次,三次的耗時數 254ms 270ms 273ms
複製代碼

2一、forEach()遍歷數組(不改變原數組)

let a = [1, 2, 3, 4, 5]
let result = a.forEach((v, i)=>{
  console.log(v, i)  
  // 1 0
  // 2 1
  // 3 2
  // 4 3
  // 5 4
})
console.log(result)   // undefined
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.forEach(v=>{})
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // 運行三次,三次的耗時數 182ms 188ms 180ms
複製代碼

2二、every(fn)判斷數組中是否全部元素都知足fn函數中的條件(不改變原數組)

let a = [1, 2, 3, 4, 5]
let result = a.every((currentValue)=>{
  return currentValue > 0
})
console.log(result)   // true 顯然全部元素都大於0

result = a.every((currentValue)=>{
  return currentValue > 1
})
console.log(result)   // false 1並不大於1
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.every(v=> v > -1 )
let dateEnd = Date.now()
console.log(dateEnd - dateStart) // 運行三次,三次的耗時數 176ms 200ms 186ms

dateStart = Date.now()
a.every(v=> v > 8 )
dateEnd = Date.now()
console.log(dateEnd - dateStart) // 0ms 0ms 0ms 不超過1ms,可見every的判斷是在識別到不知足的條件時,馬上中止
複製代碼

2三、filter(fn)返回數組中知足fn函數中條件的集合(不改變原數組)

let a = [1, 2, 3, 4, 5]
let result = a.filter((currentValue)=>{
  return currentValue > 4
})
console.log(result)   // [5] 只有5知足條件
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.filter(v=> v > -1 )
let dateEnd = Date.now()
console.log(dateEnd - dateStart) // 運行三次,三次的耗時數 584ms 660ms 552ms 所有值都知足條件的狀況

a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.filter(v=> v < 0 )
let dateEnd = Date.now()
console.log(dateEnd - dateStart) // 200ms 194ms 183ms 這個時候才個forEach接近,這也是與forEach自己只有遍歷的功能,沒有執行其餘邏輯相關
複製代碼

2四、find(fn)返回數組中第一個匹配fn函數中條件的值沒有則返回undefined(不改變原數組)

let a = [1, 2, 3, 4, 5]
let result = a.find((currentValue)=>{
  return currentValue > 3
})
console.log(result)   // 4
console.log(a)        // [1, 2, 3, 4, 5]

let result = a.find((currentValue)=>{
  return currentValue > 5
})
console.log(result)   // undefined
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.find(v=> v < 0 )
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // 185ms 197ms 203ms 所有不知足的狀況下,效率與forEach至關

a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.find(v=> v > 10 )
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // 0ms 0ms 0ms 小於1ms,能夠判斷當匹配到知足條件的第一個值後,馬上中止循環,與every至關
複製代碼

2五、findIndex(fn)返回數組中第一個匹配fn函數中條件的索引沒有則返回undefined(不改變原數組)

let a = [1, 2, 3, 4, 5]
let result = a.findIndex((currentValue)=>{
  return currentValue > 3
})
console.log(result)   // 3
console.log(a)        // [1, 2, 3, 4, 5]

let result = a.findIndex((currentValue)=>{
  return currentValue > 5
})
console.log(result)   // -1
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.findIndex(v=> v < 0 )
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // 185ms 183ms 187ms 與find至關

a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.findIndex(v=> v > 10 )
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // 0ms 0ms 0ms 與find至關
複製代碼

2六、includes()返回一個布爾值,表示某個數組是否包含給定的值(不改變原數組)

let a = [1, 2, 3, 4, 5]
let result = a.includes(2)
console.log(result)   // true
console.log(a)        // [1, 2, 3, 4, 5]

result = a.includes(6)
console.log(result)   // false
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.includes(10)
let dateEnd = Date.now()
console.log(dateEnd - dateStart) // 0ms 0ms 0ms

a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.includes(10000000-1)
let dateEnd = Date.now()
console.log(dateEnd - dateStart) // 22ms 18ms 27ms 性能不錯
複製代碼

2七、map(fn)以fn函數中返回值組成新的數組返回(不改變原數組)

let a = [1, 2, 3, 4, 5]
let result = a.map((v, i)=>{
  return 9
})
console.log(result)   // [9, 9, 9, 9, 9]
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.map(v=>1)
let dateEnd = Date.now()
console.log(dateEnd - dateStart) // 2158ms 2007ms 2079ms 耗時比較大
複製代碼

2八、reduce()累計器(不改變原數組)

let a = [1, 2, 3, 4, 5]
let result = a.reduce((accumulator, currentValue, currentIndex, array)=>{
  console.log(accumulator, currentValue, currentIndex, array)
  return accumulator + currentValue
  // 5 1 0 [1, 2, 3, 4, 5] 第一次accumulator的值爲reduce第二個參數5, currentValue爲數組第一個元素
  // 6 2 1 [1, 2, 3, 4, 5] 第二次accumulator的值爲5加上數組a中的第一個值,便是第一次循環時return的值
  // 8 3 2 [1, 2, 3, 4, 5] 同上
  // 11 4 3 [1, 2, 3, 4, 5] 同上 
  // 15 5 4 [1, 2, 3, 4, 5] 同上
}, 5)
console.log(result)   // 20 爲最終累計的和
console.log(a)        // [1, 2, 3, 4, 5]

// 無初始值時,accumulator的初始值爲數組的第一個元素,currentValue爲數組第二個元素
result = a.reduce((accumulator, currentValue, currentIndex, array)=>{
  console.log(accumulator, currentValue, currentIndex, array)
  return accumulator + currentValue
  // 1 2 1 [1, 2, 3, 4, 5]
  // 3 3 2 [1, 2, 3, 4, 5]
  // 6 4 3 [1, 2, 3, 4, 5]
  // 10 5 4 [1, 2, 3, 4, 5]
})
console.log(result)   // 15 爲最終累計的和
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.reduce((accumulator, currentValue, currentIndex, array)=>{
  return accumulator + currentValue
})
let dateEnd = Date.now()
console.log(dateEnd - dateStart) // 200ms 258ms 257ms 效率與forEach相差也很少,並且比forEach多個累計的功能
複製代碼

2九、reduceRight()與reduce功能同樣,只是從數組末尾開始進行累計(不改變原數組)

略...
複製代碼

30、some(fn)檢查數組中是否含有知足fn函數條件的值(不改變原數組)

let a = [1, 2, 3, 4, 5]
let result = a.some((v)=>{
  return v > 2
})
console.log(result)   // true
console.log(a)        // [1, 2, 3, 4, 5]

result = a.some((v)=>{
  return v > 6
})
console.log(result)   // false
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.some(v=>{
  return v < 0
})
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // 171ms 176ms 188ms 所有不知足的狀況下效率與forEach至關
複製代碼

3一、toLocaleString()將數組中的每一個元素使用各自的toLocaleString()轉換後用,拼接(不改變原數組)

let a = [1, new Date(), 'a', {m: 1}]
let result = a.toLocaleString()
console.log(result)   // '1,2018/10/3 下午9:23:59,a,[object Object]'
console.log(a)        // [1, Wed Oct 03 2018 21:23:59 GMT+0800 (中國標準時間), "a", {m: 1}]
複製代碼

3二、[@@iterator]()數組自帶的迭代器方法(不改變原數組)

使得數組原生可使用for...of進行遍歷
複製代碼
相關文章
相關標籤/搜索