javascript map reduce filter 的使用场景

map 的使用和场景

1. js元素翻倍

const arrayNumbers = [1, 2, 3, 4, 5];
const doubles = (array) => array.map((num) => num * 2);
console.log(arrayNumbers); // [ 1, 2, 3, 4, 5 ]
console.log(doubles(arrayNumbers)); // [ 2, 4, 6, 8, 10 ]

2. js元素格式化

       const arrayUsers = [
       {
           id: 1,
           username: "Magic",
           address: "Johnson",
       },
       {
           id: 2,
           username: "Kobe",
           address: "Bryant",
       },
       {
           id: 3,
           username: "Lebron",
           address: "James",
       },
       {
           id: 4,
           username: "Kareem",
           address: "Abdul-Jabbar",
       },
       {
           id: 5,
           username: "Shaquille",
           address: "O’Neal",
       },
   ];
       const newUsers = arrayUsers.map((item) => item.username);
       console.log(arrayUsers);
       // [
       //     { id: 1, username: 'Magic', address: 'Johnson' },
       //     { id: 2, username: 'Kobe', address: 'Bryant' },
       //     { id: 3, username: 'Lebron', address: 'James' },
       //     { id: 4, username: 'Kareem', address: 'Abdul-Jabbar' },
       //     { id: 5, username: 'Shaquille', address: 'O’Neal' }
       //   ]
       console.log(newUsers); // [ 'Magic', 'Kobe', 'Lebron', 'Kareem', 'Shaquille' ]

3. js回调数组中的某些元素

const arrayNumbers = [1, 2, 3, 4];
const doubles = (nums) => nums.map((num) => (num % 2 === 1 ? num * 2 : num));
console.log(arrayNumbers); // [ 1, 2, 3, 4 ]
console.log(doubles(arrayNumbers)); // [ 2, 2, 6, 4 ]

4. js将字符串转换为数组

const language = "China";
const map = Array.prototype.map;
const letters = map.call(language, (eachLetter) => `${eachLetter}`);
console.log(letters); // [ 'C', 'h', 'i', 'n', 'a' ]

5. 在 React.js 中渲染列表

import React from "react";
import ReactDOM from "react-dom";
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li> {number} </li>);
ReactDOM.render(<ul>{listItems}</ul>, document.getElementById("root"));

reduce 的使用场景

1. js数组累加、累乘

let arr1 = [1,2,3,4,5]
console.log(arr1.reduce((x,y)=>x+y));// 15
console.log(arr1.reduce((x,y)=>x*y));// 120

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

let arr2 = ['a','b','c','d','a','b','c','a','b','a']
let num = arr2.reduce((prev,cur)=>{
    if(cur in prev){//如果prev(初始对象)包含cur(当前元素),数量累加
        prev[cur]++
    }else{
        prev[cur] = 1
    }
    return prev
},{});//初始值需要设置一个空的对象
console.log(num);// {a: 4, b: 3, c: 2, d: 1}

3. js数组去重

let arr3 = [1,2,3,4,3,2,1,2,3,1]
let remo = arr3.reduce((prev,cur)=>{
    if(prev.indexOf(cur)==-1){//如果prev没找到cur
        return prev.concat(cur)
    }else{
        return prev
    }
    // if(!prev.includes(cur)){//如果prev不包含cur
    //     return prev.concat(cur)
    // }else{
    //     return prev
    // }
},[]);// 初始值设置一个空数组
console.log(remo);// [1,2,3,4]

4. js将二维数组转化为一维数组

let arr4 = [[0, 1], [2, 3], [4, 5]]
let newArr1 = arr4.reduce((prev,cur)=>{
    return prev.concat(cur)
},[])
console.log(newArr1); // [0, 1, 2, 3, 4, 5]

5. js将多维数组转化为一维数组

let arr5 = [[0, 1], [2, 3], [4,[5,6,7,8]]]
function newArr(arr5){
    return arr5.reduce((prev,cur)=>prev.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr5)); //[0, 1, 2, 3, 4, 5, 6, 7, 8]

6. js累加对象数组中的值

let arr6 = [{a: 1}, {a:2}, {a:3}]
let sum = arr6.reduce( (prev, cur) => prev + cur.a ,0);
console.log(sum); // 6

7. js求数组中最大的值

let arr7 = [1,5,9,4,3,7,12]
let maxNum = arr7.reduce((prev,cur)=>{
    return Math.max(prev,cur);// Math.max方法可以求出给定参数中最大的数,Math.min方法可以求出给定参数中最小的数
})
console.log(maxNum);// 12

filter ES5 的使用场景

1. 假如有一个对象数组A，获取数组中的指定类型的对象放到B数组中,我们在ES5先进行for循环遍历数组，再进行if 判断，如果数组中某个对象的类型符合要求，push 到一个新数组中

var students=[
    {name:"vue",type:"lesson"},
    {name:"react",type:"lesson"},
    {name:"java",type:"lessonone"},
    {name:"node",type:"lessonone"},
];

for(var i=0;i<students.length;i++) {
        if(students[i].type==="lesson") {
            filter.students.push(students[i]);
        }
    }
console.log(filterstudents);

filter ES6 的使用场景

1. 使用filter 方法进行过滤,将数组的值放到迭代器函数中进行匹配，匹配成功，return 返回一个新的过滤后的数组

var students=[
    {name:"vue",type:"lesson"},
    {name:"react",type:"lesson"},
    {name:"java",type:"lessonone"},
    {name:"node",type:"lessonone"},
];
filter=students.filter(function(student){
    return  student.type==="lesson"
});
console.log( filter);