JavaScript基础篇(21-30题)

此文章，来源于印客学院的资料【第一部分：基础篇(105题)】，也有一些从网上查找的补充。

这里只是分享，便于学习。

诸君可以根据自己实际情况，自行衡量，看看哪里需要加强。

概述如下：

• javascript有哪些方法定义对象
• 前端开发中常见兼容性问题？
• 说说你对promise的了解
• vue 、react 、angular
• Node的应用场景
• 谈谈你对AMD 、CMD的理解
• web开发中会话跟踪的方法有哪些
• 介绍js有哪些内置对象
• 说几条写JavaScript的基本规范
• 简述 JavaScript中栈和堆，并举例说明

javascript有哪些方法定义对象

在 JavaScript 中，有多种方法可以定义对象。以下是几种常见的方法：

1. 字面量（Literal）法：

var obj = { 
  key1: value1,
  key2: value2,
  // ...
};

2. 构造函数法：

function MyObject(key1, key2) {
  this.key1 = key1;
  this.key2 = key2;
  // ...
}

var obj = new MyObject(value1, value2);

3. 工厂模式（Factory）法：

function createObject(key1, key2) {
  var obj = {};
  obj.key1 = key1;
  obj.key2 = key2;
  // ...
  return obj;
}

var obj = createObject(value1, value2);

4. 原型（Prototype）法：

function MyObject() {
  // ...
}

MyObject.prototype.key1 = value1;
MyObject.prototype.key2 = value2;
// ...

var obj = new MyObject();

5. Object.create() 方法：

var obj = Object.create(null); // 创建一个原型为空的对象

obj.key1 = value1;
obj.key2 = value2;
// ...

这只是一些常见的方法，JavaScript 提供了灵活的方式来定义对象，开发者可以根据具体需求选择最适合的方法。

前端开发中常见兼容性问题？

在前端开发中，常见的兼容性问题包括以下几个方面：

1. 浏览器兼容性：不同浏览器对 HTML、CSS 和 JavaScript 的解析和支持程度不同，可能导致页面在不同浏览器上显示效果不一致或功能无法正常运行。比较常见的浏览器兼容性问题涉及 CSS 盒模型、浮动、定位、文本溢出、样式重置等。

2. CSS 兼容性：不同浏览器对 CSS 属性和特性的支持也存在差异，比如某些浏览器对某些 CSS3 属性的支持不完整或存在前缀的区别，需要考虑通过添加特定的前缀或使用其他替代方案来解决兼容性问题。

3. JavaScript 兼容性：不同浏览器对 JavaScript 的支持程度也不尽相同，比如对 ES6+ 新语法的支持、API 的差异等。需要注意避免使用过时的语法和 API，或者通过使用 polyfill 或转译工具来实现跨浏览器的兼容性。

4. 移动设备兼容性：移动设备上的浏览器和操作系统也存在各种兼容性问题，比如屏幕尺寸、触摸事件、视口设置、字体渲染等。需要通过响应式设计、媒体查询、移动端事件处理等方法来解决移动设备上的兼容性问题。

5. 响应式设计：不同尺寸的设备上，页面的布局和内容显示需要做相应的调整，以适应不同的屏幕大小。常见的响应式设计兼容性问题包括布局错乱、字体大小、图片显示等。

为了解决这些兼容性问题，可以采取以下措施：

• 使用标准化的 HTML、CSS 和 JavaScript 代码，遵循 Web 标准；
• 使用 CSS 预处理器（如Sass或Less）来简化样式编写，并减少兼容性问题；
• 使用现代的浏览器特性和 API，同时提供替代方案或 polyfill；
• 进行跨浏览器测试，及时发现并修复兼容性问题；
• 应用响应式设计原则，优化在不同设备上的显示效果；
• 参考和利用已有的兼容性解决方案和工具，如 Normalize.css、Autoprefixer 等。

说说你对promise的了解

Promise是一种用于异步编程的JavaScript对象。它表示一个异步操作的最终结果。

通常，异步操作会在某个时间点返回一个值，但在该值可用之前，代码会继续执行。

通过使用Promise，可以更方便地处理和协调异步操作。

一个Promise对象有三种状态：

• pending（进行中），初始状态, 非 fulfilled 或 rejected.
• fulfilled（已完成）
• rejected（已拒绝）。

在初始状态下，Promise处于pending状态。当异步操作成功完成时，Promise进入fulfilled状态，并携带着操作的结果。而如果异步操作失败，Promise则进入rejected状态，并携带相应的错误信息。

使用Promise时，可以通过调用 then() 方法来注册处理成功状态的回调函数，或者通过调用 catch() 方法来注册处理失败状态的回调函数。这些回调函数可以处理异步操作返回的值或错误，并继续执行其他操作。此外，还可以使用Promise.all()、Promise.race()等方法来处理多个Promise对象。

