提示
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"]