提示

  push()、unshift()、pop()、shift()、splice() 方法都非浅拷贝操作,会直接修改原数组。

# 一、添加元素

提示

  这里的两种添加元素方法,返回的都是新数组的长度

# 1、push() 方法

描述:

  将一个或多个元素添加到数组的末尾,并返回该数组的新长度

  • 添加元素到数组
let sports = ['soccer', 'baseball']

console.log(sports.push()) //  2  —— 返回的是length

// 添加一个
sports.push('sing')

// 添加多个
let data = ['football', 'swimming']
sports.push(...data)

console.log(sports) // ['soccer', 'baseball', 'sing', 'football', 'swimming']

# 2、unshift() 方法

描述:

  将一个或多个元素添加到数组的开头,并返回该数组的新长度

let arr = [4, 5, 6]

const total = arr.unshift(1, 2, 3)
console.log(arr)
// [1, 2, 3, 4, 5, 6]
console.log(total) // 6

arr = [4, 5, 6] // 重置数组

arr.unshift(1)
arr.unshift(2)
arr.unshift(3)

console.log(arr)
// [3, 2, 1, 4, 5, 6]

# 二、删除元素

提示

  这里的两种删除元素方法,返回的都是被删除的元素

# 1、pop()

描述:

  从数组中删除最后一个元素,并返回该元素的值。此方法会更改数组的长度。

const myFish = ['angel', 'clown', 'mandarin', 'sturgeon']

const popped = myFish.pop()

console.log(myFish) // ['angel', 'clown', 'mandarin']

console.log(popped) // 'sturgeon'

# 2、shift()

描述:

  从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

let myFish = ['angel', 'clown', 'mandarin', 'surgeon']

console.log('调用 shift 之前:' + myFish)
// "调用 shift 之前:angel,clown,mandarin,surgeon"

var shifted = myFish.shift()

console.log('调用 shift 之后:' + myFish)
// "调用 shift 之后:clown,mandarin,surgeon"

console.log('被删除的元素:' + shifted)
// "被删除的元素:angel"

# 三、splice() 方法

  在实际开发场景中,可以想象一下,当我们在对数据进行增删改查 mock 模拟时,经常会用到 splice() 方法。

提示 ✍

  这里的 splice() 方法都返回的是操作后的原数组

  splice()相较与前面的方法比较,它可以实现更复杂的操作,比如:

  • 从任意位置插入元素(splice(n, 0, 'element'))
  • 从任意位置删除元素(splice(n, m))
  • 从任意位置修改元素(splice(n, 1, 'element'))
arr.splice(start, deleteCount, addItem1, addItem2, addItemN)

# 1、添加

描述:

  通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

  • 在指定位置插入元素
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
var removed = myFish.splice(2, 0, 'drum')
// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]

var removed = myFish.splice(2, 0, 'drum', 'guitar')
// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]

# 2、删除 ✨

描述:

  通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

  • 在删除指定位置的元素
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']
var removed = myFish.splice(3, 1)

// 运算后的 myFish: ["angel", "clown", "drum", "sturgeon"]
// 被删除的元素:["mandarin"]
  • 删除后面所有
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
var removed = myFish.splice(2)

// 运算后的 myFish: ["angel", "clown"]
// 被删除的元素:["mandarin", "sturgeon"]

# 3、修改 ✨

描述:

  通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

  • 修改指定位置的元素
var myFish = ['angel', 'clown', 'drum', 'sturgeon']
var removed = myFish.splice(2, 1, 'trumpet')

// 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"]
// 被删除的元素:["drum"]
更新于 : 7/8/2024, 10:21:14 AM