操作原数组的方法

方法列表

• fill
• pop
• push
• reverse
• shift
• sort
• splice
• unshift

fill

fill 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

参数说明

fill (
  value: any,
  start: number, // [
  end:   number, // )
) return array // 修改后的数组

示例

[1, 2, 3].fill(4)               // [4, 4, 4]
[1, 2, 3].fill(4, 1)            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2)         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1)         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3)         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2)       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN)     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5)         // [1, 2, 3]
Array(3).fill(4)                // [4, 4, 4]
[].fill.call({ length: 3 }, 4)  // {0: 4, 1: 4, 2: 4, length: 3}
var arr = Array(3).fill({}) // [{}, {}, {}]
// 需要注意如果 fill 的参数为引用类型，会导致都执行同一个引用类型
// 如 arr[0] === arr[1] 为 true
arr[0].hi = "hi" // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

pop

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

参数说明

pop () return 被删除的元素

示例

const myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
const popped = myFish.pop()
console.log(myFish) // ['angel', 'clown', 'mandarin']
console.log(popped) // 'sturgeon'

push

push 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

参数说明

push (...args: any) return number 新被添加元素后数组的长度

示例

var names = ['张三', '李四']
names.push('王五')
console.log(names) // ['张三', '李四', '王五']
names.push(['赵六'])
console.log(names) // ['张三', '李四', '王五', ['赵六']]
names.push()
console.log(names) // ['张三', '李四', '王五', ['赵六']]

巧用

合并两个数组

var vegetables = ['parsnip', 'potato']
var moreVegs = ['celery', 'beetroot']
// 将第二个数组融合进第一个数组
// 相当于 vegetables.push('celery', 'beetroot')
Array.prototype.push.apply(vegetables, moreVegs)
console.log(vegetables)
// ['parsnip', 'potato', 'celery', 'beetroot']

像数组一样使用对象

var obj = {
  length: 0,
  addItem: function addElem(elem) {
    [].push.call(this, elem)
  }
}
obj.addItem({})
obj.addItem({})
console.log(obj.length) // 2
console.log(obj)
/**
 * {
 *    0: {}
 *    1: {}
 *    addItem: ƒ addElem(elem)
 *    length: 2
 * }
 */

reverse

reverse 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

参数

reverse () return 被反转之后的数组

示例

const array = ['one', 'two', 'three']
const reversed = array.reverse()
console.log(array)         // ["one", "two", "three"]
console.log(reversed)    // ["three", "two", "one"]
console.log(array)         // ["three", "two", "one"]

shift

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

参数说明

shift () return 从数组中删除的元素 如果数组为空则返回 undefined

示例

let myFish = ['angel', 'clown', 'mandarin', 'surgeon']
var shifted = myFish.shift()
console.log(myFish)   // ['clown', 'mandarin', 'surgeon']
console.log(shifted)  // angel

sort

详情见数组的遍历方法 sort

splice

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

参数说明

splice (
  start: number,        // [
  deleteCount: number,
  ...args: any
) return array // 由被删除的元素组成的一个数组，如果没有删除元素，则返回空数组。

示例

// 从索引 2 的位置开始删除 0 个元素，插入“drum”
var myFish = ["angel", "clown", "mandarin", "sturgeon"]
var removed = myFish.splice(2, 0, "drum")
console.log(myFish)   // ["angel", "clown", "drum", "mandarin", "sturgeon"]
console.log(removed)  // [] 没有元素被删除
// 从索引 2 的位置开始删除 0 个元素，插入“drum” 和 "guitar"
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
var removed = myFish.splice(2, 0, 'drum', 'guitar')
console.log(myFish)   // ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
console.log(removed)  // [] 
// 从索引 3 的位置开始删除 1 个元素
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']
var removed = myFish.splice(3, 1)
console.log(myFish)   // ["angel", "clown", "drum", "sturgeon"]
console.log(removed)  // ["mandarin"] 被删除之后的元素形成一个数组
// 从索引 2 的位置开始删除 1 个元素，插入“trumpet”
var myFish = ['angel', 'clown', 'drum', 'sturgeon']
var removed = myFish.splice(2, 1, "trumpet")
console.log(myFish)   // ["angel", "clown", "trumpet", "sturgeon"]
console.log(removed)  // ["drum"] 
// 从索引 0 的位置开始删除 2 个元素，插入"parrot"、"anemone"和"blue"
var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue')
console.log(myFish)   // ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
console.log(removed)  // ["angel", "clown"] 
// 从索引 2 的位置开始删除 2 个元素
var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']
var removed = myFish.splice(myFish.length - 3, 2)
console.log(myFish)   // ["parrot", "anemone", "sturgeon"]
console.log(removed)  // ["blue", "trumpet"]
// 从索引 -2 的位置开始删除 1 个元素
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
var removed = myFish.splice(-2, 1)
console.log(myFish)   // ["angel", "clown", "sturgeon"]
console.log(removed)  // ["mandarin"]
// 从索引 2 的位置开始删除所有元素
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
var removed = myFish.splice(2)
console.log(myFish)   // ["angel", "clown"]
console.log(removed)  // ["mandarin", "sturgeon"]

unshift

unshift 方法将一个或多个元素添加到数组的开头，修改原有数组，并返回该数组的新长度。

参数说明

arr.unshift (
    ...args
) return number // 修改后数组的长度

示例

var arr = [4, 5, 6]
arr.unshift(1, 2, 3)
console.log(arr) // [1, 2, 3, 4, 5, 6]
var arr = [4, 5, 6]
arr.unshift(1)
arr.unshift(2)
arr.unshift(3)
console.log(arr) // [3, 2, 1, 4, 5, 6]
var arr = [1, 2]
arr.unshift(0)               // [0, 1, 2]
arr.unshift(-2, -1)          // [-2, -1, 0, 1, 2]
arr.unshift([-4, -3])        // [[-4, -3], -2, -1, 0, 1, 2]
arr.unshift([-7, -6], [-5])  // [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ]