JavaScript陣列API彙總

星夢花隨0823發表於2018-11-25
JavaScript陣列API

01、push()：將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
result = a.push('a', 'b')      // 可一次新增多個值
console.log(result)            // 8
console.log(a)                 // [1, 2, 3, 4, 5, 1, 'a', 'b']
複製程式碼

02、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]
複製程式碼

03、pop()：刪除陣列中最後一個元素，返回被刪除的元素(改變原陣列)

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

// More
result = a.pop()     // 陣列為空陣列後，執行pop()方法，返回undefined
console.log(result)  // undefined
console.log(a)       // []
複製程式碼

04、shift()：刪除陣列第一個元素，返回被刪除的元素(改變原陣列)

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

// More
result = a.shift()     // 陣列為空陣列後，執行pop()方法，返回undefined
console.log(result)    // undefined
console.log(a)         // []
複製程式碼

05、join(value)：將陣列用value連線為字串，返回被連線後的字串(不改變原陣列)

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

// More
let obj = {
    toString: function () {
        console.log('呼叫了toString()方法！')
        return 'a'
    },
    toValue: function () {
        console.log('呼叫了toValue()方法！')
        return 'b'
    }
}
result = a.join(obj)  // 使用物件時會呼叫物件自身的toString方法，我們這裡重寫了toString
// 呼叫了toString()方法
console.log(result)  // 1a2a3a4a5
console.log(a)       // [1, 2, 3, 4, 5]

// 陣列中的join()方法相對的一個方法是字串的split()方法
console.log(result.split('a'))  // [1, 2, 3, 4, 5]
複製程式碼

06、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]
複製程式碼

07、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]  從第1位擷取到倒數第1位
console.log(a.slice(-1, -2))  // []   反向擷取，不合法，返回空陣列
console.log(a.slice(-2, -1))  // [4]  倒數第2位擷取到倒數第1位
複製程式碼

08、splice(index, count, value1, value2....)：從索引位index處刪除count個元素，插入value1, value2等元素，返回被刪除的元素組成的新陣列(改變原陣列)

// 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]  當引數為單個且小於0時，將擷取從倒數|index|位到陣列的末尾
console.log(a)             // [1, 2, 3]

a = [1, 2, 3, 4, 5]
console.log(a.splice(-1))  // [5]  當引數為單個且小於0時，將擷取從倒數|index|位到陣列的末尾
console.log(a)             // [1, 2, 3, 4]

a = [1, 2, 3, 4, 5]
console.log(a.splice(0))  // [1, 2, 3, 4, 5] 當引數為單個且不小於0時，將擷取從index位到陣列的末尾
console.log(a)            // []

a = [1, 2, 3, 4, 5]
console.log(a.splice(1))  // [2, 3, 4, 5]  當引數為單個且不小於0時，將擷取從index位到陣列的末尾
console.log(a)            // [1]

a = [1, 2, 3, 4, 5]
console.log(a.splice(-1, 2))   // [5]  從倒數第1位開始擷取兩個元素
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值依次填充到擷取位置處，舊值被向後順移
複製程式碼

09、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', 'A1', '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, "A1", "a", "aa", "ab", "ac", "b", "c"]
// 可以看出sort排序是根據每個字元對應的ASCII碼值進行排序的，而非值的大小。
// 先比較第一位的ASCII碼值，如果第一位的ASCII碼值相同，則開始比較第二位的ASCII碼值，以此類推
// ASCII碼錶(http://tool.oschina.net/commons?type=4 + K)
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]  按數值大小倒序排列
複製程式碼

10、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]

// 除了toString()方法之外，String()方法也可以將陣列轉換成字串
result = String(a)
console.log(result)  // 1,2,3,4,5
複製程式碼

11、indexOf(value)：從索引為0開始，檢查陣列中是否包含有value，有則返回匹配到的第一個索引，沒有則返回-1(不改變原陣列)

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

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

12、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, 4, 5]

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

13、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]
複製程式碼

14、forEach()：對陣列進行遍歷迴圈，對陣列中每一項執行給定函式，引數都是function型別，預設有傳參，引數分別為：遍歷陣列內容、對應的陣列索引、陣列本身。沒有返回值

var arr = [1, 2, 3, 4, 5]
arr.forEach(function (item, index, a) {
  console.log(item + '|' + index + '|' + (a === true))
})
// 輸出為：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
複製程式碼

15、map()：指“對映”，對陣列中的每一項執行給定函式，返回每次函式呼叫的結果組成的新陣列

var arr = [1, 2, 3, 4, 5]
var arr1 = arr.map(function (item, index, a) {
  return item * item
})
console.log(arr1)  // [1, 4, 9, 16, 25]
複製程式碼

16、filter()：“過濾”功能，陣列中的每一項執行給定函式，返回滿足過濾條件組成的陣列

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var arr1 = arr.filter(function (item, index, a) {
  return index % 3 === 0 || item >= 8
})
console.log(arr1)  // [1, 4, 7, 8, 9, 10]
複製程式碼

17、every()：判斷陣列中每一項都是否滿足條件，只有所有項都滿足條件，才會返回true

var arr = [1, 2, 3, 4, 5]
var arr1 = arr.every(function (item, index, a) {
  return item < 10
})
console.log(arr1)  // true
var arr2 = arr.every(function (item, index, a) {
  return item < 3
})
console.log(arr2)  // false
複製程式碼

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

var arr = [1, 2, 3, 4, 5]
var arr1 = arr.some(function (item, index, a) {
  return item < 3
})
console.log(arr1)  // true
var arr2 = arr.some(function (item, index, a) {
  return item < 1
})
console.log(arr2)  // false
複製程式碼

綜上可知，改變原陣列的API如下：

  • push()、unshift()、pop()、shift()、reverse()、splice()、sort()

相關文章