Promise的优点在于它提供了一种更清晰、可靠的方式来处理异步操作。它可以避免回调地狱（callback hell）的问题，使代码更易读、易维护。同时，Promise还支持链式调用，使得多个异步操作可以按顺序执行，让代码更加优雅。

总之，Promise是一种用于处理异步操作的机制，它提供了简洁而强大的编程接口，使得异步代码变得更可控、可读性更高。

Promise 的构造函数

Promise 的构造函数是用来创建一个 Promise 对象的。它接受一个函数参数，该参数是一个执行器函数，该函数有两个参数 resolve 和 reject。在执行器函数中，我们可以执行异步操作，并根据操作的结果调用 resolve 或 reject 函数来决定 Promise 的最终状态。

例如：

const promise = new Promise((resolve, reject) => {
  // 执行一些异步操作
  if (异步操作成功) {
    resolve(成功的结果);
  } else {
    reject(失败的原因);
  }
});

在上面的例子中，当异步操作成功时，我们调用 resolve 函数并传递成功的结果，这样 Promise 的状态将变为 resolved，并且传递的结果会被传递给后续链式调用中的下一个 then 方法。当异步操作失败时，我们调用 reject 函数并传递失败的原因，这样 Promise 的状态将变为 rejected，并且失败的原因会被传递给后续链式调用中的 catch 方法。

通过 Promise 的构造函数，我们可以创建一个异步操作的包装对象，并通过链式调用 then 和 catch 方法来处理异步操作的结果。

通过构造函数创建的 Promise 对象具有以下特点：

• 它代表了一个异步操作的最终状态。
• 它可以被链式调用的 then 和 catch 方法处理其状态的变化。
• 它可以通过 resolve 和 reject 函数来改变其状态。

Promise 的示例

当使用 Promise 的构造函数时，可以创建一个表示异步操作的 Promise 对象，并在执行器函数中定义具体的异步逻辑。

以下是一个使用 Promise 构造函数的示例：

const fetchData = () => {
  return new Promise((resolve, reject) => {
    // 模拟异步操作，比如发送网络请求获取数据
    setTimeout(() => {
      const data = { name: 'Alice', age: 25 };

      if (data) {
        resolve(data); // 异步操作成功，调用 resolve 并传递数据
      } else {
        reject(new Error('Failed to fetch data')); // 异步操作失败，调用 reject 并传递错误信息
      }
    }, 2000);
  });
};

// 使用 Promise 返回的数据
fetchData()
  .then((data) => {
    console.log('Fetched data:', data);
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
  });

在上面的例子中，我们首先定义了一个 fetchData 函数，该函数返回一个 Promise 对象。在 Promise 的构造函数中，我们模拟了一个异步操作，比如发送网络请求获取数据。在 setTimeout 的回调函数中，我们根据实际情况决定是调用 resolve 还是 reject。

然后，我们可以通过链式调用 Promise 对象的 then 方法来处理异步操作成功的情况。在这个例子中，我们打印出从异步操作中获取的数据。如果异步操作失败，我们可以使用 catch 方法来处理异常情况，并打印出错误信息。

需要注意的是，构造函数中的异步操作可以是任何类型的异步任务，如网络请求、文件读取等。

通过 Promise 的链式调用方法（then、catch），我们可以在异步操作完成后处理结果或错误。

vue 、react 、angular

Vue、React和Angular都是流行的 前端JavaScript框架，用于构建现代化的Web应用程序。

它们各自有自己的特点和优势如下：

1. Vue.js: Vue.js 是一个简洁、灵活的前端框架，具有渐进式的特点。它的核心库只关注视图层，易于集成到已有项目中。Vue.js采用了虚拟DOM和数据驱动的思想，在组件化开发上有着很好的支持，使得构建交互式界面变得更加简单和高效。Vue.js的学习曲线相对较低，文档丰富，社区活跃。

2. React: React 是由 Facebook 开发的一款被广泛使用的前端框架。它采用了组件化的开发模式，通过构建大型应用的可重用组件来提高开发效率。React使用虚拟DOM进行高效的DOM diff算法，减少了真实DOM的操作，从而提升了性能。React还可以与其他工具和库无缝集成，如Redux等。React的社区庞大，生态系统完善。

3. Angular: Angular 是由 Google 开发的一款全面的前端框架。它采用了TypeScript作为主要开发语言，提供了完整的MVC（Model-View-Controller）架构，具有强大的功能和丰富的工具集。Angular具有强大的数据绑定和依赖注入系统，使得开发复杂应用变得更加容易。同时，Angular还提供了一套完整的CLI（命令行界面）工具，以简化项目的搭建和维护。Angular的学习曲线相对较陡峭，但它适用于构建大型、复杂的应用程序。

