JavaScript 面试问答 (2023) – 高级
在本文中,您将学习面试中最常见的JavaScript面试问题和答案。在继续学习 JavaScript 面试问题和答案
1. JavaScript 中的“严格”模式是什么,如何启用它?
严格模式是 ECMAScript 5 中的一个新功能,它允许你将程序或函数放在“严格”的操作上下文中。这种严格的上下文会阻止执行某些操作并引发更多异常。语句“use strict”指示浏览器使用严格模式,这是JavaScript的简化且更安全的功能集。
2. 如何获取复选框的状态?
DOM 输入复选框属性用于设置或返回复选框字段的选中状态。此属性用于反映 HTML 已检查属性。
document.getElementById("GFG").checked;
如果选中该复选框,则返回 True。
3. 如何解释 JavaScript 中的闭包以及何时使用它?
当子函数保持父级作用域的环境时,即使在父级函数已经执行之后,也会创建闭包。闭包是与函数相关的本地声明变量。闭包将在使用它们时更好地控制代码。
JavaScript
// Explanation of closure
function foo() {
let b = 1;
function inner() {
return b;
}
return inner;
}
let get_func_inner = foo();
console.log(get_func_inner());
console.log(get_func_inner());
console.log(get_func_inner());
4. call()和apply()方法有什么区别?
两种方法都用于不同情况
- call() 方法:它调用该方法,将所有者对象作为参数。关键字 this 是指函数或其所属对象的“所有者”。我们可以调用一个可以在不同对象上使用的方法。
- apply() 方法:apply() 方法用于编写方法,可以在不同的对象上使用。它与函数 call() 不同,因为它将参数作为数组。
5. 如何在 JavaScript 中从超链接中定位特定元素?
这可以通过使用超链接中的目标属性来完成。
<a href="/geeksforgeeks.htm" target="newframe">New Page</a>
6. 编写 JavaScript 中显示的错误?
JavaScript 中有三种不同类型的错误。
- 语法错误:语法错误是打算用特定编程语言编写的字符或标记序列的语法错误。
- 逻辑错误:这是最难追踪的错误,因为它是编码逻辑部分的错误,或者逻辑错误是程序中的错误,导致操作不正确并异常终止。
- 运行时错误:运行时错误是在程序运行期间发生的错误,也称为异常。
7. JavaScript 和 Jscript 有什么区别?
JavaScript
- 它是Netscape开发的一种脚本语言。
- 它用于设计客户端和服务器端应用程序。
- 它完全独立于Java语言。
Jscript
- 它是Microsoft开发的一种脚本语言。
- 它用于为万维网一词设计活跃的在线内容。
8. 什么是变量 myArray = [[]]; 声明声明?
在 JavaScript 中,此语句用于声明二维数组。
9. 在JavaScript 代码中可以通过多少种方式访问 HTML 元素?
在 JavaScript 中访问 HTML 元素有四种可能的方法,它们是:
- getElementById() : 方法它用于按元素的 id 名称获取元素。
- getElementsByClass() 方法:它用于获取具有给定类名的所有元素。
- getElementsByTagName() : 它用于获取所有具有给定标签名称的元素。
- querySelector() Method: 此函数接受 CSS 样式选择器并返回第一个选中的元素。
10. innerHTML和innerText之间有什么区别?
innerText属性设置或返回指定节点及其所有后代的纯文本内容,而innerHTML属性设置或返回元素中的纯文本或HTML内容。与innerText不同,innerHTML允许您处理富文本HTML,并且不会自动编码和解码文本。
11. 什么是JavaScript中的事件冒泡?
考虑一种情况,一个元素存在于另一个元素内部,并且它们都处理一个事件。当事件以冒泡方式发生时,最内层的元素首先处理该事件,然后是外层的元素,依此类推。
12. 以下代码的输出将是什么?
javascript
let X = { demo: 1 };
let Output = (function () {
delete X.demo;
return X.demo;
})();
console.log(output);
此处删除将删除对象的属性。X 是具有极客属性的对象,它是一个自调用函数,将从对象 X 中删除极客的属性,因此结果将是未定义的。
- JavaScript 和 ECMA 脚本有什么关系?
JavaScript是必须维护一些规则和规定的主要语言,即ECMA脚本,这些规则也为JavaScript语言带来了新功能。
14. 如何对不支持 JavaScript 的旧浏览器隐藏 JavaScript 代码?
要对不支持 JavaScript 的旧浏览器隐藏 JavaScript 代码,您可以使用
<!-- before <script> tag and another //--> after </script> tag
所有将其视为HTML的长注释的旧浏览器。支持 JavaScript 的新浏览器将把它作为在线评论。
15. 以下代码的输出是什么?
let output = (function(x) {
delete x;
return x;
})(0);
document.write(output);
输出将为 0。删除运算符用于删除对象的运算符,但 X 不是这里的对象,它是一个局部变量。删除运算符不会影响局部变量。
16. 在 JavaScript 中,回答以下表达式是否为真或假。
"0" == 0 // true or false ?
"" == 0 // true or false ?
"" == "0" // true or false ?
对于第 1 种和第 2 种情况,结果将为 True,对于第 3 种情况,结果将为 False。
17. 如何使用任何浏览器进行调试?
通过按 F12,我们可以触发任何浏览器的调试模式,并可以通过点击控制台来查看结果。
18.什么是JavaScript提升?
当任何解释器运行代码时,所有变量都会被重新提升到原始范围的顶部。此方法适用于声明,不适用于变量的初始化。这被称为JavaScript提升。
19.自调用函数”的语法是什么?
自调用函数的语法:最后一个括号包含函数表达式。
(function () {
return // body of the function
}());
20. 如何在另一个JavaScript文件中使用外部JavaScript文件?
您可以使用以下代码在另一个 JavaScript 文件中使用外部 JavaScript 代码。
JavaScript
let script = document.createElement('script');
script.src = "external javascript file";
document.head.appendChild(script)
'use strict';
const path = require('path');
const Crypto = require('crypto');
const { tmpdir } = require('os');
const ffmpeg = require('fluent-ffmpeg');
const webp = require('node-webpmux');
const fs = require('fs').promises;
const has = (o, k) => Object.prototype.hasOwnProperty.call(o, k);
/**
* Utility methods
*/
class Util {
constructor() {
throw new Error(`The ${this.constructor.name} class may not be instantiated.`);
}
static generateHash(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
/**
* Sets default properties on an object that aren't already specified.
* @param {Object} def Default properties
* @param {Object} given Object to assign defaults to
* @returns {Object}
* @private
*/
static mergeDefault(def, given) {
if (!given) return def;
for (const key in def) {
if (!has(given, key) || given[key] === undefined) {
given[key] = def[key];
} else if (given[key] === Object(given[key])) {
given[key] = Util.mergeDefault(def[key], given[key]);
}
}
return given;
}
/**
* Formats a image to webp
* @param {MessageMedia} media
*
* @returns {Promise<MessageMedia>} media in webp format
*/
static async formatImageToWebpSticker(media, pupPage) {
if (!media.mimetype.includes('image'))
throw new Error('media is not a image');
if (media.mimetype.includes('webp')) {
return media;
}
return pupPage.evaluate((media) => {
return window.WWebJS.toStickerData(media);
}, media);
}
/**
* Formats a video to webp
* @param {MessageMedia} media
*
* @returns {Promise<MessageMedia>} media in webp format
*/
static async formatVideoToWebpSticker(media) {
if (!media.mimetype.includes('video'))
throw new Error('media is not a video');
const videoType = media.mimetype.split('/')[1];
const tempFile = path.join(
tmpdir(),
`${Crypto.randomBytes(6).readUIntLE(0, 6).toString(36)}.webp`
);
const stream = new (require('stream').Readable)();
const buffer = Buffer.from(
media.data.replace(`data:${media.mimetype};base64,`, ''),
'base64'
);
stream.push(buffer);
stream.push(null);
await new Promise((resolve, reject) => {
ffmpeg(stream)
.inputFormat(videoType)
.on('error', reject)
.on('end', () => resolve(true))
.addOutputOptions([
'-vcodec',
'libwebp',
'-vf',
// eslint-disable-next-line no-useless-escape
'scale=\'iw*min(300/iw\,300/ih)\':\'ih*min(300/iw\,300/ih)\',format=rgba,pad=300:300:\'(300-iw)/2\':\'(300-ih)/2\':\'#00000000\',setsar=1,fps=10',
'-loop',
'0',
'-ss',
'00:00:00.0',
'-t',
'00:00:05.0',
'-preset',
'default',
'-an',
'-vsync',
'0',
'-s',
'512:512',
])
.toFormat('webp')
.save(tempFile);
});
const data = await fs.readFile(tempFile, 'base64');
await fs.unlink(tempFile);
return {
mimetype: 'image/webp',
data: data,
filename: media.filename,
};
}
/**
* Sticker metadata.
* @typedef {Object} StickerMetadata
* @property {string} [name]
* @property {string} [author]
* @property {string[]} [categories]
*/
/**
* Formats a media to webp
* @param {MessageMedia} media
* @param {StickerMetadata} metadata
*
* @returns {Promise<MessageMedia>} media in webp format
*/
static async formatToWebpSticker(media, metadata, pupPage) {
let webpMedia;
if (media.mimetype.includes('image'))
webpMedia = await this.formatImageToWebpSticker(media, pupPage);
else if (media.mimetype.includes('video'))
webpMedia = await this.formatVideoToWebpSticker(media);
else
throw new Error('Invalid media format');
if (metadata.name || metadata.author) {
const img = new webp.Image();
const hash = this.generateHash(32);
const stickerPackId = hash;
const packname = metadata.name;
const author = metadata.author;
const categories = metadata.categories || [''];
const json = { 'sticker-pack-id': stickerPackId, 'sticker-pack-name': packname, 'sticker-pack-publisher': author, 'emojis': categories };
let exifAttr = Buffer.from([0x49, 0x49, 0x2A, 0x00, 0x08, 0x00, 0x00, 0x00, 0x01, 0x00, 0x41, 0x57, 0x07, 0x00, 0x00, 0x00, 0x00, 0x00, 0x16, 0x00, 0x00, 0x00]);
let jsonBuffer = Buffer.from(JSON.stringify(json), 'utf8');
let exif = Buffer.concat([exifAttr, jsonBuffer]);
exif.writeUIntLE(jsonBuffer.length, 14, 4);
await img.load(Buffer.from(webpMedia.data, 'base64'));
img.exif = exif;
webpMedia.data = (await img.save(null)).toString('base64');
}
return webpMedia;
}
/**
* Configure ffmpeg path
* @param {string} path
*/
static setFfmpegPath(path) {
ffmpeg.setFfmpegPath(path);
}
}
module.exports = Util;