Web前端最全JavaScript由浅到深【含案例源码】，2024年最新Web前端中高级岗面试为何越来越难

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

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

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

5. 逻辑运算符

&& || !  

\* 其他类型转boolean：  

1\. number：0或NaN为假，其他为真  

2\. string：除了空字符串("")，其他都是true  

3\. null&undefined:都是false  

4\. 对象：所有对象都为true

注意:（1）任何类型的数值进行两次非运算都能转换成布尔型；

（2）逻辑&&运算如果第一个是true则输出结果是第二个，如果第一个是false则输出结果是第一个；（因为有短路现象）；

（3）逻辑||运算如果第一个是true则输出结果是第一个，如果第一个是false则输出是第二个。（因为有短路现象）

6. 三元运算符

\* 语法：  

\* 表达式? 值1:值2;  

\* 判断表达式的值，如果是true则取值1，如果是false则取值2；

6. 运算符的优先级

1.先算优先级高的再算优先级低的  

2.优先级一样则从左到右计算

7. JS特殊语法：

| 比较运算 | 描述 |

| — | — |

| === | 绝对等于(值和类型均相等) |

| !== | 不绝对等于(值和类型有一个不相等，或两个都不相等) |

8. 练习：99乘法表

2.2.基本对象

2.2.1.Function：函数(方法)对象

1. 创建：

1\. var fun = new Function(形式参数列表,方法体); //忘掉吧  

2.  

function 方法名称(形式参数列表){  

方法体  

}  

3.  

var 方法名 = function(形式参数列表){  

方法体  

}

2. 方法：

3. 属性：

length:代表形参的个数

4. 特点：

1\. 方法定义是，形参的类型不用写,返回值类型也不写。  

2\. 方法是一个对象，如果定义名称相同的方法，会覆盖  

3\. 在JS中，方法的调用只与方法的名称有关，和参数列表无关  

4\. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数  

5\. 调用：  

方法名称(实际参数列表);

2.2.2. Array:数组对象(数组类型、长度可变)

1. 创建：

1\. var arr = new Array(元素列表);  

2\. var arr = new Array(默认长度);  

3\. var arr = \[元素列表\];

2. 方法

join(参数):将数组中的元素按照指定的分隔符拼接为字符串  

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

3. 属性

var nameArr=\[“宝玉”,“黛玉”,“湘云”\];  

var len=nameArr.length; //获取数组的长度，因为是属所以不是length()

2.2.3.Boolean

2.3.4. Date：日期对象

1. 创建日期对象：

var date1 = new Date();  

var date2 = new Date(milliseconds);  

var date3 = new Date(dateString);  

var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

2. 日期对象方法：

toLocaleString()：返回当前date对象对应的时间本地字符串格式  

getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

2.2.5. Math：数学对象

1. 创建：

var num=Math.random();// 返回 0 ~ 1 之间的随机数。  

var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。  

var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。

2. 方法：

random():返回 0 ~ 1 之间的随机数。 含0不含1  

ceil(x)：对数进行上舍入。  

floor(x)：对数进行下舍入。  

round(x)：把数四舍五入为最接近的整数。

3. Math常用属性：

var pi=Math.PI;//返回圆周率

2.2.6. RegExp：正则表达式对象

1. 正则表达式：使用单个字符串来 描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换

1\. 单个字符:\[\]  

如： \[a\] \[ab\] \[a-zA-Z0-9\_\]  

\* 特殊符号代表特殊含义的单个字符:  

\\d:单个数字字符 \[0-9\]  

\\w:单个单词字符\[a-zA-Z0-9\_\]  

2\. 量词符号：  

?：表示出现0次或1次  

\*：表示出现0次或多次  

+：出现1次或多次  

{m,n}:表示 m<= 数量 <= n  

\* m如果缺省： {,n}:最多n次  

\* n如果缺省：{m,} 最少m次  

3\. 开始结束符号  

\* ^:开始  

\* $:结束

2. 正则对象：

1\. 创建  

1\. var reg = new RegExp(“正则表达式”);  

2\. var reg = /正则表达式/;  

2\. 方法  

test(参数):验证指定的字符串是否符合正则定义的规范

语法

var reg=new RegExp(/正则表达式主体/,修饰符(可选)); 或更简单的方法

var reg=/正则表达式主体/修饰符(可选);

案例:

var reg=new RegExp(/kaikeba/i);

var reg = /kaikeba/i; //此处定义了一个一个正则表达式。 kaikeba 是一个正则表达式主体 (用于检索)。i 是一个修饰符 (搜索不区分大小写)。

3.事件简单学习

---

常用HTML事件:

| 事件 描述 | |

| — | — |

| onchange | HTML 元素改变 |

| onclick | 用户点击 HTML 元素 |

| onmouseover | 用户在一个HTML元素上移动鼠标 |

| onmouseout | 用户从一个HTML元素上移开鼠标 |

| onkeydown | 用户按下键盘按键 |

| onload | 浏览器已完成页面的加载 |

| onfocus | 元素获取焦点时触发 |

| onblur | 元素失去焦点时触发 |

代码:

• 案例1：电灯开关

效果展示:

点击:

4.BOM(Browser Object Model，中文浏览器对象模型)

---

Window：窗口对象

1. 创建

2. 方法

3. 与弹出框有关的方法：

alert() 显示带有一段消息和一个确认按钮的警告框。  

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。  

\* 如果用户点击确定按钮，则方法返回true  

\* 如果用户点击取消按钮，则方法返回false  

prompt() 显示可提示用户输入的对话框。  

\* 返回值：获取用户输入的值

4. 与打开关闭有关的方法：

close() 关闭浏览器窗口。  

\* 谁调用我 ，我关谁  

open() 打开一个新的浏览器窗口  

\* 返回新的Window对象  

3\. 与定时器有关的方式  

setTimeout() 在指定的毫秒数后调用函数或计算表达式。  

\* 参数：  

1\. js代码或者方法对象  

2\. 毫秒值  

\* 返回值：唯一标识，用于取消定时器  

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。  

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。  

clearInterval() 取消由 setInterval() 设置的 timeout。

3. 属性：

1\. 获取其他BOM对象：  

history  

location  

Navigator  

Screen:

4. 获取DOM对象

document

4. 特点

\* Window对象不需要创建可以直接使用 window使用。 window.方法名();  

\* window引用可以省略。 方法名();

4. Location：地址栏对象

1. 创建(获取)：

1\. window.location  

2\. location

2. 方法：

\* reload() 重新加载当前文档。刷新

3. 属性

\* href 设置或返回完整的 URL。

5. History：历史记录对象

1. 创建(获取)：

1\. window.history  

2\. history

2. 方法：

\* back() 加载 history 列表中的前一个 URL。  

\* forward() 加载 history 列表中的下一个 URL。  

\* go(参数) 加载 history 列表中的某个具体页面。  

\* 参数：  

\* 正数：前进几个历史记录  

\* 负数：后退几个历史记录

3. 属性：

\* length 返回当前窗口历史列表中的 URL 数量。

5.DOM

---

• 概念： Document Object Model 文档对象模型

\* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

• W3C DOM 标准被分为 3 个不同的部分：

\* 核心 DOM - 针对任何结构化文档的标准模型  

\* Document：文档对象  

\* Element：元素对象  

\* Attribute：属性对象  

\* Text：文本对象  

\* Comment:注释对象  

\* Node：节点对象，其他5个的父对象  

\* XML DOM - 针对 XML 文档的标准模型  

\* HTML DOM - 针对 HTML 文档的标准模型

• 核心DOM模型：

\* Document：文档对象

1. 创建(获取)：在html dom模型中可以使用window对象来获取

1\. window.document  

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

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

前端面试题汇总

JavaScript