本文共 6258 字，大约阅读时间需要 20 分钟。

JavaScript基础面试题答案（101题）

1. JavaScript垃圾回收机制

JavaScript的垃圾回收机制主要有标记清除和引用计数两种方式。标记清除适用于大部分情况，通过跟踪对象的引用情况，标记不再被引用并清理内存。引用计数用于管理循环引用，确保内存泄漏的及时清理。

2. DOM节点类型

DOM节点主要包括：

• 文档（Document）：整个网页内容的入口。
• 元素（Element）：对应HTML标签。
• 属性（Attribute）：HTML标签的属性值。
• 文本（Text）：HTML元素内的文本内容。

3. script标签的defer和async

• defer：脚本在页面加载完成后立即执行，按顺序下载并运行脚本。
• async：脚本在下载完成后立即执行，脚本运行不影响页面加载顺序。

4. 闭包（Closure）

闭包是函数嵌套函数产生的，具有以下特点：

• 可以访问外部变量和参数。
• 拥有自己的闭包环境，内部变量不会被垃圾回收器回收。

5. unshift方法

unshift用于将元素添加到数组开头，示例：

var name = ["john"];
name.unshift("charlie", "joseph");
// 结果：["joseph", "Jane", "charlie", "john"]

6. encodeURI和decodeURI

• encodeURI：将URL转换为十六进制编码。
• decodeURI：将编码后的URL转换回原始URL。

7. innerHTML的缺点

• 内容会被完全重新解析，页面加载速度变慢。
• 不支持部分更新，容易引入错误代码。

8.隐藏JavaScript代码

方法：在<script>标签前后添加HTML注释：

   
     
//
   >

9. DOM操作方法

• 创建节点：document.createElement、document.createTextNode。
• 添加节点：appendChild、append、insertBefore。
• 移除节点：removeChild、detach。
• 查找节点：getElementsByTagName、getElementsByName、getElementById。

10. 浏览器间通信

主要方法：

• localStorage：在同一浏览器中多个标签页间通信。
• cookies：通过在客户端设置存储的数据。

11. null与undefined

• null：表示无对象，转为数值为0。
• undefined：表示缺少值，转为数值为NaN。

12. new操作符

创建对象并链接到原型链，返回this引用的对象。

13. JavaScript延迟加载

主要方法：

• defer和async脚本标签。
• 动态创建DOM并加载脚本。

14. call与apply

• call：按顺序传递参数，第一个参数是this。
• apply：传递一个参数数组，按数组顺序传递参数。

15. 内存泄漏

常见原因：

• 未清理闭包引用的对象。
• 遗忘的事件监听器。
• 不断延迟调用的函数。

16. IE与Firefox的区别

• 事件模型：IE支持attachEvent，Firefox支持addEventListener。
• 布局属性：IE使用currentStyle，Firefox使用getComputedStyle。

17. 创建JavaScript对象

方法多样，包括：

• new Object、
• 字面量 {}、
• 工厂模式、安全工厂模式等。

18. 异步编程

方法：

• 回调函数：简单易实现，但耦合度高。
• 事件监听：支持模块化编程。
• Promise对象：规范化异步操作。

19. 同源策略

限制同一来源的脚本访问其他源的窗口和文档。

20. 同源限制原因

防止跨站脚本攻击（XSS），保护用户隐私。

21. 函数作为第一类对象

函数可以被传递、赋值、返回等，具有高度的灵活性。

22. 事件机制

事件冒泡：事件从被触发对象向上向上级传播。阻止方法：e.stopPropagation()。

23. 函数声明与表达式

函数声明先于执行，函数表达式需等到解析时执行。

24. 删除cookie

document.cookie = 'user=icket; expires=' + new Date(0);

25. 字符串长度统计

考虑双字字符：

function getBytes(str) {
    let len = str.length;
    let bytes = len;
    for (let i = 0; i < len; i++) {
        if (str.charCodeAt(i) > 255) bytes++;
    }
    return bytes;
}

26. attribute与property

• attribute：HTML标签属性。
• property：对象属性，双向绑定时会自动更新。

27. 延迟脚本作用

延迟脚本的执行，提升页面加载速度。

28. 闭包示例

function hello() {
    var num = 100;
    var showResult = function() { alert(num); }
    num++;
    return showResult;
}
var showResult = hello();
showResult();

29. 判断对象类

使用 instanceof 和 constructor。

30. JavaScript事件处理

通过对象属性添加事件处理函数，支持冒泡和捕获。

31. hasOwnProperty

检查对象自身属性，不查找原型链。

32. JavaScript DOM操作

通过document对象操作DOM元素。

33. document.write与innerHTML

• document.write：重绘整个页面。
• innerHTML：更新页面一部分内容。

34. 读取文件内容

通过XMLHttpRequest或FileReader。

35. 分配数组属性

通过document.getElementById或直接赋值。

36. JavaScript编码规范

• 避免多变量声明。
• 使用==和!==比较。
• 使用对象字面量。

37. eval的危害

性能低下，易引入安全漏洞。

38. ["1", "2", "3"].map(parseInt)

结果：[1, NaN, NaN]。

39. this对象

指向调用函数的对象，通常为全局对象。

40. web-garden与web-farm

• web-garden：多处理器共享资源。
• web-farm：多服务器集群。

41. document.write用法

页面加载时创建内容，或新窗口。

