博客

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

1. 计算数组中所有值的总和/最值

2. 数组去重

3. 将二维数组转化为一维

4. 计算数组中每个元素出现的次数

5. 
   过滤和映射大数据集，性能更佳的实践
   

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)