2019 年编写现代 JavaScript 代码的5个小技巧(小结)

内容基本是今年从其他大神的文章学习到的东西。分享给大家：

1 array.includes 与条件判断

一般我们判断或用 ||

// condition
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 map = 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: []
 }
];

从直觉上我们很容易写出这样的代码：

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: []
 }));

数组求和

let foo = [1, 2, 3, 4, 5];

//不优雅
function sum(arr) {
 let x = 0;
 for (let i = 0; i < arr.length; i++) {
  x += arr[i];
 }
 return x;
}
sum(foo); // => 15

//优雅
foo.reduce((a, b) => a + b); // => 15

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"

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。