Dan*_*fer 1305 javascript operators null-coalescing-operator null-coalescing
Javascript中是否有空合并运算符？
例如,在C#中,我可以这样做:
String someString = null;
var whatIWant = someString ?? "Cookies!";
我可以为Javascript找出的最佳近似值是使用条件运算符:
var someString = null;
var whatIWant = someString ? someString : 'Cookies!';
这有点ick嘿恕我直言.我可以做得更好吗？
Ate*_*ral 2023
C#null coalescing operator(??)的JavaScript等价物使用逻辑OR(||):
var whatIWant = someString || "Cookies!";
有些情况(下面说明)表明行为与C#的行为不匹配,但这是在JavaScript中分配默认/替代值的一般,简洁的方法.
无论第一个操作数的类型如何,如果将其转换为布尔值false,则赋值将使用第二个操作数.请注意以下所有情况:
alert(Boolean(null)); // false
alert(Boolean(undefined)); // false
alert(Boolean(0)); // false
alert(Boolean("")); // false
alert(Boolean("false")); // true -- gotcha! :)
这意味着:
var whatIWant = null || new ShinyObject(); // is a new shiny object
var whatIWant = undefined || "well defined"; // is "well defined"
var whatIWant = 0 || 42; // is 42
var whatIWant = "" || "a million bucks"; // is "a million bucks"
var whatIWant = "false" || "no way"; // is "false"
Bre*_*sen 73
function coalesce() {
var len = arguments.length;
for (var i=0; i<len; i++) {
if (arguments[i] !== null && arguments[i] !== undefined) {
return arguments[i];
}
}
return null;
}
var xyz = {};
xyz.val = coalesce(null, undefined, xyz.val, 5);
// xyz.val now contains 5
此解决方案的工作方式类似于SQL coalesce函数,它接受任意数量的参数,如果它们都没有值,则返回null.它的行为就像C#?? 运算符,"",false和0被认为是NOT NULL,因此计为实际值.如果你来自.net背景,这将是最自然的感觉解决方案.
sth*_*sth 45
如果||作为C#的替换??在你的情况下不够好,因为它吞下空字符串和零,你总是可以编写自己的函数:
function $N(value, ifnull) {
if (value === null || value === undefined)
return ifnull;
return value;
}
var whatIWant = $N(someString, 'Cookies!');
vau*_*han 45
它看起来像这样:
x ?? y
const response = {
settings: {
nullValue: null,
height: 400,
animationDuration: 0,
headerText: '',
showSplashScreen: false
}
};
const undefinedValue = response.settings?.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings?.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings?.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings?.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings?.showSplashScreen ?? true; // result: false
Kev*_*son 14
在这里没有人提到潜力NaN,对我来说,这也是一个无效的价值.所以,我以为我会增加两美分.
对于给定的代码:
var a,
b = null,
c = parseInt('Not a number'),
d = 0,
e = '',
f = 1
;
如果您要使用||运算符,则会获得第一个非假值:
var result = a || b || c || d || e || f; // result === 1
如果您使用典型的合并方法,如此处发布,您将获得c,其值为:NaN
var result = coalesce(a,b,c,d,e,f); // result.toString() === 'NaN'
这些似乎都不适合我.在我自己的小合并逻辑世界中,可能与你的世界不同,我认为undefined,null和NaN都是"null-ish".所以,我希望d从coalesce方法中恢复(零).
如果任何人的大脑像我一样工作,并且你想要排除NaN,那么这种方法将实现:
function coalesce() {
var i, undefined, arg;
for( i=0; i < arguments.length; i++ ) {
arg = arguments[i];
if( arg !== null && arg !== undefined
&& (typeof arg !== 'number' || arg.toString() !== 'NaN') ) {
return arg;
}
}
return null;
}
对于那些希望代码尽可能短,并且不介意有点缺乏清晰度的人,你也可以按照@impinball的建议使用它.这利用了NaN永远不等于NaN的事实.你可以在这里阅读更多内容:为什么NaN不等于NaN？
function coalesce() {
var i, arg;
for( i=0; i < arguments.length; i++ ) {
arg = arguments[i];
if( arg != null && arg === arg ) { //arg === arg is false for NaN
return arg;
}
}
return null;
}
??VS ||VS&&其他答案都没有比较所有这三个。由于Justin Johnson 的评论获得了如此多的选票，并且由于javascript 中的双问号与 &&被标记为与此重复，因此包含&&在答案中是有意义的。
首先，受到贾斯汀·约翰逊评论的启发：
||返回第一个“truey”值，否则返回最后一个值，无论它是什么。
&&返回第一个“falsey”值，否则返回最后一个值，无论它是什么。
??返回第一个非空、非未定义的值，否则返回最后一个值，无论它是什么。
然后，用实时代码演示：
let F1,
F2 = null,
F3 = 0,
F4 = '',
F5 = parseInt('Not a number (NaN)'),
T1 = 3,
T2 = 8
console.log( F1 || F2 || F3 || F4 || F5 || T1 || T2 ) // 3 (T1)
console.log( F1 || F2 || F3 || F4 || F5 ) // NaN (F5)
console.log( T1 && T2 && F1 && F2 && F3 && F4 && F5 ) // undefined (F1)
console.log( T1 && T2 ) // 8 (T2)
console.log( F1 ?? F2 ?? F3 ?? F4 ?? F5 ?? T1 ) // 0 (F3)
console.log( F1 ?? F2) // null (F2)目前没有支持,但JS标准化过程正在努力:https://github.com/tc39/proposal-optional-chaining
当心JavaScript的null定义。在javascript中，“ no value”有两个定义。1. Null：当变量为null时，表示它不包含任何数据，但是该变量已在代码中定义。像这样：
var myEmptyValue = 1;
myEmptyValue = null;
if ( myEmptyValue === null ) { window.alert('it is null'); }
// alerts
在这种情况下，变量的类型实际上是对象。测试一下。
window.alert(typeof myEmptyValue); // prints Object
未定义：如果之前未在代码中定义变量，并且不出所料，则该变量不包含任何值。像这样：
if ( myUndefinedValue === undefined ) { window.alert('it is undefined'); }
// alerts
在这种情况下，变量的类型为“未定义”。
请注意，如果您使用类型转换比较运算符（==），则JavaScript将对这两个空值均起同样的作用。为了区分它们，请始终使用类型严格的比较运算符（===）。
是的，它的提议现在是第 4 阶段。这意味着该提案已准备好包含在正式的 ECMAScript 标准中。您已经可以在 Chrome、Edge 和 Firefox 的最新桌面版本中使用它，但我们将不得不等待一段时间，直到此功能达到跨浏览器的稳定性。
查看以下示例以演示其行为：
// note: this will work only if you're running latest versions of aforementioned browsers
const var1 = undefined;
const var2 = "fallback value";
const result = var1 ?? var2;
console.log(`Nullish coalescing results in: ${result}`);前面的例子相当于：
const var1 = undefined;
const var2 = "fallback value";
const result = (var1 !== null && var1 !== undefined) ?
var1 :
var2;
console.log(`Nullish coalescing results in: ${result}`);需要注意的是nullish凝聚会不会威胁falsy值的方式，||运营商做了（只用于检查undefined或null值），因此，下面的代码片段会采取行动如下：
// note: this will work only if you're running latest versions of aforementioned browsers
const var1 = ""; // empty string
const var2 = "fallback value";
const result = var1 ?? var2;
console.log(`Nullish coalescing results in: ${result}`);对于 TypesScript 用户，从TypeScript 3.7开始，此功能现在也可用。
目前正在向浏览器添加一个新的运算符，??=。这将空合并运算符??与赋值运算符结合在一起=。
注意：这在公共浏览器版本中还不常见。将随着可用性的变化而更新。
??=检查变量是否未定义或为空，如果已定义则短路。如果不是，则将右侧值分配给变量。
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" }
浏览器支持21 年 4 月 - 84%
| 归档时间： |
|
| 查看次数： |
313980 次 |
| 最近记录： |