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中的取反再取反~~没有意义
Apr 06 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
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程序中的常见漏洞进行攻击
2006/10/09 PHP
php数据库密码的找回的步骤
2011/01/12 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
Python面向对象编程之继承与多态详解
2018/01/16 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
使用python+whoosh实现全文检索
2019/12/09 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
政法学院毕业生求职信
2014/02/28 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
双创工作实施方案
2014/03/26 职场文书
停电放假通知
2015/04/14 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
离职证明格式样本
2015/06/12 职场文书