前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >2023 想进 BAT 的快来,20 道JavaScript必须要面对的面试题(高级)

2023 想进 BAT 的快来,20 道JavaScript必须要面对的面试题(高级)

作者头像
用户1418987
发布2023-10-16 09:47:40
2030
发布2023-10-16 09:47:40
举报
文章被收录于专栏:coder
2023 想进 BAT 的快来,20 道JavaScript必须要面对的面试题(高级)_ide
2023 想进 BAT 的快来,20 道JavaScript必须要面对的面试题(高级)_ide

JavaScript 面试问答 (2023) – 高级

在本文中,您将学习面试中最常见的JavaScript面试问题和答案。在继续学习 JavaScript 面试问题和答案

1. JavaScript 中的“严格”模式是什么,如何启用它?

严格模式是 ECMAScript 5 中的一个新功能,它允许你将程序或函数放在“严格”的操作上下文中。这种严格的上下文会阻止执行某些操作并引发更多异常。语句“use strict”指示浏览器使用严格模式,这是JavaScript的简化且更安全的功能集。

2. 如何获取复选框的状态?

DOM 输入复选框属性用于设置或返回复选框字段的选中状态。此属性用于反映 HTML 已检查属性。

代码语言:javascript
复制
document.getElementById("GFG").checked;

如果选中该复选框,则返回 True。

3. 如何解释 JavaScript 中的闭包以及何时使用它?

当子函数保持父级作用域的环境时,即使在父级函数已经执行之后,也会创建闭包。闭包是与函数相关的本地声明变量。闭包将在使用它们时更好地控制代码。

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 中从超链接中定位特定元素?

这可以通过使用超链接中的目标属性来完成。

代码语言: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

代码语言:javascript
复制
let X = { demo: 1 };
let Output = (function () {
	delete X.demo;
	return X.demo;
})();

console.log(output);

此处删除将删除对象的属性。X 是具有极客属性的对象,它是一个自调用函数,将从对象 X 中删除极客的属性,因此结果将是未定义的。

  1. JavaScript 和 ECMA 脚本有什么关系?
2023 想进 BAT 的快来,20 道JavaScript必须要面对的面试题(高级)_json_02
2023 想进 BAT 的快来,20 道JavaScript必须要面对的面试题(高级)_json_02

JavaScript是必须维护一些规则和规定的主要语言,即ECMA脚本,这些规则也为JavaScript语言带来了新功能。

14. 如何对不支持 JavaScript 的旧浏览器隐藏 JavaScript 代码?

要对不支持 JavaScript 的旧浏览器隐藏 JavaScript 代码,您可以使用

代码语言:javascript
复制
<!-- before <script> tag and another //--> after </script> tag

所有将其视为HTML的长注释的旧浏览器。支持 JavaScript 的新浏览器将把它作为在线评论。

15. 以下代码的输出是什么?
代码语言:javascript
复制
let output = (function(x) {
    delete x;
    return x;
})(0);
  
document.write(output);

输出将为 0。删除运算符用于删除对象的运算符,但 X 不是这里的对象,它是一个局部变量。删除运算符不会影响局部变量。

16. 在 JavaScript 中,回答以下表达式是否为真或假。
代码语言: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.自调用函数”的语法是什么?

自调用函数的语法:最后一个括号包含函数表达式。

代码语言:javascript
复制
(function () {
  return // body of the function
}());
20. 如何在另一个JavaScript文件中使用外部JavaScript文件?

您可以使用以下代码在另一个 JavaScript 文件中使用外部 JavaScript 代码。

JavaScript
代码语言:javascript
复制
let script = document.createElement('script');
script.src = "external javascript file";
document.head.appendChild(script)
代码语言:javascript
复制
'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;
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-09-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • JavaScript 面试问答 (2023) – 高级
    • 1. JavaScript 中的“严格”模式是什么,如何启用它?
      • 2. 如何获取复选框的状态?
        • 3. 如何解释 JavaScript 中的闭包以及何时使用它?
          • JavaScript
            • 4. call()和apply()方法有什么区别?
            • 5. 如何在 JavaScript 中从超链接中定位特定元素?
            • 6. 编写 JavaScript 中显示的错误?
            • 7. JavaScript 和 Jscript 有什么区别?
            • 8. 什么是变量 myArray = [[]]; 声明声明?
            • 9. 在JavaScript 代码中可以通过多少种方式访问 HTML 元素?
            • 10. innerHTML和innerText之间有什么区别?
            • 11. 什么是JavaScript中的事件冒泡?
            • 12. 以下代码的输出将是什么?
          • javascript
            • 14. 如何对不支持 JavaScript 的旧浏览器隐藏 JavaScript 代码?
            • 15. 以下代码的输出是什么?
            • 16. 在 JavaScript 中,回答以下表达式是否为真或假。
            • 17. 如何使用任何浏览器进行调试?
            • 18.什么是JavaScript提升?
            • 19.自调用函数”的语法是什么?
            • 20. 如何在另一个JavaScript文件中使用外部JavaScript文件?
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档