逻辑空赋值(??=)
逻辑空值(x ??= y)仅在x 是空值(null,undefined)的时候为其赋值,可用于设置默认值等情况
type Idata = {
name: string;
age?: number;
}
let data:Idata = {
name: 'xx'
}
data.name??='lili'
data.age??=18
console.log(data); // 输出 {name:xx,age:18}
// 编译后的代码 -------------------------------
var _a, _b;
var data = {
name: 'xx'
};
(_a = data.name) !== null && _a !== void 0 ? _a : (data.name = '10');
(_b = data.age) !== null && _b !== void 0 ? _b : (data.age = 18);
设置参数默认值
interface IConfig {
name?: string,
age?: number
}
const generateConfig = (config:IConfig):IConfig => {
config.name = config.name??='xxx'
config.age = config.age??=18
return config
}
const config = generateConfig({})
console.log(config) // 输出 {name:xx,age:18}
可选链操作符
允许对象读取链接对象链深处属性值,而不必验证对象链中每个引用是否有效 ?. 运算符 类似于 . 链式运算符, 不同之处在于 ?. 在引用null 或undefined 不会引起错误,该表达式会返回undefined , 与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。
示例
比如,思考一个存在嵌套结构的对象 obj。不使用可选链的话,查找一个深度嵌套的子属性时,需要验证之间的引用,
let nestedProp = obj.userInfo&& obj.userInfo.second;
有了可选链运算符(?.),在访问 obj.userInfo.name之前,不再需要明确地校验 obj.userInfo的状态,再并用短路计算获取最终结果:
const obj:any = {
}
console.log(obj?.userInfo?.name); // 访问不存在的属性 - 防护undefined
// 编译后的代码 -------------------------------
var obj = {
user: { name: '' }
};
console.log((_c = obj === null || obj === void 0 ? void 0 : obj.userInfo) === null || _c === void 0 ? void 0 : _c.name);
空值合并运算符(??)
空值合并运算符(??
)是一个逻辑运算符,当左侧的操作数unll或undefined时,返回其右侧操作数,否则返回左侧操作数。
示例
const bar= 'bar'??'bar??' // 输出 bar
const foo = null ?? 'default string'; // default string
const baz = 0 ?? 42; // 0
console.log(bar);
console.log(foo);
console.log(baz);
-------源码
var bar = 'bar' !== null && 'bar' !== void 0 ? 'bar' : 'bar??';
var foo = null !== null && null !== void 0 ? null : 'default string';
console.log(bar);
console.log(foo);
// Expected output: "default string"
var baz = 0 !== null && 0 !== void 0 ? 0 : 42;
console.log(baz);
// Expected output: 0
结语
可以看出上面三个运算符可以使我们的代码更加易读和健壮,