JavaScript面试题系列（2）每篇10题

1. 如果 new 一个箭头函数的会怎么样

在 JavaScript 中，创建一个箭头函数可以使用 => 符号。如果你在一个 new 表达式中尝试使用箭头函数，会出现语法错误，因为 new 表达式需要一个构造函数作为参数，而箭头函数不能被用作构造函数。

这是一个例子，展示了如何使用 new 表达式来创建一个对象，其中 MyClass 是一个构造函数：

function MyClass(value) { 
this.value = value; 
} 
const myObject = new MyClass(10); 
console.log(myObject.value); // 输出: 10

如果你尝试使用箭头函数来定义 MyClass，例如：

const MyClass = (value) => { 
this.value = value; 
}; 
const myObject = new MyClass(10); 
console.log(myObject.value); // 报错: TypeError: MyClass is not a function

你会得到一个错误，因为箭头函数不能被用作构造函数。如果你想使用箭头函数创建一个类似类的对象，你需要使用普通的函数：

const MyClass = function MyClass(value) { 
this.value = value; 
}; 
const myObject = new MyClass(10); 
console.log(myObject.value); // 输出: 10

2. 箭头函数的 this 指向哪 ⾥ ？

箭头函数中的 this 指向定义函数时所在的上下文（context）。这个上下文可能是一个对象、一个模块、一个全局环境，或者是在 ES6 的模块中，也可能是一个类。

具体来说，如果一个箭头函数在对象的方法中使用，那么它的 this 值就是这个对象。例如：

const obj = {  
  myMethod: function() {  
    setTimeout(() => {  
      console.log(this); // 输出: obj  
    }, 1000);  
  }  
};  
obj.myMethod(); // 延迟1秒后输出: obj

如果一个箭头函数在全局作用域中使用，那么它的 this 值就是全局对象（在浏览器中通常是 window 对象）。例如：

setTimeout(() => {  
  console.log(this); // 输出: window  
}, 1000);

在一个模块的顶层作用域中，箭头函数的 this 值是 undefined。例如：

export const myFunc = () => {  
  console.log(this); // 输出: undefined  
};

在一个类的方法中，使用箭头函数不会改变 this 的行为。例如：

class MyClass {  
  constructor() {  
    this.myMethod = () => {  
      console.log(this); // 输出: MyClass实例对象  
    };  
  }  
  myMethod() { // 重写 myMethod  
    setTimeout(() => {  
      this.myMethod(); // 调用 myMethod，输出: MyClass实例对象  
    }, 1000);  
  }  
}  
const myObj = new MyClass();  
myObj.myMethod(); // 延迟1秒后输出: MyClass实例对象

3. 扩展运算符的作用及使用场景

扩展运算符（spread operator）在 JavaScript 中用于将一个数组或对象展开为一系列参数，或者将一系列参数展开为一个数组或对象。

以下是扩展运算符的一些常见用法和场景：

1.将数组或对象展开为一系列参数：

function myFunction(x, y, z) { 
console.log(x, y, z); 
} 
const arr = [1, 2, 3]; 
myFunction(...arr); // 输出: 1 2 3 
const obj = {a: 1, b: 2, c: 3}; 
myFunction(...obj); // 输出: 1 2 3

2.将一系列参数展开为一个数组或对象：

function myFunction(x, y, z) { 
console.log(x, y, z); 
} 
const arr = [1, 2, 3]; 
myFunction(...arr); // 输出: 1 2 3 
const obj = {a: 'a', b: 'b', c: 'c'}; 
const result = [...obj]; // result: ['a', 'b', 'c']

3.在数组或对象之间进行拷贝或合并：

const arr1 = [1, 2, 3]; 
const arr2 = [4, 5, 6]; 
const arr3 = [...arr1, ...arr2]; // arr3: [1, 2, 3, 4, 5, 6] 
const obj1 = {a: 1, b: 2}; 
const obj2 = {c: 3, d: 4}; 
const obj3 = {...obj1, ...obj2}; // obj3: {a: 1, b: 2, c: 3, d: 4}

4.在函数参数中使用扩展运算符，以便接受任意数量的参数：

function myFunction(...args) { 
console.log(args); // [1, 2, 3] 
} 
myFunction(1, 2, 3); // 输出: [1, 2, 3]

总之，扩展运算符是一种非常有用的操作符，可以用于数组、对象、函数参数等多种场景，使得代码更加简洁和灵活。

4. Proxy 可以实现什么功能？

Proxy 是一种内置对象，用于拦截对对象的访问。它提供了一种强大的机制，可以用于实现以下功能：

1. 数据劫持：使用 Proxy 对象可以在对对象进行操作之前或之后执行额外的逻辑。例如，可以拦截对象的属性访问或修改，并在这些操作前后执行自定义的逻辑。
2. 缓存管理：Proxy 可以用于管理对象的缓存。通过拦截对象的读取操作，可以检查缓存中是否存在该值，如果存在，则返回缓存值，而不是从对象中获取。这样可以提高访问速度和性能。
3. 安全代理：Proxy 可以用于创建安全代理，以防止对对象的非法访问或修改。通过拦截对象的操作，可以验证访问者的权限或执行其他安全检查，确保只有授权用户可以访问或修改对象。
4. 对象转换：Proxy 可以用于将对象转换为其他形式的数据结构或对象。例如，可以将对象转换为 JSON 字符串或将 JSON 字符串转换为对象。
5. 错误处理：Proxy 可以用于处理对象的错误。通过拦截对象的操作，可以捕获并处理可能发生的错误，以避免程序崩溃或出现其他异常情况。

总之，Proxy 提供了一种强大的机制，可以实现许多有用的功能，包括数据劫持、缓存管理、安全代理、对象转换和错误处理等。

5.常用的正则表达式有哪些？

以下是一些常用的正则表达式：

日期（yyyy-mm-dd）：

/^(19|20)\d\d-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/

用户名：

/^[a-zA-Z0-9_-]{4,16}$/

手机号码：

/^1[3456789]\d{9}$/

邮箱：

/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

身份证号码：

/^(^\d{15}$)|(^\d{17}([0-9]|X)$)/

QQ号：

/^[1-9]\d{4,10}$/

6. 对 JSON 的理解

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于Web开发中的数据交换和存储。它基于JavaScript语法，但实际上并不依赖于JavaScript语言。JSON具有易读、易解析、易扩展和轻量级等优点，因此在各种编程语言和平台中都被广泛使用。

JSON由两部分组成：键值对（key-value pair）和数据结构（data structure）。键值对是JSON的基本单位，它由一个字符串作为键（key）和一个值（value）组成。值可以是字符串、数字、布尔值、数组、对象或者null。数据结构是指键值对的集合，可以是单层或者多层嵌套的。

在项目开发中，JSON主要用于数据的传递、存储和解析。以下是一些使用JSON的场景：

1. 数据传递：在前后端交互中，前端页面和后端服务器之间的数据通常通过JSON进行传递。后端将数据编码成JSON格式，通过HTTP请求发送给前端，前端再解析JSON数据并渲染到页面上。
2. 数据存储：JSON也可以用于数据的存储。例如，将JSON数据存储在数据库中，以便在需要时进行查询和检索。
3. 数据交换：在多客户端之间进行数据交换时，可以使用JSON格式的数据作为通信协议。例如，在Websocket通信中，可以使用JSON格式的数据进行实时通信和交互。
4. 数据解析：在处理大量数据时，可以使用JSON进行数据的解析和处理。例如，在爬虫程序中，可以使用JSON格式的数据来存储和处理爬取到的数据。

总之，JSON是一种非常常用的数据格式，在项目开发中起着重要的作用。掌握JSON的使用方法可以帮助开发者更方便地进行数据交互和处理。

7. JavaScript 脚本延迟加载的方式有哪些？

JavaScript 脚本延迟加载的方式有以下几种：

异步加载：可以使用 async 属性将 JavaScript 脚本异步加载。这将使脚本在页面渲染时不会阻塞其他内容的加载和显示。例如：

<script async src="example.js"></script>

延迟加载：可以使用 defer 属性将 JavaScript 脚本延迟加载。这将使脚本在页面渲染完成后再执行，但不会阻塞其他内容的加载和显示。例如：

<script defer src="example.js"></script>

动态加载：可以使用 JavaScript 代码动态创建 script 标签，并将脚本文件路径设置为标签的 src 属性，然后将其添加到页面中。例如：

var script = document.createElement('script'); 
script.src = 'example.js'; 
document.head.appendChild(script);

懒加载：可以使用一些第三方库，如 lazysizes、Intersection Observer 等实现懒加载，即在用户滚动页面到需要显示该图片或元素时再加载或显示。例如：

<img data-src="example.jpg" class="lazyload">

var lazyload = new LazyLoad({  
    elements_selector: ".lazyload",  
    threshold: 0, // 延迟加载的像素偏移量  
    callback_enter: function(el) { // 当元素进入可视区域回调函数  
        // el: 当前进入可视区域的元素  
    },  
    callback_load: function(el) { // 当元素加载完成后回调函数  
        // el: 当前加载完成的元素  
    },  
    callback_error: function(el) { // 当元素无法加载时回调函数  
        // el: 当前无法加载的元素  
    },  
    callback_set: function(el) { // 当元素在可视区域设置回调函数  
        // el: 当前在可视区域的元素  
    },  
    callback_finish: function(el) { // 当所有元素加载完成后回调函数  
        // el: 所有加载完成的元素  
    }  
});

8. 什么是 DOM 和 BOM？

DOM（文档对象模型）和 BOM（浏览器对象模型）是两个重要的 Web 技术概念，它们都是用于在 Web 浏览器中处理和操纵文档（页面）的重要接口。

