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

一、添加元素

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

const arr = [1, 3, 5, 7]
arr.push(9)
console.log(arr)

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

const arr = [1, 2, 3, 4, 5]
arr.unshift(0)
console.log(arr) 

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

const arrp = ['a', 'b', 'c', 'd', 'e'] 
arrp.splice(3, 0, 'C') 
console.log(arrp)

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

const arrd = ['a', 'b', 'c', 'd', 'e'] 
arrd.splice(3, 2) 
console.log(arrd)

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

const arrs = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'] 
arrs.splice(3, 2, 'D', 'E') 
console.log(arrs)

二、删除元素

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

const arrs = [1, 3, 5, 7, 9]
arrs.pop()
console.log(arrs)

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

const arrs = [1, 3, 5, 7, 9]
arrs.shift()
console.log(arrs)

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

const arrd = ['a', 'b', 'c', 'd', 'e'] 
arrd.splice(3, 2) 
console.log(arrd)

三、提取元素

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

const arr = [1, 2, 3, 4, 5]
const arr2 = arr.slice(0, 3) 
console.log(arr2) 
const arr3 = arr.slice(2)
console.log(arr3)

四、遍历数组

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

const arr = [
  { name: '张三', age: 18 },
  { name: '李四', age: 20 },
  { name: '王五', age: 22 }
] 
const newArr = arr.map((item) => item.age) 
console.log(newArr) 
const newArr1 = arr.map((item) => item.age + 10) 
console.log(newArr1) 

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

const arr = [1, 2, 3, 4, 5] 
const arrs = arr.filter((nub) => {
  return nub > 3
}) 
console.log(arrs) 

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

const arr = [
  { name: '张三', age: 18 },
  { name: '李四', age: 20 },
  { name: '王五', age: 22 }
] 

arr.forEach((item, index, arr) => {
  if (item.name === '王五') {
    item.age = 30
  }
})
console.log(arr)

const arr = [1, 2, 3, 4, 5]
arr.forEach((item, index, arr) => {
  arr[index] = item + 10
})
console.log(arr) 

5、数组搜索

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

const arr = [1, 3, 5, 7, 9]
const arr1 = [] 
if (arr.includes(5)) {
  arr1.push(5)
} 
console.log(arr1) 

6、数组排序

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

const arr = [51, 27, 391, 84, 15, 26, 28, 46, 100, 1000]
arr.sort()
console.log(arr)

const arr = ['Van', 'Lisa', 'Alice', 'Laura', 'Barbara', 'Diana']
arr.sort() 
console.log(arr) 

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

 const arr = ['Van', 'Lisa', 'Alice', 'Laura', 'Barbara', 'Diana']
 arr.sort((a, b) => {
   return a.localeCompare(b)
 })
 console.log(arr)

const arr = [3, 6, 8, 1, 2, 9]
arr.sort((a, b) => {
  return a - b
})
console.log(arr) 

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

const arr = ['Van', 'Lisa', 'Alice', 'Laura', 'Barbara', 'Diana']
arr.sort((a, b) => {
  return -a.localeCompare(b)
})
console.log(arr)

const arr = [3, 6, 8, 1, 2, 9]
arr.sort((a, b) => {
  return b - a
})
console.log(arr) 

7、数组查找

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

const arr = [3, 6, 8, 1, 2, 9]
const arr1 = arr.some((index) => {
  return (index === 6)
}) 

console.log(arr1) 

const arr = [3, 7, 8, 1, 2, 9] 
const arr1 = arr.some((index) => {
  return (index === 6)
}) 

console.log(arr1) 

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

const arr = [3, 6, 8, 1, 2, 9]
const arr1 = arr.every((index) => {
  return typeof index === 'number'
})


console.log(arr1) 

const arr = [3, 6, 8, 'a', 2, 9] 
const arr1 = arr.every((index) => {
  return typeof index === 'number'
})


console.log(arr1) 

8、数组修改

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

const arrs = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'] 
arrs.splice(3, 2, 'D', 'E') 
console.log(arrs)