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


Posted in Javascript onJanuary 15, 2019

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

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"

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门学习书籍推荐
Jun 12 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
js确定对象类型方法
Mar 30 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
js快速排序的实现代码
Dec 08 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
npm qs模块使用详解
Feb 07 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 #Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 #Javascript
JS高阶函数原理与用法实例分析
Jan 15 #Javascript
JS立即执行函数功能与用法分析
Jan 15 #Javascript
vue-cli 目录结构详细讲解总结
Jan 15 #Javascript
webpack file-loader和url-loader的区别
Jan 15 #Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 #jQuery
You might like
PHP 七大优势分析
2009/06/23 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
python实现学生管理系统
2018/01/11 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
仓库管理制度
2014/01/21 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
2014年审计工作总结
2014/11/17 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
回复函格式及范文
2015/07/14 职场文书
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python
Tomcat弱口令复现及利用
2022/05/06 Servers