Vue.js数组高阶函数
1.forEach(遍历)
- forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。(没有返回值，将数组遍历)
- 注意： forEach() 不会对空数组进行检测。
- 注意： forEach() 原则上不会改变原始数组。
- 参数：function（currentValue、index、arr）
thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”。 - 回调函数参数：currentValue 必需。当前元素； index 可选。当前元素的索引值； arr 可选。当前元素所属的数组对象。
var a = [1,2,3,4,5];
var sum = 0;
a.forEach(function (value) {
sum += value
})
console.log(sum); //sum = 15
2.filter(过滤，返回新数组)
- filter() 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
- 注意： filter() 不会对空数组进行检测。
- 注意： filter() 不会改变原始数组。
- 参数：function（currentValue、index、arr）
thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”。
var a = [1,2,3,4,5];
var b = a.filter(function (value) {
return value > 3
})
console.log(b); //返回[4,5]
3.map()
- map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，函数按照原始数组元素顺序依次处理元素。
- 注意： map() 不会对空数组进行检测。
- 注意： map() 不会改变原始数组。
- 参数：function（currentValue、index、arr）
thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”。
var numbers = [65, 44, 12, 4];
console.log(numbers.map(function(item){
return item * 10;
}))
//输出[650,440,120,40]
4.reduce() 方法接收一个函数作为累加器
- reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。可以作为一个高阶函数，用于函数的 compose。
- 注意: reduce() 对于空数组是不会执行回调函数的。
- 参数：
function(total,currentValue, index,arr)- total 必需。初始值, 或者计算结束后的返回值；
- currentValue 必需。当前元素；
- index 可选。当前元素的索引值；
- arr 可选。当前元素所属的数组对象。
var arr = [
{price:30,count:2},
{price:40,count:3},
{price:50,count:5}];
//将输出总价
//当数组元素为引用类型时需要注意,
var sum = arr.reduce((preValue,val) => {
return preValue.price*preValue.count + val.price*val.count;
})
console.log(sum)
//输出NaN，以上是错误的使用方法
//**正确应该为**
var sum = arr.reduce((preValue,val) =>{
return preValue+ val.price*val.count;
},0)
console.log(sum)
//输出430
5.find()
- find() 为数组中的每个元素都调用一次函数执行，返回通过测试（函数内判断）的数组的第一个元素的值。
- 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 undefined
- 注意: find() 对于空数组，函数是不会执行的。
- 注意: find() 并没有改变数组的原始值。
- 参数：function（currentValue、index、arr）
thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”。
//举例
//定义一个数组，有两条数据
companyOptions: [
{
label: '饿了么',
value: 0,
},
{
label: '美团',
value: 1,
},
]
//需要找到value为1，label为美团的数组
let obj=this.companyOptions.find(item=>item.value===1)
6.findIndex()
- findIndex() 和find()方法及参数大致相同，区别在findIndex()返回通过测试（函数内判断）的数组的第一个元素的位置。
- 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 -1
//举例
//定义一个数组，有两条数据
companyOptions: [
{
label: '饿了么',
value: 0,
},
{
label: '美团',
value: 1,
},
]
//需要找到value为1，label为美团的数组
let index=this.companyOptions.findIndex(item=>{
if(item.value==value){
return true;
}
})
7.sort() 对数组的元素进行排序。数组在原数组上进行排序。
var a = [1,2,3];
var b = a.join("");
console.log(a); //[1, 2, 3],原数组不改变
console.log(b); //"123",变成字符串
8.reverse()数组逆序
var a = [1,2,3];
a.reverse();
console.log(a); //直接改变a数组的值 返回的是[3,2,1]
9.splice()
数组的起始位置为0
var a = [1,2,3,4,5,6,7,8];
var b = a.splice(1,2); //第一个参数是截取的起始位置（包括），第二个参数是截取的个数，之后的参数就是添加在元数组的新值
console.log(a); //返回[1, 4, 5, 6, 7, 8]
console.log(b); //返回[2, 3]
10.every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every()方法是只有数组中所以元素都满足某个条件才会返回true；some()方法是只要有满足条件的值，就返回true。
- 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
- 如果所有元素都满足条件，则返回 true。
- 注意： every() 不会对空数组进行检测。
- 注意： every() 不会改变原始数组。
- 参数：function（currentValue、index、arr）
thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”。
var a = [1,2,3,4,5];
a.every(function (value) {
return value < 10
}) //true
a.every(function (value) {
return value % 2 === 0
}) //false
11. some()
- some()方法用于检测数组中的元素是否满足指定条件（函数提供）。依次执行数组的每个元素。
- 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素，则返回false。
- 注意： some() 不会对空数组进行检测。
- 注意： some() 不会改变原始数组。
-参数：function（currentValue、index、arr）
thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”。