我知道我可以测试一个JavaScript变量,然后定义它,如果它是未定义的,但有没有某种方式说

var setVariable = localStorage.getItem('value') || 0;

这似乎是一种更清晰的方式,我很确定我在其他语言中见过这种情况。


当前回答

在我们的日子里,你实际上可以用JS来做你的方法:

// Your variable is null
// or '', 0, false, undefined
let x = null;

// Set default value
x = x || 'default value';

console.log(x); // default value

所以你的例子是有效的:

const setVariable = localStorage.getItem('value') || 0;

其他回答

在我看来,对于当前的javascript实现,

var [result='default']=[possiblyUndefinedValue]

是一种很好的方法(使用对象解构)。

即使默认值是布尔值也有效:

var setVariable = ( (b = 0) => b )( localStorage.getItem('value') );

逻辑空赋值,ES2020+解决方案

新的操作符目前正在添加到浏览器中,??=, ||=, &&=。这篇文章将关注??=。

它检查左边是否未定义或为空,如果已经定义,则短路。如果不是,右边的变量被赋值给左边的变量。

比较的方法

// Using ??=
name ??= "Dave"

// Previously, ES2020
name = name ?? "Dave"

// or
if (typeof name === "undefined" || name === null) {
    name = true
}

// Before that (not equivalent, but commonly used)
name = name || "Dave" // Now: name ||= "Dave"

基本的例子

let a       // undefined
let b = null
let c = false

a ??= true  // true
b ??= true  // true
c ??= true  // false

对象/数组的例子

let x = ["foo"]
let y = { foo: "fizz" }

x[0] ??= "bar"  // "foo"
x[1] ??= "bar"  // "bar"

y.foo ??= "buzz"  // "fizz"
y.bar ??= "buzz"  // "buzz"

x  // Array [ "foo", "bar" ]
y  // Object { foo: "fizz", bar: "buzz" }

??=浏览器支持2022年10月- 93%

??= Mozilla文档

||= Mozilla文档

&&= Mozilla文档

ES2020回答

使用Nullish Coalescing Operator,如果value为空或未定义,则可以设置默认值。

const setVariable = localStorage.getItem('value') ?? 0;

但是,您应该注意,空合并运算符不会为其他类型的假值(如0和")返回默认值。

但是,一定要注意浏览器的支持。您可能需要使用像Babel这样的JavaScript编译器将其转换为向后兼容的内容。如果你正在使用Node.js,它从版本14开始就被支持了。

如果你是FP(函数式编程)爱好者,Ramda有一个简洁的帮助函数,叫做defaultTo:

用法:

const result = default (30)(value)

它在处理未定义的布尔值时更有用:

const result2 = defaultTo(false)(dashboard.someValue)