JavaScript 陣列

haqiu發表於2019-04-09
JavaScript陣列

Array的操作方法

1. unshift()

arrayObject.unshift(newelement1,newelement2,....,newelementX)

  • 向陣列開頭新增一個或多個元素，並返回新的長度
  • 改變原陣列
  let arr = [1,2,3]
  let len = arr.unshift(1)
  console.log(len) // 4
  console.log(arr)  // [1, 1, 2, 3]
複製程式碼

2. shift()

arrayObject.shift()

  • 刪除陣列第一個元素，並返回刪除的元素本身
  • 如果陣列為空，則不修改素組，返回undefined
  • 改變原陣列
  let arr = [1,2,3]
  console.log(arr.shift()) // 1
  console.log(arr) // [2, 3]
複製程式碼

3. push()

arrayObject.push(newelement1,newelement2,....,newelementX)

  • 向陣列末尾新增一個或多個元素，並返回新長度
  • 改變原陣列
  let arr = [1,2,3]
  console.log(arr.push(1,2)) // 5
  console.log(arr) // [1, 2, 3, 1, 2]
複製程式碼

4. pop()

arrayObject.pop()

  • 刪除陣列最後一個元素，並返回刪除元素本身
  • 如果陣列為空，則不修改陣列，並返回undefined
  • 改變原素組
  let arr = [1,2,3]
  console.log(arr.pop()) // 3
  console.log(arr) // [1, 2]
  console.log([].pop()) // undefined
複製程式碼

5. concat()

arrayObject.concat(arrayX,arrayX,......,arrayX)

  • 合併兩個或多個陣列，返回合併後的陣列
  • 不改變原陣列
  let arr1 = [1,2,3], arr2 = [4,5,6], arr3 = [7]
  console.log(arr1.concat(arr2, arr3)) // [1, 2, 3, 4, 5, 6, 7]
  console.log(arr1) // [1, 2, 3]
複製程式碼

6. splice()

arrayObject.splice(index,howmany,item1,.....,itemX)

  • 刪除陣列指定位置長度的元素，或新增一個、多個元素，返回刪除元素
  • 新增元素可選
  • 改變原陣列
  let arr1 = [1,2,3]
  console.log(arr1.splice(1,2)) // [2, 3]
  console.log(arr1) // [1]
  console.log(arr1.splice(1,0,2,3)) // []
  console.log(arr1) // [1, 2, 3]
複製程式碼

7. slice()

arrayObject.slice(start,end)

  • 擷取陣列指定開始和結束下邊的元素，並返回結果元素陣列
  • end可選
  • 不改變原陣列
  let arr1 = [1,2,3]
  console.log(arr1.slice(1, 2)) // [2]
  console.log(arr1.slice(1)) // [2, 3]
  console.log(arr1) // [1, 2, 3]
複製程式碼

8. sort()

arrayObject.sort(sortby)

  • 對陣列進行排序，返回排序後的陣列
  • 改變原陣列
  let arr1 = [2,1,3]
  console.log(arr1.sort()) // [1, 2, 3]
  console.log(arr1) // [1, 2, 3]
複製程式碼

9. reverse()

arrayObject.reverse()

  • 反轉陣列，返回反轉後的陣列
  • 改變原陣列
  let arr1 = [1, 2, 3]
  console.log(arr1.reverse()) // [3, 2, 1]
  console.log(arr1) // [3, 2, 1]
複製程式碼

10. join()

arrayObject.join(separator)

  • 以指定字元分割陣列，返回分割後的字串
  • 若引數不填，則預設以','為分割符
  • 不改變原陣列
  let arr1 = [1,2,3]
  console.log(arr1.join()) // 1,2,3
  console.log(arr1.join('!')) // 1!2!3
  console.log(arr1) // [1, 2, 3]
複製程式碼

Array的遍歷方法

1. forEach()

array.forEach(function(currentValue, index, arr), thisValue)

  • 遍歷陣列每一個元素，並在回撥函式中處理
  • 不改變原陣列
  let arr = [1,2,3], newArr = []
  arr.forEach(item => newArr.push(++item))
  console.log(arr) // [1, 2, 3]
  console.log(newArr) // [2, 3, 4]
複製程式碼

2. map()

array.map(function(currentValue,index,arr), thisValue)

  • 遍歷陣列每一項，並返回操作後的陣列
  • 不改變原陣列
  let arr = [1,2,3], newArr = []
  newArr = arr.map(item => ++item)
  console.log(arr) // [1, 2, 3]
  console.log(newArr) // [2, 3, 4]
複製程式碼

3. filter()

array.filter(function(currentValue,index,arr), thisValue)

  • 遍歷陣列每一項，並在回撥中處理，返回符合條件的新陣列
  • 不改變原陣列
  let arr = [1,2,3], newArr = []
  newArr = arr.filter(item => item >=2)
  console.log(arr) // [1, 2, 3]
  console.log(newArr) // [2, 3]
複製程式碼

4. every()

array.every(function(currentValue,index,arr), thisValue)

  • 遍歷陣列每一項，通過回撥判斷是否符合條件
  • 若有一項不符合，則返回false，不繼續執行；若全部符合則返回true
  • 不改變原陣列
  let arr = [1,2,3], newArr = []
  let isTrue = arr.every(item => item > 0)
  console.log(arr) // [1, 2, 3]
  console.log(isTrue) // true
複製程式碼

如何判斷是否為Array

isArray()

  let arr = [1, 2, 3]
  Array.isArray(arr) // true
複製程式碼

instanceof

  • 判斷被檢測物件是非為建構函式的例項
  • 原理：左側被檢測物件的原型鏈上是否包含右側建構函式的prototype屬性
  let arr = [1, 2, 3]
  arr instanceof Array // true
複製程式碼

constructor

  • constructor 屬性返回物件的建構函式, 陣列物件的建構函式為Array
  let arr = [1, 2, 3]
  arr.constructor === Array // true
  arr.constructor // ƒ Array() { [native code] }
複製程式碼

不同物件的constructor

   function f () {}
   console.log([].constructor)    // ƒ Array() { [native code] }
   console.log({}.constructor)    // ƒ Object() { [native code] }
   console.log(f.constructor)     // ƒ Function() { [native code] }
   console.log((123).constructor) // ƒ Number() { [native code] }
   console.log('123'.constructor) // ƒ String() { [native code] }
   console.log(true.constructor)  // ƒ Boolean() { [native code] }
複製程式碼

相關文章