2024年Web前端最全JavaScript面试题整理，2024年最新2024百度前端面试题及答案

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

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

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

document.getElementById(“ID”).value

4.设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)

var dom = document.getElementById(“ID”);

dom.innerHTML = “xxxx”;

dom.style.color = “#000”;

5.已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)

document.getElementById(“ID”).value

6.希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)

var checkBoxList = [];

var len = domList.length;　　//缓存到局部变量

while (len–) {　　//使用while的效率会比for循环更高

if (domList[len].type == ‘checkbox’) {

checkBoxList.push(domList[len]);

}

}

7.当一个DOM节点被点击时候，希望执行一个函数，应该怎么做？

直接在DOM里绑定事件：

在JS里通过onclick绑定：xxx.onclick = test

通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)

8.javascript的事件流模型

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

9.什么是ajax和json？优缺点

Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。

优点： 可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量 避免用户不断刷新或者跳转页面，提高用户体验

缺点： 对搜索引擎不友好（ 要实现ajax下的前后退功能成本较大 可能造成请求数的增加 跨域问题限制 JSON是一种轻量级的数据交换格式，ECMA的一个子集 优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

10.输出var a；alert（typedef a）; // undefined alert(b); // 报错

Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

11.var a=null；alert（typedef a）;

null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。

12.Var underfined; undefind=null; 1=true; 0=false; 0=’’; []=false; []=![];

var undefined;

undefined == null; // true

1 == true; // true

2 == true; // false

0 == false; // true

0 == ‘’; // true

NaN == NaN; // false

[] == false; // true

[] == ![]; // true

undefined与null相等，但不恒等（===）

一个是number一个是string时，会尝试将string转换为number

尝试将boolean转换为number，0或1

尝试将Object转换成number或string，取决于另外一个对比量的类型

所以，对于0、空字符串的判断，建议使用 “===” 。

“===”会先判断两边的值类型，类型不匹配时为false。

详细解释请点击：

https://blog.csdn.net/liuwengai/article/details/52628652?utm_source=copy

13.输出今天的日期 格式YYYY-MM-DD 2018-09-10

var d = new Date();

var year = d.getFullYear(); // 获取年，getFullYear()返回4位的数字

var month = d.getMonth() + 1; // 获取月，月份比较特殊，0是1月，11是12月

month = month < 10 ? ‘0’ + month : month; // 变成两位

var day = d.getDate(); // 获取日

day = day < 10 ? ‘0’ + day : day; // 变成两位

alert(year + ‘-’ + month + ‘-’ + day);

14.

for（var i=1;i<=3;i++）{

setTimeOut(function(){

console.log(i);

},0);

}

setTimeout是异步的代码，即使setTimeout中设置的等待时间为0也不会立刻执行，for循环代码是同步，所以要等待for循环执行完以后才会执行setTimeout。

上面这个代码块会打印三个 4 出来，而我们预想的结果是打印 1 2 3 。

之所以会这样，是因为 setTimeout 中的 i 是对外层 i 的引用。当 setTimeout 的代码被解释的时候，运行时只是记录了 i 的引用，而不是值。而当 setTimeout 被触发时，三个 setTimeout 中的 i 同时被取值，由于它们都指向了外层的同一个 i，而那个 i 的值在迭代完成时为 4，所以打印了三次 4。

全文地址请点击：

https://blog.csdn.net/u012872875/article/details/52601477?utm_source=copy

15.数组和对象有哪些原生方法，列举一下？

Array.concat( ) 连接数组

Array.join( ) 将数组元素连接起来以构建一个字符串

Array.length 数组的大小

Array.pop( ) 删除并返回数组的最后一个元素

Array.push( ) 给数组添加元素

Array.reverse( ) 颠倒数组中元素的顺序

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

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

篇幅有限，仅展示部分截图：