原文地点:
https://codeburst.io/writing-javascript-with-map-reduce-980602ff2f2f作者:
Shivek Khurana简介:本文是一份编写文雅、简约和函数式ES6代码的快速清单。
现如今JavaScript有许多问题,然则词法并非其中之一。不管是三元运算符,照样map/reduce等ES6要领,亦或是扩大运算符(…)都是异常壮大的东西。
除了能够保证可读性以及准确性,这些要领另有助于完成不可变性,由于这些要领会返回新的数据,而处置惩罚前的原始数据并不会被修正。如许的处置惩罚作风很合适redux以及Fractal。
话不多说,让我们最先吧。
一个简朴的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, 6, 7];
const twoXIntegers = integers.map(i => i*2);
// twoXIntegers现在是 [2, 4, 6, 8, 12, 14],而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 = ['Positioning by Trout', 'War by Green'];
const newBooks = [...books, 'HWFIF by Carnegie'];
// newBooks are now ['Positioning 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]
译者注:这里我猜想作者是不想修正本来的数组所以运用的filter,然则不能明白为何要举购物车的例子。
向对象数组增加新元素
const books = [];
const newBook = {title: 'Alice in wonderland', id: 1};
const updatedBooks = [...books, newBook];
//updatedBooks的值为[{title: 'Alice in wonderland', id: 1}]
books这个变量我们没有给出定义,然则没关系,我们运用了扩大运算符,它并不会因而失效。
为对象新增一组键值对
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'}
);
/*
updatedPosts is now
[
{id: 1, title: 'Updated Title 1'},
{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'}
译者注:新鲜啊,这不就是之前find的简朴实践吗?
删除目的对象的一组属性
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。
作者总结
有了这些壮大的要领,我愿望你的代码会变得愈来愈稳固和敷衍了事。当你的团队中有一个新的开发者加入时,能够向他引荐这篇文章,让他相识之前不知道的隐秘。
这个翻译项目才最先,以后会翻译愈来愈多的作品。我会勤奋对峙的。