DOM 是文档对象模型的缩写，它是一种将 HTML 或 XML 文档解析为一个由节点和对象组成的树结构的技术。每个节点表示文档中的一个元素、属性、文本等。DOM 提供了许多 API，允许开发人员通过编程方式访问和操作这些节点和对象。使用 DOM，开发人员可以动态地修改页面的内容、结构和样式，以及响应用户事件等。

BOM 是浏览器对象模型的缩写，它是一种将浏览器窗口表示为一系列对象的技术。这些对象包括 window 对象、location 对象、history 对象等，它们提供了许多有用的属性和方法，用于与浏览器窗口交互。BOM 的主要目的是提供一种方式来控制浏览器窗口的行为、位置和状态。例如，使用 BOM，开发人员可以修改页面的标题、打开新的窗口、控制页面的滚动等。

DOM 和 BOM 之间有着密切的联系。在浏览器中，DOM 和 BOM 是通过 JavaScript 语言相互交互的。DOM 的许多操作都需要使用 BOM 来实现，例如修改页面元素的样式或位置。同样地，BOM 中的一些属性和方法也可以通过 DOM 来实现，例如通过修改 DOM 中的节点来更新页面的内容。

总之，DOM 和 BOM 是 Web 开发中两个重要的概念，它们提供了一组 API 和对象，允许开发人员通过编程方式来处理和操纵文档（页面）的内容和行为。

9. escape、encodeURI、encodeURIComponent 的区别

在 JavaScript 中，escape、encodeURI 和 encodeURIComponent 都是用于编码字符串的方法，但它们之间有一些重要的区别。

escape：
escape 是一个全局函数，用于将字符串转换为编码的字符串。它使用一种过时的编码方式，即 ASCII 字符集的编码方式。它主要被用于处理一些早期的 Web 应用程序，现在已经不推荐使用。

console.log(escape("Hello, World!")); // "Hello%2C%20World%21"

encodeURI：
encodeURI 是一个全局函数，用于将 URI（统一资源标识符）的字符串转换为编码的 URI。它使用 UTF-8 编码方式，可以处理所有的字符，包括非 ASCII 字符和特殊字符。

console.log(encodeURI("Hello, World!")); // "Hello%2C%20World!"

encodeURIComponent：
encodeURIComponent 是一个全局函数，用于将 URI 的一部分（即有效的 URI 片段）转换为编码的 URI。与 encodeURI 类似，它也使用 UTF-8 编码方式，但会对特殊字符进行额外的转义处理。

console.log(encodeURIComponent("Hello, World!")); // "Hello%2C%20World!"

escape 已经被废弃，不推荐使用。总结：

• encodeURI 和 encodeURIComponent 都用于编码字符串，但 encodeURIComponent 对特殊字符进行额外的转义处理，主要用于生成有效的 URI 片段。
• 在使用时需要根据具体的场景和需求选择合适的方法。如果需要处理完整的 URI，使用 encodeURI；如果需要处理 URI 的一部分（如查询参数），则使用 encodeURIComponent。

10. 对 AJAX 的理解，实现一个 AJAX 请求

AJAX（Asynchronous JavaScript and XML）是一种使用 JavaScript 与 XML（或 JSON）进行异步通信的技术，可以在不刷新整个页面的情况下更新部分页面内容。通过使用 AJAX，可以在后台向服务器发送请求，并从服务器获取响应数据，然后通过 JavaScript 对响应数据进行处理和更新页面视图。以下是一个简单的 AJAX 请求的实现过程：

创建 XMLHttpRequest 对象：首先，使用 JavaScript 创建一个 XMLHttpRequest 对象，这是发送 AJAX 请求的关键对象。

var xhr = new XMLHttpRequest();

设置请求参数：接下来，设置请求的类型（GET 或 POST）、URL、是否异步（true 表示异步，false 表示同步）以及其他必要的参数，如请求头和请求体。

xhr.open('GET', 'example.com/data', true); 
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

发送请求：使用 send() 方法发送请求。如果请求是 GET 请求，可以省略此步骤，因为 GET 请求不需要发送请求体。

xhr.send();

处理响应：在请求发送后，可以使用 onreadystatechange 事件监听器来检测响应的状态变化，并在响应完成后处理响应数据。

xhr.onreadystatechange = function() { 
if (xhr.readyState === XMLHttpRequest.DONE) { 
if (xhr.status === 200) { 
// 处理成功响应 
console.log(xhr.responseText); 
} else { 
// 处理错误响应 
console.error('请求出错：' + xhr.status); 
} 
} 
};

在以上过程中，关键的步骤是创建 XMLHttpRequest 对象、设置请求参数和发送请求。通过使用这些步骤，可以向服务器发送 AJAX 请求并获取响应数据，然后使用 JavaScript 对响应数据进行处理和更新页面视图。需要注意的是，在处理响应数据时，需要根据响应的类型和内容进行适当的处理和更新页面视图。