foo = foo || bar 的深入解析

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: foo = foo || bar 的深入解析

前言

在JavaScript中,foo = foo || bar 是一种常见的编程模式,用于设置变量的默认值或者确保变量被赋值。这种写法利用了JavaScript中逻辑运算符的短路特性,即在逻辑运算中,一旦结果确定,就不再对后续的表达式进行计算。虽然这种写法简洁且高效,但它也有一些潜在的陷阱,需要开发者仔细理解。


用法

foo = foo || bar 的含义是:如果foo已经有值(并且值为真值),就保持foo的值不变;如果foo没有值(或者值为假值,如undefinednull0NaN''等),就将bar的值赋给foo


代码

function greet(name) {
  name = name || 'Guest';
  console.log('Hello, ' + name);
}
greet('Alice'); // 输出:Hello, Alice
greet();        // 输出:Hello, Guest

greet 函数接受一个参数 name,如果调用时没有提供这个参数,或者提供的参数是假值,那么 name 将被设置为默认值'Guest'


理解

这种写法的背后是JavaScript中逻辑运算符的短路特性。在使用逻辑或运算符 || 时,如果第一个操作数是真值,那么整个表达式的结果就是第一个操作数的值,第二个操作数将不会被计算;如果第一个操作数是假值,那么整个表达式的结果就是第二个操作数的值。

这种写法非常简洁,可以用一行代码实现变量的默认值设置,避免了使用更冗长的 if 语句。但是,它也有一些需要注意的地方。


注意点

  1. 只有在变量的值为假值时才会被赋予新值。这意味着,如果变量的值为 0''(空字符串)、NaNnullundefined 或者 false,它将被赋予新值。在某些情况下,这可能不是你想要的行为。
  2. 确保默认值是你期望的类型。由于JavaScript是一种弱类型语言,不同类型的值之间可以自由转换,所以你需要确保提供的默认值是正确的类型,以避免潜在的类型转换问题。
  3. 在使用对象或数组作为默认值时要小心。如果你使用对象或数组作为默认值,你需要确保它不会在函数调用之间共享。

结论

foo = foo || bar 是一种在JavaScript中设置变量默认值的简洁方法。它利用了逻辑运算符的短路特性,可以用一行代码代替更冗长的条件语句。然而,使用这种方法时需要注意确保默认值的类型正确,并且要注意对于假值的处理。在合适的场景下,这种写法可以使代码更加简洁和易读。

foo = foo || bar 是JavaScript中常见的一种编写方式,用于设置变量的默认值。这个表达式的行为可以从几个方面来理解:

  1. 逻辑 OR (||) 操作符: JavaScript中的逻辑 OR (||) 操作符用于执行逻辑或运算。它返回两个操作数中的第一个“真值”(truthy)操作数,或者如果两者都是“假值”(falsy),则返回第二个操作数。在JavaScript中,“真值”是指在布尔上下文中转换为true的值,“假值”是指在布尔上下文中转换为false的值。假值包括nullundefined0falseNaN和空字符串("")。
  2. 赋值操作: foo = foo || bar中的赋值操作是将foo || bar的结果赋给foo。如果foo是真值,foo将保持不变;如果foo是假值,foo将被赋予bar的值。
  3. 默认值设置: 这种编写方式通常用于设置变量的默认值。如果foo已经有一个真值,它将保持不变;否则,它将接收bar的值作为默认值。

举例来说,假设我们有以下代码:

let foo;
let bar = "hello";
foo = foo || bar;
console.log(foo);  // 输出 "hello"

在这个例子中,由于fooundefined(一个假值),foo会被赋予bar的值,即"hello"

这种编写方式是一种简洁的方法来确保变量有一个有效的值,尤其是在处理可能未定义的变量时。然而,这种方法可能不适用于所有情况,特别是当0false或空字符串等假值是有效的值时。在这些情况下,可能需要使用其他方法来设置默认值,例如使用条件运算符或if语句。

目录
相关文章
|
7月前
|
分布式计算 JavaScript 前端开发
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
|
5月前
|
前端开发 JavaScript
前端数组遍历循环的资料,let arr = [‘pink‘,‘red‘,‘blue‘] for (let k in arr){console.log(k),console.log(arr[k])}
前端数组遍历循环的资料,let arr = [‘pink‘,‘red‘,‘blue‘] for (let k in arr){console.log(k),console.log(arr[k])}
|
JavaScript 索引
JS数组常用方法(超级详细,含理解) push、pop、unshift、shift、splice、slice、concat、join、revres、indexOf、sort、filter、map
JS数组常用方法(超级详细,含理解) push、pop、unshift、shift、splice、slice、concat、join、revres、indexOf、sort、filter、map
335 0
|
JavaScript 前端开发
Node.js:Array.prototype.sort数组排序的使用
Node.js:Array.prototype.sort数组排序的使用
148 0
|
JavaScript 索引
js中exec,test,match,search,split等方法的使用
exec:对string进行正则处理,并返回匹配结果.array[0]为原字符串,array[i]为匹配在整个被搜索字符串中的位置。 test:测试string是否包含有匹配结果,包含返回true,不包含返回false。
80 0
关于"symbol lookup error xxxxx , undefined symbol"问题的解决方式
​ 今天在测试基于netlib实现的数据包处理模块时,突然提示symbollookup error gxio_mpipe_init , undefined symbol问题。通过查阅资料对于该问题大部分的问题原因都是动态库的版本过旧,导致应用程序找不到对应的符号而引起的。
1064 0
|
JavaScript
JS中判断null、undefined与NaN的方法
JS中判断null、undefined与NaN的方法 1.判断undefined: 说明:typeof 返回的是字符串,有六种可能: "number"、"string"、"boolean"、"object"、"function"、"undefined" /* 1.
1200 0
|
算法 JavaScript
第197天:js---caller、callee、constructor和prototype用法
一、caller---返回函数调用者 1 //返回函数调用者 2 //caller的应用场景 主要用于察看函数本身被哪个函数调用 3 function fn() { 4 //判断某函数是否被调用 5 if (fn.
1345 0