写点什么

如何在 JavaScript 中处理 null 和 undefined?

  • 2019-12-10
  • 本文字数:4485 字

    阅读完需:约 15 分钟

如何在JavaScript中处理null和undefined?

在 JavaScript 的开发工作中,许多开发人员都头疼的一个问题就是处理可选值。怎样才能最大程度减少由 null、undefined,或在运行时未初始化的值所引发的错误,有哪些最佳策略呢?


有些语言针对这类情况有内置的解决方案。在某些静态类型的语言中,你可以认定 null 和 undefined 是非法值,并且让你的编程语言在编译时抛出 TypeError。但即使在这种语言中,也不能阻止 null 输入在运行时流入程序。


为了更好地处理这种问题,我们需要了解这些值的来源。以下是一些最常见的来源:


  • 用户输入;

  • 数据库 / 网络记录;

  • 未初始化状态;

  • 无法返回任何内容的函数。

用户输入

在处理用户输入时,验证是第一道也是最好的防线。我经常依靠 schema 验证器来完成这项工作。比如,你可以试试 react-jsonschema-form

对输入的记录做 hydrate 处理

我总是会把从网络、数据库或用户输入中获得的输入传递给一个 hydrating 函数。例如,我会使用可以处理 undefined 值的 redux 动作创建者来 hydrate 用户记录:


https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44


const setUser = ({ name = 'Anonymous', avatar = 'anon.png' } = {}) => ({  type: setUser.type,  payload: {    name,    avatar  }});setUser.type = 'userReducer/setUser';
复制代码


有时,你需要根据数据的当前状态显示不同的内容。如果页面可以在所有数据初始化完毕之前显示,就可能会遇到这种情况。例如,当你向用户显示资金余额时,有时可能会在加载数据之前显示余额为零。这种事情我见过很多次,这会让用户感到不安。你可以创建一些自定义数据类型,这些数据类型根据当前状态生成不同的输出:


const createBalance = ({  // 默认状态  state = 'uninitialized',  value = createBalance.empty} = {}) => createBalance.isValidState(state) && ({  __proto__: {    uninitialized: () => '--',    initialized: () => value,    format () {      return this[](value);    },    getState: () => state,    set: value => {      const test = Number(value);      assert(!Number.isNaN(test), `setBalance Invalid value: ${ value }`);      return createBalance({        state: 'initialized',        value      });    }  }});createBalance.empty = '0';createBalance.isValidState = state => {  if (!['uninitialized', 'initialized'].includes(state)) {    throw new Error(`createBalance Invalid state: ${ state }`);  }  return true;};const setBalance = value => createBalance().set(value);const emptyBalanceForDisplay = createBalance()  .format();console.log(emptyBalanceForDisplay); // '--'const balanceForDisplay = setBalance('25')  .format(balance);console.log(balanceForDisplay); // '25'// 取消下列调用的注释前缀就能看到错误示例:// setBalance('foo'); // Error: setBalance Invalid value: foo// Error: createBalance Invalid state: THIS IS NOT VALID// createBalance({ state: 'THIS IS NOT VALID', value: '0' });
复制代码


上面的代码是一个状态机,其设计无法显示无效状态。首次创建余额数字时,它将被设置为一个 unintitialized 状态。如果你尝试在 uninitialized 状态时显示余额,则只会获得一个占位符值(“–”)。要调整这个设置,你必须调用.set 方法,或调用我们在 createBalance 下面定义的 setBalance 捷径来显式设置一个值。


该状态本身经过封装,以保护其免受外界干扰,这样其他函数就无法捕获它并将其设置为无效状态了。


注意:想知道为什么我们要使用字符串而不是数字吗?那是因为我用了精度很高的大数字符串来表示货币类型,以避免舍入错误,并能准确地表示加密货币交易中的数值(这类交易中的数值精度要求可能会非常高)。


如果你使用 Redux 或 Redux 架构,则可以使用 Redux-DSM 来声明状态机。

避免创建 null 和 undefined 值

在你自己的函数中,你可以尽量避免创建 null 或 undefined 值。我想到了很多 JavaScript 的内置方法来做到这一点,见下文。

避免 null

我从未在 JavaScript 中显式创建 null 值,因为我觉得用两个不同的原始值来表示"这个值不存在",实在是没什么意义的事情。


自 2015 年开始 JavaScript 就支持默认值了,当你没有为相关参数或属性提供值时,它们就会填入默认值。这些默认值不适用于 null 值。根据我的经验,这通常会导致一个错误。为了避免这种陷阱,请不要在 JavaScript 中使用 null。


如果你希望处理未初始化的值或空值这类特殊情况,状态机是更好的选择,如前所述。

新的 JavaScript 功能

有几个功能可以帮助你处理 null 或 undefined 值。在撰写本文时,下面两个功能都是第 3 阶段的提案,将来你看到本文时这两个功能可能已经正式发布了。


目前,可选链(optional chaining)是第 3 阶段的提案。它的工作机制是这样的:


const foo = {};// console.log(foo.bar.baz); // throws errorconsole.log(foo.bar?.baz) // undefined
复制代码


(关于可选链的更多细节,可以参考前端之巅之前的一篇文章《了解 JavaScript 新特性:Optional Chaining》。

空位合并运算符

这也是准备添加到规范中的第 3 阶段提案,“空位合并运算符(Nullish Coalescing Operator)”基本上是“回退值运算符”的一种高大上的说法。如果左侧的值是 undefined 或 null,则其会等于右侧的值。它的工作机制是这样的:


let baz;console.log(baz); // undefinedconsole.log(baz ?? 'default baz');// default baz// Combine with optional chaining:console.log(foo.bar?.baz ?? 'default baz');// default baz
复制代码


目前提案尚未正式进入规范,所以你需要安装 @babel/plugin-proposal-optional-chaining 和 @ babel/plugin-proposal-nullish-coalescing-operator。

使用 Promise 实现异步 Either

如果某个函数可能不返回值,则最好将其包装在一个 Either 中。在函数式编程中,Either monad 是一种特殊的抽象数据类型,它允许你附加两个不同的代码路径:成功路径或失败路径。JavaScript 具有内置的异步 Either monad-ish 数据类型,称为 Promise。你可以用它对 undefined 值进行声明式错误分支:


const exists = x => x != null;const ifExists = value => exists(value) ?  Promise.resolve(value) :  Promise.reject(`Invalid value: ${ value }`);ifExists(null).then(log).catch(log); // Invalid value: nullifExists('hello').then(log).catch(log); // hello
复制代码


你可以根据需要编写一个同步版本,但这里我还用不到那一步,就留给你做练习吧。如果你在 functor 和 monad 方面有良好的基础,那么这个过程会很容易。如果这听起来很吓人,那也不用担心,只用 Promise 即可。它们是内置的,并且在大多数情况下都可以正常工作。

使用数组实现 Maybe

数组实现了一个 map 方法,这个方法会使用一个函数应用在数组的每个元素上。如果数组为空,则这个函数永远不会被调用。换句话说,JavaScript 中的数组可以充当 Haskell 等语言中的 Maybe 角色。

Maybe 是什么?

Maybe 是一种特殊的抽象数据类型,它封装了一个可选值。数据类型有两种形式:


  • Just——包含一个值的 Maybe;

  • Nothing——没有值的 Maybe。


下面是具体的机制:


const log = x => console.log(x);const exists = x => x != null;const Just = value => ({  map: f => Just(f(value)),});const Nothing = () => ({  map: () => Nothing(),});const Maybe = value => exists(value) ?  Just(value) :  Nothing();const empty = undefined;Maybe(empty).map(log); // does not log
复制代码


这只是一个示例,用来演示这个概念。你可以围绕 maybe 建立一整套有用的函数库,实现 flatMap 和 flat 之类的操作(例如,在编写多个返回 Maybe 的函数时避免 Just(Just(value)) 这种情况)。但是 JavaScript 已经有一种数据类型可以直接实现这些功能,因此我通常会这样做:使用数组。


如果你要创建一个可能会,或可能不会产生结果的函数(尤其是可能有多个结果的情况下),那么这种情况下最好的方法可能就是返回一个数组。


const log = x => console.log(x);const exists = x => x != null;const arr = [1,2,3];const find = (p, list) => [list.find(p)].filter(exists);find(x => x > 3, arr).map(log); // does not log anythingfind(x => x < 3, arr).map(log); // logs 1
复制代码


我发现在空列表上不会调用 map,这对避免 null 和 undefined 值来说非常有用,但是请记住,如果数组包含 null 和 undefined 值,它将使用这些值调用该函数,因此如果你在运行的函数可能会产生 null 或 undefined,你需要将其从返回的数组中过滤出来,如上所示。这可能会改变集合的长度。


在 Haskell 中,有一个函数 maybe(就像 map 一样)将一个函数应用于一个值上。但是该值是可选的,并封装在 Maybe 中。我们可以使用 JavaScript 的 Array 数据类型做基本上相同的事情:


// maybe = b => (a => b) => [a] => bconst maybe = (fallback, f = () => {}) => arr =>  arr.map(f)[0] || fallback;// turn a value (or null/undefined) into a maybeArrayconst toMaybeArray = value => [value].filter(exists);// maybe multiply the contents of an array by 2,// default to 0 if the array is emptyconst maybeDouble = maybe(0, x => x * 2);const emptyArray = toMaybeArray(null);const maybe2 = toMaybeArray(2);// logs: "maybeDouble with fallback: 0"console.log('maybeDouble with fallback: ', maybeDouble(emptyArray));// logs: "maybeDouble(maybe2): 4"console.log('maybeDouble(maybe2): ', maybeDouble(maybe2));
复制代码


maybe 需要一个回退值,然后是一个映射到 maybe 数组上的函数,然后是一个 maybe 数组(包含一个值,或者为空的数组),最后返回将该函数应用于数组内容的结果,或者在数组为空时返回回退值。为了方便起见,我还定义了 toMaybeArray 函数,并 curry 了 maybe 函数来让它更显眼一些,方便展示。


如果你想在生产代码中执行类似的操作,我已经创建了一个经过单元测试的开源库,可以简化你的工作。这个库叫 Maybearray。与其他 JavaScript Maybe 库相比,Maybearray 的优势在于它使用原生 JavaScript 数组来表示值,因此你不必对其进行任何特殊处理,也用不着来回转换。当你在调试中遇到 Maybe 数组时,你不必问“这是什么奇怪的类型?!”,它只是一个值的数组或一个空数组,你已经看过一百万遍了。


作者介绍:


Eric Elliott 是《撰写软件》和《编写 JavaScript 应用程序》这两本书的作者。他是 EricElliottJS.com 和 DevAnywhere.io 的共同创始人,并教授开发人员基本的软件开发技能。他创建并指导数字货币项目的开发团队,并为 Adobe Systems、Zumba Fitness、《华尔街日报》、ESPN、BBC 和包括 Usher、Frank Ocean、Metallica 等在内的顶级唱片艺术家贡献了自己的软件经验。他与漂亮的妻子一起过着隐士般的生活。


原文链接:


https://medium.com/javascript-scene/handling-null-and-undefined-in-javascript-1500c65d51ae


2019-12-10 13:303008
用户头像
王文婧 InfoQ编辑

发布了 126 篇内容, 共 71.3 次阅读, 收获喜欢 275 次。

关注

评论

发布
暂无评论
发现更多内容

公共数据如何兼顾开放利用和隐私安全合规?

Jessica@数牍

数据安全 隐私计算 公共数据开放 数据开放和利用

浅谈云原生边缘计算框架演进

谐云

7月月更

兆骑科创海外高层次人才引进平台,创业赛事活动路演

兆骑科创凤阁

高层次人才引进平台

就这一次!详细聊聊分布式系统的那些技术方案

Java全栈架构师

程序员 面试 分布式 系统设计 架构师

融云直播 SDK 玩法翻新,入围信通院「实时互动创新应用优秀案例」

融云 RongCloud

直播 sdk

2022最新最全Java面试八股文(整整1685页,14个技术栈,20余万字)

Java全栈架构师

Java spring 面试 JVM 消息中间件

深度解析Java静态代理与动态代理模式的实现

了不起的程序猿

Java java程序员 java编程

6种方法帮你搞定SimpleDateFormat类不是线程安全的问题

华为云开发者联盟

高并发 开发

kudu设计-tablet

矛始

kudu tablet

图的遍历的定义以及深度优先搜索和广度优先搜索(一)

乔乔

7月月更

基础到高级涵盖11个技术,Alibaba最新出品711页Java面试神册真香

程序员小毕

Java 面试 程序人生 JVM 中间件

一文讲清楚SpringBoot六种读取配置方式

王小凡

Java 程序员 Sprint Boot

导数、微分、偏导数、全微分、方向导数、梯度的定义与关系

矛始

高数 导数 微分

极大似然估计

矛始

概率 极大似然估计

机器视觉在服务机器人中的应用

优必选科技

机器人

Spark统一内存划分

矛始

spark 统一内存

有一说一,阿里P7的薪资待遇是真的香

程序员小毕

Java 程序员 程序人生 后端 架构师

[ Kitex 源码解读 ] 服务发现

baiyutang

Go 微服务架构 kitex CloudWeGo

2022 云原生编程挑战赛火热报名中!看导师如何拆解 Serverless 赛题?

阿里巴巴云原生

阿里云 Serverless 云原生编程挑战赛

面试OPPO,16道题甩过来,我人傻了

Java永远的神

Java 程序员 面试 分布式 项目

深圳云管平台厂商哪家好?有哪些功能?咨询电话多少?

行云管家

云计算 云管平台

MySQL精品学习资源合集 | 含学习教程笔记、运维技巧、图书推荐

墨天轮

MySQL 数据库 学习笔记 运维技术

基础+框架+数据库+系统设计+算法,2022阿里最新Java面试突击手册我粉了

Java永远的神

Java 数据库 spring 面试 JVM

RocketMQ—(总结)一篇就搞懂RocketMQ

IT巅峰技术

Spark数据格式UnsafeRow

矛始

spark 内存 UnsafeRow

菜鸟 CPaaS 平台微服务治理实践

阿里巴巴云原生

阿里云 微服务 云原生 CPaaS 菜鸟

模块八作业 - 消息数据 MySQL 表设计

Elvis FAN

工赋开发者社区 | 定了!就在7月30日!

工赋开发者社区

技术分享 工业 峰会

如何借助自动化工具落地DevOps|含低代码与DevOps应用实践

云智慧AIOps社区

开源 DevOps 低代码平台 开发与运维

如何通过学会提问,成为更加优秀的数据科学家

Baihai IDP

AI 数据科学 职业发展

如何组装一个注册中心

捉虫大师

注册中心 7月月更 后端启示录

如何在JavaScript中处理null和undefined?_大前端_Eric Elliott_InfoQ精选文章