JavaScript 运算符和表达式(1)

var a = 1;

a++; // a=a+1

console.log(a); // 2

a++; // a=a-1

console.log(a) // 1

++a;

console.log(a); // 2

–a;

console.log(a); // 1

// ++ 和 – 都可以在变量前或变量后，都为变量+1或-1.

// 但是，表达式的返回值不同。

// a++ ，a增一，表达式返回+1前的旧值。

// ++a ，a增一，表达式返回+1后的新值。

a = 0;

var n = a++;

console.log(a,n); // 1,0

a = 0;

var m = ++a ;

console.log(a,m); // 1,1

var b = 1;

console.log(b++); // 1 输出 +1 的新值

console.log(++b); // 3

/*

• 1. 所有表达式都是从左往右执行

• 2.如果前一个表达式修改了变量，则会影响后续的表达式。

*/

var n =5;

console.log(n++ + ++n + n++); // 19

// n 的的值： 6 7 8

// 表达式的值： 5 7 7

console.log(++n + n++ + ++n); // 29

// n的值 9 10 11

// 表达式的值 9 9 11

赋值运算

---

赋值运算符包括：　　=　　+=　　-=　　*=　　/=　　%=

= ：用于为变量赋值，变量名=变量值；

+=： n+=3 相当于 n=n+3。

-=： n-=3 相当于 n=n-3。

*=： n*=3 相当于 n=n*3。

/=： n/=3 相当于 n=n/3。

%=： n%=3 相当于 n=n%3。

案例代码

var a = 1, b = 2;

// a=a+b

a+=b; //3

console.log(a);

var c = 3 ,d = 4;

c*=d; // c = c*d;

console.log©

var e = 5 , f = 6;

// e = e%f

e%=f;

console.log(e) // 5

var g= 7;

// g = g+1;

// g+=1;

g++;

console.log(g);

var str =“abc”;

str =str +“def”; // “abcdef”

console.log(str);

str += “def” // “abcdefdef”

console.log(str);

关系运算

---

关系运算用于比较数据之间的大小关系。

关系运算符主要有一下八个：>　　<　　>=　　<=　　==　　!=　　===　　!==

关系表达式的返回值为 Boolean 类型：true / false 。

代码案例

// 关系运算

var n1 = 10, n2 = 20, n3 = 20;

console.log(

n1 < n2, // true

n2 >= n3, // true

n2 == n3, // true

n2 != n3, // false

);

在关系运算中存在隐式转换，默认一切转为数字在参与运算

// 在关系运算中存在隐式转换，默认一切转为数字在参与运算。

var n = 2, s = “3”, b = true;

console.log(

s > n, // true

b < s, // true

s - n == b, // true

s >= b, // true

s - n >= b, // true

);

特殊情况一 ：两个字符串作比较 。不在转换为数字，而是依次比较每一个字符的 Unicode编号大小。

console.log(

“12” > “3”, // “1” VS “3” --> false

“eric” < “jerry”, // “e” VS “j” --> true

“scott” > “smith” , // “c” VS “m” --> false

“123” > “12” // 当前面字符一样大，比个数。 true

)

特殊情况二 ：null 和 undefined

var n; // undefined

var m = null;

console.log(

n == null, // false

m == undefined, // true

null == undefined // true

);

=== 全等，先比较数据类型是都相同，再比较值是否相同，相当于不带隐式转换的 ==。

接上边例子

var n; // undefined

var m = null;

console.log(

n === null, // false

m === undefined, // false

null === undefined, // false

“3” == 3, // true

“3” === 3, // false

“1” == true, // true

“1” === true, // false

);

特殊情况三 NaN 不大于，不小于，不等于任何值。

- NaN的意思是“不是一个数字”，两个不是一个数字的值没法比较，就是false

var a = NaN;

console.log(

a == NaN, // false

a > NaN, // false

a < NaN, // false

a != NaN,// true

2 != NaN, // true

“abc” != NaN // true

);

使用方法 isNaN(num) 来判断num是否是一个数字

-  如果 num 不是数字或者无法转换为数值，就返回 true。

• 如果 num 是数字或者可以用个隐式转换为数值，就返回 false。

console.log(

isNaN(“abc”), // true

isNaN(3), // false

isNaN(“3”), // false

);

• 习惯上，我们反着用 !isNaN(num)

• 如果为 true 是数字，不过为 false 就不是数字。

console.log(

!isNaN(“abc”), // false

!isNaN(3), // true

!isNaN(“3”), // true

);

逻辑运算

---

