JavaScript中如果值为null或undefined，则替换该值。

Question

我有一个需求，需要在JavaScript中使用?? C#运算符，但我不知道该怎么做。 在C#中可以这样写：

int i?=null;
int j=i ?? 10;//j is now 10

现在我已经使用JavaScript设置了这个：

var options={
       filters:{
          firstName:'abc'
       } 
    };
var filter=options.filters[0]||'';//should get 'abc' here, it doesn't happen
var filter2=options.filters[1]||'';//should get empty string here, because there is only one filter

我应该如何正确实现呢？

谢谢。

编辑: 我发现问题的一半了：我不能使用“索引”符号来访问对象（my_object[0]）。有没有一种方法可以绕过它？（我事先不知道过滤器属性的名称，也不想迭代它们）。

- Valentin V

Answer 1

这是JavaScript的等效代码：

var i = null;
var j = i || 10; //j is now 10

请注意，逻辑运算符||不会返回布尔值，而是返回可以转换为true的第一个值。

此外，应使用对象数组而不是单个对象：

var options = {
    filters: [
        {
            name: 'firstName',
            value: 'abc'
        }
    ]
};
var filter  = options.filters[0] || '';  // is {name:'firstName', value:'abc'}
var filter2 = options.filters[1] || '';  // is ''

可以通过索引访问。

- Gumbo

---

请注意，如果0是i的有效值，则此方法将无效。 - jt000

如果任何虚假值（例如 0、false、空字符串）都是潜在的有效输入，我会像这样进行更改：var j = (i === null) ? 10 : i; 这将仅替换 null，而不会替换任何可以被评估为假的内容。 - DBS

在Groovy中有一个相等的东西吗？ - user6123723

如果 i 未定义，这将会抛出一个错误。对我来说似乎毫无用处.. (?) - phil294

var j = (i != null ? i : 10); 这段代码是有效的，因为 undefined 和 null 在比较中相等，所以 i != null 对于 null 和 undefined 都返回 false。最终将 i 赋值给 j，如果 i 是 null 或 undefined，则将 j 赋值为 10。 - ToolmakerSteve

谢谢。你节省了我的时间。非常感谢您，先生。 - Ganesan J

Answer 2

ES2020答案

JavaScript中的新空值合并运算符终于推出了。但是，请注意浏览器支持情况。您可能需要使用像Babel这样的JavaScript编译器将其转换为更具向后兼容性的内容。

根据文档，

空值合并运算符 (??) 是一个逻辑运算符，当其左侧操作数为null或undefined时，返回其右侧操作数，否则返回其左侧操作数。

const options={
  filters:{
    firstName:'abc'
  } 
};
const filter = options.filters[0] ?? '';
const filter2 = options.filters[1] ?? '';

如果filters[0]或filters[1]是null或undefined，则这将确保您的两个变量都会有一个回退值''。请注意，nullish coalescing操作符对于其他类型的假值（如0和''）不返回默认值。如果您希望考虑所有假值，则应该使用OR运算符||。

- wentjun

---

你指出了一个好主意，真是个神仙。这很完美，因为我们不支持IE。 - vancy-pants

Answer 3

逻辑空值赋值，2020+新解决方案

新增了一个运算符??=。它等同于value = value ?? defaultValue。

||=和&&=是类似的，在下方链接中了解。

如果左侧为undefined或null，会进行短路操作。如果已经定义，则不会进行任何操作。如果未定义，则将右侧值赋给左侧。

基本示例

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

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

// Equivalent to
a = a ?? true

对象/数组示例

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" }

功能性示例

function config(options) {
    options.duration ??= 100
    options.speed ??= 25
    return options
}

config({ duration: 555 })   // { duration: 555, speed: 25 }
config({})                  // { duration: 100, speed: 25 }
config({ duration: null })  // { duration: 100, speed: 25 }

??= 浏览器支持 2021年9月 - 90%

??= Mozilla文档

||= Mozilla文档

&&= Mozilla文档

- Gibolt

Answer 4

简述：

int j=i ?? 10; 可以在 JavaScript 中使用，只需将 int 替换为 let。

?? 和 || 的比较

应优先选择使用 ??，因为它仅检查 null 和 undefined。

以下所有表达式都是正确的：

(null || 'x') === 'x' ;
(undefined || 'x') === 'x' ;
//Most of the times you don't want the result below
('' || 'x') === 'x'  ;
(0 || 'x') === 'x' ;
(false || 'x') === 'x' ;
//-----

//Using ?? is preferred
(null ?? 'x') === 'x' ;
(undefined ?? 'x') === 'x' ;
//?? works only for null and undefined, which is in general safer
('' ?? 'x') === '' ;
(0 ?? 'x') === 0 ;
(false ?? 'x') === false ;

Asterisk: 检查 浏览器兼容性，如果你确实需要支持其他浏览器，请使用babel。

- Marinos An

Answer 5

我发现问题的一半：我不能使用“索引器”符号来访问对象（my_object [0]）。有没有办法绕过它？

不行；对象文字是一个“对象”，而不是数组，因此您无法根据索引简单地检索属性，因为它们的属性没有特定的顺序。 检索它们的值的唯一方法是使用特定名称：

var someVar = options.filters.firstName; //Returns 'abc'

或者使用 for ... in 循环进行迭代：

for(var p in options.filters) {
    var someVar = options.filters[p]; //Returns the property being iterated
}

- Alex Rozanski

---

请注意，这个有趣的 for in JS 循环仅适用于对象字面量！它在 JS 数组上失败（给出索引）和 JS Maps 上失败（给出 undefined）。希望你不要忘记这一点，否则你将会遇到一个调试惊喜！xP - varun

Answer 6

解构赋值

问题内容可能已更改，因此我将尽力全面回答。

解构赋值允许您从任何具有属性的东西中提取值。您还可以在 null/undefined 时定义默认值和命名别名。

const options = {
    filters : {
        firstName : "abc"
    } 
}

const {filters: {firstName = "John", lastName = "Smith"}} = options

// firstName = "abc"
// lastName = "Smith"

注意：大小写很重要

如果使用数组，以下是操作方法。

在这种情况下，从数组中提取每个对象的名称，并赋予其自己的别名。由于对象可能不存在，因此添加了= {}。

const options = {
    filters: [{
        name: "abc",
        value: "lots"
    }]
}

const {filters:[{name : filter1 = "John"} = {}, {name : filter2 = "Smith"} = {}]} = options

// filter1 = "abc"
// filter2 = "Smith"

更详细的教程

浏览器支持 2020年7月92%

- Gibolt