刷题 | 牛客 - js中等10题（更ing）1/54知识点解答

知识点汇总：

Array.from(要转换的对象, [mapFn], [thisArg ])：将类数组对象（Array-like）/可迭代对象（Iterable）转为真正的数组。

第二参 mapFn 是类似 Array.prototype.map 的回调函数，加工每一项；第三参，是执行 mapFn 时的 this 指向。

用途：① 将类数组对象、字符串、arguments 转为数组对象；② 给mapFn（第二个参回调函数）做转换；③ 创建指定长度的新数组（Array.from({ length: 5 }, (_, i) => i + 1);）（用于快速创建包含连续数字的数组）

类数组对象，如 document.querySelectorAll(' ')、arguments

sort排序：

array.sort((a, b) => {
return a - b; // 数值从小到大排。返回-1，a 在 b前面；返回1，a 在 b 后面。
});

等价于

array.sort((a,b) => {
return a > b ? 1 : -1;
})

arr.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())); 字符串排序（不分大小写）。

array.sort((a, b) => a.id.localeCompare(b.id)); 用 localeCompare（字符串排序）

arr.sort().reverse(); 倒序排列：先正序，再反转。

element.outerHTML：获取/设置 元素本身连同内容/整个元素本身（含自身标签） 的 HTML 字符串。用新的 html 字符串替换整个元素本身（含标签）

element.innerHTML：获取/设置 元素内部内容 的 HTML 字符串（不包括自身标签）。（用新的html字符串替换掉元素的内部内容）

按 id 查找：document.getElementById('xx').children;

按元素查找：document.querySelectorAll('xx')

★ JS0 列表内容排序再渲染

描述

场景描述：在一个 HTML 页面中，有一个无序列表（ul），其中包含了一些项目（li）。每个项目都有一个文本内容和一个唯一的 ID。你需要编写一个 JavaScript 函数来提取列表中所有项目的文本内容，并将它们按照 ID 进行排序，然后将排序后的文本内容重新渲染回去。

代码实现：补全sortAndReturnTextContent函数，实现功能

运行sortAndReturnTextContent函数前

运行sortAndReturnTextContent函数后

解答：

★ 法一：Array.from() 类数组转数组 + sort((a,b) => a>b?1:-1) 排序 + innerHTML/outerHTML 写成html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">


</head>

<body>
  <ul id="myList">
    <li id="item1">项目 1</li>
    <li id="item3">项目 3</li>
    <li id="item2">项目 2</li>
    <li id="item4">项目 4</li>
  </ul>

  <script>
    function sortAndReturnTextContent() {
        const items = document.getElementById('myList').children;
        // 在此补全代码
        const itemsArr = Array.from(items).sort((a,b) => {
            return a.id > b.id ? 1 : -1;
        })
        document.getElementById('myList').innerHTML = itemsArr.map(item => item.outerHTML);
        
    }
    sortAndReturnTextContent()
  </script>

详解：
const items = document.getElementById('myList').children;
document.getElementById('myList')：获取 <ul id="myList"> 元素。

.children：获取该元素的所有子元素（即所有 <li> 元素），类型是 HTMLCollection，不是数组。

📝 注意：HTMLCollection 是类数组结构，不能直接使用数组的方法（如 .sort()）。
const itemsArr = Array.from(items).sort((a,b) => {
    return a.id > b.id ? 1 : -1;
})
Array.from(items)：将类数组的 HTMLCollection / 可迭代的对象 Iterable 转换为真正的数组。（可选：第二个参数是类似 Array.prototype.map 的回调，第三个参数是执行函数时的 this指向）

.sort(...)：对数组进行排序。

(a, b) => a.id > b.id ? 1 : -1：

比较两个元素 a 和 b 的 id 字符串。

如果 a.id > b.id，说明 a 应该排在后面，返回 1。

否则返回 -1，说明 a 应该排在前面。

这样实现了按 字典序升序排序。

知识点：

Array.from() ：将类数组对象（Array-like）/可迭代对象（Iterable）转为真正的数组。 | 或创建指定长度的新数组

（真正的数组，即可以使用数组的方法，如.map()、.filter()、sore()等）

语法：
Array.from(arrayLike, mapFn, thisArg)
参数：
arrayLike   必需，要转换的类数组或可迭代对象。
mapFn   可选，类似 Array.prototype.map 的回调函数，用于加工每一项。
thisArg   可选，执行 mapFn 时的 this 指向。

