數組的方法 - 刪除數組中的某個元素

1. splice 方法

數組的splice方法很強大，可以進行 刪除、增加、替換 操作，同時會改變原數組，返回刪除/替換掉的元素組成的新數組

• 刪除

  /* 刪除下標為4的元素 */
  const arr = [1,2,3,4,5,6,7,8,9,10]
  const arrNew = arr.splice(4,1)
  console.log(arr, arrNew) // [1,2,3,4,6,7,8,9,10]     [5]
  
  /* 刪除下標從4到6的元素 */
  const arr2 = [1,2,3,4,5,6,7,8,9,10]
  const arrNew2 = arr2.splice(4,3)
  console.log(arr2, arrNew2) // [1,2,3,4,8,9,10]     [5,6,7]
  

• 增加

  /* 下標為4處 增加一個元素 'a' */
  const arr = [1,2,3,4,5,6,7,8,9,10]
  const arrNew = arr.splice(4,0,'a')
  console.log(arr, arrNew) // [1,2,3,4,'a',5,6,7,8,9,10]    []
  
  /* 下標為4處，增加 'b','c', 'd', 'e' 這4個元素 */
  const arr2 = [1,2,3,4,5,6,7,8,9,10]
  const arrNew2 = arr2.splice(4,0,'b','c','d','e')
  const arrNew3 = arr2.splice(4,0,...['b','c','d','e'])
  console.log(arr2, arrNew2) // [1,2,3,4,'b','c','d','e',5,6,7,8,9,10]     []
  

• 替換

  /* 下標為4處元素，替換為 'a' */
  const arr = [1,2,3,4,5,6,7,8,9,10]
  const arrNew = arr.splice(4,1,'a')
  console.log(arr, arrNew) // [1,2,3,4,'a',6,7,8,9,10]    [5]
  
  /* 下標為4開始的元素，一次替換為 'b','c', 'd', 'e' 這4個元素 */
  const arr2 = [1,2,3,4,5,6,7,8,9,10]
  const arrNew2 = arr2.splice(4,4,'b','c','d','e')
  const arrNew3 = arr2.splice(4,4,...['b','c','d','e'])
  console.log(arr2, arrNew2) // [1,2,3,4,'b','c','d','e',9,10]     [5，6，7，8]
  

2. 刪除下標為n的元素

const arr = [1,2,3,4,5,6,7,8,9,10]
const n = 4
const arrNew = arr.splice(4,1)
console.log(arr, arrNew)

3. 刪除符合某些條件的元素

const arr = [
  { id: 1, cont: '1'},
  { id: 2, cont: '2'},
  { id: 3, cont: '3'},
  { id: 4, cont: '4'},
  { id: 5, cont: '5'}
]

刪除id為3的元素

• filter
• findIdx + splice splice:會改變原數組
• reduce

const arrNew = arr.filter(item => item.id !== 3)

const idx = arr.findIndex(item => item.id === 3)
arr.splice(idx, 1)
console.log(arr)

const arrNew2 = arr.reduce((total, current) => {
  current.id !== 3 && total.push(current)
	return total
}, [])