一天10个JS面试题（一）

不熬夜的臭宝

已于 2024-05-22 17:07:12 修改

阅读量1.3k

点赞数 52

分类专栏：每天10个JS面试题文章标签：前端 javascript 学习面试 js

于 2024-05-16 11:12:17 首次发布

本文链接：https://blog.csdn.net/m0_62474008/article/details/138945240

版权

每天10个JS面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、this指向？

2、map和forEach的区别？

3、递归实现的底层原理是什么？

4、JavaScript 的基本类型有哪些?引用类型有哪些?null 和 undefined 的区别?

5、如何判断 JavaScript 的数据类型?

6、创建对象有几种方法？

7、创建函数的几种方式 ?

8、=== 和 ==的区别?

9、请指出 JavaScript 宿主对象和原生对象的区别?

10、]avaScript 内置的常用对象有哪些?并列举该对象常用的方法?

1、this指向？

this 在 JavaScript 中的指向规则取决于函数调用的方式：

全局环境：指向全局对象（浏览器中为 window，Node.js 中为 global）。
普通函数调用：指向全局对象（严格模式下为 undefined）。
方法调用：指向调用方法的对象。
构造函数调用：指向新创建的实例对象。
箭头函数：没有自己的 this，继承自定义时所在的上下文。
显式绑定：通过 call、apply 和 bind 方法显式绑定 this。
事件处理函数：指向绑定事件的 DOM 元素。

this 关键字在 JavaScript 中的指向是动态的，它的值在函数调用时确定，而不是在函数定义时确定。理解 this 的指向对于编写和调试 JavaScript 代码非常重要。以下是详细的解释，包含了不同情况下 this 的指向：

全局环境

在全局环境中，this 通常指向全局对象。在浏览器中，全局对象是 window，在 Node.js 中是 global。

console.log(this); // 在浏览器中输出: window

函数调用

在普通函数调用中，this 默认指向全局对象（在严格模式下为 undefined）。

function foo() { console.log(this); } foo(); // 在非严格模式下输出:

 window // 在严格模式下输出: undefined

方法调用

当一个函数作为对象的方法调用时，this 指向调用该方法的对象。

const obj = { name: 'Alice', greet: function() { console.log(this.name); } }; 

obj.greet(); // 输出: 'Alice'

构造函数调用

当使用 new 关键字调用构造函数时，this 指向新创建的实例对象。

function Person(name) { this.name = name; } 

const alice = new Person('Alice'); 

console.log(alice.name); // 输出: 'Alice'

箭头函数

箭头函数中的 this 绑定在定义时确定，而不是调用时确定。箭头函数没有自己的 this，它会捕获其所在的上下文的 this 值。

const obj = { name: 'Alice', greet: () => { console.log(this.name); } }; 

obj.greet(); // 输出: undefined（箭头函数中的 `this` 指向全局对象）

显式绑定

通过 call、apply 和 bind 方法可以显式地绑定 this。

call：传入的第一个参数作为 this。

function greet() { console.log(this.name); } 

const obj = { name: 'Alice' }; 

greet.call(obj); // 输出: 'Alice'

apply：与 call 类似，区别在于接受参数为数组。

greet.apply(obj); // 输出: 'Alice'

bind：返回一个新的函数，永久绑定 this。

const greetAlice = greet.bind(obj); 

greetAlice(); // 输出: 'Alice'

DOM 事件处理函数

在事件处理函数中，this 指向绑定事件的元素。

const button = document.querySelector('button'); 

    button.addEventListener('click', function() { 

    console.log(this); // 输出: <button> 元素 

});

作为对象的方法调用（链式调用）

当方法以对象的方法形式链式调用时，this 指向调用方法的对象。

const obj = { 


        name: 'Alice', greet: function() { console.log(this.name); 


        return this;


     }, farewell: function() { 


        console.log('Goodbye ' + this.name); return this; } 


        }; 

 
        obj.greet().farewell(); // 输出: // Alice // Goodbye Alice

2、map和forEach的区别？

主要区别

返回值： forEach：没有返回值（即 undefined） map：返回一个新数组。

用途： forEach：用于执行副作用，如修改数组、打印日志等。map：用于创建一个新数组，其中包含对每个原始数组元素应用提供的函数后的结果。

可链式调用：forEach：不能进行链式调用，因为没有返回数组。 map：可以进行链式调用，因为返回的是一个新数组

forEach

forEach 方法用于遍历数组中的每个元素，并对每个元素执行提供的函数。forEach 不会返回任何值，只是执行所提供的函数。

特点

用法：对数组的每个元素执行一次提供的函数。
返回值：undefined。
可链式调用：不能进行链式调用，因为它不返回数组。
用途：用于在遍历数组时执行副作用（如修改元素、输出日志等）。

示例

const numbers = [1, 2, 3, 4, 5]; 

numbers.forEach(function(number) { 

    console.log(number); // 输出数组中的每个元素 

}); // 修改数组元素 

numbers.forEach(function(number, index, array) { array[index] = number * 2; }); 

console.log(numbers); // 输出: [2, 4, 6, 8, 10]

map

map 方法也用于遍历数组中的每个元素，但它会创建一个新数组，其中包含对每个原始数组元素执行提供的函数后的结果。map 返回一个新的数组，原数组保持不变。

特点

用法：对数组的每个元素执行一次提供的函数，并返回一个新数组。
返回值：一个新数组，其中包含每个元素执行提供的函数后的结果。
可链式调用：可以进行链式调用，因为它返回的是一个新数组。
用途：用于创建一个对原数组的每个元素执行函数后的新数组。

示例

const numbers = [1, 2, 3, 4, 5]; 

const doubledNumbers = numbers.map(function(number) { return number * 2; }); 

console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10] 

console.log(numbers); // 输出: [1, 2, 3, 4, 5]（原数组不变）

3、递归实现的底层原理是什么？

递归的底层原理依赖于函数调用栈来管理每次递归调用的执行上下文。每次递归调用都会将新的上下文压入栈中，直到满足基准条件。然后函数逐层返回，栈中的上下文逐个弹出，最终返回到最初的调用者。理解这一过程对于编写和调试递归函数非常重要。

递归的基本原理

基准条件（Base Case）：- 基准条件是递归函数停止调用自身的条件。当满足这个条件时，递归函数会返回一个明确的结果，不再继续递归调用。
递归步骤（Recursive Step）：- 递归步骤是函数在每次调用中调用自身，以逐步缩小问题的规模，直到达到基准条件。

函数调用栈

递归函数的执行依赖于函数调用栈（call stack），这是一个用于存储函数调用信息的数据结构。每次函数被调用时，其执行上下文（包括参数、本地变量、返回地址等）被推入栈中。当函数返回时，执行上下文被弹出栈，并返回到调用该函数的位置。

递归执行过程

1. 函数调用

每次递归调用时，都会在调用栈上创建一个新的栈帧，保存当前函数的执行上下文。栈帧会保留函数的参数和局部变量。

2. 基准条件检查

函数会首先检查基准条件，如果满足基准条件，则返回结果并从调用栈中弹出当前栈帧。

3. 递归调用

如果不满足基准条件，函数会进行递归调用。递归调用会创建新的栈帧并压入调用栈。

4. 返回结果

递归调用逐层返回结果，每次递归调用结束后，栈帧从调用栈中弹出，直到最终结果返回给最初的调用者。

示例：计算阶乘

以下是一个递归计算阶乘的示例：

function factorial(n) { // 基准条件 if (n === 0) { return 1; } // 递归步骤 

return n * factorial(n - 1); } 

console.log(factorial(5)); // 输出: 120

4、JavaScript 的基本类型有哪些?引用类型有哪些?null 和 undefined 的区别?

基本类型：Number, String, Boolean, Null, Undefined, Symbol, BigInt
引用类型：Object（包括 Array, Function, Date, RegExp, Map, Set 等）

null 和 undefined 都表示缺少值，但 undefined 是表示变量未赋值或属性不存在，而 null 是用来表示空对象引用，通常用于手动赋值，明确表示变量不再指向任何对象。

基本类型（Primitive Types）

基本类型是按值访问的，直接存储在变量中的数据。JavaScript 中有 7 种基本类型：

Number：表示数值，包括整数和浮点数。

let num = 42; 

let pi = 3.14;

String：表示字符串，即文本数据。

let str = "Hello, world!";

Boolean：表示布尔值，true 或 false。

let isTrue = true; 

let isFalse = false;

Null：表示空值，即没有对象。

let empty = null;

Undefined：表示未定义的值，即变量已声明但尚未赋值。

let notAssigned;

Symbol（ES6 引入）：表示唯一且不可变的值，通常用作对象属性的标识符。

let sym = Symbol("description");

BigInt（ES2020 引入）：表示任意精度的整数。

let bigInt = 1234567890123456789012345678901234567890n;

引用类型（Reference Types）

引用类型是按引用访问的，存储在堆中的对象，通过引用（指针）来访问这些对象。主要包括：

Object：基本的对象类型，用于存储键值对。

let obj = { name: "Alice", age: 25 };

Array：用于存储有序集合的对象。

let arr = [1, 2, 3, 4, 5];

Function：可调用的对象。

function greet() { console.log("Hello!"); }

Date：用于处理日期和时间的对象。

let now = new Date();

RegExp：正则表达式对象，用于匹配文本。

let regex = /ab+c/;

Map：键值对的集合，键可以是任意类型。

let map = new Map(); map.set('key', 'value');

Set：值的集合，值是唯一的。

let set = new Set([1, 2, 3]);

null 和 undefined 的区别

null 和 undefined 都表示“无值”或“缺失的值”，但它们有一些重要的区别：

undefined：表示变量已声明但尚未赋值，或对象属性不存在，或函数没有返回值。

let a; 

console.log(a); // 输出: undefined 

let obj = {}; 

console.log(obj.prop); // 输出: undefined 

function foo() {} 

console.log(foo()); // 输出: undefined

null：表示一个变量明确地赋值为空值，表示变量不再指向任何对象。

let b = null; 

console.log(b); // 输出: null 

let obj = { prop: null }; 

console.log(obj.prop); // 输出: null

比较 null 和 undefined

类型：

console.log(typeof null); // 输出: "object"（这是一个长期存在的语言特性） 

console.log(typeof undefined); // 输出: "undefined"

相等性：

console.log(null == undefined); // 输出: true（它们在非严格相等比较中被认为是相等的） 

console.log(null === undefined); // 输出: false（在严格相等比较中它们是不同的）

5、如何判断 JavaScript 的数据类型?

基本类型：使用 typeof 判断。
数组：使用 Array.isArray 判断。
对象类型：使用 instanceof 判断特定的构造函数。
更精确的判断：使用 Object.prototype.toString.call 返回 [object Type] 格式的字符串。

使用 typeof 操作符

typeof 是一个操作符，用于判断基本数据类型。它返回一个表示数据类型的字符串。

console.log(typeof 42); // "number" 

console.log(typeof 'hello'); // "string" 

console.log(typeof true); // "boolean" 

console.log(typeof undefined); // "undefined" 

console.log(typeof Symbol('id')); // "symbol" 

console.log(typeof 123n); // "bigint" 

console.log(typeof null); // "object" (这是一个已知的bug, null实际是一个原始类型) 

console.log(typeof { name: 'Alice' });// "object" 

console.log(typeof [1, 2, 3]); // "object" (数组是对象的一种) 

console.log(typeof function() {}); // "function"

使用 instanceof 操作符

instanceof 用于判断某个对象是否是某个构造函数的实例。

console.log({} instanceof Object); // true 

console.log([] instanceof Array); // true 

console.log(function() {} instanceof Function); // true

使用 Array.isArray

判断一个值是否为数组，推荐使用 Array.isArray。

console.log(Array.isArray([1, 2, 3])); // true 

console.log(Array.isArray({})); // false

使用 Object.prototype.toString

这种方法可以更准确地判断某些类型。

function getType(value) { return Object.prototype.toString.call(value); } 

console.log(getType(42)); // "[object Number]" 

console.log(getType('hello')); // "[object String]" 

console.log(getType(true)); // "[object Boolean]" 

console.log(getType(undefined)); // "[object Undefined]" 

console.log(getType(null)); // "[object Null]" 

console.log(getType(Symbol('id')); // "[object Symbol]" 

console.log(getType(123n)); // "[object BigInt]" 

console.log(getType({ name: 'Alice' });// "[object Object]" 

console.log(getType([1, 2, 3])); // "[object Array]" 

console.log(getType(function() {})); // "[object Function]" 

console.log(getType(new Date())); // "[object Date]" 

console.log(getType(/regex/)); // "[object RegExp]"

6、创建对象有几种方法？

对象字面量：简单直接，适用于静态对象。
Object 构造函数：传统但不常用。
构造函数：适用于需要初始化逻辑的对象。
Object.create：用于创建具有特定原型的对象。
类（ES6）：现代的面向对象编程方式。
工厂函数：灵活的对象创建方式。
Object.assign：用于合并对象或复制对象。
Object.fromEntries：将键值对列表转换为对象。

1. 对象字面量

这是最简单和最常用的方法。

let obj = { name: 'Alice', age: 25 };

2. 使用 Object 构造函数

通过 new Object() 创建一个新的对象。

let obj = new Object(); 

obj.name = 'Alice'; 

obj.age = 25;

3. 使用构造函数

自定义一个构造函数，然后使用 new 关键字创建对象。

function Person(name, age) { this.name = name; this.age = age; } 

let alice = new Person('Alice', 25);

4. 使用 Object.create 方法

Object.create 方法创建一个新对象，使用现有的对象作为新对象的原型。

let personProto = { greet: function() { console.log('Hello, ' + this.name); } }; 

let alice = Object.create(personProto); 

alice.name = 'Alice'; 

alice.age = 25; 

alice.greet(); // 输出: Hello, Alice

5. 使用类（ES6）

ES6 引入了类的语法糖，用于创建对象。

class Person { 

    constructor(name, age) { 

        this.name = name; this.age = age; 

    } greet() { 

        console.log('Hello, ' + this.name); 

    } 
} 

let alice = new Person('Alice', 25); 

alice.greet(); // 输出: Hello, Alice

6. 工厂函数

工厂函数是返回对象的普通函数，不使用 new 关键字。

function createPerson(name, age) { 

     return { 

        name: name, age: age, 

        greet: function() { 

        console.log('Hello, ' + this.name); 

        } }; 

    } 

let alice = createPerson('Alice', 25); 

alice.greet(); // 输出: Hello, Alice

7. 使用 ES6 中的 Object.assign

Object.assign 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

let obj = Object.assign({}, { name: 'Alice', age: 25 });

8. 使用 Object.fromEntries（ES10）

Object.fromEntries 方法将一个键值对列表（通常是一个数组）转换为一个对象。

let entries = [['name', 'Alice'], ['age', 25]]; 

let obj = Object.fromEntries(entries); 

console.log(obj); // 输出: { name: 'Alice', age: 25 }

7、创建函数的几种方式 ?

函数声明：适用于函数需要在定义前调用的场景。
函数表达式：适用于函数作为值或需要在定义后调用的场景。
箭头函数：适用于简短的函数和不需要 this 绑定的场景。
匿名函数：适用于临时使用的函数，如回调函数。
构造函数：适用于动态创建函数，但通常不推荐使用。
方法定义：适用于在对象或类中定义方法。

1. 函数声明（Function Declaration）

这是最常见的创建函数的方式。函数声明会被提升（hoisted），即可以在定义之前调用。

function greet() { 

    console.log('Hello, world!'); 

} greet(); // 输出: Hello, world!

2. 函数表达式（Function Expression）

函数表达式将一个函数赋值给一个变量。函数表达式不会被提升，因此只能在定义之后调用。

const greet = function() { 

    console.log('Hello, world!'); 

}; greet(); // 输出: Hello, world!

3. 箭头函数（Arrow Function）

箭头函数是 ES6 引入的一种更简洁的函数定义方式，适用于简短的函数。箭头函数不会有自己的 this，arguments，super，或 new.target 绑定。

const greet = () => { 

    console.log('Hello, world!'); 

}; greet(); // 输出: Hello, world!

如果箭头函数只有一个表达式，可以省略花括号和 return 关键字：

const add = (a, b) => a + b; 

console.log(add(2, 3)); // 输出: 5

4. 匿名函数（Anonymous Function）

匿名函数没有名字，通常作为参数传递给其他函数或立即执行。

作为参数传递

setTimeout(function() { 

    console.log('Hello, world!'); 

}, 1000);

立即执行函数表达式（IIFE）

立即执行函数表达式在定义后立即执行。

(function() { console.log('Hello, world!'); })();

5. 构造函数（Function Constructor）

通过 Function 构造函数创建新的函数。这种方法较少使用，因为不如前面的方式直观，并且在某些情况下会有性能问题。

const add = new Function('a', 'b', 'return a + b'); 

console.log(add(2, 3)); // 输出: 5

6. 方法定义（Method Definition）

在对象中定义方法。可以通过对象字面量或类（ES6）定义方法。

对象字面量

const obj = { greet: function() { 

    console.log('Hello, world!'); 

} }; obj.greet(); // 输出: Hello, world!

类（ES6）

class Person { greet() { 

    console.log('Hello, world!'); 

} } 

const person = new Person(); 

person.greet(); // 输出: Hello, world!

8、=== 和 ==的区别?

`==` 会进行类型转换后再比较，可能会返回 `true`，即使两个值类型不同。
`===` 不进行类型转换，类型不同直接返回 `false`，只有类型和值都相同才返回 `true`。

在 JavaScript 中，`==` 和 `===` 是两种比较运算符，用于比较两个值。它们的主要区别在于是否进行类型转换。

`==` (宽松比较)

`==` 运算符在比较两个值之前，会进行类型转换（type coercion），然后再进行比较。它尝试将两个值转换为相同的类型，然后再比较它们。

console.log(5 == '5'); // true

console.log(0 == false); // true

console.log(null == undefined); // true

console.log('' == false); // true

`===` (严格比较)

`===` 运算符在比较两个值时，不进行类型转换。如果两个值的类型不同，直接返回 `false`。只有当两个值的类型和值都相同时，才会返回 `true`。

console.log(5 === '5'); // false

console.log(0 === false); // false

console.log(null === undefined); // false

console.log('' === false); // false

console.log(5 === 5); // true

console.log('hello' === 'hello'); // true

9、请指出 JavaScript 宿主对象和原生对象的区别?

原生对象是 JavaScript 语言自身的一部分，由 ECMAScript 规范定义，在任何 ECMAScript 实现中都存在。
宿主对象是由 JavaScript 运行的宿主环境（如浏览器或 Node.js）提供的，允许 JavaScript 与宿主环境的特性和功能交互。

在 JavaScript 中，宿主对象（Host Objects）和原生对象（Native Objects，也称为内置对象，Built-in Objects）是两个重要的概念。

原生对象（Native Objects）

原生对象是由 ECMAScript 规范定义的对象，它们是 JavaScript 语言的一部分，在任何实现 ECMAScript 的环境中都可以使用。这些对象在 JavaScript 运行时环境中自动可用。

常见的原生对象包括：

基本包装对象：Object, Function, Boolean, Symbol, Error
数值和日期对象：Number, BigInt, Math, Date
字符串处理对象：String, RegExp
集合和结构对象：Array, Set, Map, WeakSet, WeakMap
类型数组和缓冲区对象：ArrayBuffer, DataView, TypedArray (如 Int8Array, Uint8Array, Float32Array 等)
其他：JSON, Promise, Reflect, Proxy

这些对象和构造函数在 JavaScript 引擎启动时被自动加载，不依赖于宿主环境（例如浏览器或 Node.js）。

宿主对象（Host Objects）

宿主对象是由宿主环境（Host Environment）提供的对象，用于与宿主环境的特性和能力交互。宿主环境是 JavaScript 运行的外部环境，如浏览器、Node.js、嵌入式设备等。宿主对象的可用性和功能取决于具体的宿主环境。

在浏览器环境中的常见宿主对象：

文档对象模型（DOM）：window, document, HTMLElement, NodeList, Event, localStorage
浏览器特性：XMLHttpRequest, fetch, alert, console
Web API：Canvas, WebSocket, ServiceWorker

在 Node.js 环境中的常见宿主对象：

全局对象：global, process, Buffer
模块和文件系统：require, module, fs, path
其他内置模块：http, https, os

主要区别

定义来源：原生对象：由 ECMAScript 规范定义，任何 ECMAScript 实现中都存在。宿主对象：由宿主环境定义，根据不同的宿主环境而变化。
可用性：原生对象：在所有 ECMAScript 环境中都可用。宿主对象：仅在特定的宿主环境中可用。
作用范围：原生对象：语言层面，提供基本的数据结构和方法。宿主对象：环境层面，提供与环境特性和 API 的交互。
示例：原生对象：Array, Object, Function, Date 宿主对象（浏览器）：window, document, fetch 宿主对象（Node.js）：global, process, fs

10、]avaScript 内置的常用对象有哪些?并列举该对象常用的方法?

1. Object

Object 是所有 JavaScript 对象的基类，所有对象从 Object 继承方法和属性。

常用方法：

Object.create(proto[, propertiesObject])：使用指定的原型对象和属性创建一个新的对象。
Object.assign(target, ...sources)：将所有可枚举的属性的值从一个或多个源对象复制到目标对象。
Object.keys(obj)：返回一个包含对象自身可枚举属性名称的数组。
Object.values(obj)：返回一个包含对象自身可枚举属性值的数组。
Object.entries(obj)：返回一个包含对象自身可枚举属性键值对的数组。
Object.freeze(obj)：冻结对象，防止修改其属性。
Object.seal(obj)：密封对象，防止添加新属性。

2. Array

Array 用于存储有序的元素集合。

常用方法：

Array.prototype.push(...items)：向数组末尾添加一个或多个元素，并返回新的长度。
Array.prototype.pop()：移除并返回数组的最后一个元素。
Array.prototype.shift()：移除并返回数组的第一个元素。
Array.prototype.unshift(...items)：向数组开头添加一个或多个元素，并返回新的长度。
Array.prototype.concat(...arrays)：合并两个或多个数组，并返回一个新数组。
Array.prototype.slice([begin[, end]])：返回数组的一个浅拷贝，从 begin 到 end（不包括 end）。
Array.prototype.splice(start, deleteCount, ...items)：通过删除或替换现有元素或者添加新元素来修改数组。
Array.prototype.forEach(callback[, thisArg])：对数组的每个元素执行一次提供的函数。
Array.prototype.map(callback[, thisArg])：创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
Array.prototype.filter(callback[, thisArg])：创建一个新数组，其中包含所有通过提供函数测试的元素。
Array.prototype.reduce(callback[, initialValue])：对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。

3. String

String 用于表示和操作文本。

常用方法：