这里有一份简洁的前端知识体系等待你查收，看看吧，会有惊喜哦~如果觉得不错，恳求star哈~

表达式跟语句的区别

表达式：会产生一个值，它可以放在任何需要一个值的地方，比如，作为一个函数调用的参数。
语句：可以理解成一个行为，告诉宿主对象执行一些操作
表达式语句：JS中某些需要语句的地方，你可以使用一个表达式来代替。这样的语句称之为表达式语句。但反过来不可以。你不能在一个需要表达式的地方放一个语句，比如，一个if语句不能作为一个函数的参数。

表达式语句

语句类型有很多种，但是真正能干活的就只有表达式语句，其它语句的作用都是产生各种结构，来控制表达式语句执行，或者改变表达式语句的意义。

表达式语句实际上就是一个表达式，它是由运算符连接变量或者直接量构成的。

一般来说，我们的表达式语句要么是函数调用，要么是赋值，要么是自增、自减，否则表达式计算的结果没有任何意义。

但是从语法上，并没有这样的限制，任何合法的表达式都可以当做表达式语句使用。例如a + b;

关于表达式，我们从粒度最小到粒度最大了解一下。

主要表达式 PrimaryExpression

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

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

Primary Expression 可以是直接量，也可以是this或者变量。

JS 还能以直接量的形式定义对象，针对函数、类、数组、正则表达式等特殊对象类型，JS 提供了语法层面的支持。

({});
(function(){});
(class{ });
[];
/abc/g;

