“AI 技术+人才”如何成为企业增长新引擎?戳此了解>>> 了解详情
写点什么

如何在 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:302939
用户头像
王文婧 InfoQ编辑

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

关注

评论

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

Qt项目第二弹-文件加解密之RSA

springIce

rsa qt openssl

《UNIX环境高级编程(第3版)》PDF

程序员李木子

Linux重启网卡报错Determining if ip address怎么解决?

百度搜索:蓝易云

云计算 Linux 运维 服务器 云服务器

ubuntu系统安装SGE教程

百度搜索:蓝易云

Linux 运维 服务器 云服务器 SGE

起心动念 | 生成式 AI 开发实践系列的开端

亚马逊云科技 (Amazon Web Services)

开源 生成式人工智能

论文分享:利用对象存储进行高性能数据分析

Greptime 格睿科技

数据库 rust 对象存储 时序数据库

淘宝app端商品详情数据采集

tbapi

听懂一句AI实话,做成一件零售实事

脑极体

AI

Java 数据类型详解与类型转换技巧

小万哥

Java 程序人生 编程语言 软件工程 后端开发

【揭秘SAML协议 — Java安全认证框架的核心基石】 从初识到精通,带你领略Saml协议的奥秘,告别SSO的迷茫与困惑

洛神灬殇

SAML2.0 SSO 单点登录 后端技术 2024年第三十篇文章

投资更好的管理会计系统,探索全面预算管理的奥秘

智达方通

管理会计 全面预算管理

河南省政务民生、本地生活、新闻等垂域应用启动鸿蒙原生应用开发

最新动态

Linux中如何检查或删除文本文件重复出现的行列?

百度搜索:蓝易云

Linux 运维 云服务器 sort uniq

Amazon Bedrock 知识库现可提供完全托管的 RAG 体验

亚马逊云科技 (Amazon Web Services)

人工智能 API

商汤科技日日新SenseNova 4.0发布:这⼀次,带来全新的AI体验!

Lily

关键词搜索拼多多商品列表数据接口Python

tbapi

拼多多API接口 关键词搜索拼多多API接口 拼多多商品列表数据接口

新增模型检验,指标自动评估模型效果|ModelWhale 版本更新

ModelWhale

人工智能 机器学习 大数据 数据分析 模型训练

专有云 ABC Stack 联合银联商务打造金融级云平台,入选《2024 央国企上云用云典型案例》

Baidu AICLOUD

专有云 金融云

EigenLayer火的原因还有介绍

币离海

以太坊 EigenLayer 质押

2024-02-03:用go语言,你有 k 个背包。给你一个下标从 0 开始的整数数组 weights, 其中 weights[i] 是第 i 个珠子的重量。同时给你整数 k, 请你按照如下规则将所有

福大大架构师每日一题

福大大架构师每日一题

想好新年去哪了吗?合合信息扫描全能王用AI“留住”年味

合合技术团队

文字识别 新年计划 图像处理 合合信息 扫描全能王

【AIOps】日志分析领域难题:如何对混合日志进行自动化解析?

华为云PaaS服务小智

人工智能 软件开发 华为云

容器化对数据库的性能有影响吗?

小猿姐

数据库 Kubernetes 容器化

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