【js】数组的几个常用方法

filter、map、forEach

filter

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。

语法：array.filter(function(currentValue,index,arr), thisValue)

参数说明

currentValue：必须。当前元素的值
index：可选。当前元素的索引值（下标）
arr：可选。当前元素属于的数组对象
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"。

map

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。

语法：array.map(function(currentValue,index,arr), thisValue)

参数说明

currentValue：必须。当前元素的值
index：可选。当前元素的索引值
arr：可选。当前元素属于的数组对象
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

forEach

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

语法：array.forEach(function(currentValue, index, arr), thisValue)

参数说明

currentValue：必须。当前元素
index：可选。当前元素的索引值。
arr：可选。当前元素所属的数组对象。
thisValue：可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值。

举个例子：

export default {
  name: 'Array',
  components: {},
  data() {
    return {
      array: [
        { label: '数组1', value: 234 },
        { label: '数组2', value: 854 },
        { label: '数组3', value: 12 },
        { label: '数组4', value: 410 }
      ],
      target: []
    }
  },

  computed: {},

  created() {},

  methods: {
    filter() {
      this.target = this.array.filter((item, index, arr) => {
        return item.value > 400
      }, this)
      console.log(this.target)
      // [ { "label": "数组2", "value": 854 }, { "label": "数组4", "value": 410 } ]
      console.log(this.array)
      // [ { "label": "数组1", "value": 234 }, { "label": "数组2", "value": 854 }, { "label": "数组3", "value": 12 }, { "label": "数组4", "value": 410 } ]
    },
    map() {
      this.target = this.array.map((item, index, arr) => {
        return item.value * 2
      }, this)
      console.log(this.target)
      // [ 468, 1708, 24, 820 ]
      console.log(this.array)
      // [ { "label": "数组1", "value": 234 }, { "label": "数组2", "value": 854 }, { "label": "数组3", "value": 12 }, { "label": "数组4", "value": 410 } ]
    },
    forEach() {
      this.array.forEach((item, index, arr) => {
        item.value = item.value * 2
      }, this)
      console.log(this.target)
      // []
      console.log(this.array)
      // [ { "label": "数组1", "value": 234 }, { "label": "数组2", "value": 854 }, { "label": "数组3", "value": 12 }, { "label": "数组4", "value": 410 } ]
    }
  }
}

find、findIndex

find

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行：
- 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 undefined
注意: find() 对于空数组，函数是不会执行的。
注意: find() 并没有改变数组的原始值。

语法：array.find(function(currentValue, index, arr),thisValue)

currentValue：必需。当前元素
index：可选。当前元素的索引值
arr：可选。当前元素所属的数组对象
thisValue：可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值。

findIndex

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行：
- 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组，函数是不会执行的
注意: findIndex() 并没有改变数组的原始值。

语法：array.findIndex(function(currentValue, index, arr), thisValue)

currentValue：必需。当前元素
index：可选。当前元素的索引值
arr：可选。当前元素所属的数组对象
thisValue：可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值。

举个例子：

find() {
  this.target = this.array.find((item, index, arr) => {
    return item.value > 400
  })
  console.log(this.target)
  // { "label": "数组2", "value": 854 }
  console.log(this.array)
  // [ { "label": "数组1", "value": 234 }, { "label": "数组2", "value": 854 }, { "label": "数组3", "value": 12 }, { "label": "数组4", "value": 410 } ]
},
findIndex() {
  this.target = this.array.findIndex((item, index, arr) => {
    return item.value > 400
  })
  console.log(this.target)
  // 1
  console.log(this.array)
  // [ { "label": "数组1", "value": 234 }, { "label": "数组2", "value": 854 }, { "label": "数组3", "value": 12 }, { "label": "数组4", "value": 410 } ]
}

push、pop、shfit、unshift

定义和区别请看下面的总结

举个例子：

