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 |
| 不会改变原始数组 | 不会改变原始数组 |