vue关于数组常用的一些方法

一、添加元素

1、push（）向数组末尾添加一个或多个元素，并返回新的长度。

const arr = [1, 3, 5, 7]// 声明一个数组
arr.push(9)// 把9添加到数组末尾，如需添加多个元素用逗号隔开
console.log(arr)// 输出为[1,3,5,7,9]

2、unshift（）向数组开头添加一个或多个元素，并返回新的长度。

const arr = [1, 2, 3, 4, 5]
arr.unshift(0)// 把0添加到数组开头，如需添加多个元素用逗号隔开
console.log(arr) //打印出来 [0,1, 2, 3, 4, 5]

3.、 splice()多用途方法,添加，删除或替换指定位置的元素
（1）// 添加，该方法接受两个参数，第一个参数指定要添加的元素的位置，第二个参数指定为0

const arrp = ['a', 'b', 'c', 'd', 'e'] // 声明一个数组
arrp.splice(3, 0, 'C') // 第一个参数指定第三个元素开始，第二个参数指定为0
console.log(arrp)// 打印出来 ['a','b','c','C','d','e']

（2）// 删除，该方法接受两个参数，第一个参数指定要删除的元素的位置，第二个参数指定要删除的元素个数

const arrd = ['a', 'b', 'c', 'd', 'e'] // 声明一个数组
arrd.splice(3, 2) // 第一个参数指定第三个元素开始，第二个参数指定删除两个
console.log(arrd)// 打印出来 ['a','b','c']

（3）// 替换，该方法接受两个参数，第一个参数指定要替换的元素的位置，第二个参数指定要替换的元素个数

const arrs = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'] // 声明一个数组
arrs.splice(3, 2, 'D', 'E') // 第一个参数指定第三个元素开始，第二个参数指定替换两个
console.log(arrs)// 打印出来 ['a','b','c','D','E','f','g','h','i']

二、删除元素

1、pop（）删减数组末尾的元素。

const arrs = [1, 3, 5, 7, 9]// 声明一个数组
arrs.pop()//使用pop方法
console.log(arrs)// 输出为[1,3,5,7]

2、shift（）删减数组首位元素。

const arrs = [1, 3, 5, 7, 9]// 声明一个数组
arrs.shift()//使用shift方法
console.log(arrs)// 输出为[3,5,7,9]

3.、 splice()方法删除指定位置的元素，该方法接受两个参数，第一个参数指定要删除的元素的位置，第二个参数指定要删除的元素个数

const arrd = ['a', 'b', 'c', 'd', 'e'] // 声明一个数组
arrd.splice(3, 2) // 第一个参数指定第三个元素开始，第二个参数指定删除两个
console.log(arrd)// 打印出来 ['a','b','c']

三、提取元素

1、slice() 从已有的数组中提取中间选定的元素。该方法接收两个参数，一个是开始的坐标，一个是结束的坐标

const arr = [1, 2, 3, 4, 5]//  声明一个数组
const arr2 = arr.slice(0, 3) // 从第0个元素开始，提取3个元素
console.log(arr2) // 打印出来为[1, 2, 3]
const arr3 = arr.slice(2)//  从第2个元素开始，提取剩余所有元素
console.log(arr3)//  打印出来为[3,4,5]

四、遍历数组

1、 map() 方法 用于遍历数组执行回调函数并返回新的数组

const arr = [
  { name: '张三', age: 18 },
  { name: '李四', age: 20 },
  { name: '王五', age: 22 }
] // 声明一个数组里面包含对象
const newArr = arr.map((item) => item.age) // 通过遍历数组并执行回调函数得到一个新的数组，item是数组中的每一项，返回的是每一项的age属性
console.log(newArr) // 打印出来是[18,20,22]
const newArr1 = arr.map((item) => item.age + 10) // 可以对里面的元素进行运算
console.log(newArr1) // 打印出来是[28,30,32]

2、filter() 方法，用于遍历并筛选出满足数组要求的元素并添加到新数组里

const arr = [1, 2, 3, 4, 5] // 声明一个数组
const arrs = arr.filter((nub) => {
  return nub > 3
}) // 使用filter方法对数组进行过滤，里面接收一个参数nub（可以随便改）。对数组进行遍历，如果符合要求则为true并添加到新数组里。
console.log(arrs) // 打印出为[4,5]

3、forEach() 方法，用于遍历并调用数组的每个元素，并将元素传递给回调函数。它接收3个参数。
注意: forEach() 对于空数组是不会执行回调函数的。

