如果在 JavaScript 中为 null 或 undefined 则替换值

IT技术 javascript
2021-03-15 20:39:35

我需要将??C# 运算符应用于 JavaScript,但我不知道如何操作。在 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])使用“索引器”符号有没有办法绕过它?(我事先不知道过滤器属性的名称,也不想遍历它们)。

6个回答

这是等效的 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 ''

可以通过索引访问。

请注意,如果 0 是 i 的有效值,则这不起作用。
2021-04-29 20:39:35
@ phil294var j = (i != null ? i : 10);应该工作,因为undefined==零,所以i != nullfalse两个nullundefined
2021-05-03 20:39:35
如果i未定义,这将引发错误。因此对我来说似乎没用......(?)
2021-05-09 20:39:35
在 Groovy 中是否有这样的等价物?
2021-05-10 20:39:35
如果任何 falsey 是潜在有效的输入(0, false, 空字符串),我会做这样的事情:var j = (i === null) ? 10 : i;这只会替换null,而不是任何可以评估为假的东西。
2021-05-12 20:39:35

ES2020 答案

新的Nullish Coalescing Operator 终于在 JavaScript 上可用了。但是,请注意浏览器支持您可能需要使用像Babel这样的 JavaScript 编译器将其转换为更向后兼容的内容。

根据文档,

空合并运算符 (??) 是一个逻辑运算符,当其左侧操作数为空或未定义时返回其右侧操作数,否则返回其左侧操作数。

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

这将确保您的两个变量都有一个后备值''iffilters[0]filters[1]are null, or undefined

请注意,nullish 合并运算符不会返回其他类型的虚假值(例如0and )的默认值''如果您希望考虑所有虚假值,您应该使用 OR 运算符||

你是指出这一点的精灵。完美,因为我们不支持 IE
2021-04-21 20:39:35

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

添加了一个新的运算符,??=这相当于value = value ?? defaultValue.

||=并且&&=是相似的,下面的链接。

这将检查左侧是否未定义或为空,如果已定义则短路。如果不是,则左侧被分配右侧值。

基本示例

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 文档

我发现了一半的问题:我不能对对象 (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
}
@LinusGefarth 请注意,这个有趣的for inJS 循环仅适用于对象文字!它在 JS 数组(给出索引)和 JS 映射(给出undefined上失败了希望您不要忘记这一点,以免您在调试中遇到惊喜!xP
2021-04-30 20:39:35

解构解决方案

问题内容可能有改动,我会尽量认真回答。

解构允许您从具有属性的任何内容中提取值。您还可以在 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"

更详细的教程

浏览器支持92% 2020 年 7 月