小陈同学の前端笔记 | 关于数组一些常用方法的整理(一)

249 阅读5分钟

「这是我参与11月更文挑战的第4天,活动详情查看:2021最后一次更文挑战

数组是十分常用的一种数据结构,我打算整理一些常用的数组方法。本期介绍的是会改变原数组的方法。

改变原数组的方法

在对数组进行操作的时候,有一些方法会改变数组自身。

splice()

定义:splice()方法用于在数组中添加/删除项目,返回被删除的元素。

语法:Array.prototype.splice(index,howmany,item1,......,itemN)

参数:

  1. index(必选):规定了要删除/添加元素的索引位置。
  2. howmany(可选):要删除的元素数量。默认为数组长度,若设置为0,则不会删除,代表添加。
  3. items(可选):向数组中添加的新元素。

使用:

let arr = [1,2,3,4,5]

// 从数组中删除元素
let removed = arr.splice(0,2)
console.log('数组removed:',removed)                // [1,2]
console.log('操作后的arr:',arr)                    // [3,4,5]

// 从数组中添加元素
let newArr = arr.splice(1,0,'小陈同学吗','你好')
console.log('数组newArr:',newArr)                  // [] 因为没有元素被删除
console.log('操作后的arr:',arr)                    // [3, '小陈同学吗', '你好', 4, 5]

// 从数组中替换元素 (先删除再添加)
let replaceArr = arr.splice(2,1,'是小陆同学')
console.log('数组replaceArr',replaceArr)            // ['你好']
console.log('操作后的arr:',arr)                    // [3, '小陈同学吗', '是小陆同学', 4, 5]

sort()

定义:sort()方法用于对数组进行排序,并返回数组。默认排序顺序是将元素转换为字符串,然后比较它们的UTF-16码,升序。

语法:Array.prototype.sort(比较函数)

参数:

  1. 比较函数:接受两个参数,若第一个参数应该排在第二个参数前面,就返回负值;若相等,就返回0;然则返回正值。

使用:

let arr = [5,20,1,11,0,15]

// 默认情况
let sortedArr = arr.sort()
console.log('数组sortedArr:',sortedArr) // [0, 1, 11, 15, 20, 5]
console.log('操作后的arr:',arr)         // [0, 1, 11, 15, 20, 5] 显然不是我们想要的升序效果,去添加比较函数

// 添加比较函数
let arr1 = [5,20,1,11,0,15]
let upArr1 = arr.sort((a,b)=>a-b)
let downArr1 = arr.sort((a,b)=>b-a)
console.log('升序:',upArr1)            // [0, 1, 5, 11, 15, 20]
console.log('降序:',downArr1)          // [20, 15, 11, 5, 1, 0]

// 根据数组中对象的某个属性排序
let arr2 = [
    {name:'小陈同学吗',level:10},
    {name:'Alice',level:5},
    {name:'Bob',level:6},
    {name:'Cindy',level:0}
]
let objArr = arr2.sort((a,b)=>a.level-b.level)
console.log('根据level升序排序:',objArr)
// 0: {name: 'Cindy', level: 0}
// 1: {name: 'Alice', level: 5}
// 2: {name: 'Bob', level: 6}
// 3: {name: '小陈同学吗', level: 10} 

reverse()

定义:reverse()方法将数组元素反向排列。

语法:Array.prototype.reverse()

参数: 无。

使用:

let arr = [1,2,3,4,5]

let reverseArr = arr.reverse()
console.log('数组reverseArr:',reverseArr)   // [5,4,3,2,1]
console.log('操作后的arr:',arr)             // [5,4,3,2,1]

image.png

push()

定义:push()方法向数组的末尾添加一个或多个元素,并返回该数组的新长度。

语法:Array.prototype.push(item1,......,itemN)

参数:

  1. items: 向数组末尾添加的元素。

使用:

let arr = [1,2,3]

