从字符串操作到数组映射：一次JavaScript数据处理的深度探索

在日常的JavaScript编程中，字符串和数组是最为常用的两种数据结构。本文将通过一系列精选的代码片段，深入解析它们的底层工作机制、实用方法以及一些容易被忽略的"陷阱"。

一、JavaScript中的字符串：编码、方法与大厂"魔法"

1. 底层编码与长度计算

JavaScript内部使用UTF-16编码来存储字符串。通常，一个字符（无论是英文字母还是中文字符）占据一个编码单位，长度为1。例如：

arduino 复制代码

console.log('a'.length); // 1
console.log('中'.length); // 1

然而，对于表情符号（Emoji）和一些罕见的生僻字，它们可能需要两个甚至更多的UTF-16编码单位来表示，这会导致我们直观感知的"一个字符"长度大于1。

arduino 复制代码

console.log("𝄞".length); // 2
console.log("👋".length); // 2

因此，在计算包含此类字符的字符串长度时，结果可能出乎意料：

rust 复制代码

const str = " Hello, 世界! 👋  "
console.log(str.length); // 16
// 分析：开头的空格、每个字母、逗号、空格、"世界"、感叹号、空格、emoji(占2位)、结尾两个空格，总计16。

2. 字符串访问与提取方法

JavaScript提供了多种访问字符串内容的方式，它们大多结果相同，但细节上存在差异：

字符访问 ：str[1]和str.charAt(1)都可以获取索引位置为1的字符。主要区别在于访问不存在的索引时，str[index]返回undefined，而str.charAt(index)返回空字符串""。
子串提取 ：slice和substring都能提取指定区间的字符，但它们对参数的处理方式不同：
- slice(start, end)：支持负数索引（从末尾倒数），且如果start大于end，则返回空字符串。
- substring(start, end)：不支持负数（负值会被当作0），并且会自动交换start和end以确保start不大于end。
vbscript 复制代码
```
let str="hello";
console.log(str.slice(-3, -1)); // "ll"（提取倒数第3到倒数第2个字符）
console.log(str.substring(-3, -1)); // ""（等价于`str.substring(0, 0)`）
console.log(str.slice(3, 1)); // ""（因为3 > 1）
console.log(str.substring(3, 1)); // "el"（自动交换为`str.substring(1, 3)`）
```
查找索引 ：indexOf(searchValue)返回指定值第一次出现的索引，而lastIndexOf(searchValue)则返回最后一次出现的索引。

二、`Array.map`与`parseInt`的"经典陷阱"

Array.prototype.map方法会创建一个新数组，其每个元素是原数组对应元素调用一次提供的函数后的返回值。它接收三个参数：当前元素item、当前索引index和原数组arr本身。

当我们将全局函数parseInt直接作为map的回调时，一个经典的陷阱便出现了。因为parseInt(string, radix)接收两个参数：要解析的字符串string和作为基数的radix（2到36之间的整数）。

在[1,2,3].map(parseInt)的执行过程中，实际发生的是：

parseInt(1, 0)：将1按基数0（或10进制）解析，结果为1。
parseInt(2, 1)：基数1无效，因为基数必须至少为2（对于数字2），解析失败，返回NaN。
parseInt(3, 2)：在二进制（基数2）中，数字只能包含0和1，3是无效字符，解析失败，返回NaN。

因此，最终结果是[1, NaN, NaN]。

parseInt的解析规则是：从左到右解析字符串，直到遇到第一个在给定基数下无效的数字字符，然后返回已解析的整数部分。如果第一个字符就不能转换，则返回NaN。

javascript 复制代码

console.log(parseInt("108")); // 108
console.log(parseInt("八百108")); // NaN（第一个字符'八'无效）
console.log(parseInt("108八百")); // 108（遇到'八'停止，返回已解析的108）
console.log(parseInt(1314.520)); // 1314（处理数字时先转为字符串，遇到'.'停止）
console.log(parseInt("ff", 16)); // 255（将16进制"ff"转换为10进制）

三、特殊的数值：`NaN`与`Infinity`

在JavaScript中，NaN（Not-a-Number）是一个特殊的值，表示"不是一个有效的数字"。Infinity则代表数学上的无穷大。

1. 产生场景

NaN通常由无效的数学运算产生，例如：
- 0 / 0
- Math.sqrt(-1)
- 字符串与非数字的减法："abc" - 10
- 解析失败：parseInt("hello")
Infinity（或-Infinity）由非零数字除以零产生：
- 6 / 0得到 Infinity
- -6 / 0得到 -Infinity

2. NaN的古怪特性

最需要注意的是，NaN是JavaScript中唯一一个不等于自身的值。

ini 复制代码

const a = 0 / 0; // NaN
const b = parseInt("hello"); // NaN
console.log(a == b); // false
console.log(NaN == NaN); // false

因此，判断一个值是否为NaN时，必须使用Number.isNaN(value)或全局的isNaN()函数（后者会先尝试将值转换为数字）。

javascript 复制代码

if(Number.isNaN(parseInt("hello"))){
    console.log("不是一个数字，不能继续计算"); // 会执行
}

四、JavaScript的"包装类"------大厂底层的体贴

JavaScript是一门"完全面向对象"的语言。为了保持代码风格的一致性，即使是字符串、数字这样的基本数据类型（原始值），也可以像对象一样调用属性和方法，例如"hello".length或520.1314.toFixed(2)。

这背后是JavaScript引擎在运行时自动执行的"包装"过程：

当我们尝试访问原始值的属性时（如str.length），JS会临时创建一个对应的包装对象 （例如new String(str)）。
在这个临时对象上访问属性或调用方法。
操作完成后，立即释放这个临时对象（例如将其置为null）。

这个过程对我们开发者是透明且不可见的。它既让我们能以简洁的语法操作原始值，又在内部维护了对象操作的统一性。这也解释了为什么typeof "hello"返回"string"，而typeof new String("hello")返回"object"。

结论

JavaScript的简洁语法背后，蕴含着精心设计的语言特性和运行机制。从UTF-16编码带来的字符串长度问题，到map与parseInt的参数传递陷阱，再到NaN的独特性质以及自动包装类的底层"魔法"，理解这些细节能够帮助开发者写出更健壮、更高效的代码，并深刻体会到这门语言的灵活性与设计哲学。

从字符串操作到数组映射：一次JavaScript数据处理的深度探索