push() {
  console.log(this.array.push(123, 43)) // 6
  console.log(this.array) // [ { "label": "数组1", "value": 234 }, { "label": "数组2", "value": 854 }, { "label": "数组3", "value": 12 }, { "label": "数组4", "value": 410 }, 123, 43 ]
},
pop() {
  console.log(this.array.pop()) // {label: "数组4", value: 410}
  console.log(this.array) // [ { "label": "数组1", "value": 234 }, { "label": "数组2", "value": 854 }, { "label": "数组3", "value": 12 } ]
},
unshift() {
  console.log(this.array.unshift(123, 43)) // 6
  console.log(this.array) // [ 123, 43, { "label": "数组1", "value": 234 }, { "label": "数组2", "value": 854 }, { "label": "数组3", "value": 12 }, { "label": "数组4", "value": 410 } ]
},
shift() {
  console.log(this.array.shift()) // {label: "数组1", value: 234}
  console.log(this.array) // [ { "label": "数组2", "value": 854 }, { "label": "数组3", "value": 12 }, { "label": "数组4", "value": 410 } ]
}

splice、slice

splice

用于添加或删除数组中的元素。
注意：这种方法会改变原始数组。

返回值

如果仅删除一个元素，则返回一个元素的数组。如果未删除任何元素，则返回空数组。

语法：array.splice(index,howmany,item1,.....,itemX)

index：必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany：可选。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1,.....,itemX：可选。要添加到数组的新元素

slice

slice() 方法可从已有的数组中返回选定的元素。
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
注意： slice() 方法不会改变原始数组。

语法：array.slice(start, end)

start：可选。
- 规定从何处开始选取。
- 如果是负数，那么它规定从数组尾部开始算起的位置。
- 如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取。
- slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
end：可选。
- 规定从何处结束选取。
- 该参数是数组片断结束处的数组下标。
- 如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。
- 如果该参数为负数，则它表示在原数组中的倒数第几个元素结束抽取。
- slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

举个例子：

splice() {
  this.target = this.array.splice(1, 2)
  // [ { "label": "数组2", "value": 854 }, { "label": "数组3", "value": 12 } ]
  console.log(this.array)
  // [ { "label": "数组1", "value": 234 }, { "label": "数组4", "value": 410 } ]

  this.target = this.array.splice(1)
  // [ { "label": "数组2", "value": 854 }, { "label": "数组3", "value": 12 }, { "label": "数组4", "value": 410 } ]
  console.log(this.array)
  // [ { "label": "数组1", "value": 234 } ]

  this.target = this.array.splice(2, 2, 123, 456)
  // [ { "label": "数组3", "value": 12 }, { "label": "数组4", "value": 410 } ]
  console.log(this.array)
  // [ { "label": "数组1", "value": 234 }, { "label": "数组2", "value": 854 }, 123, 456 ]
},
slice() {
  this.target = this.array.slice(1, 3)
  // [ { "label": "数组2", "value": 854 }, { "label": "数组3", "value": 12 } ]
  console.log(this.array)
  // [ { "label": "数组1", "value": 234 }, { "label": "数组2", "value": 854 }, { "label": "数组3", "value": 12 }, { "label": "数组4", "value": 410 } ]

  this.target = this.array.slice(1)
  // [ { "label": "数组2", "value": 854 }, { "label": "数组3", "value": 12 }, { "label": "数组4", "value": 410 } ]
  console.log(this.array)
  // [ { "label": "数组1", "value": 234 }, { "label": "数组2", "value": 854 }, { "label": "数组3", "value": 12 }, { "label": "数组4", "value": 410 } ]
}

indexOf、lastIndexOf

indexOf

indexOf() 方法可返回数组中某个指定的元素位置。
该方法将从头到尾地检索数组，看它是否含有对应的元素。
开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。
如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。如果在数组中没找到指定元素则返回 -1。

语法： array.indexOf(item,start)

item：必须。查找的元素。
start：可选的整数参数。
- 规定在数组中开始检索的位置。
- 它的合法取值是 0 到 stringObject.length - 1。
- 如省略该参数，则将从字符串的首字符开始检索。

lastIndexOf

lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。
如果要检索的元素没有出现，则该方法返回 -1。
该方法将从尾到头地检索数组中指定元素 item。
如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。
数组的索引开始位置是从 0 开始的。
如果在数组中没找到指定元素则返回 -1。

