2019 年编写现代 JavaScript 代码的5个小技巧(小结)
内容基本是今年从其他大神的文章学习到的东西。分享给大家:
1Array.includes与条件判断
一般我们判断或用||
//condition functiontest(fruit){ if(fruit=="apple"||fruit=="strawberry"){ console.log("red"); } }
如果我们有更多水果
functiontest(fruit){ constredFruits=["apple","strawberry","cherry","cranberries"]; if(redFruits.includes(fruit)){ console.log("red"); } }
2Set与去重
ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成Set数据结构。
数组去重
constarr=[3,5,2,2,5,5]; constunique=[...newSet(arr)]; //[3,5,2]
Array.from方法可以将Set结构转为数组。我们可以专门编写使用一个去重的函数
functionunique(array){ returnArray.from(newSet(array)); } unique([1,1,2,3]);//[1,2,3]
字符去重
letstr=[...newSet("ababbc")].join(""); console.log(str); //'abc'
另外Set是如此强大,因此使用Set可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)。
leta=newSet([1,2,3]); letb=newSet([4,3,2]); //并集 letunion=newSet([...a,...b]); //Set{1,2,3,4} //交集 letintersect=newSet([...a].filter(x=>b.has(x))); //set{2,3} //差集 letdifference=newSet([...a].filter(x=>!b.has(x))); //Set{1}
3Map与字典类型数据
一般而已,JavaScript实现字典数据是基于Object对象。但是JavaScript的对象的键只能是字符串。对于编程来说有很多不便。ES6提供了Map数据结构。它类似于Object对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值,字符串、数值、布尔值、数组、对象等等都可以当作键。
constresultMap=newMap() .set(-1,{text:'小于',color:'yellow') .set(0,{text:'等于',color:'black') .set(1,{text:'大于',color:'green') .set(null,{text:'没有物品',color:'red'}) letstate=resultMap.get(null) //{text:'没有物品',color:'red'}
Map的遍历顺序就是插入顺序
constmap=newMap([["F","no"],["T","yes"]]); for(letkeyofmap.keys){ console.log(key); } //"F" //"T" for(letvalueofmap.value()){ console.log(value); } //"no" //"yes"
4函数式的方式处理数据
按照我的理解,函数式编程主张函数必须接受至少一个参数并返回一个值。所以所有的关于数据的操作,都可以用函数式的方式处理。
假设我们有这样的需求,需要先把数组foo中的对象结构更改,然后从中挑选出一些符合条件的对象,并且把这些对象放进新数组result里。
letfoo=[ { name:"Stark", age:21 }, { name:"Jarvis", age:20 }, { name:"Pepper", age:16 } ]; //我们希望得到结构稍微不同,age大于16的对象: letresult=[ { person:{ name:"Stark", age:21 }, friends:[] }, { person:{ name:"Jarvis", age:20 }, friends:[] } ];
从直觉上我们很容易写出这样的代码:
letresult=[]; //有时甚至是普通的for循环 foo.forEach(function(person){ if(person.age>16){ letnewItem={ person:person, friends:[]; }; result.push(newItem); } })
使用函数式的写法,可以优雅得多
letresult=foo .filter(person=>person.age>16) .map(person=>({ person:person, friends:[] }));
数组求和
letfoo=[1,2,3,4,5]; //不优雅 functionsum(arr){ letx=0; for(leti=0;i15 //优雅 foo.reduce((a,b)=>a+b);//=>15
5compose与函数组合
以下代码称为组合compose
constcompose=function(f,g){ returnfunction(x){ returnf(g(x)); }; };
由于函数式编程大行其道,所以现在将会在JavaScript代码看到大量的箭头()=>()=>()=>的代码。
ES6版本compose
constcompose=(f,g)=>x=>f(g(x));
在compose的定义中,g将先于f执行,因此就创建了一个从右到左的数据流。这样做的可读性远远高于嵌套一大堆的函数调用.
我们选择一些函数,让它们结合,生成一个崭新的函数。
reverse反转列表,head取列表中的第一个元素;
consthead=arr=>arr[0]; constreverse=arr=>[].concat(arr).reverse(); constlast=compose(head,reverse); last(["jumpkick","roundhouse","uppercut"]); //"uppercut"
但是我们这个这个compose不够完善,只能处理两个函数参数。redux源码有个很完备的compose函数,我们借鉴一下。
functioncompose(...funcs){ if(funcs.length===0){ returnarg=>arg } if(funcs.length===1){ returnfuncs[0] } returnfuncs.reduce((a,b)=>(...args)=>a(b(...args))) }
有了这个函数,我们可以随意组合无数个函数。现在我们增加需求,组合出一个lastAndUpper函数,内容是先reverse反转列表,head取列表中的第一个元素,最后toUpperCase大写。
consthead=arr=>arr[0]; constreverse=arr=>[].concat(arr).reverse(); consttoUpperCase=str=>str.toUpperCase(); constlast=compose(head,reverse); constlastAndUpper=compose(toUpperCase,head,reverse,); console.log(last(["jumpkick","roundhouse","uppercut"])); //"uppercut" console.log(lastAndUpper(["jumpkick","roundhouse","uppercut"])) //"UPPERCUT"
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。