实现自定义Base64编码解码的JavaScript代码

资源摘要信息:"本部分将深入讲解JavaScript代码实现Base64编码和解码的核心知识点。Base64是一种编码方式，用于将二进制数据编码为由64个可打印字符组成的ASCII字符串。它常用于在不支持二进制数据的环境中存储和传输数据，例如在电子邮件中传输附件或在Web页面上嵌入小的二进制资源。Base64编码可以有效地将任意的二进制数据转换成可打印的文本，这在前端开发、数据传输和存储中十分常见。 首先，Base64的编码过程主要涉及以下几个步骤： 1. 以3个字节为一组，将3个字节转换成24位。 2. 将24位分为4组，每组6位。 3. 对每组的6位使用Base64索引表（"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz***+/"），映射成对应的字符。 4. 如果原始数据不是3的倍数，则在最后添加一个或两个'='号作为填充。 Base64解码的过程则是编码的逆过程： 1. 使用Base64索引表找到每个字符对应的6位数。 2. 将这些6位数重新组合成24位的数。 3. 将24位数按每8位一组分成3个字节。 4. 如果存在填充字符（'='），则去除相应的字节。 在JavaScript中，可以通过以下步骤手写Base64的编码和解码函数： 1. 创建Base64字符表。 2. 实现编码函数，将输入的二进制数据转换成Base64字符串。 3. 实现解码函数，将Base64字符串转换回原始的二进制数据。 以下是一个简化版的JavaScript Base64编码和解码函数示例： ```javascript // 创建Base64字符表 const base64Table = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz***+/"; // 编码函数 function encodeBase64(data) { // 将输入数据转换为二进制数据数组 const binaryString = unescape(encodeURIComponent(data)); let keyStr = base64Table; let output = ""; let i = 0; let lengthData = binaryString.length; // 每3个字节进行一次处理 while (i < lengthData) { // 取3个字节（24位） let byte1 = binaryString.charCodeAt(i++); let byte2 = binaryString.charCodeAt(i++); let byte3 = binaryString.charCodeAt(i++); let threeBytes = (byte1 << 16) | (byte2 << 8) | byte3; for (let j = 18; j >= 0; j -= 6) { // 每6位为一组，映射到Base64字符表 let index = (threeBytes >> j) & 63; output += keyStr.charAt(index); } } // 处理填充 switch (lengthData % 3) { case 1: output += keyStr.charAt((binaryString.charCodeAt(i - 1) >> 2)); output += keyStr.charAt((binaryString.charCodeAt(i - 1) << 4) & 63); output += "=="; break; case 2: output += keyStr.charAt((binaryString.charCodeAt(i - 2) >> 2)); output += keyStr.charAt(((binaryString.charCodeAt(i - 2) & 3) << 4) | ((binaryString.charCodeAt(i - 1) >> 4) & 15)); output += keyStr.charAt((binaryString.charCodeAt(i - 1) << 2) & 63); output += "="; break; } return output; } // 解码函数 function decodeBase64(data) { // 创建Base64字符的反查表 let keyStr = {}; for (let i = 0; i < base64Table.length; i++) { keyStr[base64Table.charAt(i)] = i; } let output = ""; let i = 0; let lengthData = data.length; while (i < lengthData) { // 以每4个字符为一组进行处理 let enc1 = keyStr[data.charAt(i++)]; let enc2 = keyStr[data.charAt(i++)]; let enc3 = keyStr[data.charAt(i++)]; let enc4 = keyStr[data.charAt(i++)]; let bytes = (enc1 << 18) | (enc2 << 12) | (enc3 << 6) | enc4; // 输出3个字节 output += String.fromCharCode((bytes >> 16) & 255, (bytes >> 8) & 255, bytes & 255); } // 处理填充 switch (data.charAt(lengthData - 2)) { case "=": output = output.substring(0, output.length - 1); break; case "==": output = output.substring(0, output.length - 2); break; } return decodeURIComponent(escape(output)); } // 示例使用 const text = "Hello, World!"; const encodedText = encodeBase64(text); const decodedText = decodeBase64(encodedText); console.log('原文:', text); console.log('编码后:', encodedText); console.log('解码后:', decodedText); ``` 上述代码中，`encodeBase64`函数用于将给定的字符串转换成Base64编码的字符串，而`decodeBase64`函数则将Base64编码的字符串转换回原始的字符串。需要注意的是，编码后的Base64字符串中可能包含填充字符'='，这在解码时需要相应地处理。 此外，本示例使用了JavaScript的`encodeURIComponent`和`unescape`函数来处理字符串到二进制数据的转换，这是因为在JavaScript中字符串是以UTF-16编码存储的，所以需要进行适当的转换来处理原始的二进制数据。" 在实际应用中，通常不需要从头开始手写Base64的编码和解码函数，因为现代浏览器和JavaScript环境已经提供了内置的`btoa()`和`atob()`函数来进行Base64的编码和解码。例如： ```javascript // 使用内置的btoa()函数进行编码 const encoded = btoa("Hello, World!"); // 使用内置的atob()函数进行解码 const decoded = atob(encoded); console.log('使用内置函数编码:', encoded); console.log('使用内置函数解码:', decoded); ``` 不过，了解如何手动实现Base64的编码和解码过程对于深入理解Base64的工作原理以及处理一些特殊情况下（如非标准的字符集或者特定的编码要求）是有帮助的。