JavaScript基礎整理之數組(一)

原文發佈在：http://blog.xiaofeixu.cn/2017...

數組應該是平常開發中最多見的數據結構了，雖然常見，可是卻不必定能優雅地處理好，JavaScript中數組的處理方法不少，各個方法的參數、返回值、是否修改原數組等也容易記混。這些方法雖然都比較簡單，可是初學的時候沒怎麼重視，後來在實際的項目中卻發現，可否靈活地運用這些方法對開發進度仍是有很大的影響的，因此在此整理一下，溫故知新。

array.slice(a,b)

• 描述：slice 接受兩個參數：開始和結束的索引值，返回原數組的從a到b的一部分（包含a，不包含b），原數組不發生改變
• 原數組：不變
• 返回：原數組的從a到b的一部分（包含a，不包含b）
  能夠將slice用於數組的淺複製

let arr = [1,2,3,4,5];
let arr2 = arr.slice(1,3);
let arr1 = arr.slice();
arr1.push([6])
let arr3 = arr1.slice();
arr3[arr3.length-1].push(7)
console.log(arr)  //[ 1, 2, 3, 4, 5 ]
console.log(arr1) //[ 1, 2, 3, 4, 5, [ 6, 7 ] ]
console.log(arr2) //[ 2, 3 ]
console.log(arr3) ////[ 1, 2, 3, 4, 5, [ 6, 7 ] ]

array.splice(a,b,item1,item2…)

• 描述：slice 接受三個參數：開始的索引值、要刪除元素的個數、用於代替刪除元素的內容，返回被刪除的元素構成的數組，原數組
• 原數組：變
• 返回：被刪除元素構成的數組

let arr = [1,2,3,4,5]
let arr3 = arr.splice(1,2,'m','n','p')
console.log(arr);//[ 1, "m", "n", "p", 4, 5 ]
console.log(arr3);//[ 2, 3 ]

array.concat()

• 描述：concat 接受一個或多個參數，若參數爲數組，則將該數組與原數組合並，若不爲數組，則將該參數做爲原數組的一個元素
• 原數組：不變
• 返回：合併後的新數組

let arr = [ 1, "m", "n", "p", 4, 5 ]
let arr4 = arr.concat('abcd',[100,[101]]);
console.log(arr)//[ 1, "m", "n", "p", 4, 5 ]
console.log(arr4);// [ 1, "m", "n", "p", 4, 5, "abcd", 100, [101] ]

array.join()

• 描述：join 接受一個參數，做爲返回的字符串的分隔符，
• 原數組：不變
• 返回：以參數爲分隔符的字符串

  let arr = [ 1, "m", "n", "p", 4, 5 ]
  let str = arr.join('-')
  console.log(arr)//[ 1, "m", "n", "p", 4, 5 ]
  console.log(str)//1-m-n-p-4-5

array.reverse()

• 描述：無參數，將原數組的元素先後顛倒
• 原數組：變，順序顛倒
• 返回：顛倒位置後的原數組

  let arr = [ 1, "p", 4, 5, 4, 5 ]
  let arr6 = arr.reverse()
  console.log(arr) //[ 5, 4, 5, 4, "p", 1 ]
  console.log(arr6) //[ 5, 4, 5, 4, "p", 1 ]

array.toString()

• 描述：無參數，將原數組轉換成字符串，以 ‘,’ 分割。（不可指定分隔符，比array.join()的功能弱）
• 原數組：不變
• 返回：字符串

  let arr = [ 5, 4, 5, 4, "p", 1 ]
  let str1 = arr.toString()
  console.log(arr)
  console.log(str1)

array.push()/array.unshift()

• 描述：將參數做爲數組的元素，置於數組的尾部/頭部
• 原數組：變
• 返回：新數組的長度

  let arr = [ 1, "p", 4, 5, 4, 5, 6 ]
  let l = arr.push(8)
  console.log(l)// 8
  console.log(arr)// [ 1, "p", 4, 5, 4, 5, 6, 8 ]
  let l2 = arr.unshift(0)
  console.log(l2) //1
  console.log(arr) // [ 0, 1, "p", 4, 5, 4, 5, 6, 8 ]

array.pop()/array.shift()

• 描述：分別去除數組的最後一個/第一個元素
• 原數組：變
• 返回：被刪除的元素

let arr = [ 0, 1, "p", 4, 5, 4, 5, 6, 8 ]
let ele = arr.shift();
console.log(ele)//0
console.log(arr)//[ 1, "p", 4, 5, 4, 5, 6, 8 ]
let ele2 = arr.pop();
console.log(ele2)//8
console.log(arr)// [ 1, "p", 4, 5, 4, 5, 6 ]

array.copyWithin(target,start,end)——ES6新增

• 描述：接受三個參數，target爲目標位置的索引，start 爲待複製數據的起始索引，默認爲0，end爲待複製數據的結束索引（不包含），默認等於數組長度（最後一位元素的索引+1）
• 原數組：變，但不更改原數組的長度
• 返回：改變後的數組

  let arr = [ 1, "m", "n", "p", 4, 5 ]
  let arr5 = arr.copyWithin(1,3,6)
  console.log(arr) // [ 1, "p", 4, 5, 4, 5 ]
  console.log(arr5) // [ 1, "p", 4, 5, 4, 5 ]

這只是數組的一部分，還有數組迭代、查詢、淺複製、深複製等不少方法沒有說，下次再說吧。