Array.from 的常见用例

总结：① 将类数组对象、字符串、arguments 转为数组对象；② 给mapFn做转换（第二个回调函数进行处理）；③ 创建指定长度的新数组（Array.from({ length: 5 }, (_, i) => i + 1);）（用于快速创建包含连续数字的数组）

类数组对象，如 document.querySelectorAll(' ')、arguments

1️⃣ 把类数组对象转为数组
const divs = document.querySelectorAll('div');  // NodeList，不是真正的数组
const arr = Array.from(divs);  // 变成数组，可以用 map、filter 等
console.log(Array.isArray(arr));  // true
2️⃣ 把字符串变成字符数组
const str = "hello";
const chars = Array.from(str);  // ['h', 'e', 'l', 'l', 'o']
3️⃣ 搭配 mapFn 做转换

const nums = Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]

相当于：

[1, 2, 3].map(x => x * 2)

4️⃣ 从 arguments 转数组
function test() {
    const args = Array.from(arguments);
    console.log(args); // 类数组 → 真数组
}
test(1, 2, 3);
5️⃣ 创建指定长度的新数组（结合 mapFn）
const arr = Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]
总结：用来快速创建包含连续数字的数组

注：

{ length: 5 }，是一个对象，表示一个伪数组（只定义了 length 为 5）。Array.from() 会根据这个长度创建一个包含 5 个元素的数组，初始值为 undefined。

(_, i) => i + 1，是映射函数：

_ ：表示当前元素的值（此处用不到，所以用 _ 忽略）。

i：表示当前元素的索引（从 0 到 4）。

函数的返回值是 i + 1，也就是将索引加 1。

即，对于长度为 5 的伪数组，它的索引分别是 0、1、2、3、4。

将 i + 1 映射到每个索引，就得到：[0+1, 1+1, 2+1, 3+1, 4+1] => [1, 2, 3, 4, 5]

Array.sort([ ... ]) 排序算法

用法：

arr.sort((a, b) => {
  return a - b;    // 数值从小到大排。返回-1，a 在 b前面；返回1，a 在 b 后面。
});

// 字符串排序（不分大小写）
words. Sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));    // localeCompare字符串排序。

// 倒序排列
arr.sort().reverse(); // 先正序，再反转

✅ 为什么返回 1 表示 a 在后？

这是浏览器或引擎内部排序算法规定的：

返回值为负数 -1：a < b → a 在前，b 在后

返回值为正数 1：a > b → a 在后，b 在前

返回值为 0：a 与 b 相等，位置不变

排序算法（内部实现）：—— JavaScript 引擎会根据不同场景使用不同排序算法（如 V8）：

引擎排序算法
Chrome/V8 插入排序 + 快排
Firefox Merge Sort（归并）

⚠️ 不同浏览器实现不同，但基本都遵循“稳定排序”和性能优化。

引擎	排序算法
Chrome/V8	插入排序 + 快排
Firefox	Merge Sort（归并）

🚩小技巧：用 localeCompare（字符串排序）—— array.sort((a, b) => a.id.localeCompare(b.id));

array.sort((a, b) => a.id.localeCompare(b.id));

这句也可以实现按字符串 id 从小到大排序。

Array.map( ) 对数组的每一项进行操作，返回一个新的数组。

innerHTML 和 outerHTML

element.innerHTML：读取时：返回该元素“内部”的 HTML 字符串。赋值时：用新的 HTML 字符串替换掉“元素的内部内容”。

element.outerHTML：读取时：返回“整个元素本身（包括自身标签）”的 HTML 字符串。赋值时：用新的 HTML 字符串，替换整个元素本身（含标签）

属性作用描述
outerHTML 获取/设置 元素本身连同内容 的 HTML 字符串
innerHTML 获取/设置 元素内部内容 的 HTML 字符串（不包括自身标签）

🆚 innerHTML vs outerHTML 区别对比：

功能 innerHTML outerHTML
获取内容返回“子元素+文本”的 HTML 返回“整个元素+子元素”的 HTML
设置内容替换“元素的内部内容” 替换“整个元素本身（含标签）”
用途常用于更新内容块 常用于整体替换节点

