内容基本是今年从其他大神的文章学习到的东西。出处在底下。
1、Array.includes 与条件判断
一般我们判断或用 ||
function test(fruit){ if(fruit == "apple" || fruit == "strawberry"){ console.log("red"); } }
如果我们有更多水果
function test(fruit){ const redFruits =["apple", "strawberry","cherry","cranberries"]; if(redFruits.includes(fruit)){ console.log("red"); } }
2、Set 与去重
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构。
数组去重
const arr = [3,5,2,2,5,5]; const unique = [...new Set(arr)]; //[3,5,2]
Array.from 方法可以将 Set 结构转为数组。我们可以专门编写使用一个去重的函数
function unique(array){ return Array.from(new Set(array)); } unique([1,1,2,3]); //[1,2,3]
字符串去重
let str = [...new Set("ababbc")].join(""); console.log(str); //abc
另外 Set 是如此强大,因此使用 Set 可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)。
let a = new Set(1,2,3); let b = new Set(4,3,2); // 并集 let union = new Set([...a,...b]); //// Set {1, 2, 3, 4} // 交集 let intersect = new Set([...a].filter(x => b.has(x))); // set {2, 3} // 差集 let difference = new Set([...a].filter(x => !b.has(x))); // Set {1}
3、Map 与字典类型数据
一般而已,JavaScript 实现字典数据是基于 Object 对象。但是 JavaScript 的对象的键只能是字符串。对于编程来说有很多不便。 ES6 提供了 Map 数据结构。它类似于 Object 对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值,字符串、数值、布尔值、数组、对象等等都可以当作键。
const resultMap = new Map() .Set(-1,{text:'小于',color:'yellow'}) .Set(0,{text:'等于',color:'black'}) .Set(-1,{text:'大于',color:'green'}) .Set(null,{text:'没有物品',color:'red'}) let state = resultMap.get(null); // {text:'没有物品',color:'red'}
Map 的遍历顺序就是插入顺序
const resultMap = new Map([["F","no"],["T","yes"]]); for(let key of map.keys){ console.log(key); } // "F" // "T" for(let value of map.value){ console.log(value); } // "no" // "yes"
4、函数式的方式处理数据
按照我的理解,函数式编程主张函数必须接受至少一个参数并返回一个值。所以所有的关于数据的操作,都可以用函数式的方式处理。
假设我们有这样的需求,需要先把数组 foo 中的对象结构更改,然后从中挑选出一些符合条件的对象,并且把这些对象放进新数组 result 里。
let foo = [ { name:"Stark", age:21 }, { name:"Jarvis", age:20 }, { name:"Pepper", age:16 } ]; //我们希望得到结构稍微不同,age大于16的对象: let result = [ { person:{ name:"Stark", age:21 }, friends:[] }, { person:{ name:"Jarvis", age:20 }, friends:[] }, { name:"Pepper", age:16 } ];
从直觉上我们很容易写出这样的代码:
let result = []; //有时甚至是普通的for循环 foo.forEach(function(person){ if(person.age > 16){ let newItem = { person:person, friends:[] }; result.push(newItem); } }); //使用函数式的写法,可以优雅得多 let result = foo .filter(person => person.age > 16) .map(person => ({ person:person, friends:[] })) // 数组求和 const arr = [3,5,2,2,5,5]; //不优雅 function sum(arr){ let x = 0; for(let i = 0; i< arr.length; i++){ x += arr[i]; } return x; } sum(foo); //优雅 foo.reduce((a,b) => a+b);
5、compose 与函数组合
以下代码称为组合 compose
const compose = function( f, g ) { return function( x ) { return f ( g( x )); }; };
由于函数式编程大行其道,所以现在将会在 JavaScript 代码看到大量的箭头()=>()=>()=>的代码。 ES6 版本 compose
const compose = ( f , g ) => x => f ( g ( x ));
在 compose 的定义中, g 将先于 f 执行,因此就创建了一个从右到左的数据 流。这样做的可读性远远高于嵌套一大堆的函数调用.
我们选择一些函数,让它们结合,生成一个崭新的函数。
reverse 反转列表, head 取列表中的第一个元素;
const head = arr => arr [ 0 ]; const reverse = arr => [].concat ( arr ).reverse(); const last = compose( head, reverse); last(["jumpkick","roundhouse","uppercut"]); // "uppercut"
但是我们这个这个compose不够完善,只能处理两个函数参数。redux源码有个很完备的compose函数,我们借鉴一下
function compose (...funcs){ if(funcs.length === 0){ return arg => arg } if(funcs.length === 1){ return funcs[ 0 ] } return funcs.reduce((a,b)=>(...args) => a ( b (...args))) }
有了这个函数,我们可以随意组合无数个函数。现在我们增加需求,组合出一个lastAndUpper函数,内容是先reverse 反转列表, head 取列表中的第一个元素, 最后toUpperCase大写。
const head = arr => arr[0]; const reverse = arr => [].concat(arr).reverse(); const toUpperCase = str => str.toUpperCase(); const last = compose(head,reverse); const lastAndUpper = compose(toUpperCase,head ,reverse,); console.log(last(["jumpkick","roundhouse","uppercut"])); // "uppercut" console.log(lastAndUpper(["jumpkick" ,"roundhouse" ,"uppercut"])) // "UPPERCUT"
参考文章:
- 一些小技巧让 JS 代码更优雅(https://zhuanlan.zhihu.com/p/20708731)
- 写好 JS 条件语句的 5 条守则(http://link.zhihu.com/?target=https%3A//mp.weixin.qq.com/s/0Dsvp-n8lTco930tvW4-1w)
- ECMAScript 6 入门(http://link.zhihu.com/?target=http%3A//es6.ruanyifeng.com/%23docs/set-map)
- JS 函数式编程指南(http://link.zhihu.com/?target=https%3A//legacy.gitbook.com/book/llh911001/mostly-adequate-guide-chinese/details)
- redux(http://link.zhihu.com/?target=https%3A//github.com/reduxjs/redux)