本文正在参加「金石计划 . 瓜分6万现金大奖」
👨🎓作者:Java学术趴
💌公众号:Java学术趴
🚫特别声明:原创不易,未经授权不得转载或抄袭,如需转载可联系小编授权。
🙏版权声明:文章里的部分文字或者图片来自于互联网以及百度百科,如有侵权请尽快联系小编。微信搜索公众号Java学术趴联系小编。
☠️每日毒鸡汤:堕落的一天
ES:ECMAScript;随后的数字表示版本,ES6表示ES5之后的版本。
为什么使用ES6:越高版本的标准代表着js语言更加完善,本身功能更加强大。
比如ES6之前js本身的一些问题:
- 变量提升特性增加了程序运行时的不可预测性
- 语法过于松散
ES6---4个强大JavaScript运算符(??、??=、?.、?:)
1. 空值合并操作符(?? )
- 空值合并操作符( ?? )是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。 空值合并操作符( ?? )与逻辑或操作符( || )不同,逻辑或操作符会在左侧操作数为假值时返回右侧操作数。
注意: 只有当操作数为 null、undefined 这两个假值的时候才会使用预测的数据,但是 JS 中假值包含:未定义 undefined、空对象 null、数值 0、空数字 NaN、布尔false,空字符串'', 一定要注意。
// 简单
null ?? 5 // => 5
3 ?? 5 // => 3
const nullValue = null;
const emptyText = ""; // 空字符串,是一个假值,Boolean("") === false
const someNumber = 42;
const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = someNumber ?? 0;
console.log(valA); // "valA 的默认值"
console.log(valB); // ""(空字符串虽然是假值,但不是 null 或者 undefined)
console.log(valC); // 42
2. 空赋值运算符(??= )
- ??= 也被称为空赋值运算符,与上面的非空运算符相关。看看它们之间的联系:
var x = null
var y = 5
console.log(x ??= y) // => 5
console.log(x = (x ?? y)) // => 5
let a = 0;
a ??= 1;
console.log(a); // 0
let b = null;
b ??= 1;
console.log(b); // 1
function gameSettingsWithNullish(options) {
// 还可以多级别调用之后给定其为null的默认值
options.gameSpeed ??= 1
options.gameDiff ??= 'easy'
return options
}
仅当值为 null 或 undefined 时,此赋值运算符才会赋值。上面的例子强调了这个运算符本质上是空赋值的语法糖
3. 可选链操作符(?. )
- 可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。( ?. ) 操作符的功能类似于( . )链式操作符,不同之处在于,在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。
- 当尝试访问可能不存在的对象属性时,可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时,如果不能确定哪些属性必定存在,可选链操作符也是很有帮助的。
const adventurer = {
name: 'Alice',
cat: {
name: 'Dinah'
}
};
const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined
console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined
a?.b
// 等同于
a == null ? undefined : a.b
a?.[x]
// 等同于
a == null ? undefined : a[x]
a?.b()
// 等同于
a == null ? undefined : a.b()
a?.()
// 等同于
a == null ? undefined : a()
举个栗子:
let travelPlans = {
destination: 'DC',
monday: {
location: 'National Mall',
budget: 200,
host: null
}
}
let res = travelPlans?.tuesday?.location ?? "locahost"; // => locahost
let res2 = travelPlans?.host; // => undefined
这个location是哪里来的呢?这个tuesday又是哪里来的呢?就算不是外面的travelPlans这个对象里也没有location和tuesday啊!!!
let res = travelPlans?.tuesday?.location;
<=等价=>
let res = travelPlans&& travelPlans.tuesday&& travelPlans.tuesday.location
注意: 作用就是判断这个对象(travelPlans)下的(tuesday)下的(location)是否为null或者undefined,当其中一链为null或者undefined时就返回undefined,这样即使中间缺少一个属性也不会报错,双问号后面接的就是默认值。
4. 三元运算符( ?: )
- ?: :又叫条件运算符,接受三个运算数:条件 ? 条件为真时要执行的表达式 : 条件为假时要执行的表达式。实际效果:
function checkCharge(charge) {
return (charge > 0) ? '可用' : '需充值'
}
console.log(checkCharge(20)) // => 可用
console.log(checkCharge(0)) // => 需充值