前端总结

[xiaotiandada]

1. 2018前端面试总结
2. 每天 30 秒系列之前端面试
3. 2万5千字大厂面经 | 掘金技术征文
4. https://github.com/febobo/web-interview
5. Swiper autoplay stop when vue-router has keep-alive  nolimits4web/swiper#6144
6. 35 张图解：被问千百遍的 TCP 三次握手和四次挥手面试题

什么时候封装成类 什么时候封装成函数。

封装成类还是函数，应该根据具体情况而定。如果需要维护一些状态和属性，需要对这些状态进行管理，那么使用类会更合适。如果只是一个简单的逻辑处理，没有状态需要维护，那么使用函数可能更加合适。 -- chatGPT

换算最小比例：ratio: 457∶280

最小比例可以通过分别除以它们的最大公约数（Greatest Common Divisor, GCD）来得到，即：

457 / GCD(457, 280) ： 280 / GCD(457, 280)

需要先计算出 457 和 280 的 GCD，可以使用辗转相除法或欧几里得算法，计算过程如下：

457 / 280 = 1 … 177
280 / 177 = 1 … 103
177 / 103 = 1 … 74
103 / 74 = 1 … 29
74 / 29 = 2 … 16
29 / 16 = 1 … 13
16 / 13 = 1 … 3
13 / 3 = 4 … 1
3 / 1 = 3 … 0
因此 GCD(457, 280) = 1，最小比例即为 457∶280。
-- chatGPT

JavaScript中的数据类型分为哪两种

在JavaScript中，数据类型可以分为以下两种：

1. 原始类型（Primitive Types）：

   • 数字（Number）：表示数值，包括整数和浮点数。
   • 字符串（String）：表示文本数据。
   • 布尔值（Boolean）：表示真或假的值。
   • undefined：表示未定义的值。
   • null：表示空值。
   • Symbol：表示唯一的标识符。

2. 引用类型（Reference Types）：

   • 对象（Object）：表示复杂的数据结构，可以包含键值对的集合。
   • 数组（Array）：表示有序的数据集合。
   • 函数（Function）：表示可执行的代码块。
   • 日期（Date）：表示日期和时间。
   • 正则表达式（RegExp）：表示文本模式的匹配器。
   • 等等。

JavaScript是一种动态类型语言，变量的数据类型可以在运行时改变。此外，JavaScript还提供了一种特殊的数据类型，称为特殊值（Special Values），包括NaN（表示非数字值）和Infinity（表示无穷大）等。

Javascript 复合类型 原始类型区别

在 JavaScript 中，数据类型可以分为两类：原始类型和复合类型。

1. 原始类型（Primitive Types）：

   • 原始类型是 JavaScript 中最基本的数据类型，包括：布尔值（Boolean）、数字（Number）、字符串（String）、null、undefined 和 Symbol（ES6 引入的新类型）。
   • 原始类型的特点是它们是不可变的，即它们的值在创建后无法被修改。每当对原始类型进行操作时，都会创建一个新的值。
   • 原始类型的赋值是通过复制其值来完成的，而不是通过引用。
   • 例如：

     let num = 10; // 数字是原始类型
     let str = "Hello"; // 字符串是原始类型
     let bool = true; // 布尔值是原始类型

2. 复合类型（Composite Types）：

   • 复合类型是由多个值组成的数据类型，包括对象（Object）、数组（Array）、函数（Function）等。
   • 复合类型的特点是它们是可变的，即可以向其中添加、修改或删除值。
   • 复合类型的赋值是通过引用来完成的，即将变量指向对象在内存中的地址，而不是复制其值。
   • 例如：

     let obj = { name: "John", age: 30 }; // 对象是复合类型
     let arr = [1, 2, 3]; // 数组是复合类型
     let func = function() { console.log("Hello"); }; // 函数是复合类型

总结：

• 原始类型是不可变的，赋值是通过复制值来完成的。
• 复合类型是可变的，赋值是通过引用来完成的。

需要注意的是，虽然 null 的数据类型被认为是原始类型，但它是一个特殊的值，表示一个空对象引用。undefined 表示一个未定义的值，用于声明变量但尚未赋值。

javascript slice，substr，substring 区别

在 JavaScript 中，slice、substr(Deprecated) 和 substring 是用于操作字符串的三个方法。它们之间有一些区别：

1. slice(startIndex, endIndex)：返回从 startIndex 到 endIndex（不包括 endIndex）之间的子字符串。它不会修改原始字符串，而是返回一个新的字符串。如果省略 endIndex，则表示提取从 startIndex 到字符串末尾的所有字符。

   const str = 'Hello, world!';
   console.log(str.slice(7, 12));  // 输出 "world"
   console.log(str.slice(7));     // 输出 "world!"

