【JS运算符/表达式】`?.` `??` `...` `,` `&&=` `||=` `?:`等运算符讲解

运算符:除了以下demo代码的内容,其他不常用的就不写了

javascript 复制代码
// 常用运算符:
// 最常用的 = + - * / > < >= <= && || 就不说了

// 取余 %
console.log(10 % 3); // 1

// 加法赋值运算符 +=
// let a = 1;
// console.log((a += 10)); // 11

// 逻辑与赋值(&&=) 逻辑与赋值(x &&= y)运算仅在 x 为真值时为其赋值。
let a = 2
a &&= 10
console.log(a); // 10

// 逻辑或赋值(||=) 逻辑或赋值(x ||= y)运算仅在 x 为假值时为其赋值。
// let a = 'sb'
// a ||= 10 // 10
// console.log(a); // sb

// 空值合并运算符(??): 当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。
console.log(''??'77'); // ''
console.log(null ?? 'sb'); // sb
// 逻辑空赋值(??=):  仅在 x 是空值(null 或 undefined)时对其赋值。
// let a  = 0;
// a??=20
// console.log(a); // 0

// 可选链运算符(?.) 使用?.访问对象深层的属性,可不用明确验证每个引用是否有效;
// obj.val?.prop;
// obj.val?.[expr];
// obj.func?.(args);
// let a = {
//   fn1() {
//     console.log("sb");
//   },
//   cat: "ming",
// };
// console.log(a.dog?.name, a.fn2?.());

// ... 展开语法
// 数组 ...[1,2,3]  > 1,2,3
// 对象 let newObj = {...oldObj} // oldObj的键值对将会赋值给newObj对象
// 字符串  ...'hello' > 'h','e','l','l','o'
// 函数function fn(...data){} > data: [] //fn()传入多少个参数,data数组里就有多少个
// ...语法返回的是浅拷贝的数据。
console.log([...[1,2,3], '4', ...'hello', 6]);

// 逗号运算符(,)
let x = (2, 'sb');
console.log(x); // 'sb'

// 幂(**)运算符返回第一个操作数取第二个操作数的幂的结果。它等价于 Math.pow()
console.log(2**3); // 8

// 条件(三元)运算符
console.log('' ? "问号前为true返回这个" : "否则返回这个");

// 自减 -- : 前缀式 --x ; 后缀式 x--
// let a = 10;
// let b = a--; // 操作数会减一,然后返回减一之前的值
// console.log(a, b); // 9 10
// let b = --a; // 操作数会减一,然后返回减一之后的值。
// console.log(a, b); // 9 9

// delete 运算符用于删除对象的一个属性
// let a = {name:'sb'}
// console.log(delete a.name,delete a.name11);// 一般不用在意返回值,在意的自己看文档;
// console.log(a.name);

表达式:

这部分先随便写写了,也不好整理成文章。仅当作自己的学习记录。

javascript 复制代码
// async function 关键字可用于定义表达式中的异步函数。
async function fn1() {}

// function* 关键字可用于在表达式中定义一个生成器函数。 generator 函数
// async function* 关键字可用于在表达式中定义一个异步生成器函数。
async function* foo() {
  yield await 1;
  yield await 2;
  yield await 3;
}
console.log(Object.prototype.toString.call(foo));
let str = 0;
async function generate() {
  for await (const val of foo()) {
    str = str + val;
  }
  console.log(str);
}
generate();
let sb = foo()
console.log(sb.next().then(res=>{console.log(res.value);}));
console.log(sb.next().then(res=>{console.log(res.value);}));
console.log(sb.next().then(res=>{console.log(res.value);}));
// yield 关键字用于暂停和恢复生成器函数。
// yield* 表达式用于委托给另一个 generator 或可迭代对象。
相关推荐
星光不问赶路人7 分钟前
vue3使用jsx语法详解
前端·vue.js
天蓝色的鱼鱼11 分钟前
shadcn/ui,给你一个真正可控的UI组件库
前端
布列瑟农的星空14 分钟前
前端都能看懂的Rust入门教程(三)——控制流语句
前端·后端·rust
Mr Xu_19 分钟前
Vue 3 中计算属性的最佳实践:提升可读性、可维护性与性能
前端·javascript
jerrywus26 分钟前
我写了个 Claude Code Skill,再也不用手动切图传 COS 了
前端·agent·claude
玖月晴空30 分钟前
探索关于Spec 和Skills 的一些实战运用-Kiro篇
前端·aigc·代码规范
子兮曰35 分钟前
深入理解滑块验证码:那些你不知道的防破解机制
前端·javascript·canvas
Highcharts.js37 分钟前
【Highcharts】如何用命令行渲染导出图片?
javascript·导出·开发文档·highcharts·命令行渲染·命令行功能
会一丢丢蝶泳的咻狗1 小时前
Sass实现,蛇形流动布局
前端·css
攀登的牵牛花1 小时前
前端向架构突围系列 - 状态数据设计 [8 - 4]:有限状态机 (FSM) 在复杂前端逻辑中的应用
前端