重学前端 32 # JavaScript的表达式语句

简介: 重学前端 32 # JavaScript的表达式语句

一、什么是表达式语句


表达式语句:就是一个表达式,它是由运算符连接变量或者直接量构成的。从语法上看,任何合法的表达式都可以当做表达式语句使用。



二、PrimaryExpression 主要表达式


表达式的原子项:Primary Expression。它是表达式的最小单位,它所涉及的语法结构也是优先级最高的。


2.1、直接量(Literal)

直接量:就是直接用某种语法写出来的具有特定类型的值。通俗地讲,直接量就是在代码中把它们写出来的语法。

"abc";
123;
null;
true;
false;
/* 还能够直接量的形式定义对象,有函数、类、数组、正则表达式等特殊对象类型。*/
({});
(function(){});
(class{ });
// function、{ 和 class 开头的表达式语句与声明语句有语法冲突,使用需加上括号来回避语法冲突。
[];
/abc/g;


2.2、其他

1、Primary Expression 还可以是 this 或者变量,在语法上,把变量称作标识符引用

this;
myVar;


2、任何表达式加上圆括号,都被认为是 Primary Expression,这个机制使得圆括号成为改变运算优先顺序的手段。

(a + b)*c;



三、MemberExpression 成员表达式


Member Expression 通常是用于访问对象成员的。


3.1、几种形式


  • 用标识符的属性访问和用字符串的属性访问。
  • new.target 是个新加入的语法,用于判断函数是否是被 new 调用。
  • super 则是构造函数中,用于访问父类的属性的语法。
a.b;
a["b"];
new.target;
super.b;


3.2、带函数的模板

表示把模板的各个部分算好后传递给一个函数。

f`a${b}c`;



3.3、带参数列表的 new 运算

不带参数列表的 new 运算优先级更低,不属于 Member Expression

new Cls();




四、NewExpression NEW 表达式


Member Expression 加上 new 就是 New Expression,(不加 new 也可以构成 New Expression,JavaScript 中默认独立的高优先级表达式都可以构成低优先级表达式)。


// 看个例子
new new Kaimo(666);
// 直观上可能有两种意思
new (new Kaimo(666)); or new (new Kaimo)(666);
// 实际上等价于第一种,可以验证一下
class Kaimo{
  constructor(n){
    console.log("kaimo", n);
    return class {
      constructor(n) {
        console.log("returned", n);
      }
    }
  }
}
new new Kaimo(666);
// kaimo 666
// returned undefined
new (new Kaimo(666));
// kaimo 666
// returned undefined
new (new Kaimo)(666);
// kaimo undefined
// returned 666




五、CallExpression 函数调用表达式


   Member Expression 还能构成 Call Expression。它的基本形式是 Member Expression 后加一个括号里的参数列表,或者可以用上 super 关键字代替 Member Expression。


a.b(c);
super();
// 变体  可以理解为,Member Expression 中的某一子结构具有函数调用,那么整个表达式就成为了一个 Call Expression。
a.b(c)(d)(e);
a.b(c)[3];
a.b(c).d;
a.b(c)`xyz`;



六、LeftHandSideExpression 左值表达式


New ExpressionCall Expression 统称 LeftHandSideExpression,左值表达式。直观地讲,左值表达式就是可以放到等号左边的表达式。

a() = b;
// 原生的 JavaScript 函数,返回的值都不能被赋值。多数赋值将会是 Call Expression 的其它形式
a().c = b;


左值表达式最经典的用法是用于构成赋值表达式




七、AssignmentExpression 赋值表达式


有多种形态,最基本的当然是使用等号赋值。

a = b


7.1、嵌套

a = b = c = d 等价于 a = (b = (c = d))


7.2、结合运算符

// *=、 /=、 %=、+=、-=、...
a += b; 等价于 a = a + b;





八、Expression 表达式


赋值表达式可以构成 Expression 表达式的一部分。在 JavaScript 中,表达式就是用逗号运算符连接的赋值表达式。


// 比赋值运算优先级更低的就是逗号运算符(可以把逗号理解为一种小型的分号)
var a,b;
a = b, b = 1, null; // null
null,null+null  // 0


逗号分隔的表达式会顺次执行,就像不同的表达式语句一样。整个表达式的结果就是最后一个逗号后的表达式结果。

目录
相关文章
|
19天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
40 5
|
1月前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
48 0
|
21天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
JSON JavaScript 前端开发
Node.js:前端开发的后端利器
Node.js作为一种运行在服务器端的JavaScript环境,为前端开发者打开了后端开发的大门。它以其高效的事件驱动、非阻塞I/O模型以及强大的npm生态,使得前端开发者能够轻松构建服务器端应用,实现前后端的全栈开发。本文将探讨Node.js的核心优势、应用场景以及在前端开发中的重要性。
|
1月前
|
前端开发 JavaScript 数据可视化
JavaScript:前端开发的灵魂与动力
JavaScript(JS)作为前端开发的核心语言,赋予了网页交互性和动态性。通过JS,开发者可以实现复杂的用户交互、数据操作以及动画效果,为用户带来丰富而流畅的网页体验。本文将介绍JS的基本概念、应用场景以及在前端开发中的重要性。
|
1月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
29 0
|
1月前
|
机器学习/深度学习 人工智能 前端开发
【前端】JavaScript简介
【前端】JavaScript简介
17 0
|
1月前
|
Rust 前端开发 JavaScript
前端技术的未来:WebAssembly与JavaScript的融合之路
【2月更文挑战第12天】本文旨在探讨WebAssembly(以下简称Wasm)与JavaScript(以下简称JS)的结合如何为前端开发带来革命性变化。传统上,JS一直是前端开发的核心,但随着Wasm的出现,我们看到了前端性能和功能的新天地。文章首先介绍Wasm的基本概念,然后分析其对前端开发的影响,包括性能提升、新功能实现以及开发模式的变化。最后,探讨了Wasm与JS融合的未来趋势,以及这种融合如何推动前端技术的进步。
|
1月前
|
Rust 前端开发 JavaScript
探索前端技术的未来:WebAssembly与JavaScript的融合之路
【2月更文挑战第12天】 随着Web技术的不断进步,前端开发正迎来一场革命性变革。本文将深入探讨WebAssembly(以下简称Wasm)与JavaScript(以下简称JS)的结合如何为前端开发带来前所未有的性能提升与新的编程模式。我们将从两者的基本概念入手,探索它们各自的优势与局限,然后深入分析Wasm和JS协同工作时能够解锁的潜力,最后展望这一技术趋势如何塑造未来的前端开发生态。本文旨在为前端开发者提供洞见,帮助他们理解并准备好迎接这一即将到来的技术浪潮。
|
8月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
95 0