公告

QQ --- 微信

欢迎大家加我一起交流

前端成长之路

Appearance

数组常用的方法 ​

Dylan 2023-08-27数组 3069 个字 12 分钟

一、增删改 ​

1. push ​

  • 作用：向数组的末尾追加元素
  • 参数：追加的项（可以是多个任意的类型）
  • 返回值：新增后数组的长度（数字）
  • 是否改变原数组：改变

使用方法：arr.push(追加的项)

JavaScript
let array=[1,2,3]
let res=array.push(4,5);
console.log(res)//5
console.log(arr)//[1,2,3,4,5]

2. unshift ​

  • 作用：向数组的开头增加元素
  • 参数：追加的项（可以是多个任意的类型）
  • 返回值：新增后数组的程度（数组）
  • 是否改变数组：改变

使用方法 arr.unshift(追加的项)

JavaScript
const array = [1, 2, 3]
const res = array.unshift(0, -1)
console.log(array) // [ 0, -1, 1, 2, 3 ]
console.log(res) // 5

3. shift ​

  • 作用：删除数组的开头一项
  • 参数：无
  • 返回值：删除的那一项
  • 是否改变数组：改变

使用方法：array.shift()

JavaScript
const array = [1, 2, 3]
const res = array.shift(0, -1)// 传入参数也无效
console.log(array) // [ 2, 3 ]
console.log(res) // 1

4. pop ​

  • 作用：删除数组的最后一项
  • 参数：无
  • 返回值：删除的那一项
  • 是否改变数组：改变

使用方法：array.pop()

JavaScript
const array = [1, 2, 3]
const res = array.pop()
console.log(array) // [ 1, 2 ]
console.log(res) // 3

5. splice ​

  • 作用：实现数组的增加、删除、修改
  • 参数：start,deleteCount,items
  • 返回值：修改后的新数组
  • 是否改变原数组：改变

使用方法：array.splice (start, deleteCount, items)

start (必填)：开始的索引位置

负索引从数组末尾开始计算，即 start+array. length

如果 start 比 -array. length 还要小，使用0

如果 start 比 array. length 还要大或者等于，则不会删除任何元素，表现为添加元素

如果不传递 start，即调用方法没有传递任何参数，不会删除任何元素

deleteCount（选填）：表示要从数组的 start 位置删除几个元素

如果不传递该值，或者是值大于等于从 start 到末尾的元素值，则删除从 start 到末尾的所有的值

items（可选）：

从start开始要加入到数组中的元素

JavaScript
// 从下标为1的开始删除到数组末尾
const array = [1, 2, 3]
const res = array.splice(1)
console.log(array) // [ 1 ]
console.log(res) // [ 2, 3 ]

// 从下标为1的开始 删除两个数组元素
const array = [1, 2, 3, 4, 5]
const res = array.splice(1,2)
console.log(array) // [ 1, 4, 5 ]
console.log(res) // [ 2, 3 ]

// 从下标为1的开始 删除两个元素 添加7,8两个元素
const array = [1, 2, 3, 4, 5]
const res = array.splice(1,2,7,8)
console.log(array) // [ 1, 7, 8, 4, 5 ]
console.log(res) // [ 2, 3 ]

// 从下标为1的开始 不删除元素 插入7,8两个元素
const array = [1, 2, 3, 4, 5]
const res = array.splice(1, 0, 7, 8)
console.log(array) // [ 1, 7, 8, 2, 3, 4, 5]
console.log(res) // []

二、查询 ​

6. indexOf ​

  • 作用：检索当前项在数组中第一次出现位置的索引
  • 参数：要检索的这一项内容
  • 返回值：这一项出现在数组中的索引值，如果数组中没有这一项，返回的是-1
  • 是否改变原数组：不改变

使用方法：array.indexOf(检索的项)

JavaScript
const array = [1, 2, 3]
const res = array.indexOf(3)
console.log(array) // [ 1, 2, 3 ]
console.log(res) // 2

7.lastIndexOf ​

  • 作用：检索当前项在数组中最后一次出现位置的索引
  • 参数：要检索的这一项内容
  • 返回值：这一项最后出现在数组中的索引值，如果数组中没有这一项，返回的是-1
  • 是否改变原数组：不改变

使用方法：array.lastIndexOf(检索的项)

JavaScript
const array = [1, 2, 3, 1]
const res = array.lastIndexOf(1)
console.log(array) // [ 1, 2, 3, 1 ]
console.log(res) // 3

8. find ​

  • 作用：返回第一次满足条件的数组中的某一项
  • 参数：callbackFn thisArg
  • 返回值：数组中满足条件的第一项
  • 是否改变原数组：不改变

使用方法：array.find(()=>{})

JavaScript
let array=[{a:1},{a:2},{a:3}]
let res=array.find((ee,vv)=>{
	if(ee.a === 2){
	return ee
	}
})
console.log(res)//{a:2}