属性	作用描述
`outerHTML`	获取/设置元素本身连同内容的 HTML 字符串
`innerHTML`	获取/设置元素内部内容的 HTML 字符串（不包括自身标签）

功能	innerHTML	outerHTML
获取内容	返回“子元素+文本”的 HTML	返回“整个元素+子元素”的 HTML
设置内容	替换“元素的内部内容”	替换“整个元素本身（含标签）”
用途	常用于更新内容块	常用于整体替换节点

安全性问题（XSS），二者都可以插入可执行的脚本，在处理用户输入时，推荐使用 DOM API 手动创建元素节点

查找dom元素

按 id 查找：document.getElementById('xx').children;

按元素查找：document.querySelectorAll('xx')

JS1 直角三角形

描述

请补全JavaScript代码，要求在页面上渲染出一个直角三角形，三角形换行要求使用"br"实现。三角形如下：
*
**
***

解答

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div class='triangle'></div>

        <script>
            var triangle = document.querySelector('.triangle');
            // 补全代码
            let result = ''
            let str = '';
            for(let i = 0;i < 3;i++){
                str += '*';
                result += str + '<br />';
            }
            triangle.innerHTML = result;
            
        </script>
    </body>
</html>

知识点

`document.querySelector('.triangle')`

用于获取 HTML 中类名为 triangle 的元素。
返回的是第一个匹配该选择器的元素。

`innerHTML`

将 HTML 字符串设置为元素的内容。
使用 <br /> 可以产生换行效果。（在<br /> 是 HTML 标签，赋值给 innerHTML 时，没加引号，会被识别为未定义变量或语法错误。——》triangle.innerHTML = str + '<br />';）
最好一次性赋值，否则会影响性能。

JS2 文件扩展名

描述

请补全JavaScript代码，要求以字符串的形式返回文件名扩展名，文件名参数为"filename"。

解答

            const _getExFilename = (filename) => {
                // 补全代码
                const fileArr = filename.split('.');

                // return '.' + fileArr[1];   //问题：假设不止一个点，可能存在问题 
                return '.' + fileArr[fileArr.length - 1]       
            }

知识点

数组.split('分隔符')，按分隔符对字符串进行分割成数组

JS3 分隔符

描述

请补全JavaScript代码，要求返回参数数字的千分位分隔符字符串。

示例1

输入：

_comma(12300)

输出：

'12,300'

解答

            function _comma(number) {
               let str = number.toString();
                return  str.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
            }

详解：


这是核心部分，使用正则表达式 + `replace` 方法来插入逗号。

---

### 🧠 正则详解：`/(\d)(?=(?:\d{3})+$)/g`

#### 1. **`(\d)`**
表示“一个数字”，并捕获这个数字（用括号捕获方便后续引用）。

#### 2. **`(?=...)`**：正向肯定预查（lookahead）
意思是：只匹配**后面**满足某种条件的内容，但**不消耗字符**（只判断后面是否满足，不包括在结果中）。

#### 3. **`(?:\d{3})+`**
这是一个非捕获组，表示“每组三位数字”，比如 `456`, `789` 之类的。

#### 4. **`$`**
表示字符串末尾，所以正则的意思是：这个数字后面跟着一组或多组完整的三位数字，并且是直到字符串末尾。

#### 5. **组合解释：`(\d)(?=(?:\d{3})+$)`**
匹配一个数字，**它的后面必须是若干组三位数，并且一直到末尾为止**。  
比如：

- "1**234567**" → `1` 后面是 `234567`，可分成 2 组三位：✅
- "12**34567**" → `2` 后面是 `34567`，5 位，不是完整的三组：❌

#### 6. **`g`**
全局匹配，匹配所有符合条件的位置，而不只是第一个。

---

### 💥 替换部分：`'$1,'`

- `$1` 是对捕获组 `(\d)` 的引用，也就是前面匹配到的那个数字。
- `'$1,'` 表示用“这个数字+一个逗号”替换原始字符。

---

### 🔄 举个例子：`_comma(1234567)`

- 转成字符串后：`"1234567"`
- 正则将匹配以下位置：
  - `1` → 后面是 `234567`，可以分两组三位 → ✅
  - `2` → 后面是 `34567`，不满三组 → ❌
  - `3` → 后面是 `4567`，也不满 → ❌
  - `4` → 后面是 `567`，正好一组 → ✅

匹配到的数字是 `1` 和 `4`，于是：

知识点