let len = arr.push(4)
console.log('len:',len)                   // 4
console.log('操作后的arr:',arr)           // [1,2,3,4]

let newLen = arr.push('小陈同学吗',1998,'04')  
console.log('newLen:',newLen)            // 7
console.log('操作后的arr:',arr)          // [1, 2, 3, 4, '小陈同学吗', 1998, '04']

pop()

定义:pop()从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

语法:Array.prototype.pop()

参数:无。

使用:

let arr = [1,2,3]

let item = arr.pop()
console.log('item',item)                    // 3
console.log('操作后的arr:',arr)            // [1,2]

console.log('空数组[]使用pop:',[].pop())   // undefined

shift()

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

语法:Array.prototype.shift()

参数:无。

使用:

let arr = [1,2,3]

let item = arr.shift()
console.log('item',item)                        // 1
console.log('操作后的arr:',arr)                // [2,3]

console.log('空数组[]使用shift:',[].shift())   // undefined

unshift()

定义:unshift()在数组的开头添加一个或多个元素,并返回该数组的新长度。

语法:Array.prototype.unshift(item1,......,itemN)

参数:

  1. items: 在数组开头添加的元素。

使用:

let arr = [1,2,3]

let len = arr.unshift(4)
console.log('len:',len)                   // 4
console.log('操作后的arr:',arr)           // [4,1,2,3]

let newLen = arr.unshift('小陈同学吗',1998,'04')  
console.log('newLen:',newLen)            // 7
console.log('操作后的arr:',arr)          // ['小陈同学吗', 1998, '04', 4, 1, 2, 3]

image.png

copyWithin()

定义:ES6新增的方法。copyWithin()方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

语法:Array.prototype.copyWithin(target,start,end)

参数:

  1. target(必选):从该位置 开始替换
  2. start(可选):从该位置开始复制,默认为0。
  3. end(可选):到该位置前停止复制数据,默认为数组长度。 [start,end)

使用:

let arr = [1,2,3,4,5]

// 从索引为0的位置开始替换,复制的内容索引为[2,4),即索引位置为2和3的元素=>3,4
let copyArr = arr.copyWithin(0,2,4)
console.log('数组copyArr:',copyArr)         // [3, 4, 3, 4, 5]

// 从索引为0的位置开始替换,复制的内容默认为全部,因此元素不变
let copyArr1 = arr.copyWithin(0)
console.log('数组copyArr1:',copyArr1)      // [3, 4, 3, 4, 5]

// 从索引为0的位置开始替换,复制的内容索引start为1,即索引位置从1到数组长度-1
let copyArr2 = arr.copyWithin(0,1)
console.log('数组copyArr2:',copyArr2)      // [4, 3, 4, 5, 5]

fill()

定义:ES6新增的方法。fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素,并返回该数组。不包括终止索引。

语法:Array.prototype.fill(value,start,end)

参数:

  1. value(必选):用来填充数组的元素。
  2. start(可选):从开位置开始填充,默认为0。
  3. end(可选):到该位置前停止填充,默认为数组长度。 [start,end)

使用:

let arr = [1,2,3,4,5]

// 填充元素为'小陈同学吗',开始填充的索引为1,结束的索引为3,即索引位置[1,3)
let fillArr = arr.fill("小陈同学吗",1,3)
console.log('数组fillArr:',fillArr)      // [1, '小陈同学吗', '小陈同学吗', 4, 5]

// 填充元素为0,默认全部填充
let fillArr1 = arr.fill(0)
console.log('数组fillArr1:',fillArr1)    // [0, 0, 0, 0, 0]

// 填充元素为2,默认从索引为3的位置开始填充
let fillArr2 = arr.fill(2,3)
console.log('数组fillArr2',fillArr2)     // [0, 0, 0, 2, 2]

结语

本期介绍的是会对原数组产生改变的一些方法,下期我们将介绍其他的数组方法。

如有纰漏,欢迎指出!