选择使用哪个框架取决于具体的需求、团队的技术栈和个人喜好。

• Vue.js注重简单性和灵活性，适合小型项目和初学者；

• React强调组件化和性能，适用于构建大规模应用；

• Angular提供了全面的特性和强大的工具集，适合大型企业级应用。

无论选择哪个框架，都需要根据项目的需求和团队的实际情况做出权衡和选择。

Node的应用场景

Node特点：

1、它是⼀个 Javascript 运⾏环境
2、依赖于 Chrome V8 引擎进⾏代码解释
3、事件驱动
4、非阻塞 I/O
5、单进程， 单线程

Node优点：

• 高并发 ( 最重要的优点)

Node缺点：

1、只⽀持单核 CPU ，不能充分利用 CPU
2、可靠性低，⼀ 旦代码某个环节崩溃，整个系统都崩溃

Node.js 应用场景

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它的应用场景非常广泛。

下面是一些常见的 Node.js 应用场景：

1. 服务器端应用程序：Node.js 可以用来构建高性能、可伸缩的服务器端应用程序。它的非阻塞 I/O 模型使得它能够处理大量并发请求，适合构建实时应用、聊天服务器、博客平台等。

2. 前端构建工具：Node.js 生态系统中有很多强大的前端构建工具，如 Grunt、Gulp 和 webpack。这些工具可以自动化执行任务，如文件打包、代码压缩、资源优化等，提高前端开发效率。

3. 命令行工具：Node.js 提供了丰富的标准库和第三方模块，使其成为构建命令行工具的理想选择。你可以使用 Node.js 编写脚本来执行各种任务，如文件操作、数据处理、网络请求等。

4. 实时交互应用：由于 Node.js 具有即时响应和高并发处理的特性，它非常适合构建实时交互应用，如聊天应用、多人游戏等。Node.js 的事件驱动模型和 WebSocket 支持使得这些应用能够实时地推送数据给客户端。

5. RESTful API 服务：Node.js 可以用来构建高性能的 RESTful API 服务。它的轻量级和高度可扩展的特性使得它成为构建 Web API 的首选技术。结合 Express、Koa 等框架，可以快速构建出安全、可靠的 API 服务。

6. 数据流处理：Node.js 在处理大规模数据流时表现出色。它可以通过流（Stream）的方式高效地处理文件、网络数据等。这在处理日志、图像处理、实时数据分析等领域非常有用。

总的来说，Node.js 是一种高效、可扩展的服务器端运行环境，适用于构建各种类型的应用。它的事件驱动和非阻塞 I/O 特性使得它能够处理高并发请求，而且在开发上具有很高的灵活性。

谈谈你对AMD 、CMD的理解

CommonJS 是服务器端模块的规范， Node.js 采用了这个规范 。 CommonJS 规范加载模块是同步的，也就是说， 只有加载完成，才能执⾏后面的操作 。 AMD 规范则是非同步加载模块， 允许指定回调函数

AMD 推荐的风格通过返回⼀个对象做为模块对象， CommonJS 的风格通过对 module.exports 或 exports 的属性赋值来达到暴露模块对象的目的

es6模块 CommonJS、AMD、CMD

CommonJS 的规范中，每个 JavaScript ⽂件就是⼀个独立的模块上下⽂ ( module context )， 在这个上下⽂中默认创建的属性都是私有的 。也就是说，在⼀个⽂件定义的 变量 ( 还包括函数和类)， 都是私有的，对其他⽂件是不可⻅的。

CommonJS 是同步加载模块,在浏览器中会出现堵塞情况，所以不适用

AMD 异步， 需要定义回调 define ⽅式

es6 ⼀个模块就是⼀个独立的⽂件，该⽂件内部的所有变量，外部⽆法获取 。如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量 es6 还可 以导出类 、⽅法， 自动适用严格模式。

web开发中会话跟踪的方法有哪些

在Web开发中，有几种常用的会话跟踪方法：

1. Cookie: Cookie 是最常见和最常用的会话跟踪方法之一。服务器通过在客户端设置Cookie，将会话信息存储在用户的浏览器中。每次用户发送请求时，浏览器会自动附带相应的Cookie数据，从而实现会话跟踪。

2. URL 重写：URL 重写是一种简单的会话跟踪方法，它通过在URL中添加识别会话的参数来实现。服务器根据这些参数来识别用户的会话状态，而不需要使用Cookie或其他技术。

3. 隐藏表单字段：在Web表单中添加隐藏字段，可以存储会话标识符和其他会话信息。服务器通过解析表单提交的隐藏字段来跟踪会话状态。

4. Session ID：服务器可以为每个用户分配一个唯一的会话ID，并将其存储在服务器端的数据存储中（例如内存或数据库）。客户端的每个请求都需要携带会话ID，以便服务器可以识别会话并恢复会话状态。

5. JSON Web Token（JWT）：JWT 是一种基于 JSON 的轻量级身份验证和授权的规范。它可以用于实现无状态的会话管理。服务器在用户登录成功后，生成一个包含用户信息的 JWT，然后将其发送给客户端。客户端将 JWT 存储在本地，并在每次请求时将其包含在请求头或请求参数中。服务器通过验证 JWT 来跟踪和管理会话。

这些方法可以单独使用，也可以结合使用来实现会话跟踪功能，具体选择哪种方法取决于项目需求和安全性考虑。

介绍js有哪些内置对象

Object 是 JavaScript 中所有对象的父对象

数据封装类对象： Object 、 Array 、 Boolean 、 Number 和 String

其他对象： Function 、 Arguments 、 Math 、 Date 、 RegExp 、 Error

下面是一些常见的内置对象及其示例：

1. Object：所有对象的基类，用于创建对象。

var obj = new Object();
obj.name = "John";
obj.age = 25;
console.log(obj.name); // 输出: John

2. Array：用于创建和操作数组。

var arr = [1, 2, 3, 4, 5];
arr.push(6);
console.log(arr); // 输出: [1, 2, 3, 4, 5, 6]

3. String：用于创建和操作字符串。

var str = "Hello World";
console.log(str.length); // 输出: 11
console.log(str.toUpperCase()); // 输出: HELLO WORLD

4. Number：用于处理数字。

var num = 3.14;
console.log(num.toFixed(2)); // 输出: 3.14

5. Boolean：表示逻辑上的 true 或 false 值。

var bool = true;
console.log(bool.toString()); // 输出: "true"

6. Date：用于处理日期和时间。

var date = new Date();
console.log(date.getFullYear()); // 输出当前年份

7. Math：提供数学运算相关的方法和常量。

console.log(Math.sqrt(16)); // 输出: 4

8. RegExp：用于进行模式匹配和替换。

var regex = /hello/i;
console.log(regex.test("Hello, world!")); // 输出: true

9. Function：用于定义和调用函数。

function greet(name) {
  console.log("Hello, " + name + "!");
}
greet("John"); // 输出: Hello, John!

10. JSON：用于解析和序列化 JSON 数据。

var jsonStr = '{"name":"John","age":25}';
var obj = JSON.parse(jsonStr);
console.log(obj.name); // 输出: John

这些是常见的内置对象及其示例，通过使用它们，可以实现各种常见的功能和操作。

说几条写JavaScript的基本规范

• 不要在同⼀行声明多个变量
• 请使用 =/! 来比较 true/false 或者数值
• 使用对象字面量替代 new Array 这种形式
• 不要使用全局函数
• Switch 语句必须带有 default 分支
• If 语句必须使用大括号
• for-in 循环中的变量 应该使用 var 关键字明确限定作用域，从而避免作用域污

简述 JavaScript中栈和堆，并举例说明

在JavaScript中，栈（stack）和堆（heap）是两种不同的内存管理概念。

1. 栈（stack）：栈是一种自动分配和释放内存的数据结构，用于存储函数调用、本地变量以及函数返回值等。它的特点是后进先出（LIFO），也就是最后进入栈的元素首先被处理。栈的大小是固定的，并且通过“栈指针”来追踪当前栈顶的位置。

下面是一个简单的例子，展示了栈的使用：

function foo() {
  var a = 10;
  var b = 20;
  return a + b;
}

var result = foo();
console.log(result); // 输出：30

在这个例子中，当foo函数被调用时，会在栈上分配一块内存用于存储a和b的值。当函数执行完毕并返回结果时，栈会自动释放这些内存。

2. 堆（heap）：堆是一种动态分配的内存区域，用于存储复杂对象（比如对象、数组等）。它的大小不固定，而是由运行时系统动态分配和管理。在堆中分配的内存需要手动释放，否则可能会导致内存泄漏。

下面是一个堆的例子，展示了对象的存储：

var person = {
  name: 'John',
  age: 30,
  address: {
    city: 'Beijing',
    country: 'China'
  }
};

console.log(person.name); // 输出：John

在这个例子中，person变量存储了一个对象，该对象包含了名字、年龄和地址等属性。这个对象在堆中被分配了一块内存空间，并且可以通过person变量来访问和操作。

总结起来，栈用于存储简单数据类型和函数调用过程，而堆用于存储复杂对象。栈上的内存由系统自动管理，而堆上的内存需要手动分配和释放。