map和reduce，处理数据结构的利器

原文链接：https://mp.weixin.qq.com/s/QEwb3hL0k95bOC1OPfENwQ

一个简单的reduce 实践

当你想要将多个数据放进一个实例中时，你可以使用一个reducer

const posts=[
    {id:1,upVotes:2},
    {id:2,upVotes:89},
    {id:3,upVotes:1}
];
const totalUpvotes=posts.reduce((totalUpvotes,currentPost)=>
    totalUpvotes+currentPost.upVotes,//reducer函数
    0 //初始化投票数为0
);

console.log(totalUpvotes);//输出投票总数： 92

传给reduce的第一个参数函数还可以增加2个参数：

• 第三个参数：每个元素在原数据结构中的位置，比如数组下标。
• 第四个参数：调用reduce方法的数据集合，比如例子中的posts

所以，一个reducer的完美体现应该是下面这样的：

collection.reduce(
    (accumulator,currentElement,currentIndex,collectionCopy) =>
    {/*function body*/},
    initialAccumulatorValue);

一个简单的map实践

map方法的作用在于处理流式数据，比如数组。我们可以把它想象成所有元素都要经过的一个转换器

const integers=[1,2,3,4,5,6];
const twoIntegers=integers.map(i=>i*2);
//twoIntegers现在是[2,4,6,8,10,12],而integers不发生变化

一个简单的find实践

find返回数组或类似结构中满足条件的第一个元素。

const posts=[
    {id:1,title:'Title 1'},
    {id:2,title:'Title 2'}
];
//找出id 为1的posts
const title=posts.find(p=> p.id===1).title;

一个简单的filter实践

filter方法可以筛除数组和类似结构中不满足条件的元素，并返回满足条件的元素组成的数组。

const integers=[1,2,3,4,6,7];
const evenIntegers=integers.filter(i => i%2===0);
//evenIntegers的值为[2,4,6];

向数组中新增元素

如果你要创建一个无限滚动的ui组件，可以使用扩展运算符这个非常有用的词法

const books=['Postioning by Trout','War by Green'];
const newBooks=[...books,'HWFIF by Carnegie'];
//newBooks are now ['Postioning by Trout','War by Green','HWFIF by Carnegie'];

为一个数组创建视图

如果需要实现用户从购物车中删除物品，但又不想破坏原来的购物车列表，可以使用filter方法

const myId=6;
const userIds=[1,5,7,3,6];
const allButMe=userIds.filter(id => id!==myId);
// allButMe is [1,5,7,3]

向对象数组添加新元素

const books=[];
const newBook={ title: 'Alice in wonderland', id: 1};
const updatedBooks=[...books,newBook];
//updatedBooks 的值为[{title:'Alice in wonderland',id: 1}]

为对象新增一组键值对

const user={name: 'Shivek Khurana'};
const updatedUser={...user,age:23};
//updatedUser的值为：{name:'Shivek Khurana',age:23}

使用变量作为键名为对象添加键值对

const dynamicKey='wearsSpectacles';
const user={name:'Shivek Khurana'};
const updatedUser={...user,[dynamicKey]:true};
//updatedUser is {name:'Shivek Khurana',wearsSpectacles:true}

修改数组中满足条件的元素对象

const posts=[
    {id: 1,title:'Title 1'},
    {id: 2,title:'Title 2'}
];

const updatedPosts=posts.map(p =>p.id !==1?p:{...p,title:'Updated Title 1'});

/*
[
    {id: 1, title:'Updated Title1'}
    {id: 2, title:'Title 2'}
]
*/

找出数组中满足条件的元素

const posts=[
   {id: 1,title: 'Title 1'},
   {id: 2,title: 'Title 2'}
];

const postInQuestion=posts.find(p =>p.id===2);
// postinQuestion now holds {id: 2,title:'Title 2'}

删除目标对象的一组属性

const user={name:'Shivek Khurana',age:23,password:'SantaCl@use'};
const userWithoutPassword=Object.keys(user)
   .filter(key => key !=='password')
   .map(key => {[key]: user[key]})
   .reduce((accumulator,current) =>({...accumulator,...current}),{});

//userWithoutPassword becomes {name:'Shivek Khurana',age:23}

感谢Kevin Bradley提供了一个更优雅的方法：

const user ={name:'Shivek Khurana',age:23,password:'SantaCl@use'};
const userWithoutPassword=(({name,age}) =>({name,age}))(user);

将对象转换成请求串

const params ={color:'red',minPrice:8000,maxPrice:10000};
const query='?'+Object.keys(params)
   .map(k =>
       encodeURIComponent(k)+'='+encodeURIComponent(params[k])
).join('&');

//encodeURIComponent将对特殊字符进行编码
//query is now 'color=red&minPrice=8000&maxPrice=10000'

获取数组中某一对象的下标

const posts=[
    {id: 13, title:'Title 221'},
    {id: 5, title:'Title 102'},
    {id: 131, title:'Title 18'},
    {id: 55, title:'Title 234'}
]
//找到id 为131的元素
const requiredIndex=posts.map(p=>p.id).indexOf(131);

译者注：这里我觉得方法很繁琐。可以使用findIndex方法：const requiredIndex = posts.findIndex(obj=>obj.id===131);，同样能获取到下标值2。

详情：https://mp.weixin.qq.com/s/QEwb3hL0k95bOC1OPfENwQ