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 相关文章推荐
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
详解Vue2 添加对scss的支持
Jan 02 Javascript
vue data引入本地图片的两种方式小结
Nov 13 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下使用iconv需要注意的问题
2010/11/20 PHP
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
php页面缓存方法小结
2015/01/10 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
vue组件生命周期详解
2017/11/07 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
金融专业毕业生推荐信
2013/11/26 职场文书
党支部公开承诺书
2014/03/28 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
Python 中random 库的详细使用
2021/06/03 Python
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB