如何从对象中获取值,附默认值

在日常的前端开发中,我们经常需要从对象中获取某个属性的值,并且希望当这个属性不存在时有一个默认值。本文将介绍如何使用 JavaScript 来实现这个功能。

1. 直接访问属性

JavaScript 中,我们可以通过对象的属性名直接访问该属性的值。如果该属性存在,那么就会返回它的值,否则会返回 undefined。例如:

----- ------ - -
  ----- --------
  ---- --
--

------------------------- -- ----------
--------------------------- -- ------------

因此,我们可以通过简单的 if 判断来给没有值的属性设置一个默认值,例如:

----- ------ - -
  ----- --------
  ---- --
--

-- -------------- --- ---------- -
  ------------- - ----------
-

--------------------------- -- ------------

但是,上面的代码显得比较冗长,也不够优雅。下面我们将介绍更好的方式。

2. 使用逻辑或运算符

JavaScript 中的逻辑或运算符 || 可以用来实现获取属性值时的默认值。具体来说,当左侧表达式(即属性值)为假值时,它会返回右侧表达式(即默认值)。例如:

----- ------ - -
  ----- --------
  ---- --
--

------------------------- -- ----------- -- ------------

这个写法的意思是,如果 person.gender 为假值(如 undefinednull),那么返回 'unknown';否则返回 person.gender 的值。

需要注意的是,如果属性值为 0 或空字符串 '',它们也会被认为是假值。因此,在使用逻辑或运算符时需要特别小心。

3. 使用 ES6 中的默认参数

在 ES6 中,函数的参数可以有默认值。我们可以利用这个特性来实现获取属性值时的默认值。例如:

----- ------ - -
  ----- --------
  ---- --
--

-------- -------------- ------------ - ---------- -
  ------ ---------- -- -------------
-

------------------------------- -- ------------

可以看到,通过给参数 defaultValue 赋一个默认值,我们就可以直接使用逻辑或运算符来获取属性值了。这样的好处是,使得代码更加简洁易懂,并且方便复用。

总结

本文介绍了三种从对象中获取值时设定默认值的方法:直接访问属性、使用逻辑或运算符和使用 ES6 默认参数。其中,后两种方式更适合大规模应用,可以使代码更加优雅、简洁。在实际开发中,我们应该根据具体需求选择适合的方式。

示例代码见下:

-- ------
----- ------- - -
  ----- --------
  ---- --
--

-- --------------- --- ---------- -
  -------------- - ----------
-

---------------------------- -- ------------


-- --------
----- ------- - -
  ----- ------
  ---- ---
  ------- --
--

-------------------------- -- ----------- -- ------------


-- -- --- ----
----- ------- - -
  ----- ----------
  ---- --
--

-------- -------------- ------------ - ---------- -
  ------ ---------- -- -------------
-

-------------------------------- -- ------------

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/27426