重学前端 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


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

目录
相关文章
|
4月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
19天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
37 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
4月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
4月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
94 5
|
4月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
139 1
|
4月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
85 4
|
4月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
300 2
|
4月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
679 1
|
4月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
731 0
|
5月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
341 14

热门文章

最新文章