const arr = [
  { name: '张三', age: 18 },
  { name: '李四', age: 20 },
  { name: '王五', age: 22 }
] // 声明一个数组
// item 是数组中当前遍历到的元素，即对象。index 是当前遍历到的元素在数组中的下标。arr 是原始的数组。
arr.forEach((item, index, arr) => {
  if (item.name === '王五') {
    item.age = 30
  }
})// 利用条件判断来判断遍历到的元素的名字是不是王五，判断为true的话则把年龄改为30
console.log(arr)// 打印出来为[  { name: '张三', age: 18 },{ name: '李四', age: 20 },{ name: '王五', age: 30 }]
//---------------------------------------------------------------------------
const arr = [1, 2, 3, 4, 5]
arr.forEach((item, index, arr) => {
  arr[index] = item + 10
})
console.log(arr) // 打印为[11,21,31,41,51]

5、数组搜索

1、includes() 用于查找字符串中的子串或查找数组中的元素。

const arr = [1, 3, 5, 7, 9]// 声明一个数组
const arr1 = [] // 声明一个空数组
if (arr.includes(5)) {
  arr1.push(5)
} // 利用条件判断加上includes方法判搜索包不包含5，判断为true的话则添加5到空数组里
console.log(arr1) // 打印为[5]

6、数组排序

1、 sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。
默认排序顺序为按字母升序。注意： 这种方法会改变原始数组！。
（1）不传参数

const arr = [51, 27, 391, 84, 15, 26, 28, 46, 100, 1000]// 声明一个数组
arr.sort()// 不传参数,将按照数子首位字符排序
console.log(arr)// 打印为[100,1000,15,26,27,28,391,46,51,84]
//---------------------------------------------------------------------------
const arr = ['Van', 'Lisa', 'Alice', 'Laura', 'Barbara', 'Diana']
arr.sort() // 不传参数,将按照首位字母排序
console.log(arr) // 打印为['Alice','Barbara', 'Diana','Laura','Lisa','Van',]

(2) 升序，传入两个参数

 const arr = ['Van', 'Lisa', 'Alice', 'Laura', 'Barbara', 'Diana']
 arr.sort((a, b) => {
   return a.localeCompare(b)
 })
 console.log(arr)// 打印为['Alice','Barbara', 'Diana','Laura','Lisa','Van',]
//---------------------------------------------------------------------------
const arr = [3, 6, 8, 1, 2, 9]
arr.sort((a, b) => {
  return a - b
})
console.log(arr) // 打印为[1,2,3,6,8,9 ]

(3) 降序，传入两个参数

const arr = ['Van', 'Lisa', 'Alice', 'Laura', 'Barbara', 'Diana']
arr.sort((a, b) => {
  return -a.localeCompare(b)
})
console.log(arr)// 打印为['Van','Lisa',Laura','Diana',''Barbara','Alice', ]
//---------------------------------------------------------------------------
const arr = [3, 6, 8, 1, 2, 9]
arr.sort((a, b) => {
  return b - a
})
console.log(arr) // 打印为[9,8,6,3,2,1 ]

7、数组查找

1、some() 方法用于检测数组中的元素是否满足指定条件

const arr = [3, 6, 8, 1, 2, 9]
const arr1 = arr.some((index) => {
  return (index === 6)
}) // 使用some()方法对数组进行遍历。在遍历过程中，some()方法会检查数组中是否有满足条件的元素。
// 这里的条件是一个箭头函数，它接收一个参数index，并返回一个布尔值。
console.log(arr1) // 打印为true
//---------------------------------------------------------------------------
const arr = [3, 7, 8, 1, 2, 9] // 里面并不包含6
const arr1 = arr.some((index) => {
  return (index === 6)
}) // 使用some()方法对数组进行遍历。在遍历过程中，some()方法会检查数组中是否有满足条件的元素。
// 这里的条件是一个箭头函数，它接收一个参数index，并返回一个布尔值。
console.log(arr1) // 打印为false

2、every() 方法用于检测数组所有元素是否都符合指定条件

const arr = [3, 6, 8, 1, 2, 9]
const arr1 = arr.every((index) => {
  return typeof index === 'number'
})
// 在遍历过程中，every()方法会检查数组中的所有元素是否满足条件。
//这里的条件是一个箭头函数，它接收一个参数index，并返回一个布尔值。
console.log(arr1) // 打印为true
//---------------------------------------------------------------------------
const arr = [3, 6, 8, 'a', 2, 9] // 里面包含了一个字符
const arr1 = arr.every((index) => {
  return typeof index === 'number'
})
// 在遍历过程中，every()方法会检查数组中的所有元素是否满足条件。
// 这里的条件是一个箭头函数，它接收一个参数index，并返回一个布尔值。
console.log(arr1) // 打印为false

8、数组修改

3.、 splice()替换指定位置的元素
（1） 替换，该方法接受两个参数，第一个参数指定要替换的元素的位置，第二个参数指定要替换的元素个数

const arrs = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'] // 声明一个数组
arrs.splice(3, 2, 'D', 'E') // 第一个参数指定第三个元素开始，第二个参数指定替换两个
console.log(arrs)// 打印出来 ['a','b','c','D','E','f','g','h','i']