9. findIndex ​

  • 作用：返回第一次满足条件的数组中的某一项所在的索引
  • 参数：callbackFn thisArg
  • 返回值：数组中满足条件的第一项
  • 是否改变原数组：不改变

使用方法：array.findIndex(()=>{}) 如果数组中所有值都不满足则返回unefined

JavaScript
let array=[{a:1},{a:2},{a:3}]
let res=array.findIndex((ee,vv)=>{
	if(ee.a === 2){
	return ee
	}
})
console.log(res)//1

10. includes ​

  • 作用：检索当前数组是否包含某一项
  • 参数：要检索的这一项内容
  • 返回值：Boolean，true 包含 false 不包含
  • 是否改变原数组：不改变

使用方法：array.includes(检索的值)

JavaScript
const array = [1, 2, 3, 1]
const res = array.includes(1)
console.log(array) // [ 1, 2, 3, 1 ]
console.log(res) // true

11. slice ​

  • 作用：从原数组中截出所需长度的数组
  • 参数：start end
  • 返回值：截取出来的元素组成的新数组
  • 是否改变原数组：不改变

使用方法：array.slice (start end)

start（可选）: 开始的索引位置

如果索引是负数，从数组末尾开始计算，即 start+array. length

如果 start 比 -array. length 还小或者不传递 start，索引为0

如果 start 比 array. length 大或者等于，则不截取任何元素

end（可选）：结束的索引位置，截取到 end 所在的元素并不包含 end 索引的元素

如果索引是负数，则从数组末尾开始计算，即 end+array. length

如果 end 小于 -array. length，则使用0

如果 end 比 array. length 大或者等于，则提取所有元素到末尾

如果end比start还小或者等于，则不提取任何元素

JavaScript
const array = [1, 2, 3, 4, 5]
const res = array.slice(1, 4)
console.log(array) //[ 1, 2, 3, 4, 5 ]
console.log(res) //[ 2, 3, 4 ]

const array = [1, 2, 3, 4, 5]
const res = array.slice()
console.log(array) //[ 1, 2, 3, 4, 5 ]
console.log(res) // [ 1, 2, 3, 4, 5 ]

at ​

三、拼接 ​

12. concat ​

  • 作用：多个数组拼接在一起
  • 参数：拼接的项（多个任意的值）
  • 返回值：拼接后的新数组
  • 是否改变原数组

使用方法：array.concat(拼接的内容)

JavaScript
const array = [1, 2, 3]
const res = array.concat('1','2')
console.log(array) // [ 1, 2, 3 ]
console.log(res) // [ 1, 2, 3, '1', '2' ]

四、转换 ​

13. toString ​

  • 作用：把数组转换为字符串
  • 参数：无
  • 返回值：转换后的字符串，每一项用逗号分隔
  • 是否改变原数组：不改变

使用方法：array.toString()

JavaScript
const array = [1, 2, 3]
const res = array.toString()
console.log(array) // [ 1, 2, 3 ]
console.log(res) // 1,2,3

14. join ​

  • 作用：把数组转换为字符串
  • 参数：按指定的分隔符连接
  • 返回值：转换后的字符串
  • 是否改变新数组：不改变

使用方法：array.join('指定分隔符')

JavaScript
const array = [1, 2, 3]
const res = array.join("|")
console.log(array) // [ 1, 2, 3 ]
console.log(res) // 1|2|3

五、排序 ​

15. sort ​

  • 作用：把数组按照一定的顺序排列
  • 参数：函数或者无
  • 返回值：排序好的数组
  • 是否改变原数组：改变

使用方法：array.sort() sort方法中如果不传递参数，是无法处理10以上的数组排序的，它默认是按照每一项的第一个字符来排列

JavaScript
const array = [1, 3, 22, 15, 99, 77, 65]
const res = array.sort()
console.log(array) // [1, 15, 22, 3,65, 77, 99]
console.log(res) // [1, 15, 22, 3,65, 77, 99]

// 传入参数
const array = [1, 3, 22, 15, 99, 77, 65]
const res = array.sort((a, b) => {
  return a - b
})
console.log(array) // [1,  3, 15, 22,65, 77, 99]
console.log(res) // [1,  3, 15, 22,65, 77, 99]

16. reverse ​

  • 作用：把数组反转（结尾的到开头 ，开头的到结尾）
  • 参数：无
  • 返回值：排列后的新数组
  • 是否改变原数组：改变

使用方法：array.reverse()

JavaScript
const array = [1, 2, 3, 4, 5]
const res = array.reverse()
console.log(array) // [ 5, 4, 3, 2, 1 ]
console.log(res) // [ 5, 4, 3, 2, 1 ]

六、遍历映射 ​

