首页 > 编程语言 >一个常见的 JavaScript 解构陷阱

一个常见的 JavaScript 解构陷阱

时间:2023-11-14 20:56:14浏览次数:45  
标签:数组 JavaScript confList 解构 fetchResult 陷阱 null data

在日常的 JavaScript 编码中,我们经常使用解构语法来提取对象中的属性。假设我们有一个名为 fetchResult 的对象,代表从接口返回的数据,其中包含一个字段名为 data

const fetchResult = {
  data: null
};

在提取 data 字段时,为了避免接口未返回该字段而导致的问题,我们常常会使用解构语法,并给予该字段一个默认值,比如 []。代码看起来可能会像这样:

const { data: confList = [] } = fetchResult;

这个操作的意图是将 fetchResult 中的 data 字段解构并赋值给变量 confList,同时,若 data 字段未被返回,我们期望将其默认值设置为空数组 []

然而,这里隐藏了一个容易忽略的陷阱。尽管我们为 confList 指定了默认值为 [],但是当 data 字段的值为 null 时,解构语法并不会触发默认值的赋值,而是保留了 null 的值。这导致了一个潜在的问题:

即使我们尝试使用 confList 作为数组来调用一些数组方法,由于其实际值是 null,这样的操作将会触发错误。

为了解决这个问题,我们需要在解构后手动检查并将 null 值转换为默认的空数组,以确保 confList 始终是一个数组,从而避免可能出现的错误:

const fetchResult = {
  data: null
};

const { data } = fetchResult;
const confList = Array.isArray(data) ? data : [];

这种方式通过直接检查 data 字段是否为数组,然后手动设定 confList 变量,确保了即使 data 字段的值为 null 或者未定义,confList 也会被正确地设定为一个空数组,避免了因为 null 值导致的错误。这样我们可以放心地使用 confList 并调用其中的数组方法,而不会触发意外的异常。

标签:数组,JavaScript,confList,解构,fetchResult,陷阱,null,data
From: https://www.cnblogs.com/azoux/p/17832485.html

相关文章

  • JavaScript知识点
    JavaScript提供的异步模式1、回调函数(callbacks)2、事件监听3、Promise对象call、apply的区别call和apply都是改变this指向的方法,区别在于call可以写多个参数,而apply只能写两个参数,第二个参数是一个数组,用于存放要传的参数。call和apply的好处用call和apply实现更好的继承和扩展,更......
  • 前端学习-JavaScript学习-JavaScript高级程序设计-第2章笔记
    在HTML中使用JavaScript元素<script>元素元素属性MDN<script>:脚本元素属性使用状态描述charset可选、少用字符集defer可选、少用表示脚本可以延迟至文档完全被解析后实行,部分浏览器不支持language废弃编写代码使用的语言src可选包含要执行代码的......
  • JavaScript实现Date( ) ——日期格式化的三种常用方法
    Date()介绍Date()基本使用Date()日期对象是构造函数,必须使用new来调用我们的日期对象。若Date()没有参数时返回当前时间若Date(timer)有参数时返回参数设置的时间参数写法:'2012-2-208:54:32'(字符串)返回值格式:SunMay28202323:36:28GMT+0800(中国标准时间)......
  • JavaScript slice 方法用法与实例解析
    在JavaScript中,slice()是一个常用的数组方法,用于从现有数组中提取一部分元素,然后返回一个新的数组。它是一个非常有用的工具,可以帮助你在不改变原始数组的情况下操作数组的子集。本文将介绍slice()的基本概念、使用方法、实践案例和互动练习,以帮助你更好地理解和掌握这一功能......
  • JavaScript - js生成 txt 文件
    JavaScript-js生成txt文件/***方法定义*/functiondownload(filename,text){varelement=document.createElement('a');element.style.display='none';varcontent=encodeURIComponent(text);element.setAttribute('href&#......
  • JavaScript 事件的类型
    单击事件:当用户单击HTML元素时,会触发单击事件,这对于创建响应式和交互式界面至关重要。它们经常用于按钮单击或链接导航等操作,从而增强整体用户体验。鼠标事件:鼠标事件捕获涉及鼠标的用户操作,例如在元素上移动(鼠标悬停)、离开元素(鼠标移出)。为悬停效果或复杂的拖放交互等功能提供......
  • JavaScript使用JS从JSON获取信息并遍历输出到网页展示信息------前端
    遍历JSON获取数据<!DOCTYPEhtml><!--这是HTML的注释--><htmllang="en"id="myHtml"> <head> <!--这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码--> <metacharset="UTF-8"> <metaname="viewport"......
  • JavaScript--tomcat的下载和使用
     tomcat的配置 项目打包经常打包成war包,war包放到webspps中可以自动解压 ......
  • JavaScript 基础知识
    运营商 运算符对数据进行操作。它们有多种形式,包括算术运算符(+、-、*、/)、比较运算符(==、!=、<、>)和逻辑运算符(&&、||、!) 控制流语句 控制流语句根据特定条件控制代码块的执行顺序。它们包括if-else语句、switch语句和循环。数组 数组是数据项的有序集合。它们允许您......
  • JavaScript复习——04 事件
    事件对象事件对象是由浏览器在外面触发事件的时候创建的,这个对象封装了各种事件相关的各种信息例如:鼠标的位置键盘的按键浏览器创建事件对象后,会将事件对象作为响应参数传递在DOM类型中有多种不同类型的事件对象,但是他们都一个祖先Eventevent.clientX:获取鼠标的X轴坐标......