逻辑运算是将多个表达式的结果综合得出最终结论。

逻辑运算符有三个：

- &&（与/并且）

- || （或/或者）

- ！（非/不）

逻辑与  &&

逻辑与，当所有条件都满足是返回true，否则为false。

价格便宜  &&  销量高   &&  评价好

true                true               true      ==>   true

true                true              false    ==>   false

逻辑或  ||

逻辑或，只要一个条件满足就返回true，所有条件都不满足返回false。

距离 　 || 　 价格

true 　　　   true 　 ==>　true

true 　　　  false　 ==>    true

false　　　  false     ==>    false

逻辑非 ！

逻辑非，颠倒结果 如果是true返回false ，如果是false就返回true。

!true==> false

!false ==> true

!isNaN() ==> isNaN()

案例代码

var n = 10, m = 20;

console.log(

// 逻辑与

n > 5 && n < 20,// true

n > 5 && n < 8, // false

n > 5 && n < m && n < 10, // true && ture && false ==> false

// 逻辑或

n < m || n > 20, // true || false ==> true

n > 5 || n < 8, // true || false ==> true

n > 5 || n < m || n < 10, // true

// 逻辑非

!(n + m) == 30, // !true ==> false

);

运算符的优先级

下面的表将所有运算符按照优先级的不同从高到低排列。

短路逻辑

---

如果前一个条件已经可以得出最终总结，则后续的条件不再执行。

-  && 如果前一个条件为 true ，则后续的条件才会继续执行。

- 　　如果前一个条件为 false，则后续的条件不在执行，直接返回结果 false。

-   ||   如果前一个条件为 true，则后续的条件不在执行，直接返回 true。

-    　 如果前一个条件为 false ，则后续的条件继续执行。

短路逻辑 案例代码

var n = 10;

console.log(

n >= 10 && m == 2 // true && 未声明报错 ==> 未声明报错

);

console.log(

n >= 10 || m == 2 // true && 未声明报错 (但未执行) ==> true

);

console.log(

n < 10 && m == 2 // false && 未声明报错（但未执行） ==> false

);

console.log(

n < 10 || m == 2 // false && 未声明报错 ==> 未声明报错

);

利用逻辑与的短路实现简单的分支，只有满足了某个条件，才会做某事

案例代码

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

完整版面试题资料免费分享，只需你点赞支持，动动手指点击此处就可免费领取了。

前端实习面试的套路

---

回顾项目

往往在面试时，面试官根据你简历中的项目由点及面地展开问答，所以请对你做过的最好的项目进行回顾和反思。回顾你做过的工作和项目中最复杂的部分，反思你是如何完成这个最复杂的部分的。

面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化，即使你项目中没有对那部分进行优化，你也应该预先思考有什么优化的方案。如果这部分答好了，会给面试官留下很不错的印象。

重点在于基础知识

这里指的基础知识包括：前端基础知识和学科基础知识。

前端基础知识：html/css/js 的核心知识，其中 js 的核心知识尤为重要。比如执行上下文、变量对象/活动对象（VO/AO）、作用域链、this 指向、原型链等。

学科基础知识：数据结构、计算机网络、算法等知识。你可能会想前端不需要算法，那你可能就错了，在大公司面试，面试官同样会看重学生这些学科基础知识。
你可能发现了我没有提到React/Vue这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。
这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。如果你没有使用过框架，那也不需要太担心，把重点放在基础知识和学科基础知识之上，有其余精力的话可以去看看主流框架的核心思想。

---

回顾项目

往往在面试时，面试官根据你简历中的项目由点及面地展开问答，所以请对你做过的最好的项目进行回顾和反思。回顾你做过的工作和项目中最复杂的部分，反思你是如何完成这个最复杂的部分的。

面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化，即使你项目中没有对那部分进行优化，你也应该预先思考有什么优化的方案。如果这部分答好了，会给面试官留下很不错的印象。

重点在于基础知识

这里指的基础知识包括：前端基础知识和学科基础知识。

前端基础知识：html/css/js 的核心知识，其中 js 的核心知识尤为重要。比如执行上下文、变量对象/活动对象（VO/AO）、作用域链、this 指向、原型链等。

学科基础知识：数据结构、计算机网络、算法等知识。你可能会想前端不需要算法，那你可能就错了，在大公司面试，面试官同样会看重学生这些学科基础知识。
你可能发现了我没有提到React/Vue这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。
这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。如果你没有使用过框架，那也不需要太担心，把重点放在基础知识和学科基础知识之上，有其余精力的话可以去看看主流框架的核心思想。