2024年1月16日

1 js显 隐类型转化

JavaScript中的类型转换分为两种：隐式类型转换和显式类型转换。

隐式类型转换

隐式类型转换通常发生在运算符进行计算时，JavaScript引擎会自动进行类型转换以执行运算。例如，当你将一个数字与一个字符串进行加法运算时，JavaScript会自动将数字转换为字符串，然后进行连接。以下是一些常见的隐式类型转换场景：

1. 算术运算符：在进行加、减、乘、除等运算时，如果操作数中有一个是字符串，那么其他非字符串操作数将被转换为字符串。

2. 比较运算符：在进行比较时（如==和===），如果比较的两个操作数类型不同，JavaScript会尝试将它们转换为相同的类型后再进行比较。

3. 逻辑运算符：在逻辑运算中（如&&和||），如果操作数是布尔值以外的类型，它们将被转换为布尔值。

4. 赋值运算：当将一个值赋给一个变量时，如果变量的声明类型与赋值类型不匹配，赋值时会进行类型转换。

显式类型转换

显式类型转换需要程序员明确地告诉JavaScript引擎希望将一个值转换成什么类型。这通常通过内置的类型转换函数来实现，例如Number(), String(), Boolean()等。显式类型转换通常用于确保在特定情况下获得预期的类型。以下是一些显式类型转换的例子：

1. Number()：将一个值转换为数字。如果转换的值不是数字格式，将返回NaN（Not a Number）。

2. String()：将一个值转换为字符串。对于非字符串值，它会调用该值的toString()方法。

3. Boolean()：将一个值转换为布尔值。除了undefined, null, 0, -0, ""（空字符串），false和NaN会被转换为false，其他值转换为true。 在进行类型转换时，JavaScript遵循一些特定的规则，例如，当一个对象需要被转换为原始类型时，会调用它的valueOf()方法，如果该方法返回原始类型，就使用返回值；如果没有返回原始类型，则调用toString()方法。 理解和掌握这些类型转换的规则对于编写健壮的JavaScript代码至关重要。

2 js判断数据类型的方法

typeof操作符

typeof操作符用于返回一个变量的类型。但对于对象，它只会返回"object"，而不会返回具体的对象类型。

typeof "Hello";  // 返回 "string"
typeof 42;       // 返回 "number"
typeof true;     // 返回 "boolean"
typeof undefined;// 返回 "undefined"
typeof null;     // 返回 "object"（这是一个历史遗留问题）
typeof {};       // 返回 "object"
typeof function() {} // 返回 "function"

instanceof操作符

instanceof操作符用于检测构造函数的prototype属性是否出现在对象的原型链中的任何位置。

[] instanceof Array;   // 返回 true
{} instanceof Object;  // 返回 true
function() {} instanceof Function; // 返回 true

constructor属性

每个JavaScript对象都有一个constructor属性，指向创建该对象的函数。

var arr = [];
arr.constructor === Array;  // 返回 true

检查内置对象

对于一些特殊的原生对象，如Date、RegExp等，可以通过比较构造函数来判断。

var date = new Date();
date instanceof Date;  // 返回 true
date instanceof Object; // 返回 true
date.constructor === Date; // 返回 true

综合方法

为了更准确地判断一个变量的类型，通常需要结合使用上述方法。

function getType(value) {
return typeof value === "object" && value !== null
? Object.prototype.toString.call(value)
: typeof value;
}
getType([]);       // 返回 "[object Array]"
getType({});       // 返回 "[object Object]"
getType(function() {}); // 返回 "[object Function]"

这个getType函数使用typeof来排除null，并使用Object.prototype.toString.call()来获取更详细的对象类型信息。 在使用这些方法时，需要注意它们各自的特点和限制，以选择最适合当前场景的判断方法。

3 js中同步和异步有什么区别

JavaScript中的同步（Synchronous）和异步（Asynchronous）是编程中常用的两种执行代码的方式，它们在处理任务和资源管理方面有根本的区别。

同步（Synchronous）

1. 单线程执行：同步代码是单线程的，这意味着代码是按照顺序执行的，前一个任务完成之后才能执行下一个任务。

2. 阻塞性：如果一个同步任务执行时间较长，它将会阻塞后面的任务，导致程序在等待这个长时间任务完成期间无法执行其他任务。

3. 易于理解：同步代码容易理解和预测，因为代码的执行顺序和流程是清晰的。

4. 缺点：在处理长时间运行的任务时，如文件读写、网络请求等，会导致程序响应缓慢，影响用户体验。

异步（Asynchronous）

1. 非阻塞性：异步任务不会阻塞程序的执行，允许在等待任务完成的同时执行其他代码。

2. 事件驱动：异步通常基于事件或回调来执行，这意味着代码的执行是由事件的发生来触发的，而不是按照代码编写的顺序。

3. 提高性能：通过异步处理，可以避免因等待长时间运行的任务而导致的程序卡顿，提高程序的性能和用户体验。

4. 复杂性：异步代码通常比同步代码更复杂，因为它涉及到回调、事件循环等概念，编写和调试都相对困难。

异步的实现方式

1. 回调函数：最常见的异步实现方式，函数作为参数传递，当异步操作完成时被调用。

2. Promise对象：ES6引入Promise，用于更优雅地处理异步操作，避免回调地狱。

3. async/await：ES2017引入async和await关键字，使得异步代码看起来像同步代码，提高了可读性。

示例

同步代码示例：

function syncTask() {
 console.log("开始执行同步任务");
 // 假设这个任务花费很长时间
 while (true) {
   // 做一些耗时操作
 }
 console.log("同步任务结束");
}
syncTask();

异步代码示例：

function asyncTask(callback) {
 console.log("开始执行异步任务");
 setTimeout(function() {
   callback();
 }, 1000);
}
asyncTask(function() {
 console.log("异步任务结束");
});

在实际开发中，异步编程是处理非阻塞性任务（如网络请求、文件操作等）的常用手段，它能有效避免程序冻结，提升用户体验。而同步编程则更适合于那些快速完成的小任务。

4 watch和computed

在Vue.js框架中，computed和watch是两种不同的依赖追踪机制，它们用于响应数据的变化并执行相应的操作，但是它们在使用场景、工作方式和性能特点上存在一些差异。

computed计算属性

1. 定义：computed是一种基于它们的响应式依赖进行缓存的计算值。当依赖的数据发生变化时，计算属性会重新计算，并且只有在依赖的数据发生变化时才会重新计算，否则会直接返回之前计算的结果。

2. 使用场景：适用于依赖较少、计算量较大的情况，特别是当你需要一些数据随着其他数据变动而变动时。

3. 性能特点：支持缓存，只有在依赖数据发生变化时才会重新计算，可以节省计算资源。

4. 同步/异步：计算属性不支持异步操作。

5. 例子：

new Vue({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

watch侦听器

1. 定义：watch是一个用于监听数据变化并执行回调的机制。当监听的数据发生变化时，watch回调函数会被执行。

2. 使用场景：适用于需要在数据变化时执行异步或开销较大的操作的情况。

3. 性能特点：每次数据变化都会触发回调，没有缓存机制，可能会造成性能损耗。

4. 同步/异步：watch可以监听异步操作。

5. 例子：

new Vue({
  data() {
    return {
      name: 'John Doe'
    };
  },
  watch: {
    name(newVal, oldVal) {
      console.log('name changed from ' + oldVal + ' to ' + newVal);
    }
  }
});

区别总结

• 缓存：computed有缓存机制，依赖数据变化时才重新计算；watch没有缓存，数据变化即触发回调。

• 同步/异步：computed不能处理异步逻辑；watch可以监听异步数据变化。

• 使用场景：computed适用于计算量大的场景，如复杂的计算和数据处理；watch适用于数据变化时执行特定操作，如表单验证或数据持久化。

• 性能：computed在性能上更优，因为它避免不必要的计算；watch可能在数据变动频繁时造成性能问题。

5 computed的值可以v-model绑定？

computed中的值可以绑定到标签上，使用v-model指令。但是，这样做通常是不推荐的，因为computed属性是单向的，即它们只能从数据流向视图，而v-model绑定通常是用于双向数据绑定，允许数据从视图流向数据。 尽管技术上可行，将computed属性用于v-model可能会导致一些意外的行为，因为computed属性的更新不会触发视图的重新渲染，除非它们被显式地声明为响应式。此外，这样做会掩盖组件内部状态的变化，使得组件的行为变得难以预测和理解。

6 $nextTick

在Vue.js框架中，$nextTick是一个实例方法，它提供了一种在下一个DOM更新循环结束之后执行延迟回调的方式。这个方法通常用来确保某些操作在DOM更新完成后执行，比如需要在数据变化后读取最新的DOM状态。 Vue.js的响应式系统会在数据变化时异步地更新DOM。这意味着当数据更新时，Vue不会立即重新渲染整个DOM树，而是先缓存这些更改，并在同一个事件循环中处理所有数据变更后，一次性地更新DOM。这种处理方式优化了性能，因为它减少了DOM操作的次数。 然而，这种异步更新DOM的行为可能会导致一些问题，尤其是在需要基于更新后的DOM状态进行操作时。比如，如果你在数据变化后立即读取DOM元素的属性，可能会得到旧的状态，因为在数据变化到DOM更新之间可能会有重绘或重新布局。 $nextTick解决的就是这个问题。当你调用$nextTick时，你提供的回调函数会在下一个DOM更新循环开始之前执行。这样，你就可以在回调函数中访问到更新后的DOM元素了。 下面是一个$nextTick的使用示例：

new Vue({
// ...
methods: {
updateMessage() {
 this.message = '更新后的消息';
 this.$nextTick(function() {
   // 这个回调函数将在DOM更新后执行
   console.log('DOM已更新');
 });
}
}
});

在这个例子中，我们修改了message数据，然后立即调用$nextTick。在回调函数中，我们可以确信DOM已经更新反映了最新的数据状态。 $nextTick可以保证在DOM更新完成后执行操作，适用于需要在数据更新后执行的DOM操作、验证、测试等场景。此外，$nextTick还接受一个可选的第二个参数，用于指定回调函数的执行环境（this的上下文），这在使用箭头函数时特别有用。

7 $set

在Vue.js中，$set是一个实例方法，它用于向响应式对象的数组中添加一个新元素，并确保这个新元素也是响应式的。这个方法通常在需要向数组中添加新项时使用，以确保Vue能够跟踪到这个新项，并对其进行响应式管理。 当你直接添加一个新元素到数组中时（例如，通过索引或通过设置一个新属性），Vue不会自动将其识别为响应式。这意味着如果你之后修改了这个新添加的元素，Vue不会追踪这个变化，也不会更新DOM。使用$set可以解决这个问题。 $set方法来自于Vue的observer对象，它实际上调用了Array.prototype.splice方法，并确保新添加的元素也是响应式的。 下面是一个$set的使用示例：

new Vue({
el: '#app',
data: {
list: [1, 2, 3]
},
methods: {
addItem() {
 this.$set(this.list, this.list.length, 4);
}
}
});

在这个例子中，我们通过$set向list数组中添加了一个新元素4。这个新元素将被Vue识别为响应式的，因此如果之后修改了这个元素，Vue会自动更新DOM。 $set还可以用于添加对象的属性。如果你向一个对象动态添加一个属性，并且希望这个属性也是响应式的，你也可以使用$set。

new Vue({
el: '#app',
data: {
obj: {
 firstName: 'John'
}
},
methods: {
addProperty() {
 this.$set(this.obj, 'lastName', 'Doe');
}
}
});

在这个例子中，我们使用$set向obj对象添加了一个新属性lastName。这样，lastName属性就是响应式的，任何对其的修改都会触发Vue的更新机制。

8 key的作用

在 Vue.js 中，key 是一个特殊属性，主要用于 v-for 指令中。它的作用是确保在列表渲染时，Vue 能够准确地追踪每个节点的身份，从而重用和重新排序现有元素。 当使用 v-for 渲染列表时，如果列表中的元素重新排序或部分元素被替换，Vue 会通过 key 属性来判断哪些元素是需要被重用，哪些是需要被替换的。key 必须是一个唯一的值，通常是一个与数据项对应的字符串或数字。 以下是 key 的主要作用：

1. 唯一标识：key 为列表中的每个元素提供了一个唯一的身份标识。Vue 会根据这个标识来缓存和重新使用元素。

2. 性能优化：由于 Vue 的 diff 算法，使用 key 可以显著提高列表渲染的性能。在没有 key 的情况下，Vue 会对整个列表进行重新排序和渲染，而有 key 时，Vue 只需要更新那些实际发生变化的部分。

3. 元素重用：当列表的数据项发生变化时，Vue 会尽可能重用已有元素，而不是销毁和重新创建它们。这有助于减少不必要的 DOM 操作和性能损耗。

4. 排序稳定性：key 还可以帮助 Vue 保持排序稳定性。即使列表的数据项顺序发生变化，Vue 也会根据 key 的顺序来维持 DOM 结构的稳定性。