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"
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。