JavaScript Cookie处理中reduce方法及decodeURIComponent疑问

先看你给出的完整代码：

let cookieString="firstName=john;   lastName=Doe;password =1234";
const getCookies1=cookieString
        .split(";")
        .map(split=>split.split("="))
        .reduce((arg,[key,val])=>
            ({...arg, 
   [key.trim()]:decodeURIComponent(val)}),
            {});
document.write(cookieString + `<br>`);
document.write(getCookies1.password);

一、reduce方法的逻辑拆解 #

你已经理解了split(";")把Cookie字符串拆成单个键值对片段，map(split=>split.split("="))把每个片段拆成[键, 值]的数组，接下来的reduce就是把这些数组合并成一个完整的对象：

1. 初始值：reduce的第二个参数{}是累计器的初始值，也就是第一次迭代时arg的值是空对象。
2. 参数解构：(arg, [key, val])里的[key, val]是数组解构，直接把map返回的每个[键, 值]数组拆成单独的key和val变量，不用再写arr[0]、arr[1]这种写法。
3. 累计对象更新：
   • {...arg}：展开之前累计得到的对象，保留已经处理过的键值对。
   • [key.trim()]：这是计算属性名，先把key两端的空格去掉（比如你的例子里'password '会变成'password'），再把处理后的字符串作为对象的属性名。
   • decodeURIComponent(val)：对值做解码处理，后面会详细说原因。
   • 每次迭代都会把新的键值对合并到累计对象里，最终返回一个包含所有Cookie键值对的对象（比如你的例子里getCookies1就是{firstName: 'john', lastName: 'Doe', password: '1234'}）。

二、为什么要用decodeURIComponent？ #

因为HTTP协议规定Cookie的键和值不能包含空格、中文、特殊字符（比如&、=、@等），所以在设置Cookie的时候，通常会用encodeURIComponent对值进行编码，把这些特殊字符转换成%开头的编码格式（比如中文张三会被编码成%E5%BC%A0%E4%B8%89）。

反过来，当你从Cookie字符串里读取值的时候，就必须用decodeURIComponent把编码后的字符串还原成原始内容，否则拿到的会是一串乱码或者编码后的字符，无法正常使用。

比如如果你的Cookie值是编码后的'%E5%BC%A0%E4%B8%89'，不用解码的话得到的就是这个字符串，解码后才会变成'张三'。

内容的提问来源于stack exchange，提问作者MeherabTheLord