JS陣列API總結

js中陣列API詳解

陣列在平時的開發過程使用頻率非常高，熟練掌握陣列的各種api用法很有必要，在此對資料的所有api做一次詳細介紹

陣列提供的api主要分為 建構函式自身方法，改變自身、不改變自身、遍歷陣列四類

ES2019新增方法

• flat
  • 作用：陣列降維,返回一個新陣列，不改變原來陣列
  • 接受引數：Number型別，預設為1，根據引數來降低維度層次

    const arr = [2,3,[4],[5,[6,[7]]]]
    arr.flat(1)   //=>[2,3,4,5,[6,[7]]]
    arr.flat(2)   // => [2,3,4,5,6,[7]]
    arr.flat(Infinity)   //=>[2,3,4,5,6,7]
    console.log(arr)  // [2,3,[4],[5,[6,[7]]]]
  複製程式碼

• flatMap
  • 作用：對資料進行統一變化處理，返回一個新陣列,不改變原陣列
  • 接受引數：func

    const arr = [1,2,3]
    //對每一個元素做處理
    arr.flatMap(x => x*2)  // [2,4,6]
    //對一個元素多處理，返回多個對應的值，但是返回必須是陣列，裡面的型別不限制
    arr.flatMap(x => [x,x*2]   // [1,2,2,4,3,6]
    arr.flatMap(x=>[{test:x}]  // [{test:1},{test:2},{test;3}]
    //如果返回{}會全部返回undefined
    arr.flatMap(x => {x:x})   // [undefined,undefined,undefined]
  複製程式碼

Array建構函式的方法

• of

  Array.of():將引數依次轉化為陣列中的一項，然後返回這個新陣列,功能和Array()基本一致（傳單個數字除外）

    Array.of(12,'dere',18) // => [12,'derek',18]
    Array.of(8.0) // => [8]
    Array(8.0)   // => [undefined * 8]
  複製程式碼

• from

  Array.from():將一個類陣列物件轉化為一個陣列，返回新陣列，不改變原物件

  • 語法：Array.from(obj,fn,thisArg)
  • obj: 需要轉為陣列的物件
  • fn: 對物件進行加工的方法
  • thisArg: this作用域
  • 注意: 物件的key只能是數字，且不能超過length的長度，先返回滿足條件的key值

    // 物件的key是數字，正常轉化
    let obj = {0: 'derek', 1: 18, 2: 'M', length: 3 }
    let arr = Array.from(obj,(val,index)=>{
      val
      index
      return val
    },obj)
    arr // => ['derek',18,'M']
  
    // 物件的key值不是數字的返回undefined
    let obj = {name: 'derek', 1: 18, 0: 'M', length: 3 }
    let arr = Array.from(obj,(val,index)=>{
      val
      index
      return val
    },obj)
    arr // => ['M',18,undefined]
  複製程式碼

• isArray

  Array.isArray(): 判斷一個變數是否是一個陣列 語法：Array.isArray(arr)

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

改變自身的api

• push

  push(): 在目標陣列的尾部壓入一個元素，並且返回這個元素最新的length

    let arr = ['a','b','c']
    let len = arr.push('d')
    console.log(arr,len) // => ['a','b','c','d']  4
  複製程式碼

• unshift

  unshift(): 在目標陣列的頂部壓入一個元素，並且返回這個元素的length

    let arr = ['a','b','c']
    let len = arr.unshift('d')
    console.log(arr,len) // => ['d','a','b','c']  4
  複製程式碼

• pop

  pop(): 在目標陣列的尾部壓出一個元素，並且返回這個被壓出元素

    let arr = ['a','b','c','d']
    let a = arr.pop()
    console.log(arr,a) // => ['a','b','c']  'd'
  複製程式碼

• shift

  shift(): 在目標陣列的頂部壓出一個元素，並且返回這個被壓出元素

    let arr = ['a','b','c','d']
    let a = arr.shift()
    console.log(arr,a) // => ['b','c','d']  'a'
  複製程式碼

• reverse

  reverse(): 將陣列順序進行顛倒，第一個成為最後一個，最後一個成為第一個，返回當前陣列

    let arr = ['a','b','c','d']
    let arr2 = arr.reverse()
    console.log(arr) // => ['d','c','b','a']
    console.log(arr2) // => ['d','c','b','a']
    console.log(arr2===arr) // => true
  複製程式碼

• sort

  sort(): 將陣列順序進行快速排序，返回當前陣列

  • a:預設排序：不傳引數（arr.sort()），陣列元素將按照各自轉換為字串的Unicode(萬國碼)位點順序排序
  • b:自定義排序：傳入自己想要的排序方法(arr.sort((a,b) => a-b)),會按照順“從小到大”的順序排序

    // 對數字陣列進行排序
    let aaa = [3,4,52,64,234,6,8]
    let arr = aaa.sort()
    let arr1 = aaa.sort((a,b)=> a-b)
    console.log(arr) // => [234,3,4,52,6,64,8]
    console.log(arr1) // => [3,4,6,8,52,64,234]
    -------------------------------------
    // 對元素是物件的陣列進行快速排序
    let arr = [{name: 'derek',age: 18 },{ name: 'tom', age: 28 },{ name: 'lily', age: 18 },{ name:  'lucy', age: 22 }]
    let aa = arr.sort((a,b)=> a.age-b.age)
    console.log(aa) // => [{name:'derek',age:18},{ name: 'lily', age: 18 },{ name:  'lucy', age: 22 },{ name: 'tom', age: 28 }]
  複製程式碼

  注意：

  • 使用sort()進行陣列排序時，陣列元素少於10個時，用的是插入排序法，排序穩定
  • 陣列元素大於10個時，用的是快速排序，排序不穩定，排序可能會出錯
  • 解決方案： array.sort((a,b)=> a - b || array.indexof(a)-array.indexof(b))

• splice

  splice(): 可以對陣列進行插入，刪除，替換的操作，返回一個包含刪除的元素的陣列 語法：arr.splice(start,count,item1,item2) start: 開始刪除的位置，從0開始，如果大於陣列的長度則為arr.length count: 刪除元素的數量，為0時，如果存在第三個元素，就是陣列插入元素 item1、item2:往陣列中新增的元素

    //刪除元素
    let arr = ['tom','derek','lily','lucy']
    let a = arr.splice(0,2) 
    console.log(arr)  // => ['lily','lucy']
    console.log(a)  // => ['tom','derek']
    //替換元素
    let arr = ['tom','derek','lily','lucy']
    let b = arr.splice(1,2,'david')
    console.log(arr)  //=> ['david','lily','lucy']
    console.log(b)   // => ['tom','derek']
    //插入元素
    let arr = ['tom','derek','lily','lucy']
    let c = arr.splice(2,0,'nina')
    console.log(arr)  // => ['tom','derek','nina','lily','lucy']
    console.log(c)   // => []
  複製程式碼

  注意：當刪除開始資料大於陣列長度時，預設為陣列尾部壓入元素

    let arr = ['tom','derek','lily','lucy']
    let b = arr.splice(5,2,'david')
    console.log(arr)  //=> ['tom','derek','lily','lucy','david']
    console.log(b)   // => []
  複製程式碼

• copyWithin

  copyWithin(): 陣列內的元素替換，就是替換元素和被替換元素都時陣列內的元素,返回改變後的陣列

  • 語法： array.copywithin(target,start,end)
  • target: 被替換元素的開始下標
  • start：替換元素的開始下標,可以為負數
  • end：替換元素的結束下標，不填預設為array.length，可以為負數

    let arr = [1,2,3,4,5]
    let result = arr.copyWithin(0,2,3)
    console.log(result === arr,arr)  // => true  [3,2,3,4,5]
  
    let arr = [1,2,3,4,5]
    arr.copyWithin(1,3)
    console.log(arr)  // =>[1,4,5,4,5]
  
    let arr = [1,2,3,4,5]
    arr.copyWithin(1,-2,-1)
    console.log(arr)  // =>[1,4,3,4,5]
  複製程式碼

• fill

  fill(): 用於對陣列中的指定位置區間的元素替換為指定的值,返回改變後的原陣列

  • 語法：array.fill(val,start,end)
  • val: 指定替換的值
  • start: 被替換的開始下標，可以為負數
  • end: 被替換的結束下標，可以為負數，不填為陣列長度

    let arr = [1,2,3,4,5]
    const a = arr.fill(6,1,3)
    console.log(a===arr,arr) // => true [1,6,6,4,5]
  
    let arr = [1,2,3,4,5]
    const a = arr.fill(6,-3,-1)
    console.log(arr) // =>  [1,2,6,6,5]
  複製程式碼

不改變自身的api

• concat

  concat(): 將傳入的陣列或者元素合併，組成一個新陣列返回

  • 語法：arr.concat(val1,val2...)
  • 注意：引數可以是陣列時，只能降一個緯度合併

    let arr = [1,2,3]
    let aaa = arr.concat(1,2,[3,4,5],[6])
    console.log(aaa,arr) // => [1,2,3,4,5,6,7] [1,2,3]
  
    let bbb =arr.concat(1,[2,3,[4,5,6]])
    console.log(bbb)  // => [1,2,3,[4,5,6]]
  複製程式碼

• join

  join(): 將陣列中的元素以自定義的一個連結符拼接為一個字串，並返回

  • 語法：array.join(val)
  • val: 元素之間的連結符，預設為','

    let arr = [1,2,3,4]
    arr.join()  // => 1,2,3,4
    arr.join('-')  // => 1-2-3-4
  複製程式碼

• slice

  slice(): 將陣列中的部分資料複製到一個新陣列中，並返回這個陣列

  • 語法： array.slice(start,end)
  • start: 複製陣列的開始下標,可以為負數（-2 => array.length-2
  • end: 複製陣列的結束下標，不包含該元素，不傳預設為到最後一個元素
  • 注意：不傳任何引數是，可以做淺拷貝slice()

    let arr = [1,2,3,4,5,6]
    arr.slice(1,4) // => [2,3,4]
    arr.slice(2) // => [3,4,5,6]
    arr.slice(-3,5) // => [4,5,6]
  複製程式碼

• toString

  toString(): 返回陣列的字串形式，等效於join（）

  • 語法：array.toString()
  • 注意：陣列和字串元素進行+拼接時，會自動呼叫toString方法

    let array = ['a','b','c','d']
    array.toString()  // => a,b,c,d
    array+'e' // => a,b,c,de
  複製程式碼

• toLocalString

  toLocalString(): 類似toString()的變型，該字串由陣列中的每個元素的 toLocaleString() 返回值經呼叫 join() 方法連線（由逗號隔開）組成

  • 語法：array.toLocalString()
  • 注意：陣列中的各個元素將呼叫各自的toLocalString方法
    • Object：Object.prototype.toLocaleString()
    • Number：Number.prototype.toLocaleString()
    • Date：Date.prototype.toLocaleString()

    let arr = [{name: 'derek'},22,'M',new Date()]
    arr.toLocalString() // => '[object,object],22,M,2019/3/5 1:06:23PM'
  複製程式碼

• indexOf

  indexOf(): 用於查詢陣列中元素出現的第一次索引位置，並返回，沒有則返回-1

  • 語法： array.indexOf(el,start)
  • el: 查詢的目標元素
  • start: 開始查詢的下標位置
  • 注意：
    • start不傳，預設為0
    • start > array.length,則返回-1
    • start < 0 ,從array.length + start 的位置開始
    • start + array.length < 0,會查到整個陣列

    let arr = [1,3,4,5,7,9,0,7,45,6,8]
    let a =arr.indexOf(1) // => 0
    let b = arr.indexOf(1,3) // => -1
    let c = arr.indexOf(7,-5) // => 7
    let d = arr.indexOf(7, -10) // => 4
  複製程式碼

• lastIndexOf

  lastIndexOf(): 元素在陣列中最後出現的下標，沒有則返回-1

  • 語法： array.lastIndexOf(el,start)
  • el: 查詢的目標元素
  • start: 開始查詢的下標位置
  • 例項: 參考indexOf

• includes

  includes(): 判斷陣列中是否存在某個元素，存在返回true，不存在則返回false

  • 語法： array.includes(el,start)
  • el: 要查詢的目標元素
  • start: 開始查詢的下標，預設為0

    var array = [1, 2, NaN];
    array.includes(1) // true
    array.includes(NaN) // true
    array.includes(2,-4) // true
  複製程式碼

用於陣列遍歷的api

• forEach

  forEach(): 指定陣列中的每個元素都執行一次傳入的函式，返回undefinded

  • 語法： arr.forEach(fn,thisArg)
  • fn: 每個元素需要執行的方法，接受三個引數 fn(el,index,array)
  • el: 當前處理的元素
  • index: 正在處理元素的下標
  • array: 陣列本身，一般不寫
  • thisArg: fn函式內的this物件
  • 注意： 將為陣列中每一項執行一次 fn 函式，那些已刪除，新增或者從未賦值的項將被跳過（但不包括值為 undefined 的項）

    let arr = [1,2,3,4,5]
    let a = arr.forEach((el,index)=> {
      arr[index] = el * index
    })
    console.log(a)  // => undefined
    console.log(arr) // => [0,2,6,12,20]
  複製程式碼

• map

  map(): 使用傳入的函式處理陣列中的每個函式，並且將每個返回值組成新陣列並返回

  • 語法: arr.map(fn,thisArg)
  • fn: 每個陣列元素執行的方法
  • el: 當前處理的元素
  • index: 正在處理元素的下標
  • array: 陣列本身，一般不寫
  • thisArg: fn函式內的thisArg，一般不傳

    let arr = [1,2,3,4]
    let result = arr.map((item,index) => item * index )
    console.log(result)  // => [0,2,6,12]
    console.log(arr)  // => [1,2,3,4]
  複製程式碼

• filter

  filter(): 對陣列中的每個元素呼叫傳入的函式，將滿足條件的元素組成一個新陣列並返回

  • 語法: arr.filter(fn)
  • fn: 判斷元素是否滿足目標元素的條件函式

    let arr = [1,2,3,4,5,6,7]
    arr.filter(item=>item> 3) //=> [4,5,6,7]
    arr.filter(item=>item>8)  // => []
    arr.filter(item => item % 2 === 0) // => [2,4,6,8]
  複製程式碼

• reduce

  reduce(): 方法接收一個方法作為累加器，陣列中的每個值(從左至右) 開始合併，最終為一個值

  • 語法: arr.reduce(fn,initVal)
  • fn: 表示在陣列中每個元素執行的函式，接收4個引數
    • previousValue 上一次呼叫回撥返回的值，或者是提供的初始值
    • value 陣列中當前被處理元素的值
    • index 當前元素在陣列中的索引
    • array 陣列自身
    • initVal: 累加初始值
    • 注意: 當 fn 第一次執行時
      • 如果 initialValue 存在，那麼第一個 previousValue = initialValue， item = 陣列中的第一個值；
      • 如果 initialValue 不存在，那麼 previousVaule = 陣列中的第一個值，item =陣列中的第二個值。此時如果陣列為空，那麼將丟擲 TypeError。
      • 如果陣列僅有一個元素， 但陣列為空，那麼fn不會被執行，陣列的唯一值將被返回

    //用於求和
    let arr = [1,2,3,4,5]
    arr.reduce((prev,value)=>value * prev,0) // => 120
    //用於其他應用
    let arr = [1,2,3,4,5]
    let result = arr.reduce = ((prev,value,index) => {
      value > 2 ? prev.push(value)
      return prev
    },[])
    console.log(result) // => [3,4,5]
  複製程式碼

• reduceRight

  reduceRight():方法接收一個方法作為累加器，陣列中的每個值(從右至左) 開始合併，最終為一個值

  • 語法: arr.reduce(fn,initVal)
  • fn: 表示在陣列中每個元素執行的函式，接收4個引數
  • 具體用法參考上述的reduce函式
• some

  some(): 對比陣列中的所有元素，只要有滿足條件的就返回true，並結束迴圈，全部不滿足就返回false

  • 語法： arr.some(fn)
  • fn: 每個元素執行的方法

    let arr = [1,2,3,4,5,6]
    arr.some(item => item = 3) // => true
    arr.some(item => item > 8)  // => false
  複製程式碼

• every

  every(): 對比陣列中的所有元素，全部滿足條件則返回true，只要有一個不滿足就返回false

  • 語法：arr.every(fn)
  • fn: 每個元素執行的方法

    let arr =[1,2,3,4,5]
    arr.every(item => item > 0) // => true
    arr.every(item => item > 2)  // => false
  複製程式碼

• find

  find(): 返回陣列中第一個滿足條件的元素（如果有的話）， 如果沒有，則返回undefined

  • 語法: array.find(fn,thisArg)
  • fn: 查詢條件函式
  • thisArg: fn函式內部執行的this物件，一般不傳

    let arr = [1,2,3,4,5,6]
    arr.find(item => item>3) // => 4
    arr.find(item => item < 1) // => undefined
  複製程式碼

• findIndex

  findIndex(): 返回陣列中第一個滿足條件的元素的索引（如果有的話）， 如果沒有，則返回-1

  • 語法: array.findIndex(fn,thisArg)
  • fn: 條件函式
  • thisArg: fn函式內部執行的this物件，一般不傳

    let arr = [1,2,3,4,5]
    arr.findIndex(item => item > 3) // => 3
    arr.findIndex(item => item < 0) // => -1
  複製程式碼

• keys

  keys(): 返回陣列索引的迭代器

  • 語法: array.keys()

    let arr = ['a','b','c']
    let aa = arr.keys()
    console.log(aa.next())  // => Object {value: 0, done: false}
    console.log(aa.next())  // => Object {value: 1, done: false}
    console.log(aa.next())  // => Object {value: 2, done: false}
    console.log(aa.next())  // => Object {value: undefined, done: true}
    // 注意：用於物件的keys
    let obj = {name: 'derek',age:18}
    Object.keys(obj)  // => ['name','age']
  複製程式碼

• values

  values(): 返回陣列值的迭代器

  • 語法: array.values()

    let arr = ['a','b','c']
    let aa = arr.values()
    console.log(aa.next())  // => Object {value: 'a', done: false}
    console.log(aa.next())  // => Object {value: 'b', done: false}
    console.log(aa.next())  // => Object {value: 'c', done: false}
    console.log(aa.next())  // => Object {value: undefined, done: true}
    // 注意：用於物件的values
    let obj = {name: 'derek',age:18}
    Object.values(obj)  // => ['derek',18]
  複製程式碼

• entries

  entries(): 返回一個陣列迭代器物件，該物件包含陣列中每個索引的鍵值對

  • 語法: array.entries()

    let arr = ['derek','tom']
    let aa = arr.entries()
    console.log(aa.next())  // => {value:[0:'derek],done: false}
    console.log(aa.next())  // => {value:[1:'tom],done: false}
    console.log(aa.next())  // => {value:undefined,done: true}
    // 物件中用entries
    let obj = {name: 'derek',age:18}
    console.log(Object.entries(obj)) // => [[name:'derek'],[age:18]]
  複製程式碼