Document

\n \n

\n\n \n \n\n```\n\n在这个例子中，`truncateText`函数接收一个选择器（在这里是指容器的 ID）、要处理的文本、前端和后端应保留文本的长度。函数计算并生成了新的文本内容，其中间部分被省略号（...）替代。\n\n这个方法给予了你灵活性去确定前后端保留的文本长度，以及省略的部分。但需要注意，这是针对简单场景的解决方案，对于更复杂的布局或特殊字体，可能需要更细致的处理来保证良好的显示效果。\n\n### 其他复杂实现可以参考下面的文档\n\n- https://juejin.cn/post/7329967013923962895\n",{"_54":854,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/878/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/878/timeline",{"_54":857,"_56":57,"_58":858,"_60":859,"_62":860,"_64":861,"_66":862,"_68":863,"_70":864,"_72":865,"_74":866,"_107":867,"_127":128,"_129":26,"_130":-5,"_131":869,"_133":870,"_155":148,"_149":872,"_151":873,"_154":-5,"_159":160,"_161":874,"_166":-5,"_167":875,"_169":876,"_181":878,"_183":-5,"_184":-5,"_185":156},"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】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[868],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":206,"_64":207,"_58":208,"_66":209,"_68":210,"_70":211,"_72":212,"_118":213,"_143":871,"_145":215,"_147":148,"_127":128,"_149":216,"_151":217,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-15T07:00:04Z","2024-09-15T07:09:38Z",{"_163":148,"_164":148,"_165":148},"**关键词**：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",{"_54":877,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/877/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/877/timeline",{"_54":880,"_56":57,"_58":881,"_60":882,"_62":883,"_64":884,"_66":885,"_68":886,"_70":887,"_72":888,"_74":889,"_107":890,"_127":128,"_129":26,"_130":-5,"_131":893,"_133":894,"_155":148,"_149":896,"_151":897,"_154":-5,"_159":160,"_161":898,"_166":-5,"_167":899,"_169":900,"_181":902,"_183":-5,"_184":-5,"_185":156},"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】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[891,892],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":239,"_68":240,"_54":241,"_113":242,"_115":125,"_117":26,"_118":126},[],{"_54":206,"_64":207,"_58":208,"_66":209,"_68":210,"_70":211,"_72":212,"_118":213,"_143":895,"_145":215,"_147":148,"_127":128,"_149":216,"_151":217,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-21T14:27:22Z","2024-08-21T14:27:23Z",{"_163":148,"_164":148,"_165":148},"**关键词**：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",{"_54":901,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/844/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/844/timeline",{"_54":904,"_56":57,"_58":905,"_60":906,"_62":907,"_64":908,"_66":909,"_68":910,"_70":911,"_72":912,"_74":913,"_107":914,"_127":128,"_129":26,"_130":-5,"_131":917,"_133":918,"_155":148,"_149":920,"_151":920,"_154":-5,"_159":160,"_161":921,"_166":-5,"_167":922,"_169":923,"_181":925,"_183":-5,"_184":-5,"_185":156},"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】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[915,916],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":818,"_68":819,"_54":820,"_113":821,"_115":125,"_117":26,"_118":126},[],{"_54":206,"_64":207,"_58":208,"_66":209,"_68":210,"_70":211,"_72":212,"_118":213,"_143":919,"_145":215,"_147":148,"_127":128,"_149":216,"_151":217,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-18T06:43:53Z",{"_163":148,"_164":148,"_165":148},"**关键词**：创建对象实例\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",{"_54":924,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/842/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/842/timeline",{"_54":927,"_56":57,"_58":928,"_60":929,"_62":930,"_64":931,"_66":932,"_68":933,"_70":934,"_72":935,"_74":936,"_107":937,"_127":128,"_129":26,"_130":-5,"_131":944,"_133":945,"_155":156,"_149":947,"_151":948,"_154":-5,"_159":160,"_161":949,"_166":-5,"_167":950,"_169":951,"_181":953,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/836","https://api.github.com/repos/pro-collection/interview-question/issues/836/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/836/comments","https://api.github.com/repos/pro-collection/interview-question/issues/836/events","https://github.com/pro-collection/interview-question/issues/836",2471808098,"I_kwDOJGDC6c6TVMxi",836,"proxy能够监听到对象中的对象的引用吗？【热度: 112】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[938,939],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":940,"_68":941,"_54":942,"_113":943,"_115":125,"_117":26,"_118":126},6294910473,"LA_kwDOJGDC6c8AAAABdzS2CQ","https://api.github.com/repos/pro-collection/interview-question/labels/TOP100%E4%BA%92%E8%81%94%E7%BD%91","TOP100互联网",[],{"_54":206,"_64":207,"_58":208,"_66":209,"_68":210,"_70":211,"_72":212,"_118":213,"_143":946,"_145":215,"_147":148,"_127":128,"_149":216,"_151":217,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-18T06:11:09Z","2025-03-01T12:46:38Z",{"_163":148,"_164":148,"_165":148},"**关键词**：proxy 监听引用\n\n是的，`Proxy` 能够监听到对象属性的读取和设置操作，包括对象中嵌套的对象的引用操作。但是，要注意的是，如果你想要监听一个嵌套对象内部的变化（例如，对象的属性或者数组的元素），那么你需要单独为这个嵌套对象也创建一个 `Proxy` 实例。因为 `Proxy` 只能直接监听它直接代理的对象的操作，对于嵌套对象的操作，需要嵌套地使用 `Proxy` 来实现深度监听。\n\n举个例子：\n\n```javascript\nfunction createDeepProxy(obj) {\n // 递归函数，为对象及其嵌套对象创建代理\n const handler = {\n get(target, property, receiver) {\n const value = Reflect.get(target, property, receiver);\n if (typeof value === \"object\" && value !== null) {\n // 如果属性是对象（且非 null），则为该属性也创建代理\n return createDeepProxy(value);\n }\n return value;\n },\n set(target, property, value, receiver) {\n console.log(`Setting property ${property} to ${value}`);\n return Reflect.set(target, property, value, receiver);\n },\n };\n\n return new Proxy(obj, handler);\n}\n\nconst original = { name: \"John\", address: { city: \"New York\" } };\n\nconst proxied = createDeepProxy(original);\n\nproxied.address.city = \"San Francisco\"; // 控制台输出：Setting property city to San Francisco\nconsole.log(original.address.city); // 输出 San Francisco\n```\n\n在这个例子中，`createDeepProxy` 函数使用了递归，为对象及其所有嵌套对象创建了 `Proxy` 代理。因此，修改嵌套对象 `address` 下的 `city` 属性时，`set` 陷阱（trap）被触发，并且控制台有相应的输出。但注意这种递归创建 `Proxy` 的做法可能会带来性能问题，特别是在处理有很深嵌套结构或者很大的对象时。\n\n此外，需要留意的是，由于每次访问嵌套对象时都会动态创建新的 `Proxy` 实例，这可能导致一些意料之外的行为，比如基于身份的比较或引用检查可能会失败。因此，在实际应用中，应根据需求精心设计 `Proxy` 的使用方式。\n",{"_54":952,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/836/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/836/timeline","pagination",{"_956":957,"_163":958},"value",-1,7,"actionData","errors"]