2024年前端最全JavaScript从入门到精通之入门篇（一）概念与语法，头条面试Web前端

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

二进制数值： 1101 0001 0011 0011 1101

二进制比值： 8421 8421 8421 8421 8421

16进制下标： 13 1 3 3 13

16进制结果： d 1 3 3 d

所以：11010001001100111101（二进制） = d133d （16进制）

位非运算符 ~

位与运算符 &

有一个0为0，没有0为1

• 1 & 1 = 1， 1 & 0 = 0，0 & 1 = 0，0 & 0 = 0

var a = 20; // 转成二进制：10100

var b = 10; // 转成二进制：01010

// 位与运算后：00000 转成10进制 --> 0

console.log(a&b); // 输出：0

位或运算符 |

有一个1为1，没有1为0

• 1 | 1 = 1， 1 | 0 = 1，0 | 1 = 1，0 | 0 = 0

var a = 20; // 转成二进制：10100

var b = 10; // 转成二进制：01010

// 位或运算后：11110 转成10进制 --> 30

console.log(a|b); // 输出：30

位异或运算符^

相同为0，不同为1

• 1 ^ 1 = 0， 1 ^ 0 = 1，0 ^ 1 = 1，0 ^ 0 = 0

var a = 20; // 转成二进制：10100

var b = 10; // 转成二进制：01010

// 异或运算后：11110 转成10进制 --> 30

console.log(a^b); // 输出：30

左移位运算符、右移位运算符

console.log(8<<2); // 10000 --> 32

console.log(8>>2); // 10 --> 2

console.log(1<<n); // 可以求2的n次幂

console.log((0x0000FF<<16).toString(16)); // 颜色值

关系运算符

常见的关系运算符：< >

重点关注 == 和 === 的区别:

• == 自带隐式转换

null == undefined

0 == “” == false

NaN与任何内容都不同，NAN也不等于NaN，常使用isNaN判断某值是否为数字

console.log(1 == “1”); // true

console.log(null == undefined); // true

console.log(0 == “”); // true

console.log(0 == false); // true

console.log(isNaN(parseInt(‘10a’))); // false

if(!x) { // 满足条件的x值有： “” 0 false undefined null NaN

}

• === 表示两者之间的类型和值是否都相等

逻辑运算符

常用的逻辑运算符有： ! && ||

7.循环语句

---

所谓循环，具体有以下几个特点：

• 必须要有条件初始变量

• 必须要有进入循环的条件

• 必须有向条件外发展的表达式

while循环

例子：

按钮0

按钮1

按钮2

按钮3

按钮4

按钮5

按钮6

按钮7

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

96dc6408ce1486031.png)

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。