语法：array.lastIndexOf(item,start)

item：必须。规定需检索的字符串值。
start：可选的整数参数。
- 规定在数组中开始检索的位置。
- 它的合法取值是 0 到 stringObject.length - 1。
- 如省略该参数，则将从字符串的首字符开始检索。

举个例子：

// arrays: ['sss', 'err', 'sfs', 'fghdj', 'sfs', 'dshx'],
indexOf() {
  this.target = this.arrays.indexOf('sfs') // 2
},
lastIndexOf() {
  this.target = this.arrays.lastIndexOf('sfs') // 4
}

some、every

some

用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：
- 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素，则返回false。
some() 不会对空数组进行检测。
some() 不会改变原始数组。

语法： array.some(function(currentValue,index,arr),thisValue)

currentValue：必须。当前元素的值
index：可选。当前元素的索引值
arr：可选。当前元素属于的数组对象
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"。

every

用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
- 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
- 如果所有元素都满足条件，则返回 true。
every() 不会对空数组进行检测。
every() 不会改变原始数组。

语法： array.every(function(currentValue,index,arr), thisValue)

currentValue：必须。当前元素的值。
index：可选。当前元素的索引值。
arr：可选。当前元素属于的数组对象。
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"。

举个例子：

// arrays: ['sss', 'err', 'sfs', 'fghdj', 'sfs', 'dshx'],
some() {
  this.target = this.arrays.some((item, index, arr) => item === 'sfs') // true
},
every() {
  this.target = this.arrays.every((item, index, arr) => item === 'sfs') // false
}

总结

filter、map、forEach的区别

filter	map	forEach
不改变原数组	不改变原数组	改变原数组
返回新数组	返回新数组	不返回新数组
不对空数组进行检测	不对空数组进行检测	不对空数组进行检测

find、findIndex的区别

find	findIndex
返回第一个元素的值	返回第一个元素位置
在测试条件时返回 true 时，之后的值不会再调用	在测试条件时返回 true 时，之后的值不会再调用
对于空数组，函数不会执行	对于空数组，函数不会执行
没有改变数组的原始值	没有改变数组的原始值

push、pop、shfit、unshift的区别

push	pop	shfit	unshift
`array.push(item1, item2, ..., itemX)`	`array.pop()`	`array.shift()`	`array.unshift(item1,item2, ..., itemX)`
数组末尾添加一个或多个元素	删除数组最后一个元素	删除数组的第一个元素	数组的开头添加一个或更多元素
返回新的长度	返回删除的元素	返回第一个元素的值	返回新的长度
改变数组的长度	改变数组的长度	改变数组的长度	改变数组的数目

splice、slice的区别

splice	slice
添加或删除数组中的元素	从已有的数组中返回选定的元素（截取）
会改变原始数组	不会改变原始数组
返回删除元素形成的数组	返回选定的元素

indexOf、lastIndexOf的区别

indexOf	lastIndexOf
返回数组中某个指定的元素位置	返回一个指定的元素在数组中最后出现的位置
从头到尾地检索数组	从尾到头地检索数组
返回 item 的第一次出现的位置	返回 item 从尾向前检索第一个次出现在数组的位置

some、every 的区别

some	every
用于是否满足指定条件	用于所有元素是否都符合指定条件
有一个元素满足条件，则表达式返回true	所有元素都满足条件，则返回 true
不会改变原始数组	不会改变原始数组

posted @ 2023-09-21 11:18 {前端开发} 阅读(61) 评论(0) 编辑收藏举报

刷新页面返回顶部

前端开发

【js】数组的几个常用方法

filter、map、forEach

filter

参数说明

map

参数说明

forEach

参数说明

举个例子：

find、findIndex

find

findIndex

举个例子：

push、pop、shfit、unshift

定义和区别请看下面的总结

举个例子：

splice、slice

splice

返回值

slice

举个例子：

indexOf、lastIndexOf

indexOf

lastIndexOf

举个例子：

some、every

some

every

举个例子：

总结

公告