Document

\n \n

\n\n \n \n\n```\n\n在这个例子中，`truncateText`函数接收一个选择器（在这里是指容器的 ID）、要处理的文本、前端和后端应保留文本的长度。函数计算并生成了新的文本内容，其中间部分被省略号（...）替代。\n\n这个方法给予了你灵活性去确定前后端保留的文本长度，以及省略的部分。但需要注意，这是针对简单场景的解决方案，对于更复杂的布局或特殊字体，可能需要更细致的处理来保证良好的显示效果。\n\n### 其他复杂实现可以参考下面的文档\n\n- https://juejin.cn/post/7329967013923962895\n",{"_58":916,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/878/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/878/timeline",{"_58":919,"_60":61,"_62":920,"_64":921,"_66":922,"_68":923,"_70":924,"_72":925,"_74":926,"_76":927,"_78":928,"_111":929,"_131":132,"_133":24,"_134":-5,"_135":931,"_137":932,"_159":152,"_153":934,"_155":935,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":936,"_169":937,"_175":938,"_177":939,"_189":941,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/877","https://api.github.com/repos/pro-collection/interview-question/issues/877/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/877/comments","https://api.github.com/repos/pro-collection/interview-question/issues/877/events","https://github.com/pro-collection/interview-question/issues/877",2526773018,"I_kwDOJGDC6c6Wm38a",877,"[] == ! [] 为什么返回 true【热度: 100】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[930],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":933,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-09-15T07:00:04Z","2024-09-15T07:09:38Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：js 隐式转换\n\n这个问题涉及到 JavaScript 中的类型转换和比较操作的规则。\n\n在 JavaScript 中，`[] == ![]`的比较过程如下：\n\n1. **![]的计算**\n\n `!`是逻辑非操作符，它会首先将右侧的操作数转换为布尔值，然后反转该布尔值。对于空数组`[]`，在 JavaScript 中，所有对象（包括数组）在布尔上下文中都被认为是`true`。因此，`![]`首先将`[]`转换为`true`，然后取反，变成`false`。\n\n2. **比较`[]`与`false`**\n\n 根据 ECMAScript 规范，在进行抽象等值比较（`==`）时，如果比较的两个操作数类型不同，JavaScript 会尝试将它们转换成一个共同的可比较类型。在本例中，一边是对象（空数组`[]`），另一边是布尔值`false`。\n\n 规则是，如果有布尔值参与比较，先将布尔值转换为数值再进行比较。布尔值`false`转换为数值`0`。\n\n3. **比较`[]`与`0`**\n\n 现在比较的是对象（空数组`[]`）与数字（`0`）。根据规范，当比较对象与数字时，对象会先尝试转换为原始值（通过调用它的`valueOf`和（或）`toString`方法），用于比较。\n\n 对于空数组`[]`，`[].toString()`结果是`\"\"`（空字符串）。\n\n4. **比较`\"\"`与`0`**\n\n 最后的比较是在空字符串（`\"\"`）与数字`0`之间进行。在这个阶段，字符串会被转换为数字，空字符串转换为数字时结果是`0`。\n\n 因此，最终比较的是`0 == 0`，这显然是`true`。\n\n因此，`[] == ![]`返回`true`的原因是，在 JavaScript 中将操作数从对象到布尔值，再到字符串，最后到数字的一系列隐式类型转换导致的。这也展示了 JavaScript 中类型强制转换规则的复杂性和`==`运算符可能带来的意外行为。这就是为什么很多 JavaScript 编程风格指南推荐使用`===`（严格等于运算符），因为它不会进行类型转换，可以避免这种类型的意外结果。\n",{"_58":940,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/877/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/877/timeline",{"_58":943,"_60":61,"_62":944,"_64":945,"_66":946,"_68":947,"_70":948,"_72":949,"_74":950,"_76":951,"_78":952,"_111":953,"_131":132,"_133":24,"_134":-5,"_135":956,"_137":957,"_159":152,"_153":959,"_155":960,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":961,"_169":962,"_175":963,"_177":964,"_189":966,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/844","https://api.github.com/repos/pro-collection/interview-question/issues/844/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/844/comments","https://api.github.com/repos/pro-collection/interview-question/issues/844/events","https://github.com/pro-collection/interview-question/issues/844",2478185578,"I_kwDOJGDC6c6Tthxq",844,"JS 数据类型里面， Set 和数组分别有哪些适用场景，开发中该如何抉择【热度: 333】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[954,955],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":278,"_72":279,"_58":280,"_117":281,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":958,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-21T14:27:22Z","2024-08-21T14:27:23Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：Set 和数组适用场景\n\n在 JavaScript 中，`Set`和数组（`Array`）都是用来存储一系列数据的集合，但它们具有不同的特性和适用场景。了解这些差异可以帮助你在特定情况下做出更合适的选择。\n\n### Set\n\n**特性**：\n\n- `Set`是一种新的数据结构，被引入在 ES6 中。\n- 它类似于数组，但是成员的值都是唯一的，没有重复的值。\n- 提供了简单的方法来进行添加(`add`)、删除(`delete`)、检查(`has`)成员，以及获取集合大小(`size`)。\n- 不支持索引访问（例如，`set[0]`是不可能的），因此不适于通过索引获取或操作元素的场景。\n- 对集合元素的迭代相对简单，有`values()`、`keys()`（与`values()`相同）和`entries()`方法，以及`forEach`方法。\n\n**适用场景**：\n\n- 当你需要存储唯一值的集合时，比如集合、标签、关键字等。\n- 当你需要高效地进行存在性检查（是否包含某个元素）时。\n- 当你不需要元素的索引和顺序访问，或者添加和删除操作比查找和访问操作更频繁时。\n\n### Array\n\n**特性**：\n\n- 数组是 JavaScript 中最基本的数据结构之一。\n- 数组中的元素可以通过索引进行访问，提供了广泛的方法来进行遍历、映射（`map`）、过滤（`filter`）、归并（`reduce`）等操作。\n- 数组中可以包含重复的值。\n- 数组的长度是可变的，可以通过`push`、`pop`等方法动态地添加或移除元素。\n\n**适用场景**：\n\n- 当你需要通过索引访问元素时，数组提供了方便的方法。\n- 当集合中允许存在重复的元素时。\n- 当你需要使用一系列数组特有的方法操作数据时，比如`map`、`filter`、`reduce`等。\n- 当你需要对数据进行排序，或需要保持元素的添加顺序时。\n\n### 抉择\n\n选择`Set`还是数组主要取决于你的具体应用场景：\n\n- **唯一性**：如果你需要确保一个集合中元素的唯一性，那么`Set`是一个更好的选择。\n- **查找和删除**：如果你需要高效的查找和删除操作，而且元素的唯一性很重要，`Set`提供更优的性能。\n- **索引访问和顺序**：如果你需要通过索引来频繁访问或更新元素，或者需要对元素进行排序，那么数组会是更合适的选择。\n- **数据处理**：如果你需要对集合进行复杂的数据处理，比如映射、过滤、归并等操作，数组提供了丰富的方法来支持这些。\n\n在设计你的应用或功能时，考虑数据结构的这些特性和适用场景，可以帮助你作出更合适、更高效的决策。\n",{"_58":965,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/844/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/844/timeline",{"_58":968,"_60":61,"_62":969,"_64":970,"_66":971,"_68":972,"_70":973,"_72":974,"_74":975,"_76":976,"_78":977,"_111":978,"_131":132,"_133":24,"_134":-5,"_135":981,"_137":982,"_159":152,"_153":984,"_155":984,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":985,"_169":986,"_175":987,"_177":988,"_189":990,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/842","https://api.github.com/repos/pro-collection/interview-question/issues/842/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/842/comments","https://api.github.com/repos/pro-collection/interview-question/issues/842/events","https://github.com/pro-collection/interview-question/issues/842",2471820590,"I_kwDOJGDC6c6TVP0u",842,"在创建对象的时候， new class 和 new function 可有什么区别【热度: 447】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[979,980],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":878,"_72":879,"_58":880,"_117":881,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":983,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-08-18T06:43:53Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：创建对象实例\n\n在 JavaScript 中，使用`new`操作符创建对象时，既可以使用类（`class`）也可以使用构造函数（`function`）。二者都可以用来实例化新的对象，但它们之间存在一些关键的区别和相似之处：\n\n### 使用`new`操作符\n\n当使用`new`操作符时，JavaScript 会执行以下步骤：\n\n1. 创建一个全新的空对象。\n2. 将这个空对象的原型(`__proto__`)设置为构造函数的`prototype`属性。\n3. 将`this`绑定到新创建的对象上，以便构造函数可以引用它。\n4. 执行构造函数内的代码（对新对象进行初始化）。\n5. 如果构造函数返回一个对象，则返回该对象；否则，返回刚才创建的新对象。\n\n### 使用`new function()`\n\n- 在使用函数时，实际上是在使用函数构造器模式。这个函数充当构造函数的角色，定义了如何初始化新对象的属性和方法。\n\n```javascript\nfunction Person(name, age) {\n this.name = name;\n this.age = age;\n}\nPerson.prototype.greet = function () {\n console.log(\"Hello, my name is \" + this.name + \" and I am \" + this.age + \" years old.\");\n};\nconst person1 = new Person(\"Alice\", 30);\nperson1.greet(); // 输出: Hello, my name is Alice and I am 30 years old.\n```\n\n### 使用`new class`\n\n- ES6 引入了类语法（`class`），使得基于类的面向对象编程在语法上更加清晰和直观。类的内部工作原理与使用构造函数的模式相似，但提供了更丰富的语法和特性，比如基于类的继承等。\n\n```javascript\nclass Person {\n constructor(name, age) {\n this.name = name;\n this.age = age;\n }\n greet() {\n console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);\n }\n}\nconst person2 = new Person(\"Bob\", 25);\nperson2.greet(); // 输出: Hello, my name is Bob and I am 25 years old.\n```\n\n### 主要区别\n\n- **语法和语义**：`class`提供了一种清晰、模块化的方式来定义构造函数和原型方法。通过`class`关键字声明类使得代码更加直观易懂。\n- **继承**：使用`class`语法，可以通过`extends`关键字更加简洁地实现继承。而在传统的函数式继承中，需要手动设置原型链。\n- **严格模式**：使用`class`语法定义的类的方法自动运行在严格模式下(`\"use strict\"`)，而传统的构造函数则需要手动声明。\n- **构造函数和原型方法的声明**：`class`语法使得构造函数和原型方法的声明更加直观和组织化，而在传统的构造函数中，需要分别设置构造函数的属性和其原型的方法。\n\n### 结论\n\n虽然`new function()`和`new class`都可以用来创建新的对象实例，但`class`提供了更现代、更丰富的语法和特性，使得代码更加直观、易于管理和维护。然而，重要的是理解两者在 JavaScript 底层使用相同的原型继承机制。\n",{"_58":989,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/842/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/842/timeline","pagination",{"_993":994,"_166":995},"value",-2,7,"actionData","errors"]