42. 类数组转数组

var arr = [1, 2, 3];
var result = Array.prototype.slice.call(arr);

43. caller与callee

• caller：调用当前函数的函数。
• callee：正在执行的函数。

44. 快速排序算法

选择基准，分区，递归排序子区。

45. 字符串去重统计

function dealstr(str) {
    var obj = {};
    for (var i = 0; i < str.length; i++) {
        var v = str.charAt(i);
        if (obj[v] && obj[v].count === v) {
            obj[v].count++;
        } else {
            obj[v] = { count: 1, value: v };
        }
    }
    return obj;
}

46. trim方法

Object.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, '');
};

47. 常见浏览器兼容性问题

• 事件绑定：IE8支持attachEvent。
• stopPropagation：IE8支持e.stopPropagation()。

48. 闭包优缺点

优点：属性私有化；缺点：内存泄漏风险。

49. 数组去重合并

function concat(arr) {
    var _concat = function(arrl, arr2) {
        for (var i = 0, len = arr2.length; i < len; i++) {
            if (arrl.indexOf(arr2[i]) === -1) {
                arrl.push(arr2[i]);
            }
        }
        return arrl;
    };
    return function() {
        var result = [];
        for (var i = 0, len = arguments.length; i < len; i++) {
            _concat(result, arguments[i]);
        }
        return result;
    };
}

50. 正则表达式trim方法

Object.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, '');
};

51. 提取电话号码

var str = "12345678901 021-12345678 有课前端网 0418-1234567  13112345678";
var reg = /(\d{1,})|(\d{0,3}-\d{7,8})/g;
str.match(reg); // [12345678901, 021-12345678, 0418-1234567, 13112345678]

52. 逻辑运算符

&&（与）、‖（或）、！（非）。

53. 事件代理

通过事件冒泡将事件处理委托给父元素，提升性能。

54. JavaScript定义

高级的动态编程语言，支持面向事件驱动和单线程异步操作。

55. Java与JavaScript区别

• Java是静态类型语言，支持面向对象编程。
• JavaScript是解释性语言，支持动态类型和异步编程。

56. JavaScript比ASP快

无需服务器协助执行，运行速度更快。

57. 负无穷大

Infinity表示超出数值范围，-Infinity表示负无穷。

58. JavaScript代码分行

使用`'``分割字符串，其他行需与函数保持一致。

59. 未声明与未定义变量

• 未声明变量：直接访问未声明变量会报错。
• 未定义变量：声明但未赋值的变量，默认值为undefined。

60. 动态添加新元素

document.getElementById('ikt').appendChild(p);

61. 全局变量问题

全局变量难以管理，容易引起变量冲突。

62. JavaScript定时器

通过setTimeout和setInterval实现定时任务。

63. ViewState与SessionState

• ViewState：页面特定。
• SessionState：用户特定。

64. ===运算符

严格比较值和类型。

65.提交表单

document.getElementById('form').submit();

66. 元素样式与类

• 样式：element.style.cssText。
• 类：element.className。

67. JavaScript循环结构

包括for、while、do...while、for...in、for...of。

68. parseInt基数

parseInt("4F", 16); // 15

69. ==与===

• ==：比较值。
• ===：比较值和类型。

70. 3+2+"7"

结果为57，因为字符串会被转换为数值。

71. 检测操作系统

navigator.appVersion。

72. null表示

表示无值或空对象。

73. delete操作符

删除对象属性，不可用于变量或函数。

74. 弹出框类型

alert、confirm、prompt。

75. void(0)

返回undefined，常用于不刷新页面。

76.加载新页面

location.href = 'http://newhost/newpath/newfile.html';

77. 转义字符

用于表示特殊字符，如&、<、>等。

78. JavaScript cookie

用于存储客户端数据，浏览器发送给服务器。

79. pop方法

移除数组末尾元素。

80. innerHTML缺点

页面加载速度慢，易于注入攻击。

81. break与continue

• break：退出循环。
• continue：跳过当前循环。

82. datatype基本组

• 原始类型：boolean、number、string。
• 引用类型：object、function。

83. 创建通用对象

var o = new Object();。

84. typeof运算符

返回类型字符串，如'number'、'object'。

85. 处理异常

使用try...catch...finally。

86. 错误类型

-加载时错误、运行时错误、逻辑错误。

87. push方法

添加元素到数组末尾。

88. unshift方法

添加元素到数组开头。

89. 添加对象属性

点语法：obj.prop = value；中括号语法：obj['prop'] = value。

90. 检查CheckBox状态

document.getElementById('checkbox1').checked。

91. window.onload与onDocumentReady

• onload：页面完全加载后执行。
• onDocumentReady：DOM加载后立即执行。

92. 闭包理解

闭包允许函数访问外部变量，保持内存不释放。

93. 添加数组元素

arr[arr.length] = value 或 arr.push(value)。

94. for-in循环

遍历对象属性，适合用于枚举对象键。

95. 匿名函数

没有名称，常用于回调或简化代码。

96. DOM事件流

事件流包括事件对象和事件流方向。

97. 事件冒泡

事件从被触发对象向上级传播。

98. arguments对象

类数组对象，无法直接调用数组方法。

99. 构造函数

用于创建对象，必须与类名匹配。

100. JavaScript与CSS阻塞

JavaScript阻塞资源下载，CSS加载影响性能。