2. substr(startIndex, length)：返回从 startIndex 开始，长度为 length 的子字符串。它不会修改原始字符串，而是返回一个新的字符串。

   const str = 'Hello, world!';
   console.log(str.substr(7, 5));  // 输出 "world"

3. substring(startIndex, endIndex)：返回从 startIndex 到 endIndex（不包括 endIndex）之间的子字符串。它不会修改原始字符串，而是返回一个新的字符串。如果 startIndex 大于 endIndex，则 substring 会自动交换两个参数的位置。

   const str = 'Hello, world!';
   console.log(str.substring(7, 12));  // 输出 "world"
   console.log(str.substring(12, 7));  // 输出 "world"（自动交换参数位置）

总结：

• slice、substr 和 substring 都可以从字符串中提取子字符串，但它们的参数和行为略有不同。
• slice 使用起始索引和结束索引（不包括结束索引）作为参数。
• substr 使用起始索引和子字符串长度作为参数。
• substring 使用起始索引和结束索引（不包括结束索引）作为参数，且会自动交换参数位置。
• 三个方法都返回新的字符串，不会修改原始字符串。

Javascript startWith()、includes() 区别

在 JavaScript 中，startsWith() 和 includes() 是用于字符串的方法，它们之间有一些区别：

1. startsWith(searchString, position)：检查字符串是否以指定的搜索字符串开头。它返回一个布尔值，表示字符串是否以指定字符串开头。position 参数可选，用于指定搜索的起始位置，默认为 0。

   const str = 'Hello, world!';
   
   console.log(str.startsWith('Hello'));  // 输出 true
   console.log(str.startsWith('world', 7));  // 输出 true
   console.log(str.startsWith('World'));  // 输出 false

2. includes(searchString, position)：检查字符串是否包含指定的搜索字符串。它返回一个布尔值，表示字符串是否包含指定字符串。position 参数可选，用于指定搜索的起始位置，默认为 0。

   const str = 'Hello, world!';
   
   console.log(str.includes('Hello'));  // 输出 true
   console.log(str.includes('world'));  // 输出 true
   console.log(str.includes('World'));  // 输出 false

区别总结：

• startsWith() 用于检查字符串是否以指定的搜索字符串开头，而 includes() 用于检查字符串是否包含指定的搜索字符串。
• startsWith() 返回布尔值，表示是否以指定字符串开头，而 includes() 返回布尔值，表示是否包含指定字符串。
• startsWith() 的搜索从字符串的起始位置开始，而 includes() 可以搜索整个字符串。
• startsWith() 可以使用第二个参数 position 指定搜索的起始位置，而 includes() 也可以使用第二个参数 position 指定搜索的起始位置。
• startsWith() 是 ES6 引入的方法，而 includes() 是 ES6 中引入的字符串方法之一。
• startsWith() 和 includes() 都是区分大小写的。

toPrimitive 有什么作用

toPrimitive 是 JavaScript 中的内置方法，用于将对象转换为原始值（primitive value）。它通常在对象与原始值之间的隐式类型转换中起作用。

在 JavaScript 中，当对象参与某些操作时（例如算术运算、逻辑运算、字符串拼接等），JavaScript 引擎会尝试将对象转换为原始值，以便进行相应的操作。这个过程称为 ToPrimitive 操作。

ToPrimitive 操作分为两个步骤：

1. 调用对象的 valueOf 方法。如果该方法存在并且返回原始值，则返回该原始值。
2. 如果 valueOf 方法不存在、返回的不是原始值，或者 valueOf 方法抛出异常，则调用对象的 toString 方法。如果该方法存在并且返回原始值，则返回该原始值。
3. 如果以上步骤都不满足，则抛出类型错误异常。

通过在对象上实现 toPrimitive 方法，我们可以自定义对象到原始值的转换过程。toPrimitive 方法应该返回一个原始值，可以是数字、字符串或布尔值。

下面是一个示例，展示了如何使用 toPrimitive 方法：

const obj = {
  valueOf() {
    return 42;
  },
  toString() {
    return 'Hello';
  },
  [Symbol.toPrimitive]() {
    return 'World';
  }
};

console.log(obj + 1);  // 输出 43，因为 valueOf 方法返回了原始值 42
console.log(String(obj));  // 输出 "World"，因为 toPrimitive 方法返回了原始值 "World"

在上面的示例中，对象 obj 实现了 valueOf 方法、toString 方法和 Symbol.toPrimitive 方法。当对象参与运算或进行类型转换时，会按照 valueOf、toString、Symbol.toPrimitive 的顺序调用这些方法，直到返回一个原始值为止。