forEach
forEach() 方法对数组的每个元素执行一次给定的函数。
常见应用场景 :当我们对数组的元素进行处理时(例如:增加元素,元素值改变),给数组对象中的每一个对象添加字段
let arr = [
{age: 18, name: 'SPJ'},
{age: 18, name: 'SPJ'},
{age: 18, name: 'SPJ'},
]
let newArr = arr.forEach(item => item.age = 20)
console.log(arr)
console.log(newArr) //forEach 是修改当前的数组,没有创建新的数组,没有返回值
map
map 方法会创建一个新的数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
常见应用场景:当我们调用接口时,给接口传参数时,数组数据不满足接口的数据格式,若当前数组数据和页面组件绑定,那么我们就不能直接使用forEach 改变当前数组,就需要使用map 在当前数组数据基础下,返回新的数组数据。
let arr = [
{age: 18, name:'SPJ',ID:'1234567'},
{age: 18, name:'SPJ',ID:'1234567'},
{age: 18, name:'SPJ',ID:'1234567'},
]
let newArr = arr.map(item => {
return {
...item,
id: item.name,
ID: null
}
})
console.log(arr)
console.log(newArr)
filter
filter 方法创建一个新数组, 其包含 符合函数条件的所有元素
常见应用场景:对原数组筛选出符合条件的值,当我们提交接口时,需要提交符合一定条件的元素组成的数组
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(item => item.length > 6);
console.log(result)
every
every() 方法用来判断一个数组内的所有元素是否都满足某个指定的条件(回调函数)。
使用场景:当我们进行逻辑操作时,我们会根据某个数组是否都满足某个条件,来进行不同的操作,就会用到这个函数
let everyArr = [
{
name: "张三",
num: 60
},
{
name: "张三",
num: 50
}
]
let res = everyArr.every(item=> item.num > 30)
some
some() 方法是否至少有1个元素满足某个指定的条件
使用场景:经常用于判断数组中元素是否有一个满足某个条件,进行不同的操作
let everyArr = [
{
name: "张三",
num: 60
},
{
name: "张三",
num: 50
}
]
let res1 = everyArr.some(item=> item.num > 50)
reduce
-
计算数组中所有值的总和/最值
-
数组去重
-
将二维数组转化为一维
-
计算数组中每个元素出现的次数
-
过滤和映射大数据集,性能更佳的实践
const data = [1, 2, 3];
// 找出最大值
const max = data.reduce((acc, item) => {
return (acc > item) ? acc : item
});
//计算总值
const total = data.reduce((acc, item) => {
return acc += item
});
console.log(max)
console.log(total)
//数组去重
const numberArray = [1,3,4,5,4,5,3,4]
const stringArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e']
const delRepetition = (accumulator, currentValue)=> {
if (accumulator.indexOf(currentValue) === -1) {
accumulator.push(currentValue)
}
return accumulator
}
const repNumberArray = numberArray.reduce(delRepetition,[])
const repStringArray = stringArray.reduce(delRepetition,[])
console.log("The repNumberArray is: ", repNumberArray); //The repNumberArray is: [1, 3, 4, 5]
console.log("The repStringArray is: ", repStringArray); //The repStringArray is: ["a", "b", "c", "e"]
//第二种数组去重的方法
let newARRAY = Array.from(new set(numberArray))
//将二维数组转化成一维数组
const flattened = [[0, 1], [2, 3], [4, 5]].reduce(
( acc, cur ) => acc.concat(cur), []);
console.log("flattened: ", flattened); //flattened: [0, 1, 2, 3, 4, 5]
//统计数组中每个元素出现的次数
const initialValue = {};
const reducer = (tally, vote) => {
if (!tally[vote]) {
tally[vote] = 1;
} else {
tally[vote] = tally[vote] + 1;
}
return tally;
};
const votes = [
"vue",
"react",
"angular",
"vue",
"react",
"angular",
"vue",
"react",
"vue"
];
const result = votes.reduce(reducer, initialValue);
from
将类数组对象转化成数组
会创建一个新的数组
let obj = {
0: 1,
1: 2,
2: 3,
length:3
}
let newArr = Array.from(obj,function (item,index) {
return {
name: this.name + item,
id: index
}
},{name:'苏沛杰'})
console.log(newArr)