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
/*
-
- 所有表达式都是从左往右执行
-
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。如果你没有使用过框架,那也不需要太担心,把重点放在基础知识和学科基础知识之上,有其余精力的话可以去看看主流框架的核心思想。