这是我参与更文挑战的第30天，活动详情查看： 更文挑战
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题)
本来打算这篇把301-424题更完，但是字数超太多了，一万九左右到上限了，更完至少还需要两万三的字，所以就只能等下一篇完结了，请大家见谅。
301.你如何创建一个无限循环？
您可以使用 for 和 while 循环创建无限循环，而无需使用任何表达式。就 ESLint 和代码优化器工具而言，for 循环构造或语法是更好的方法，
for (;;) {}
while(true) {
}
302.为什么需要避免 with 语句？
JavaScript 的 with 语句旨在为编写对对象的重复访问提供速记。因此，它可以通过减少重复冗长的对象引用的需要来帮助减小文件大小，而不会降低性能。让我们举一个例子，它用于在多次访问一个对象时避免冗余。
a.b.c.greeting = 'welcome';
a.b.c.age = 32;
使用with它变成：
with(a.b.c) {
greeting = "welcome";
age = 32;
}
但是这个with语句会产生性能问题，因为人们无法预测一个参数是指向一个实变量还是指向 with 参数中的一个属性。
303.以下 for 循环的输出是什么？
for (var i = 0; i < 4; i++) { // 全局范围
setTimeout(() => console.log(i));
}
for (let i = 0; i < 4; i++) { // 块作用域
setTimeout(() => console.log(i));
}
上述 for 循环的输出是 4 4 4 4 和 0 1 2 3
说明：由于javascript的事件队列/循环，setTimeout循环执行完毕后会调用回调函数。由于变量 i 是用var关键字声明的，它变成了一个全局变量，并且在setTimeout调用time函数时使用迭代的值等于 4 。因此，第一个循环的输出是4 4 4 4。
而在第二个循环中，变量 i 被声明为let关键字，它变成了一个块范围的变量，并且每次迭代都保存一个新值 (0, 1 ,2 3)。因此，第一个循环的输出是0 1 2 3。
304.列出 ES6 的一些特性？
下面是 ES6 的一些新特性的列表，
1.支持常量或不可变变量 2.对变量、常量和函数的块范围支持 3.箭头函数 4.默认参数 5.Rest and Spread 参数 6.Template Literals（模板字符串） 7.多行字符串 8.解构赋值 9.增强的对象文字 10.Promises 11.Classes 12.Modules
305.什么是 ES6？
ES6 是 javascript 语言的第六版，它于 2015 年 6 月发布。它最初被称为 ECMAScript 6 (ES6)，后来更名为 ECMAScript 2015。几乎所有现代浏览器都支持 ES6，但对于旧浏览器有很多转译器，比如 Babel.js 等。
306.我可以重新声明 let 和 const 变量吗？
不，您不能重新声明 let 和 const 变量。如果你这样做，它会抛出以下错误
Uncaught SyntaxError: Identifier 'someVariable' has already been declared
说明：带有var关键字的变量声明引用了一个函数作用域，由于提升特性，该变量被视为在封闭作用域的顶部声明。因此，对同一个提升变量做出贡献的所有多个声明都没有任何错误。让我们举个例子，为 var 和 let/const 变量在同一范围内重新声明变量。
var name = 'Haiyong';
function myFunc() {
var name = 'Nick';
var name = 'Abraham'; // 在同一功能块中重新分配
alert(name); // Abraham
}
myFunc();
alert(name); // Haiyong
块范围的多声明抛出语法错误，
let name = 'Haiyong';
function myFunc() {
let name = 'Nick';
let name = 'Abraham'; // 未捕获的语法错误：标识符"name"已被声明
alert(name);
}
myFunc();
alert(name);
307.是 const 变量使值不可变吗？
不， const 变量不会使值不可变。但它不允许后续赋值（即，您可以使用赋值声明但不能稍后赋值）
const userList = [];
userList.push('juejin'); // 即使不能重新分配也可以变异
console.log(userList); // ['juejin']
308.什么是默认参数？
在 E5 中，我们需要依赖逻辑 OR 运算符来处理函数参数的默认值。而在 ES6 中，默认函数参数功能允许在未传递值或未定义时使用默认值初始化参数。让我们将行为与示例进行比较，
//ES5
var calculateArea = function(height, width) {
height = height || 50;
width = width || 60;
return width * height;
}
console.log(calculateArea()); //
300
默认参数使初始化更简单，
//ES6
var calculateArea = function(height = 50, width = 60) {
return width * height;
}
console.log(calculateArea()); //
300
309.什么是模板字面量？
模板文字或模板字符串是允许嵌入表达式的字符串文字。它们由反引号 (`) 字符而不是双引号或单引号括起来。 在 E6 中，此功能允许使用如下动态表达式，
var greeting = `Welcome to JS World, Mr. ${firstName} ${lastName}.`
在 ES5 中，你需要像下面这样的中断字符串，
var greeting = 'Welcome to JS World, Mr.' + firstName + ' ' + lastName.
==注意==：您可以将多行字符串和字符串插值功能与模板文字一起使用。
310.如何在模板文字中编写多行字符串？
在 ES5 中，您必须使用换行符（'\n'）和连接符号（+）来获得多行字符串。
console.log('This is string sentence 1\n' +
'This is string sentence 2');
而在 ES6 中，您不需要提及任何换行序列字符，
console.log(`This is string sentence
'This is string sentence 2`);
311.什么是嵌套模板？
嵌套模板是模板文字语法中支持的一项功能，它允许在模板内的占位符 ${ } 内使用内部反引号。例如，下面的嵌套模板用于根据用户权限显示图标，而外部模板检查平台类型，
const iconStyles = `icon ${ isMobilePlatform() ? '' :
`icon-${user.isAuthorized ? 'submit' : 'disabled'}` }`;
您也可以在不嵌套模板功能的情况下编写上述用例。但是，嵌套模板功能更加紧凑和可读。
//无嵌套模板
const iconStyles = `icon ${ isMobilePlatform() ? '' :
(user.isAuthorized ? 'icon-submit' : 'icon-disabled'}`;
312.什么是标记模板？
标记模板是模板的高级形式，其中标记允许您使用函数解析模板文字。tag 函数接受第一个参数作为字符串数组，其余参数作为表达式。此函数还可以根据参数返回操作过的字符串。让我们看看组织中 IT 专业技能集的这种标记模板行为的使用情况，
var user1 = 'Haiyong';
var skill1 = 'JavaScript';
var experience1 = 15;
var user2 = 'juejin';
var skill2 = 'JavaScript';
var experience2 = 5;
function myInfoTag(strings, userExp, experienceExp, skillExp) {
var str0 = strings[0]; // "Mr/Ms. "
var str1 = strings[1]; // " is a/an "
var str2 = strings[2]; // "in"
var expertiseStr;
if (experienceExp > 10){
expertiseStr = 'expert developer';
} else if(skillExp > 5 && skillExp <= 10) {
expertiseStr = 'senior developer';
} else {
expertiseStr = 'junior developer';
}
return ${str0}${userExp}${str1}${expertiseStr}${str2}${skillExp};
}
var output1 = myInfoTag`Mr/Ms. ${ user1 } is a/an ${ experience1 } in ${skill1}`;
var output2 = myInfoTag`Mr/Ms. ${ user2 } is a/an ${ experience2 } in ${skill2}`;
console.log(output1);// Mr/Ms. Haiyong is a/an expert developer in JavaScript（是一位 JavaScript 专家开发人员）
console.log(output2);// Mr/Ms. juejin is a/an junior developer in JavaScript（是一名初级 JavaScript 开发人员）
313.什么是原始字符串？
ES6 提供了一个原始字符串特性，使用该String.raw()方法来获取模板字符串的原始字符串形式。此功能允许您在输入原始字符串时访问它们，而无需处理转义序列。例如，用法如下，
var calculationString = String.raw `The sum of numbers is \n${1+2+3+4}!`;
console.log(calculationString); // The sum of numbers is 10
如果不使用原始字符串，将通过多行显示输出来处理换行符序列
var calculationString = `The sum of numbers is \n${1+2+3+4}!`;
console.log(calculationString);
// The sum of numbers is
// 10
此外，原始属性可用于标记函数的第一个参数
function tag(strings) {
console.log(strings.raw[0]);
}
314.什么是解构赋值？
解构赋值是一个 JavaScript 表达式，它可以将数组中的值或对象中的属性解包为不同的变量。 让我们使用解构赋值从数组中获取月份值
var [one, two, three] = ['JAN', 'FEB', 'MARCH'];
console.log(one); // "JAN"
console.log(two); // "FEB"
console.log(three); // "MARCH"
并且您可以使用解构赋值获取对象的用户属性，
var {name, age} = {name: 'Haiyong', age: 22};
console.log(name); // Haiyong
console.log(age); // 22
315.解构赋值中的默认值是什么？
如果在解构赋值期间从数组或对象中解压缩出来的值未定义，则可以为变量分配一个默认值。它有助于避免为每个分配单独设置默认值。让我们以数组和对象用例为例，
数组解构：
var x, y, z;
[x=2, y=4, z=6] = [10];
console.log(x); // 10
console.log(y); // 4
console.log(z); // 6
对象解构：
var {x=2, y=4, z=6} = {x: 10};
console.log(x); // 10
console.log(y); // 4
console.log(z); // 6
316.你如何在解构赋值中交换变量？
如果不使用解构赋值，交换两个值需要一个临时变量。而使用解构功能，可以在一个解构表达式中交换两个变量值。让我们在数组解构赋值中交换两个数字变量，
var x = 10, y = 20;
[x, y] = [y, x];
console.log(x); // 20
console.log(y); // 10
317.什么是增强的对象字面量？
对象字面量可以很容易地快速创建带有花括号内的属性的对象。例如，它为公共对象属性定义提供了更短的语法，如下所示。
//ES6
var x = 10, y = 20
obj = { x, y }
console.log(obj); // {x: 10, y:20}
//ES5
var x = 10, y = 20
obj = { x : x, y : y}
console.log(obj); // {x: 10, y:20}
318.什么是动态导入？
使用import()函数语法的动态导入允许我们通过使用 Promise 或 async/await 语法按需加载模块。目前此功能在stage4 提案中。动态导入的主要优点是减少了我们的 bundle 的大小、我们请求的大小/有效负载响应以及用户体验的整体改进。
动态导入的语法如下，
import('./Module').then(Module => Module.method());
319.动态导入的用例是什么？
以下是使用动态导入而不是静态导入的一些用例，
按需或有条件地导入模块。例如，如果您想在旧版浏览器上加载 polyfill
if (isLegacyBrowser()) {
import(···)
.then(···);
}
在运行时计算模块说明符。例如，您可以将其用于国际化。
import(`messages_${getLocale()}.js`).then(···);
从常规脚本中导入模块而不是模块。
320.什么是typed arrays (类型数组)？
类型化数组是来自 ECMAScript 6 API 的类数组对象，用于处理二进制数据。JavaScript 提供了 8 种 Typed 数组类型，
1.Int8Array：一个 8 位有符号整数数组 2.Int16Array：16 位有符号整数数组 3.Int32Array：一个 32 位有符号整数数组 4.Uint8Array：8 位无符号整数数组 5.Uint16Array：16 位无符号整数数组 6.Uint32Array：一个 32 位无符号整数数组 7.Float32Array：32 位浮点数数组 8.Float64Array：64 位浮点数数组
例如，您可以创建一个 8 位有符号整数数组，如下所示
const a = new Int8Array();
// 您可以预先分配 n 个字节
const bytes = 1024
const a = new Int8Array(bytes)
321.模块加载器的优点是什么？
模块加载器提供以下功能，
1.动态加载 2.状态隔离 3.全局命名空间隔离 4.编译钩子 5.嵌套虚拟化
322.什么是 collation？
排序规则用于对一组字符串进行排序并在一组字符串中进行搜索。它由区域设置参数化并了解 Unicode。让我们来看看比较和排序功能，
比较：
var list = [ "ä", "a", "z" ]; // 在德语中，“ä”与“a”一起排序，而在瑞典语中，“ä”在“z”之后排序
var l10nDE = new Intl.Collator("de");
var l10nSV = new Intl.Collator("sv");
console.log(l10nDE.compare("ä", "z") === -1); // true
console.log(l10nSV.compare("ä", "z") === +1); // true
排序：
var list = [ "ä", "a", "z" ]; // 在德语中，“ä”与“a”一起排序，而在瑞典语中，“ä”在“z”之后排序
var l10nDE = new Intl.Collator("de");
var l10nSV = new Intl.Collator("sv");
console.log(list.sort(l10nDE.compare)) // [ "a", "ä", "z" ]
console.log(list.sort(l10nSV.compare)) // [ "a", "z", "ä" ]
323.什么是…of 语句？
for...of 语句创建一个循环迭代可迭代对象或元素，例如内置字符串、数组、类数组对象（如参数或 NodeList）、TypedArray、Map、Set 和用户定义的可迭代对象。数组上 for...of 语句的基本用法如下，
let arrayIterable = [10, 20, 30, 40, 50];
for (let value of arrayIterable) {
value ++;
console.log(value); // 11 21 31 41 51
}
324.下面展开运算符数组的输出是什么？
[...'John Resig']
数组的输出为 ['J', 'o', 'h', 'n', '', 'R', 'e', 's', 'i', 'g']
说明：字符串是一种可迭代类型，数组中的扩展运算符将可迭代的每个字符映射到一个元素。因此，字符串的每个字符都成为数组中的一个元素。
325.PostMessage 安全吗？
是的，只要程序员/开发人员仔细检查到达消息的来源和来源，就可以认为 postMessages 非常安全。但是，如果您尝试在不验证消息来源的情况下发送/接收消息，则会产生跨站点脚本攻击。
326.postmessage目标源作为通配符有什么问题？
postMessage 方法的第二个参数指定允许哪个源接收消息。如果您使用通配符“*”作为参数，则允许任何来源接收消息。在这种情况下，发送方窗口在发送消息时无法知道目标窗口是否在目标源。如果目标窗口已导航到另一个原点，则另一个原点将接收数据。因此，这可能会导致 XSS 漏洞。
targetWindow.postMessage(message, '*');
327.你如何避免收到来自攻击者的 postMessages？
您如何避免收到来自攻击者的 postMessages
由于侦听器侦听任何消息，攻击者可以通过从攻击者的来源发送消息来欺骗应用程序，这给人的印象是接收者从实际发送者的窗口收到了消息。您可以通过使用“message.origin”属性在接收者端验证消息的来源来避免此问题。例如，让我们在接收方www.some-receiver.com上检查发送方的来源http://www.some-sender.com，
//监听器打开 http://www.some-receiver.com/
window.addEventListener("message", function(message){
if(/^http://www\.some-sender\.com$/.test(message.origin)){
console.log('You received the data from valid sender', message.data);
}
});
328.我可以完全避免使用 postMessages 吗？
您无法完全（或 100%）避免使用 postMessages。尽管考虑到风险，您的应用程序不使用 postMessage，但许多第三方脚本使用 postMessage 与第三方服务进行通信。因此，您的应用程序可能在您不知情的情况下使用 postMessage。
329.postMessages 是否同步？
postMessages 在 IE8 浏览器中是同步的，但它们在 IE9 和所有其他现代浏览器（即 IE9+、Firefox、Chrome、Safari）中是异步的。由于这种异步行为，我们在 postMessage 返回时使用回调机制。
330.Javascript 是什么范式？
JavaScript 是一种多范式语言，支持命令式/过程式编程、面向对象编程和函数式编程。JavaScript 支持具有原型继承的面向对象编程。
331.内部和外部 javascript有什么区别？
内部 JavaScript：它是脚本标签内的源代码。 外部 JavaScript：源代码存储在外部文件中（以 .js 扩展名存储）并在标签中引用。
332.JavaScript 是否比服务器端脚本更快？
是的，JavaScript 比服务器端脚本更快。因为 JavaScript 是一个客户端脚本，它不需要任何网络服务器的帮助来进行计算或计算。因此 JavaScript 总是比任何服务器端脚本（如 ASP、PHP 等）都快。
333.你如何获得复选框的状态？
您可以checked在 DOM 中选定的复选框上应用该属性。如果值为 ，则True表示复选框已选中，否则未选中。例如，下面的 HTML 复选框元素可以使用 javascript 访问，如下所示，
<input type="checkbox" name="checkboxname" value="Agree"> 同意条件<br>
console.log(document.getElementById(‘checkboxname’).checked); // true or false
334.双波浪号运算符的目的是什么？
双波浪号运算符 (~~) 称为双非按位运算符。这个运算符将成为 Math.floor() 的更快替代品。
335.你如何将字符转换为 ASCII 码？
您可以使用该String.prototype.charCodeAt()方法将字符串字符转换为 ASCII 数字。例如，让我们找到 'ABC' 字符串的第一个字母的 ASCII 代码，
"ABC".charCodeAt(0) // returns 65
而String.fromCharCode()方法将数字转换为相等的 ASCII 字符。
String.fromCharCode(65,66,67); // returns 'ABC'
336.什么是数组缓冲区？
ArrayBuffer 对象用于表示通用的、固定长度的原始二进制数据缓冲区。您可以按如下方式创建它，
let buffer = new ArrayBuffer(16); // 创建一个长度为 16 的缓冲区
alert(buffer.byteLength); // 16
要操作 ArrayBuffer，我们需要使用“视图”对象。
//创建一个引用缓冲区的 DataView
let view = new DataView(buffer);
337.下面的字符串表达式的输出是什么？
console.log("Welcome to JS world"[0])
上述表达式的输出是“W”。
说明：字符串上带有特定索引的括号表示法返回特定位置的字符。因此，它返回字符串的字符“W”。由于 IE7 及以下版本不支持此功能，因此您可能需要使用 .charAt() 方法来获得所需的结果。
338.Error对象的目的是什么？
Error 构造函数创建一个错误对象，并在发生运行时错误时抛出错误对象的实例。Error 对象还可以用作用户定义异常的基础对象。错误对象的语法如下，
new Error([message[, fileName[, lineNumber]]])
您可以在 try...catch 块中使用 Error 对象抛出用户定义的异常或错误，如下所示，
try {
if(withdraw > balance)
throw new Error("Oops! You don't have enough balance");
} catch (e) {
console.log(e.name + ': ' + e.message);
}
339.EvalError 对象的目的是什么？
EvalError 对象指示有关全局eval()函数的错误。尽管 JavaScript 不再抛出此异常，但 EvalError 对象仍保持兼容性。这个表达式的语法如下，
new EvalError([message[, fileName[, lineNumber]]])
你可以在 try...catch 块中抛出 EvalError ，如下所示，
try {
throw new EvalError('Eval function error', 'someFile.js', 100);
} catch (e) {
console.log(e.message, e.name, e.fileName); // "Eval function error", "EvalError", "someFile.js"
340.从非严格模式到严格模式抛出的案例错误列表是什么？
当您应用“使用严格”时；语法，下面的一些情况会在执行脚本之前抛出 SyntaxError
使用八进制语法时
var n = 022;
1.使用with语句
2.在变量名上使用 delete 运算符时
3.使用 eval 或 arguments 作为变量或函数参数名称
4.当您使用新保留的关键字时
5.当你在块中声明一个函数时
if (someCondition) { function f() {} }
因此，上述案例中的错误有助于避免开发/生产环境中的错误。
341.是否所有对象都有prototypes（原型）？
不是。除了由用户创建的基础对象或使用 new 关键字创建的对象之外，所有对象都有原型。
342.parameter（形参）和argument（实参）有什么区别？
参数是函数定义的变量名，而参数表示函数被调用时赋予的值。让我们用一个简单的函数来解释这一点
function myFunction(parameter1, parameter2, parameter3) {
console.log(arguments[0]) // "argument1"
console.log(arguments[1]) // "argument2"
console.log(arguments[2]) // "argument3"
}
myFunction("argument1", "argument2", "argument3")
343.数组中 some 方法的目的是什么？
some() 方法用于测试数组中是否至少有一个元素通过了提供的函数实现的测试。该方法返回一个布尔值。让我们举一个例子来测试任何奇数元素，
var array = [1, 2, 3, 4, 5, 6 ,7, 8, 9, 10];
var odd = element ==> element % 2 !== 0;
console.log(array.some(odd)); // true（奇数元素存在）
344.你如何组合两个或多个数组？
concat() 方法用于通过返回包含所有元素的新数组来连接两个或多个数组。语法如下，
array1.concat(array2, array3, ..., arrayX)
让我们以数组与蔬菜和水果数组的串联为例，
var veggies = ["Tomato", "Carrot", "Cabbage"];
var fruits = ["Apple", "Orange", "Pears"];
var veggiesAndFruits = veggies.concat(fruits);
console.log(veggiesAndFruits); // Tomato, Carrot, Cabbage, Apple, Orange, Pears
345.浅拷贝和深拷贝有什么区别？
有两种方法可以复制对象，
浅拷贝： 浅拷贝是对象的按位拷贝。创建一个新对象，该对象具有原始对象中值的精确副本。如果对象的任何字段是对其他对象的引用，则仅复制引用地址，即仅复制内存地址。
例子
var empDetails = {
name: "John", age: 25, expertise: "Software Developer"
}
创建副本
var empDetailsShallowCopy = empDetails //Shallow copying!
如果我们像这样更改重复项中的某些属性值：
empDetailsShallowCopy.name = "Johnson"
上面的语句也会改变 的名称empDetails，因为我们有一个浅拷贝。这意味着我们也会丢失原始数据。
深拷贝： 深拷贝复制所有字段，并复制这些字段指向的动态分配的内存。当一个对象与其所引用的对象一起被复制时，就会发生深度复制。
例子
var empDetails = {
name: "John", age: 25, expertise: "Software Developer"
}
使用原始对象的属性创建一个深拷贝到新变量中
var empDetailsDeepCopy = {
name: empDetails.name,
age: empDetails.age,
expertise: empDetails.expertise
}
现在，如果您更改 empDetailsDeepCopy.name，它只会影响 empDetailsDeepCopy 而不会影响empDetails
346.你如何创建一个字符串的特定数量的副本？
该repeat()方法用于构造和返回一个新字符串，该字符串包含调用它的字符串的指定数量的副本，并连接在一起。请记住，此方法已添加到 ECMAScript 2015 规范中。
我们以Hello字符串为例，重复4次，
'Hello'.repeat(4); // 'HelloHelloHelloHello'
347.你如何根据正则表达式返回所有匹配的字符串？
该matchAll()方法可用于返回与正则表达式匹配字符串的所有结果的迭代器。例如，下面的示例根据正则表达式返回匹配字符串结果的数组，
let regexp = /Hello(\d?))/g;
let greeting = 'Hello1Hello2Hello3';
let greetingList = [...greeting.matchAll(regexp)];
console.log(greetingList[0]); //Hello1
console.log(greetingList[1]); //Hello2
console.log(greetingList[2]); //Hello3
348.你如何在开头或结尾修剪字符串？
trim字符串原型的方法用于修剪字符串的两侧。但是如果你想修剪特别是在字符串的开头或结尾，那么你可以使用trimStart/trimLeft和trimEnd/trimRight方法。让我们在问候消息中查看这些方法的示例，
var greeting = ' Hello, Goodmorning! ';
console.log(greeting); // " Hello, Goodmorning! "
console.log(greeting.trimStart()); // "Hello, Goodmorning! "
console.log(greeting.trimLeft()); // "Hello, Goodmorning! "
console.log(greeting.trimEnd()); // " Hello, Goodmorning!"
console.log(greeting.trimRight()); // " Hello, Goodmorning!"
349.下面带有一元运算符的控制台语句的输出是什么？
让我们使用一元运算符来执行控制台语句，如下所示，
console.log(+ 'Hello');
上述控制台日志语句的输出返回 NaN。因为元素以一元运算符为前缀，JavaScript 解释器会尝试将该元素转换为数字类型。由于转换失败，语句的值导致 NaN 值。
350.javascript 是否使用 mixins？
使用了，mixin在javascript里可以看作是一种从别的对象"借用"功能的方法。每一个新定义的对象都有一个 prototype属性，其他的对象就可以从这里"借用"功能。这里的功能可以是一个属性，也可以是一个方法。
351.什么是 thunk 函数？
thunk 只是一个延迟评估值的函数。它不接受任何参数，而是在您调用 thunk 时给出值。即，它用于现在不执行，但将来某个时候执行。让我们举一个同步的例子，
const add = (x,y) => x + y;
const thunk = () => add(2,3);
thunk() // 5
352.什么是异步 thunk？
异步 thunk 可用于发出网络请求。让我们看一个网络请求的例子，
function fetchData(fn){
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => fn(json))
}
const asyncThunk = function (){
return fetchData(function getData(data){
console.log(data)
})
}
asyncThunk()
该getData函数不会立即被调用，但只会在数据从 API 端点可用时调用。setTimeout 函数也用于使我们的代码异步。最好的实时示例是 redux 状态管理库，它使用异步 thunk 来延迟要调度的操作。
353.以下函数调用的输出是什么？
代码片段：
const circle = {
radius: 20,
diameter() {
return this.radius * 2;
},
perimeter: () => 2 * Math.PI * this.radius
};
console.log(circle.diameter());
console.log(circle.perimeter());
输出：
输出是 40 和 NaN。请记住，直径是一个正则函数，而周长的值是一个箭头函数。this常规函数的关键字（即diameter）指的是周围的作用域，它是一个类（即Shape对象）。而perimeter函数的这个关键字是指周围的范围，它是一个窗口对象。由于窗口对象没有半径属性，它返回一个未定义的值，而数值的倍数返回 NaN 值。
354.如何从字符串中删除所有换行符？
最简单的方法是使用正则表达式来检测和替换字符串中的换行符。在这种情况下，我们使用替换函数和要替换的字符串，在我们的例子中是一个空字符串。
function remove_linebreaks( var message ) {
return message.replace( /[\r\n]+/gm, "" );
}
在上面的表达式中，g 和 m 用于全局和多行标志。
355.回流和重绘有什么区别？
甲重绘更改时，其影响的元件的可见性，而不是它的布局发生。这方面的示例包括轮廓、可见性或背景颜色。甲回流涉及影响页面（或整页）的一部分的布局的变化。调整浏览器窗口大小、更改字体、更改内容（例如用户键入文本）、使用涉及计算样式的 JavaScript 方法、从 DOM 中添加或删除元素以及更改元素的类是一些可以触发回流的事情。元素的回流会导致所有子元素和祖先元素以及 DOM 中跟随它的任何元素的后续回流。
356.否定数组会发生什么？
使用!字符否定数组将强制数组为布尔值。由于数组被认为是真实的所以否定它会返回false。
console.log(![]); // false
357.如果我们添加两个数组会发生什么？
如果将两个数组相加，它会将它们都转换为字符串并将它们连接起来。例如，添加数组的结果如下，
console.log(['a'] + ['b']); // "ab"
console.log([] + []); // ""
console.log(![] + []); // "false", because ![] returns false.
358.在假值上添加加法运算符的输出是什么？
如果在假值（null、undefined、NaN、false、“”）上添加加法（+）运算符，则假值将转换为数字值零。让我们在浏览器控制台上显示它们，如下所示，
console.log(+null); // 0
console.log(+undefined);// NaN
console.log(+false); // 0
console.log(+NaN); // NaN
console.log(+""); // 0
359.如何使用特殊字符创建自字符串？
self 字符串可以由!+字符组合形成。您需要记住以下约定才能实现此模式。
由于数组是真实值，否定数组将产生错误： ![] === false
根据 JavaScript 强制规则，将数组相加在一起会将它们串起来： [] + [] === ""
在数组前面加上 + 运算符会将数组转换为假，否定将使其为真，最后转换结果将产生值 '1'： +(!(+[])) === 1
通过应用上述规则，我们可以得出以下条件
![] + [] === "false"
+!+[] === 1
现在字符模式将被创建如下，
s e l f
^^^^^^^^^^^^^ ^^^^^^^^^^^^^ ^^^^^^^^^^^^^ ^^^^^^^^^^^^^
(![] + [])[3] + (![] + [])[4] + (![] + [])[2] + (![] + [])[0]
^^^^^^^^^^^^^ ^^^^^^^^^^^^^ ^^^^^^^^^^^^^ ^^^^^^^^^^^^^
(![] + [])[+!+[]+!+[]+!+[]] +
(![] + [])[+!+[]+!+[]+!+[]+!+[]] +
(![] + [])[+!+[]+!+[]] +
(![] + [])[+[]]
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
(![]+[])[+!+[]+!+[]+!+[]]+(![]+[])[+!+[]+!+[]+!+[]+!+[]]+(![]+[])[+!+[]+!+[]]+(![]+[])[+[]]
360.如何从数组中删除虚假值？
您可以通过将布尔值作为参数传递来对数组应用过滤器方法。通过这种方式，它会从数组中删除所有虚假值（0、未定义、空值、假和“”）。
const myArray = [false, null, 1,5, undefined]
myArray.filter(Boolean); // [1, 5] // 与 myArray.filter(x => x) 相同；
361.你如何获得数组的唯一值？
您可以使用Set和 rest expression/spread(...) 语法的组合来获取数组的唯一值。
console.log([...new Set([1, 2, 4, 4, 3])]); // [1, 2, 4, 3]
362.什么是解构别名？
有时，您希望解构变量的名称与属性名称不同。在这种情况下，您将使用 a: newName来指定变量的名称。这个过程称为解构别名。
const obj = { x: 1 };
// 抓取 obj.x 作为 { otherName }
const { x: otherName } = obj;
363.如何在不使用 map 方法的情况下映射数组值？
map只用fromArray的方法就可以不使用方法映射数组值。让我们从国家数组映射城市名称，
const countries = [
{ name: 'China', capital: 'Beijing' },
{ name: 'India', capital: 'Delhi' },
{ name: 'US', capital: 'Washington' },
{ name: 'Russia', capital: 'Moscow' },
{ name: 'Singapore', capital: 'Singapore' },
{ name: 'France', capital: 'Paris' },
];
const cityNames = Array.from(countries, ({ capital}) => capital);
console.log(cityNames); // ['Beijing', 'Washington', 'Moscow', 'Singapore', 'Delhi', 'Paris']
364.你如何清空一个数组？
您可以通过将数组长度设置为零来快速清空数组。
let cities = ['Singapore', 'Delhi', 'London'];
cities.length = 0; // cities becomes []
365.你如何将数字四舍五入到某些小数？
您可以使用toFixed原生 javascript 中的方法将数字四舍五入到一定数量的小数。
let pie = 3.141592653;
pie = pie.toFixed(3); // 3.142
366.将数组转换为对象的最简单方法是什么？
您可以使用 spread(...) 运算符将数组转换为具有相同数据的对象。
var fruits = ["banana", "apple", "orange", "watermelon"];
var fruitsObject = {...fruits};
console.log(fruitsObject); // {0: "banana", 1: "apple", 2: "orange", 3: "wate
367.你如何用一些数据创建一个数组？
您可以使用fill方法创建具有某些数据的数组或具有相同值的数组。
var newArray = new Array(5).fill("0");
console.log(newArray); // ["0", "0", "0", "0", "0"]
368.控制台对象的占位符是什么？
以下是控制台对象可用的占位符列表，
%o — 它需要一个对象， %s — 它需要一个字符串， %d — 用于十进制或整数 这些占位符可以在 console.log 中表示如下
const user = { "name":"Haiyong", "id": 1, "city": "Beijing"};
console.log("Hello %s, your details %o are available in the object form", "John", user); // Hello Haiyong, your details {name: "Haiyong", id: 1, city: "Beijing"} are available in object
369.是否可以将 CSS 添加到控制台消息？
可以，您可以将 CSS 样式应用于类似于网页上的 html 文本的控制台消息。
console.log('%c 文本为蓝色，大字体和红色背景', 'color: blue; font-size: x-large; background: red');
文本将显示如下，
注意：所有 CSS 样式都可以应用于控制台消息。
370.控制台对象的dir方法的目的是什么？
console.dir()用于显示指定的JavaScript对象作为JSON的属性的交互式列表。
const user = { "name":"Haiyong", "id": 1, "city": "Beijing"};
console.dir(user);
以 JSON 表示形式显示的用户对象
我已经写了很长一段时间的技术博客，这是我的一篇面试题文章。希望你们会喜欢！
更多相关文章及我的联系方式我放在这里：
github.com/wanghao221
gitee.com/haiyongcsdn…
如果你真的从这篇文章中学到了一些新东西，喜欢它，收藏它并与你的小伙伴分享。🤗最后，不要忘了❤或📑支持一下哦
