1、some方法
1)some()
方法测试是否至少有一个元素通过由提供的函数实现的测试。
2)参数列表:
arr.some(callback(element[, index[, array]])[, thisArg])
callback:匿名回调
element:数组内的每个元素
Index:索引
array:数组的引用
3)功能
some()
为数组中的每一个元素执行一次 callback
函数,直到找到一个使得 callback 返回一个“真值”
(即可转换为布尔值 true 的值)。如果找到了这样一个值,some()
将会立即返回 true并终止遍历
。否则,some()
返回 false
。
callback
只会在那些”有值“的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。
返回值:boolean
4)例程:
<div id="app">
<p v-if="list1.some((el)=>{
return el>=6
})">隐藏内容</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list1: [1,2,3,4,5,6,7,8]
},
methods: {}
})
</script>
2、findIndex方法
1)findIndex()
方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
2)参数列表:同1
3)功能:
findIndex
方法对数组中的每个数组索引0~length-1
(包括)执行一次callback
函数,直到找到一个callback
函数返回真实值(强制为true
)的值。如果找到这样的元素,findIndex
会立即返回该元素的索引。如果回调从不返回真值,或者数组的length
为0,则findIndex
返回-1。 与某些其他数组方法(如Array#some)不同,在稀疏数组中,即使对于数组中不存在的条目的索引也会调用回调函数。即寻找数组中被函数验证通过的第一个元素的索引
返回值:Number
4)例程:
<div id="app">
<p @click="test(list1)">点击内容</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list1: [{
id: 1,
name: "cc"
}, {
id: 2,
name: "cc"
}, {
id: 3,
name: "cc"
}]
},
methods: {
test: (arr) => {
console.log(arr.findIndex((el, index) => {
return el.id === 3
}))
}
}
})
</script>
3、filter
1)filter()
方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
2)参数列表同1
3)功能:用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。
返回true表示保留该元素(通过测试),false则不保留。与findIndex的区别是前者返回所有满足函数验证的所有元素组成的新数组
,后者则只是满足验证的第一个元素。
返回值:Array
4)例程:
<script>
var vm = new Vue({
el: '#app',
data: {
list1: [{
id: 1,
name: "cc1"
}, {
id: 2,
name: "cc2"
}, {
id: 3,
name: "cc1"
}, {
id: 4,
name: "cc1"
}]
},
methods: {
test: (arr) => {
console.log(arr.filter((el, index) => {
return el.name==="cc1"
}))
}
}
})
</script>
4、forEach
1)forEach()
方法对数组的每个元素执行一次提供的函数。
2)参数列表同1
3)forEach
方法按升序为数组中含有效值的每一项执行一次callback
函数,那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)。
返回值 undefined
4)例程
<div id="app">
<p @click="test(list1)">点击内容</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list1: [{
id: 1,
name: "cc1"
}, {
id: 2,
name: "cc2"
}, {
id: 3,
name: "cc1"
}, {
id: 4,
name: "cc1"
}]
},
methods: {
test: (arr) => {
arr.forEach((el, index) => {
console.log(++el.id)
})
}
}
})
</script>