Javascript面试题：30道含答案和代码示例的练习题

逃离我推掉我的手 2024-03-22 00:48 97阅读 0赞

以下是30道Javascript面试题，每个问题都包含答案和代码示例。这些问题涵盖了Javascript的各个方面，包括基础知识、DOM操作、事件处理、异步编程和面向对象编程等。

1.  什么是Javascript？

Javascript是一种脚本语言，用于在Web浏览器中编写交互式网页应用程序。

1.  如何声明变量？

使用var、let或const关键字声明变量。

var x = 10;
    let y = 20;
    const z = 30;

1.  如何创建函数？

使用function关键字创建函数。

function add(x, y) {
        
      return x + y;
    }

1.  如何调用函数？

使用函数名和括号调用函数。

var result = add(2, 3);

1.  什么是DOM？

DOM（文档对象模型）是一种API，用于在Javascript中操作HTML和XML文档。

1.  如何选取元素？

使用document.getElementById()、document.getElementsByClassName()、document.getElementsByTagName()或document.querySelector()方法选取元素。

var element = document.getElementById("myElement");
    var elements = document.getElementsByClassName("myClass");
    var elements = document.getElementsByTagName("p");
    var element = document.querySelector("#myElement");

1.  如何设置元素的属性？

使用element.setAttribute()方法设置元素的属性。

var element = document.getElementById("myElement");
    element.setAttribute("class", "newClass");

1.  如何添加元素到DOM中？

使用document.createElement()、element.appendChild()或element.insertBefore()方法添加元素到DOM中。

var element = document.createElement("div");
    element.textContent = "Hello World";
    document.body.appendChild(element);

1.  如何移除元素从DOM中？

使用element.parentNode.removeChild(element)方法将元素从DOM中移除。

var element = document.getElementById("myElement");
    element.parentNode.removeChild(element);

1.  什么是事件？

事件是发生在HTML元素上的操作，如鼠标单击、按键、滚动等。

1.  如何为元素添加事件处理程序？

使用element.addEventListener()方法为元素添加事件处理程序。

var element = document.getElementById("myElement");
    element.addEventListener("click", function() {
        
      alert("Hello World");
    });

1.  如何阻止事件的默认行为？

使用event.preventDefault()方法阻止事件的默认行为。

var link = document.getElementById("myLink");
    link.addEventListener("click", function(event) {
        
      event.preventDefault();
    });

1.  如何停止事件冒泡？

使用event.stopPropagation()方法停止事件冒泡。

var element1 = document.getElementById("myElement1");
    var element2 = document.getElementById("myElement2");
    element1.addEventListener("click", function(event) {
        
      event.stopPropagation();
    });
    element2.addEventListener("click", function(event) {
        
      alert("Hello World");
    });

1.  什么是闭包？

闭包是一个函数和其作用域的组合，可以访问上层作用域中的变量。

function outer() {
        
      var x = 10;
      function inner() {
        
        return x;
      }
      return inner;
    }
    var closure = outer();
    var result = closure();

1.  什么是回调函数？

回调函数是一个函数，作为参数传递给另一个函数，并在该函数完成后执行。

function add(x, y, callback) {
        
      var result = x + y;
      callback(result);
    }
    function displayResult(result) {
        
      console.log(result);
    }
    add(2, 3, displayResult);

1.  什么是异步编程？

异步编程是一种编程模型，其中代码不会等待操作完成，而是立即继续执行。

1.  如何使用回调函数进行异步编程？

使用回调函数作为异步操作完成后的处理程序。

function loadScript(url, callback) {
        
      var script = document.createElement("script");
      script.src = url;
      script.onload = callback;
      document.head.appendChild(script);
    }
    loadScript("script.js", function() {
        
      console.log("Script loaded");
    });

1.  什么是Promise？

Promise是一种异步编程模型，用于处理异步操作的结果。

1.  什么是async/await？

async/await是一种异步编程模型，用于处理异步操作的结果。

async function loadData() {
        
      var response = await fetch("data.json");
      var data = await response.json();
      console.log(data);
    }
    loadData();

1.  什么是模块？

模块是包含一组相关功能的代码单元，可以通过导入和导出操作在不同的文件中重复使用。

// module1.js
    export function add(x, y) {
        
      return x + y;
    }
    
    // module2.js
    import {
         add } from "./module1.js";
    var result = add(2, 3);
    
    ```javascript
    
    1. 什么是类？
    
    类是一个模板，用于创建具有相似属性和行为的对象。