这是我参与更文挑战的第28天，活动详情查看： 更文挑战
14万字 | 400 多道 JavaScript 面试题 🎓 有答案 🌠(第一部分 1-100题)
14万字 | 400 多道 JavaScript 面试题 🎓 有答案 🌠(第二部分 101-200题)
14万字 | 400 多道 JavaScript 面试题 🎓 有答案 🌠(第三部分 201-300题)
14万字 | 400 多道 JavaScript 面试题 🎓 有答案 🌠(第四部分 301-370题)
14万字 | 400 多道 JavaScript 面试题 🎓 有答案 🌠(第五部分 371-424题)
为了方便阅览，我在必要位置都放了回顶部或者回对应问题的链接
101.谁创造了 JavaScript ？
JavaScript 是由 Brendan Eich 于 1995 年在 Netscape Communications 期间创建的。 最初它是以 Mocha 的名义开发的，但后来在 Netscape 的测试版中首次发布时，该语言被正式称为 LiveScript。当时Sun公司和网景公司有合作，SUN公司注册了“JavaScript”商标，两公司协商后把LiveScript改成了现在的JavaScript。
102.preventDefault 方法有什么用？
如果事件是可取消的，则 preventDefault() 方法会取消该事件，这意味着属于该事件的默认操作或行为将不会发生。例如，单击提交按钮时阻止表单提交和单击超链接时阻止打开页面 URL 是一些常见用例。
document.getElementById("link").addEventListener("click", function(event){
event.preventDefault();
});
==注意==：请记住，并非所有事件都可以取消。
103.stopPropagation方法有什么用？
stopPropagation 方法用于阻止事件在事件链中向上冒泡。例如，以下带有 stopPropagation 方法的嵌套 div 在单击嵌套 div(Div1) 时可防止默认事件传播
<p>Click DIV1 Element</p>
<div onclick="secondFunc()">DIV 2
<div onclick="firstFunc(event)">DIV 1</div>
</div>
<script>
function firstFunc(event) {
alert("DIV 1");
event.stopPropagation();
}
function secondFunc() {
alert("DIV 2");
}
</script>
104.return false 涉及哪些步骤？
事件处理程序中的 return false 语句执行以下步骤，
1.首先它停止浏览器的默认操作或行为。 2.它阻止事件传播 DOM 3.停止回调执行并在调用时立即返回。
105.什么是BOM(浏览器对象模型)？
浏览器对象模型 (BOM) 允许 JavaScript 与浏览器“对话”。它由作为窗口子项的对象导航器、历史记录、屏幕、位置和文档组成。浏览器对象模型不是标准化的，可以根据不同的浏览器而变化。
106.setTimeout有什么用？
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。例如，让我们使用 setTimeout 方法在 2 秒后记录一条消息，
setTimeout(function(){ console.log("Good morning"); }, 2000);
107.setInterval有什么用？
setInterval() 方法用于以指定的时间间隔（以毫秒为单位）调用函数或计算表达式。例如，让我们使用 setInterval 方法在 2 秒后记录一条消息，
setInterval(function(){ console.log("Good morning"); }, 2000);
108.为什么 JavaScript 被视为单线程？
JavaScript 是一种单线程语言。因为语言规范不允许程序员编写代码以便解释器可以在多个线程或进程中并行运行其中的一部分。而像 java、go、C++ 这样的语言可以制作多线程和多进程程序。
109.什么是event delegation（事件委托）？
事件委托是一种侦听事件的技术，您可以委托一个父元素作为其内部发生的所有事件的侦听器。
例如，如果您想检测特定表单内的字段变化，您可以使用事件委托技术，
var form = document.querySelector('#registration-form');
// 听从表单内字段的更改
form.addEventListener('input', function (event) {
// 记录已更改的字段
console.log(event.target);
}, false);
110.什么是 ECMAScript？
ECMAScript 是构成 JavaScript 基础的脚本语言。ECMAScript 由 ECMA 国际标准组织在 ECMA-262 和 ECMA-402 规范中标准化。ECMAScript 的第一版于 1997 年发布。
111.什么是 JSON？
JSON（JavaScript Object Notation）是一种用于数据交换的轻量级格式。它基于 JavaScript 语言的一个子集，对象是在 JavaScript 中构建的。
112.JSON的语法规则是什么？
下面是 JSON 的语法规则列表
1.数据在名称/值对中 2.数据以逗号分隔 3.花括号容纳对象 4.方括号保存数组
113.JSON 字符串化的目的是什么？
向 Web 服务器发送数据时，数据必须采用字符串格式。您可以通过使用 stringify() 方法将 JSON 对象转换为字符串来实现此目的。
var userJSON = {'name': 'Haiyong', age: 31}
var userString = JSON.stringify(user);
console.log(userString); //"{"name":"Haiyong","age":31}"
114.你如何解析 JSON 字符串？
从 Web 服务器接收数据时，数据始终为字符串格式。但是您可以使用 parse() 方法将此字符串值转换为 javascript 对象。
var userString = '{"name":"Haiyong","age":31}';
var userJSON = JSON.parse(userString);
console.log(userJSON);// {name: "Haiyong", age: 31}
115.为什么需要 JSON？
在浏览器和服务器之间交换数据时，数据只能是文本。由于 JSON 仅为文本，因此它可以轻松地与服务器之间进行发送和发送，并可用作任何编程语言的数据格式。
116.什么是 PWA？
渐进式 Web 应用程序 (Progressive web applications) 是一种通过 Web 交付的移动应用程序，使用常见的 Web 技术（包括 HTML、CSS 和 JavaScript）构建。这些 PWA 部署到服务器上，通过 URL 访问，并由搜索引擎索引。
117.clearTimeout 方法的目的是什么？
javascript 中使用 clearTimeout() 函数来清除之前由 setTimeout() 函数设置的超时。即， setTimeout() 函数的返回值存储在一个变量中，并将其传递给 clearTimeout() 函数以清除计时器。
例如，下面的 setTimeout 方法用于在 3 秒后显示消息。可以通过 clearTimeout() 方法清除此超时。
<script>
var msg;
function greeting() {
alert('Good morning');
}
function start() {
msg =setTimeout(greeting, 3000);
}
function stop() {
clearTimeout(msg);
}
</script>
118.clearInterval 方法的目的是什么？
javascript 中使用 clearInterval() 函数清除 setInterval() 函数设置的间隔。即， setInterval() 函数返回的返回值存储在一个变量中，并将其传递给 clearInterval() 函数以清除间隔。
例如，下面的 setInterval 方法用于每 3 秒显示一次消息。可以通过 clearInterval() 方法清除此间隔。
<script>
var msg;
function greeting() {
alert('Good morning');
}
function start() {
msg = setInterval(greeting, 3000);
}
function stop() {
clearInterval(msg);
}
</script>
119.你如何在javascript中重定向新页面？
在 vanilla javascript 中，您可以使用locationwindow 对象的属性重定向到新页面。语法如下，
function redirect() {
window.location.href = 'newPage.html';
}
120.你如何检查一个字符串是否包含一个子字符串？
有 3 种可能的方法来检查字符串是否包含子字符串，
1.使用 includes： ES6 提供的String.prototype.includes方法来测试字符串是否包含子字符串
var mainString = "hello", subString = "hell";
mainString.includes(subString)
2.使用 indexOf：在 ES5 或更旧的环境中，您可以使用String.prototype.indexOfwhich 返回子字符串的索引。如果索引值不等于 -1，则表示子字符串存在于主字符串中。
var mainString = "hello", subString = "hell";
mainString.indexOf(subString) !== -1
3.使用 RegEx：高级解决方案是使用正则表达式的测试方法( RegExp.test)，它允许针对正则表达式进行测试
var mainString = "hello", regex = /hell/;
regex.test(mainString)
121.你如何在 javascript 中验证电子邮件？
您可以使用正则表达式在 javascript 中验证电子邮件。建议在服务器端而不是客户端进行验证。因为可以在客户端禁用 javascript。
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
上面的正则表达式接受 unicode 字符。
122.你如何使用 javascript 获取当前 url？
您可以使用window.location.href表达式来获取当前的 url 路径，也可以使用相同的表达式来更新 URL。您也可以document.URL用于只读目的，但此解决方案在 FF 中存在问题。
console.log('location.href', window.location.href); // 返回完整 URL
123.location对象的各种url属性是什么？
以下Location对象属性可用于访问页面的 URL 组件，
1.href - 整个 URL 2.protocol - URL 的协议 3.host - URL 的主机名和端口 4.hostname - URL 的主机名 5.port - URL 中的端口号 6.pathname - URL 的路径名 7.search - URL 的查询部分 8.hash - URL 的锚点部分
124.如何在javascript中获取查询字符串值？
您可以使用 URLSearchParams 在 javascript 中获取查询字符串值。让我们看一个从 URL 查询字符串中获取客户端代码值的示例，
const urlParams = new URLSearchParams(window.location.search);
const clientCode = urlParams.get('clientCode');
125.如何检查对象中是否存在键？
您可以使用三种方法检查对象中是否存在键，
使用 in 运算符：无论对象中是否存在键，您都可以使用 in 运算符
"key" in obj
如果你想检查一个键是否不存在，记得使用括号，
!("key" in obj)
使用 hasOwnProperty 方法：您可以使用hasOwnProperty专门测试对象实例的属性（而不是继承的属性）
obj.hasOwnProperty("key") // true
使用未定义的比较：如果从对象访问不存在的属性，则结果是未定义的。让我们将属性与 undefined 进行比较以确定该属性的存在。
const user = {
name: 'Haiyong'
};
console.log(user.name !== undefined); // true
console.log(user.nickName !== undefined); // false
126.你如何循环或枚举 javascript 对象？
您可以使用for-in循环来循环遍历 javascript 对象。您还可以确保您获得的密钥是对象的实际属性，而不是来自使用hasOwnProperty方法的原型。
var object = {
"k1": "value1",
"k2": "value2",
"k3": "value3"
};
for (var key in object) {
if (object.hasOwnProperty(key)) {
console.log(key + " -> " + object[key]); // k1 -> value1 ...
}
}
127.你如何测试一个空对象？
基于 ECMAScript 版本有不同的解决方案
使用对象条目（ECMA 7+）：您可以使用对象条目长度和构造函数类型。
Object.entries(obj).length === 0 && obj.constructor === Object // Since date object length is 0, you need to check constructor check as well
使用对象键（ECMA 5+）：您可以使用对象键长度和构造函数类型。
Object.keys(obj).length === 0 && obj.constructor === Object // Since date object length is 0, you need to check constructor check as well
将 for-in 与 hasOwnProperty（ECMA 5 之前）一起使用：您可以将 for-in 循环与 hasOwnProperty 一起使用。
function isEmpty(obj) {
for(var prop in obj) {
if(obj.hasOwnProperty(prop)) {
return false;
}
}
return JSON.stringify(obj) === JSON.stringify({});
}
128.什么是参数对象？
arguments 对象是一个类似数组的对象，可在函数内部访问，其中包含传递给该函数的参数的值。例如，让我们看看如何在 sum 函数中使用 arguments 对象，
function sum() {
var total = 0;
for (var i = 0, len = arguments.length; i < len; ++i) {
total += arguments[i];
}
return total;
}
sum(1, 2, 3) // returns 6
==注意==：您不能在参数对象上应用数组方法。但是您可以转换为常规数组，如下所示。
var argsArray = Array.prototype.slice.call(arguments);
129.你如何使字符串的第一个字母大写？
您可以创建一个函数，该函数使用一系列字符串方法（例如 charAt、toUpperCase 和 slice 方法）来生成首字母大写的字符串。
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
130.for循环的优缺点是什么？
for 循环是 JavaScript 中常用的迭代语法。它有利有弊
优点
- 适用于各种环境
- 您可以使用 break 和 continue 流控制语句
缺点
- 太冗长
- Imperative（命令式编程）
- 您可能会面临一次一次的错误
131.你如何在javascript中显示当前日期？
您可以使用new Date()生成包含当前日期和时间的新 Date 对象。例如，让我们以 mm/dd/yyyy 显示当前日期
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = mm + '/' + dd + '/' + yyyy;
document.write(today);
132.你如何比较两个日期对象？
您需要使用 date.getTime() 方法来比较日期值而不是比较运算符（==、!=、=== 和 !== 运算符）
var d1 = new Date();
var d2 = new Date(d1);
console.log(d1.getTime() === d2.getTime()); //True
console.log(d1 === d2); // False
133.你如何检查一个字符串是否以另一个字符串开头？
您可以使用 ECMAScript 6 的String.prototype.startsWith()方法来检查一个字符串是否以另一个字符串开头。但并非所有浏览器都支持它。让我们看一个例子来看看这个用法，
"Good morning".startsWith("Good"); // true
"Good morning".startsWith("morning"); // false
134.你如何在javascript中修剪字符串？
JavaScript 为字符串类型提供了一种修剪方法来修剪出现在字符串开头或结尾的任何空格。
" Hello World ".trim(); //Hello World
如果您的浏览器（<IE9）不支持此方法，那么您可以使用下面的 polyfill。
if (!String.prototype.trim) {
(function() {
// 确保我们修剪 BOM 和 NBSP
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '');
};
})();
}
135.你如何在javascript中添加一个键值对？
向对象添加新属性有两种可能的解决方案。让我们以一个简单的对象来解释这些解决方案。
var object = {
key1: value1,
key2: value2
};
使用点表示法：当您知道属性的名称时，此解决方案很有用
object.key3 = "value3";
使用方括号表示法：当属性的名称是动态确定的时，此解决方案很有用。
obj["key3"] = "value3";
136.‘!–’ 符号是否表示一个特殊运算符？
不，不是特殊运算符。但它是 2 个标准运算符的组合
逻辑否定（！） 前缀递减 (--) 首先，该值减一，然后测试它是否等于零，以确定真/假值。
137.你如何为变量分配默认值？
您可以使用逻辑或运算符 || 在赋值表达式中提供默认值。 语法如下所示，
var a = b || c;
根据上面的表达式，只有当 'b' 为假（如果为空、假、未定义、0、空字符串或 NaN）时，变量 'a' 将获得 'c' 的值，否则 'a' 将获得'b' 的值。
138.你如何定义多行字符串？
您可以使用“\”字符后跟行终止符来定义多行字符串文字。
var str = "This is a \
very lengthy \
sentence!";
但是如果你在 '' 字符后面有一个空格，代码看起来完全一样，但它会引发一个 SyntaxError。
139.什么是app shell model？
application shell (或者是 app shell)架构是构建渐进式 Web 应用程序的一种方式，该应用程序可以可靠且即时地加载到用户的屏幕上，类似于您在本机应用程序中看到的内容。这对于在没有网络的情况下快速将一些初始 HTML 显示到屏幕上很有用。
140.我们可以为函数定义属性吗？
是的，我们可以为函数定义属性，因为函数也是对象。
fn = function(x) {
//函数代码在这里
}
fn.name = "Haiyong";
fn.profile = function(y) {
//配置文件代码在这里
}
141.找到函数期望的参数数量的方法是什么？
您可以使用function.length语法来查找函数所需的参数数量。让我们举一个sum计算数字和的函数的例子，
function sum(num1, num2, num3, num4){
return num1 + num2 + num3 + num4;
}
sum.length // 4 是预期的参数数量。
142.什么是 polyfill？
polyfill 是一段 JS 代码，用于在本身不支持它的旧浏览器上提供现代功能。例如，Silverlight 插件 polyfill 可用于模拟 Microsoft Internet Explorer 7 上的 HTML Canvas 元素的功能。
143.什么是 break 和 continue 语句？
break 语句用于“跳出”循环。即，它中断循环并在循环后继续执行代码。
for (i = 0; i < 10; i++) {
if (i === 5) { break; }
text += "Number: " + i + "<br>";
}
continue 语句用于“跳过”循环中的一次迭代。即，如果出现指定条件，它会中断一次迭代（在循环中），并继续循环中的下一次迭代。
for (i = 0; i < 10; i++) {
if (i === 5) { continue; }
text += "Number: " + i + "<br>";
}
144.什么是js标签？
label 语句允许我们在 JavaScript 中命名循环和块。然后我们可以使用这些标签稍后引用代码。例如，下面带有标签的代码避免在数字相同时打印数字，
var i, j;
loop1:
for (i = 0; i < 3; i++) {
loop2:
for (j = 0; j < 3; j++) {
if (i === j) {
continue loop1;
}
console.log('i = ' + i + ', j = ' + j);
}
}
// 输出:
// "i = 1, j = 0"
// "i = 2, j = 0"
// "i = 2, j = 1"
145.将声明放在首位有什么好处？
建议将所有声明保留在每个脚本或函数的顶部。这样做的好处是，
1.提供更清晰的代码 2.它提供了一个查找局部变量的地方 3.轻松避免不需要的全局变量 4.它减少了不需要的重新声明的可能性
146.初始化变量有什么好处？
由于以下好处，建议初始化变量，
1.它提供了更清晰的代码 2.它提供了一个初始化变量的地方 3.避免代码中的未定义值
147.创建新对象的建议是什么？
建议避免使用new Object(). 相反，您可以根据它的类型初始化值来创建对象。
1.分配 {} 而不是 new Object() 2.分配 "" 而不是 new String() 3.分配 0 而不是 new Number() 4.分配 false 而不是 new Boolean() 5.分配 [] 而不是 new Array() 6.分配 /()/ 而不是 new RegExp() 7.赋值 function (){} 而不是 new Function()
您可以将它们定义为示例，
var v1 = {};
var v2 = "";
var v3 = 0;
var v4 = false;
var v5 = [];
var v6 = /()/;
var v7 = function(){};
148.你如何定义 JSON 数组？
JSON 数组写在方括号内，数组包含 javascript 对象。例如，用户的 JSON 数组如下所示，
"users":[
{"firstName":"Haiyong", "lastName":"Abrahm"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Shane", "lastName":"Warn"}
]
149.你如何生成随机整数？
您可以使用 Math.random() 和 Math.floor() 来返回随机整数。例如，如果要生成 1 到 10 之间的随机整数，则乘法因子应为 10，
Math.floor(Math.random() * 10) + 1; // 返回一个从 1 到 10 的随机整数
Math.floor(Math.random() * 100) + 1; // 返回一个从 1 到 100 的随机整数
==注意==： Math.random() 返回一个介于 0（含）和 1（不含）之间的随机数
150.你能写一个随机整数函数来打印范围内的整数吗？
是的，您可以创建一个适当的随机函数来返回一个介于 min 和 max 之间的随机数（均包括在内）
function randomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
randomInteger(1, 100); // 返回一个从 1 到 100 的随机整数
randomInteger(1, 1000); // 返回一个从 1 到 1000 的随机整数
151.什么是tree shaking（摇树）？
tree shaking（摇树）是消除死代码的一种形式。这意味着在构建过程中未使用的模块不会包含在包中，因此它依赖于 ES2015 模块语法的静态结构，（即导入和导出）。最初这已被 ES2015 模块捆绑器推广rollup。
152.tree shaking（摇树）需要什么？
Tree Shaking 可以显着减少任何应用程序中的代码大小。即，我们通过网络发送的代码越少，应用程序的性能就越高。例如，如果我们只想使用 SPA 框架创建一个“Hello World”应用程序，那么它大约需要几 MB，但是通过 treeShaking，它可以将大小降低到几百 KB。摇树在 Rollup 和 Webpack 打包器中实现。
153.是否推荐使用 eval？
不推荐，它允许运行导致安全问题的任意代码。我们知道 eval() 函数用于将文本作为代码运行。在大多数情况下，应该没有必要使用它。
154.什么是正则表达式？
正则表达式是形成搜索模式的字符序列。您可以使用此搜索模式在文本中搜索数据。这些可用于执行所有类型的文本搜索和文本替换操作。现在让我们看看语法格式，
/pattern/modifiers;
例如，用户名不区分大小写的正则表达式或搜索模式是，
/Haiyong/i
可以看看作者对正则表达式的总结：haiyong.blog.csdn.net/article/det…
155.正则表达式中可用的字符串方法有哪些？
正则表达式有两个字符串方法：search() 和 replace()。 search() 方法使用表达式来搜索匹配项，并返回匹配项的位置。
var msg = "Hello Haiyong";
var n = msg.search(/Haiyong/i); // 6
replace() 方法用于返回已替换模式的修改后的字符串。
var msg = "Hello Haiyong";
var n = msg.replace(/Haiyong/i, "Buttler"); // Hello Buttler
156.正则表达式中的修饰符是什么？
修饰符可用于执行不区分大小写的全局搜索。让我们列出一些修饰符，
| 修饰符 | 说明 |
|---|---|
| i (ignore) | 执行不区分大小写的匹配 |
| g (global) | 执行全局匹配而不是在第一次匹配时停止 |
| m (more) | 执行多行匹配 |
让我们举一个全局修饰符的例子，
var text = "Learn JS one by one";
var pattern = /one/g;
var result = text.match(pattern); // one,one
157.什么是正则表达式模式？
正则表达式提供一组模式以匹配字符。基本上它们分为3种类型，
1.括号：这些用于查找一系列字符。例如，下面是一些用例，
- [abc]：用于查找括号(a,b,c)之间的任何字符
- [0-9]：用于查找括号之间的任何数字
- (a|b)：用于查找以 | 分隔的任何选项
2.元字符：这些是具有特殊含义的字符例如，以下是一些用例，
- \d：用于查找数字
- \s：用于查找空白字符
- \b：用于在单词的开头或结尾查找匹配项
3.量词：这些对于定义量很有用，例如，下面是一些用例，
- n+：用于查找任何包含至少一个 n 的字符串的匹配项
- n*：用于查找包含零次或多次出现的 n 的任何字符串的匹配项
- n?：用于查找包含零次或一次 n 的任何字符串的匹配项
158.什么是 RegExp 对象？
RegExp 对象是一个具有预定义属性和方法的正则表达式对象。下面来看看 RegExp 对象的简单用法，
var regexp = new RegExp('\\w+');
console.log(regexp);
// 预期输出: /\w+/
159.如何在字符串中搜索模式？
您可以使用正则表达式的 test() 方法来搜索字符串中的模式，并根据结果返回 true 或 false。
var pattern = /you/;
console.log(pattern.test("How are you?")); //true
160.exec方法的目的是什么？
exec 方法的目的类似于 test 方法，但它执行搜索指定字符串中的匹配项并返回结果数组，或者 null 而不是返回 true/false。
var pattern = /you/;
console.log(pattern.exec("How are you?")); //["you", index: 8, 输出: "How are you?", groups: 未定义]
161.如何更改 HTML 元素的样式？
您可以使用 javascript 更改 HTML 元素的内联样式或类名
使用样式属性：您可以使用样式属性修改内联样式
document.getElementById("title").style.fontSize = "30px";
使用 ClassName 属性：使用 className 属性很容易修改元素类
document.getElementById("title").className = "custom-title";
162.1+2+‘3’ 的结果是什么？
输出将是33. 由于1和2是数值，前两位数字的结果将是数值3。下一个数字是字符串类型值，因为数值3和字符串类型值3的相加只是一个串联值33。
163.什么是调试器语句？
调试器语句调用任何可用的调试功能，例如设置断点。如果没有可用的调试功能，则此语句无效。
例如，在下面的函数中插入了一个调试器语句。因此， 执行在调试器语句处暂停，就像脚本源中的断点一样。
function getProfile() {
// 代码在这里
debugger;
// 代码在这里
}
164.调试中断点的目的是什么？
一旦执行调试器语句并弹出调试器窗口，您就可以在 javascript 代码中设置断点。在每个断点处，javascript 将停止执行，并让您检查 JavaScript 值。检查值后，您可以使用播放按钮恢复代码的执行。
165.我可以使用保留字作为标识符吗？
不，您不能将保留字用作变量、标签、对象或函数名称。让我们看一个简单的例子，
var else = "hello"; // 未捕获的 SyntaxError: 意外的标记 else
166.你如何检测移动浏览器？
您可以使用正则表达式，它会根据用户是否使用手机浏览来返回 true 或 false 值。
window.mobilecheck = function() {
var mobileCheck = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) mobileCheck = true;})(navigator.userAgent||navigator.vendor||window.opera);
return mobileCheck;
};
167.如何在没有正则表达式的情况下检测移动浏览器？
您可以通过简单地运行设备列表并检查用户代理是否匹配任何内容来检测移动浏览器。这是 RegExp 使用的替代解决方案，
function detectmob() {
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
return true;
}
else {
return false;
}
}
168.你如何使用JS获取图像的宽度和高度？
您可以使用 Javascript 以编程方式获取图像并检查尺寸（宽度和高度）。
var img = new Image();
img.onload = function() {
console.log(this.width + 'x' + this.height);
}
img.src = 'https://img-blog.csdnimg.cn/20210427214255127.png';
169.如何进行同步 HTTP 请求？
浏览器提供了一个 XMLHttpRequest 对象，可用于从 JavaScript 发出同步 HTTP 请求
function httpGet(theUrl)
{
var xmlHttpReq = new XMLHttpRequest();
xmlHttpReq.open( "GET", theUrl, false ); // 同步请求为 false
xmlHttpReq.send( null );
return xmlHttpReq.responseText;
}
170.如何进行异步 HTTP 请求？
浏览器提供了一个 XMLHttpRequest 对象，该对象可用于通过将第三个参数传递为 true 来从 JavaScript 发出异步 HTTP 请求。
function httpGetAsync(theUrl, callback)
{
var xmlHttpReq = new XMLHttpRequest();
xmlHttpReq.onreadystatechange = function() {
if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200)
callback(xmlHttpReq.responseText);
}
xmlHttp.open("GET", theUrl, true); // 异步为 true
xmlHttp.send(null);
}
171.你如何在javascript中将日期转换为另一个时区？
您可以使用 toLocaleString() 方法将一个时区中的日期转换为另一个时区。例如，让我们将当前日期转换为英式英语时区，如下所示，
console.log(event.toLocaleString('en-GB', { timeZone: 'UTC' })); //21/06/2021, 08:00:00
172.用于获取窗口大小的属性是什么？
您可以使用窗口、文档元素和文档正文对象的innerWidth、innerHeight、clientWidth、clientHeight 属性来查找窗口的大小。让我们使用这些属性的组合来计算窗口或文档的大小，
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
173.什么是javascript中的条件运算符？
条件（三元）运算符是唯一的 JavaScript 运算符，它采用三个操作数作为 if 语句的快捷方式。
var isAuthenticated = false;
console.log(isAuthenticated ? 'Hello, welcome' : 'Sorry, you are not authenticated');//Sorry, you are not authenticated
174.你能在条件运算符上应用chaining吗？
是的，您可以在条件运算符上应用chaining，类似于 if ... else if ... else if ... else 链。语法如下，
function traceValue(someParam) {
return condition1 ? value1
: condition2 ? value2
: condition3 ? value3
: value4;
}
// 上述条件运算符等价于：
function traceValue(someParam) {
if (condition1) { return value1; }
else if (condition2) { return value2; }
else if (condition3) { return value3; }
else { return value4; }
}
175.页面加载后执行javascript的方式有哪些？
您可以在页面加载后以多种不同方式执行 javascript，
窗口.onload：
window.onload = function ...
文件加载：
document.onload = function ...
身体加载：
<body onload="script();">
176.proto 和 prototype有什么区别？
该__proto__对象是在查找链中用于解析方法等的实际对象。而当您使用 new 创建对象时prototype，用于构建__proto__的对象是
( new Employee ).__proto__ === Employee.prototype;
( new Employee ).prototype === undefined;
177.举个例子你最好使用分号
建议在 JavaScript 中的每个语句后使用分号。例如，在下面的情况下，由于缺少分号，它在运行时会抛出错误“.. is not a function”。
// 定义一个函数
var fn = function () {
//...
} // 此行缺少分号
// 然后在闭包中执行一些代码
(function () {
//...
})();
它将被解释为
var fn = function () {
//...
}(function () {
//...
})();
在这种情况下，我们将第二个函数作为参数传递给第一个函数，然后尝试将第一个函数调用的结果作为函数调用。因此，第二个函数将在运行时因“...不是函数”错误而失败。
178.什么是freeze 方法？
reeze()方法用于冻结对象。冻结对象不允许向对象添加新属性，阻止删除和阻止更改现有属性的可枚举性、可配置性或可写性。即，它返回传递的对象并且不创建冻结副本。
const obj = {
prop: 100
};
Object.freeze(obj);
obj.prop = 200; // 在严格模式下抛出错误
console.log(obj.prop); //100
==注意==：如果传递的参数不是对象，则会导致 TypeError。
179.freeze 方法的目的是什么？
以下是使用冻结方法的主要好处，
1.它用于冻结对象和数组。 2.它用于使对象不可变。
180.为什么我需要使用freeze 方法？
在面向对象的范式中，现有 API 包含某些不打算在当前上下文之外扩展、修改或重用的元素。因此，它final用作各种语言中使用的关键字。
181.你如何检测浏览器语言首选项？
您可以使用导航器对象来检测浏览器语言首选项，如下所示，
var language = navigator.languages && navigator.languages[0] || // Chrome / Firefox
navigator.language || // All browsers
navigator.userLanguage; // IE <= 10
console.log(language);
182.如何使用javascript将字符串转换为标题大小写？
标题大小写意味着每个单词的第一个字母大写。您可以使用以下函数将字符串转换为标题大小写，
function toTitleCase(str) {
return str.replace(
/\w\S*/g,
function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
}
);
}
toTitleCase("good morning csdn"); // Good Morning Csdn
183.你如何检测页面中禁用的javascript？
您可以使用该标签来检测 javascript 是否禁用。当 JavaScript 被禁用时，里面的代码块会被执行，并且通常用于在 JavaScript 生成页面时显示替代内容。
<script type="javascript">
// JS相关代码放这里
</script>
<noscript>
<a href="next_page.html?noJS=true">JavaScript is disabled in the page. Please click Next Page</a>
</noscript>
184.javascript支持的各种运算符有哪些？
运算符能够操纵（数学和逻辑计算）某个值或操作数。JavaScript 支持的各种运算符如下，
- 算术运算符：包括 +（加法）、–（减法）、*（乘法）、/（除法）、%（模数）、++（增量）和 – –（减量）
- 比较运算符：包括
==（等于）、!=（不等于）、===（与类型相等）、>（大于）、>=（大于或等于）、<（小于）、<=（小于或等于） - 逻辑运算符：包括 &&(逻辑与)、||(逻辑或)、!(逻辑非)
- 赋值运算符：包括 =（赋值运算符）、+=（加法和赋值运算符）、–=（减法和赋值运算符）、*=（乘法和赋值）、/=（除法和赋值）、%=（模块和赋值） )
- 三元运算符：它包括条件（
：？）运算符 - typeof 运算符：用于查找变量的类型。语法看起来像
typeof variable
185.什么是rest 参数？
Rest 参数是一种处理函数参数的改进方法，它允许我们将无限数量的参数表示为数组。语法如下，
function f(a, b, ...theArgs) {
// ...
}
例如，让我们举一个 sum 示例来计算动态参数数量，
function total(…args){
let sum = 0;
for(let i of args){
sum+=i;
}
return sum;
}
console.log(fun(1,2)); //3
console.log(fun(1,2,3)); //6
console.log(fun(1,2,3,4)); //13
console.log(fun(1,2,3,4,5)); //15
==注意==：在 ES2015 或 ES6 中添加了 Rest 参数
186.如果不使用 rest 参数作为最后一个参数会发生什么？
rest 参数应该是最后一个参数，因为它的工作是将所有剩余的参数收集到一个数组中。例如，如果你定义一个像下面这样的函数，它没有任何意义并且会抛出一个错误。
function someFunc(a,…b,c){
//你的代码在这里
return;
}
187.什么是 JavaScript 中可用的按位运算符？
下面是 JavaScript 中使用的按位逻辑运算符列表
1.按位与 ( & ) 2.按位或 ( | ) 3.按位异或 (^) 4.按位非 ( ~ ) 5.左移 (<<) 6.符号传播右移 ( >> ) 7.零填充右移 ( >>> )
188.什么是spread operator（展开运算符）？
展开运算符允许将可迭代对象（数组/对象/字符串）扩展为单个参数/元素。让我们举个例子来看看这个行为，
function calculateSum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(calculateSum(...numbers)); // 6
189.你如何确定对象是否被冻结？
Object.isFrozen() 方法用于确定对象是否被冻结。如果以下所有条件都成立，则对象被冻结，
1.如果不能扩展。 2.如果它的所有属性都是不可配置的。 3.如果它的所有数据属性都是不可写的。用法如下，
const object = {
property: 'Welcome JS world'
};
Object.freeze(object);
console.log(Object.isFrozen(object));
190.你如何确定两个值相同或不使用对象？
Object.is() 方法确定两个值是否相同。例如，不同类型值的用法是，
Object.is('hello', 'hello'); // true
Object.is(window, window); // true
Object.is([], []) // false
如果以下条件之一成立，则两个值相同：
1.两者都未定义 2.都为空 3.都是真的还是假的 4.相同长度的两个字符串以相同的顺序具有相同的字符 5.两个相同的对象（意味着两个对象具有相同的引用） 6.两个数字和两个 +0 两个 -0 两个 NaN 都是非零和都不是 NaN 并且两者都具有相同的值。
191.使用Object 的 is方法的目的是什么？
Object 的 is 方法的一些应用如下，
1.它用于比较两个字符串。 2.它用于比较两个数字。 3.它用于比较两个数字的极性。 4.它用于比较两个对象。
192.如何将属性从一个对象复制到另一个对象？
您可以使用 Object.assign() 方法将值和属性从一个或多个源对象复制到目标对象。它返回具有从目标对象复制的属性和值的目标对象。语法如下，
Object.assign(target, ...sources)
让我们以一个源和一个目标对象为例，
const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
const returnedTarget = Object.assign(target, source);
console.log(target); // { a: 1, b: 3, c: 4 }
console.log(returnedTarget); // { a: 1, b: 3, c: 4 }
正如在上面的代码中所观察到的，b从源到目标有一个共同的 property( )，因此它的值已被覆盖。
193.赋值方法有哪些应用？
下面是 Object.assign() 方法的一些主要应用，
- 它用于克隆对象。
- 它用于合并具有相同属性的对象。
194.什么是Proxy（代理）对象？
Proxy 对象用于定义基本操作的自定义行为，例如属性查找、赋值、枚举、函数调用等。语法如下：
var p = new Proxy(target, handler);
让我们以代理对象为例，
var handler = {
get: function(obj, prop) {
return prop in obj ?
obj[prop] :
100;
}
};
var p = new Proxy({}, handler);
p.a = 10;
p.b = null;
console.log(p.a, p.b); // 10, null
console.log('c' in p, p.c); // false, 100
在上面的代码中，它使用get处理程序定义代理在其上执行操作时的行为
195.seal 方法的目的是什么？
所述Object.seal（）方法被用于密封一个对象，通过防止从被添加到它的新属性和标记所有现有的性质不可配置的。但是当前属性的值仍然可以更改，只要它们是可写的。让我们看下面的例子来了解更多关于 Seal() 方法的信息
const object = {
property: 'Welcome JS world'
};
Object.seal(object);
object.property = 'Welcome to object world';
console.log(Object.isSealed(object)); // true
delete object.property; // You cannot delete when sealed
console.log(object.property); //Welcome to object world
196.seal 方法的应用有哪些？
下面是 Object.seal() 方法的主要应用，
- 它用于密封对象和数组。
- 它用于使对象不可变。
197.freeze 和 seal 方法有什么区别？
如果使用 Object.freeze() 方法冻结对象，则其属性将变为不可变且无法对其进行更改，而如果使用 Object.seal() 方法密封对象，则可以在现有属性中进行更改的对象。
198.如何判断物体是否 seal？
Object.isSealed() 方法用于确定对象是否已密封。如果以下所有条件都成立，则对象被密封
1.如果不能扩展。 2.如果它的所有属性都是不可配置的。 3.如果它不可移动（但不一定不可写）。让我们在行动中看到它
const object = {
property: 'Hello, Good morning'
};
Object.seal(object); // 使用 Seal() 方法密封对象
console.log(Object.isSealed(object)); // 检查对象是否密封
199.如何获得可枚举的键值对？
Object.entries() 方法用于返回给定对象自己的可枚举字符串键控属性 [key, value] 对的数组，其顺序与 for...in 循环提供的顺序相同。让我们在一个例子中看看 object.entries() 方法的功能，
const object = {
a: 'Good morning',
b: 100
};
for (let [key, value] of Object.entries(object)) {
console.log(`${key}: ${value}`); // a: 'Good morning'
// b: 100
}
注意：顺序不保证为对象定义。
200.Object.values 和 Object.entries 方法的主要区别是什么？
Object.values() 方法的行为类似于 Object.entries() 方法，但它返回一个值数组而不是 [key,value] 对。
const object = {
a: 'Good morning',
b: 100
};
for (let value of Object.values(object)) {
console.log(`${value}`); // 'Good morning'
100
}
我已经写了很长一段时间的技术博客，这是我的一篇面试题文章。希望你们会喜欢！
如果你真的从这篇文章中学到了一些新东西，喜欢它，收藏它并与你的小伙伴分享。🤗最后，不要忘了❤或📑支持一下哦