forEach ​

  • 作用：遍历数组中的每一项内容
  • 参数：回调函数
  • 返回值：undefined
  • 是否改变原数组：不改变

使用方法：array.forEach (function (item, index, array){}, thisArg)

callbackFn：为数组中每一项元素执行的函数，该函数有以下参数：

item：数组中当前正在处理的元素

index：当前元素的索引

array：调用方法本身的数组

thisArg：执行callbackFn时的this

JavaScript
const array = ["a", "b", "c"]
array.forEach((item, index, array) => {
  console.log(item) // a b c
  console.log(index) // 0 1 2
  console.log(array) // ["a", "b", "c"]
})

// 使用this
class Counter {
  constructor() {
    this.sum = 0;
    this.count = 0;
  }
  add(array) {
    // 只有函数表达式才有自己的 this 绑定
    array.forEach(function countEntry(entry) {
      this.sum += entry;
      ++this.count;
    }, this);
  }
}

map ​

  • 作用：对数组映射成新的数组
  • 参数：回调函数
  • 返回值：映射后的新数组
  • 是否改变原数组：不改变

使用方法：array.map(callbackFn,thisArg)

JavaScript
const array = ["a", "b", "c"]
let res = array.map((item) => {
  return "在这里对数组的每一项做判断，返回的值将组成一个新数组"
})
console.log(array) // [ 'a', 'b', 'c' ]
console.log(res) // ['在这里对数组的每一项做判断，返回的值将组成一个新数组','在这里对数组的每一项做判断，返回的值将组成一个新数组','在这里对数组的每一项做判断，返回的值将组成一个新数组']

reduce ​

  • 作用：接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减（个数递减，不是值），最终汇总成一个值。
  • 参数：callbackFn，初始值
  • 返回值：函数累计处理的结果
  • 是否改变原数组：不改变

使用方法 array.reduce ((上次的值，本次循环的值)=>{}, 初始值)

callbackFn（必须）：给数组中的每一个元素一次执行传入的回调函数，不包括数组中被删除或从未被赋值的元素

fn 接收四个参数：

初始值（或者上一次回调函数的返回值，必填）

当前元素值（必填）

当前索引

调用 reduce 的数组

初始值（可选）：作为第一次调用 callback 函数时的第一个参数

如果没有初始值，则使用数组中的第一个元素

在没有初始值的空数组上调用reduce将报错

  1. 回调函数第一次执行的时候，pre（上次）和cur（本次）的取值有两种情况：如果提供了init值，pre的值为init，cur取数组中的第一个的值
  2. 如果没有提供init值，那么pre取数组中的第一个值，cur取数组中的第二个值
  3. 如果没有提供init值，reduce会从索引1的地方开始执行callback方法，跳过第一个索引，如果提供了init值，从索引0开始
JavaScript
let array=[1,2,3]
array.reduce((pre,cur)=>{
	return pre+cur
},0)//6

filter ​

  • 作用：对数组中的每一项执行回调函数，如果返回true，就把这一项放到新数组中返回
  • 参数：callbackFn、thisArg
  • 返回值：一个新的、由通过测试的元素组成的新数组，如果没有任何数组元素通过测试，则返回空数组
  • 是否改变原数组：不改变

使用方法：array.filter(()=>{return true/false})

JavaScript
let array=[1,2,3]
let res=array.filter(ee=>{
	return ee<2
})
console.log(res)//[1]

some ​

  • 作用：数组中只要有一项条件成立就返回true，如果都不成立返回false
  • 参数：callback thisArg
  • 返回值：Boolean
  • 是否改变原数组：不改变

使用方法：array.some(()=>{})

JavaScript
let array=[1,2,3]
let res=array.some((ee,vv)=>{
	if(ee){
	return true
	}
})

every ​

  • 作用：数组中只要有一项条件不成立就返回false，如果都成立返回true
  • 参数：callback thisArg
  • 返回值：Boolean
  • 是否改变原数组：不改变

使用方法：array.(()=>{})

JavaScript
let array=[1,2,3]
let res=array.every((ee,vv)=>{
	if(ee){
	return true
	}
})

其他 ​

flat ​

  • 作用：按照一个可指定的深度遍历数组，并将所有元素与遍历到的子元素中的元素合并为一个新数组
  • 参数：depth（指定要提取嵌套数组的结构深度，默认值为1）
  • 返回值：一个新的数组，其中包含拼接后的子数组元素
  • 是否改变原数组：不改变

使用方法：let arr=数组.flat([depth]) 注意： 参数如果传递Infinity,则可展开任意深度的嵌套数组 flat()方法会移除数组中的空项

JavaScript
let arr=[1,2,[3,4]]
arr.flat()//[1,2,3,4]

copyWithin ​

  • 作用：浅复制数组中的一部分到吞初审组中的另一个为止，并返回改变后的数组
评论