需要注意，在语法层面，function、{ 和class开头的表达式语句与声明语句有语法冲突，所以，我们要想使用这样的表达式，必须加上括号来回避语法冲突。

成员表达式 MemberExpression

Member Expression通常是用于访问对象成员的。它有几种形式：

a.b;
a["b"];
new.target;
super.b;

new.target是个新加入的语法，用于判断函数是否是被new调用。

super则是构造函数中，用于访问父类的属性的语法。

因为语法结构需要，以下两种形式在JS标准中当做Member Expression：

f`a${b}c`:带函数的模板，这个带函数名的模板表示把模板的各个部分算好后传递给一个函数。
new Cls(); : 注意，不带参数列表的new运算优先级更低，不属于Member Expression。

NEW表达式：NewExpression

Member Expression加上new就是New Expression。

当然，Member Expression 也是 New Expression，JS 中默认独立的高优先级表达式都可以构成低优先级表达式。

注意，这里的New Expression特指没有参数列表的表达式。

这也就是为什么new new Cls(1);的效果同 new (new Cls(1));，这是因为带参数列表的new优先级高于不带参数列表，所以 new Cls(1)会优先执行。

函数调用表达式：CallExpression

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

a.b(c);
super();

这看起来很简单，但是它有一些变体。比如：

a.b(c)(d)(e);
a.b(c)[3];
a.b(c).d;
a.b(c)`xyz`;

这些变体的形态，跟Member Expression几乎是一一对应的。实际上，我们可以理解为，Member Expression中的某一子结构具有函数调用，那么整个表达式就成为了一个Call Expression。

而Call Expression就失去了New Expression优先级高的特性，这是一个主要的区分。

左值表达式：LeftHandSideExpression

New Expression 和 Call Expression 统称LeftHandSideExpression，左值表达式。

直观地讲，左值表达式就是可以放到等号左边的表达式。JS 语法则是：a() = b;

这样的用法其实是符合语法的，只是，原生的JS函数，返回的值都不能被赋值。因此多数时候，我们看到的赋值将会是Call Expression的其它形式，如：a().c = b;

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

赋值表达式 AssignmentExpression

赋值表达式最基本的形式是：a = b。等号可以嵌套，连续赋值时，是右结合的。

赋值表达式的使用，还可以结合一些运算符，例如：a += b;

能有这样用的运算符有下面这几种：

*=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、|=、**=

表达式 Expression

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

在 JS 中，比赋值运算优先级更低的就是逗号运算符了。

在很多场合，都不允许使用带逗号的表达式，比如 export 后只能跟赋值表达式，意思就是表达式中不能含有逗号。

右值表达式

出现在赋值表达式右边的是右值表达式，在 JS 标准中，规定了在等号右边的表达式就是条件表达式。

JS 标准也规定了左值表达式同时都是右值表达式，此外，左值表达式也可以通过跟一定的运算符组合，逐级构成更复杂的结构，直到成为右值表达式。

关于右值表达式，我们可以理解为以左值表达式为最小单位开始构成的。

更新表达式 UpdateExpression

左值表达式搭配 ++ -- 运算符，可以形成更新表达式。比如-- a;

一元运算表达式 UnaryExpression

左值表达式搭配一元运算符，可以形成一元运算表达式，我们看下例子：

delete a.b;
void a;
typeof a;
- a;
~ a;
! a;
await a;
a ++

乘方表达式 ExponentiationExpression

乘方表达式也是由左值表达式构成的。它使用**号。**运算是右结合的。

2 ** 30 //正确
-2 ** 30 //报错

-2这样的一元运算表达式，是不可以放入乘方表达式的，如果需要表达类似的逻辑，必须加括号。

乘法表达式 MultiplicativeExpression

用乘号或者除号、取余符号连接就可以构成乘法表达式。

加法表达式 AdditiveExpression

加法表达式是由乘法表达式用加号或者减号连接构成的。

注意，加号还能表示字符串连接，这也比较符合一般的直觉。

关系表达式 RelationalExpression

关系表达式就是大于、小于、大于等于、小于等于等运算符号连接，统称为关系运算。

<=、>=、<、>、instanceof 、in

需要注意，这里的<= 和 >= 关系运算，完全是针对数字的，所以 <= 并不等价于 < 或 ==。例如

null <= undefined
//false
null == undefined
//true

相等表达式 EqualityExpression

相等表达式由四种运算符和关系表达式构成：

==
!=
===
!==

其中，==是一个 JS 设计失误，并非语言中有价值的部分，建议使用 === 比较。

逻辑与表达式和逻辑或表达式

这两种表达式都不会做类型转换，所以尽管是逻辑运算，但是最终的结果可能是其它类型。

比如：false || 1;，这句将会得到结果 1。

另外还有一点，就是逻辑表达式具有短路的特性，例如：true || foo();，这里的foo将不会被执行，这种中断后面表达式执行的特性就叫做短路。

条件表达式 ConditionalExpression

条件运算符又称三目运算符，它有三个部分，由两个运算符?和:配合使用。condition ? branch1 : branch2

条件表达式实际上就是JS中的右值表达式了，是可以放到赋值运算后面的表达式。

刁钻的问题

用这几讲学习的内容，我们来探讨下以下的问题。

首先，你觉得 []+{} 和 {}+[] 是否相等？

答案是否定的。

[] + {} // "[object Object]"
{} + [] // 0

先看 {} + [] ，这是一个语句， {} 开头，会被解析成一个语句块，所以其实执行的是 {}; + [] ， {}; 会被忽略， +[] 的结果是 0 ；

而 [] + {} 的执行是这样子， [] 跟 {} 分别被认为是数组跟对象的直接量，所以他们会进行类型转换。由于 [] 跟 {}执行 valueOf 的结果都是对象，所以会执行 toString 方法。

[] + {} 等于 "" + "[object Object]"，所以结果是 "[object Object]" 。

所以这个问题的答案是：[]+{} 和 {}+[] 不相等。

第二个问题是：{} + [] === [] + {}为什么等于为true。

这是因为 {} + [] === [] + {}是相等表达式，JS引擎会分别计算 === 两边的值，根据我们学到的知识，不难理解： {} + [] 是左值表达式， [] + {} 是右值表达式。

以 {} 开头，之所以会有冲突，那是因为{} 既可以是语句块，也可以是对象直接量，JS引擎无法辨别，所以硬性规定，以{}开头，只能是语句块。

但这个例子不一样，虽然 {} + [] 是以 {}开头，但JS引擎知道这里是左值表达式，就不存在歧义，所以会被解析成对象直接量。

所以，({} + []) === ([] + {})的结果为true。

结语

这篇文章，我们讲解了运算符和表达式的一些相关知识，重点学习了赋值表达式、赋值表达式的左边部分，以及赋值表达式的右边部分。

JS表达式