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模板引擎介绍
Feb 28 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 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
第二节 对象模型 [2]
2006/10/09 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
python实现socket端口重定向示例
2014/02/10 Python
Python编写百度贴吧的简单爬虫
2015/04/02 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
详解python tcp编程
2020/08/24 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
java关于string最常出现的面试题整理
2021/01/18 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
李宁官方网店:中国运动品牌
2017/11/02 全球购物
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
internal修饰符起什么作用
2013/12/16 面试题
医学护理毕业生自荐信
2013/11/07 职场文书
办公室主任岗位职责
2013/11/08 职场文书
迟到检讨书大全
2014/01/25 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
交通安全标语
2014/06/06 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
文员岗位职责范本
2015/04/16 职场文书
对公司的意见和建议
2015/06/04 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
python中pandas对多列进行分组统计的实现
2021/06/18 Python