JavaScript 基础数据类型挑战解析
本文基于 JavaScript 代码挑战项目中的基础数据类型部分，深入解析了 20 个常见且实用的 JavaScript 编程问题及其解决方案。这些挑战涵盖了数字操作、字符串处理、日期计算等基础数据类型相关的核心知识点。
1. 不使用临时变量交换两个整数
交换两个变量的值是编程中的基础操作，JavaScript 提供了多种实现方式：
// 解构赋值法（推荐）
let num1 = 10, num2 = 20;
[num1, num2] = [num2, num1];
// 数学运算法（注意大数溢出问题）
let num1 = 10, num2 = 20;
num1 = num1 + num2;
num2 = num1 - num2;
num1 = num1 - num2;
解构赋值是 ES6 引入的特性，简洁且不会产生溢出问题。数学运算方法虽然巧妙，但当数字非常大时可能导致数值溢出。
2. 判断数字是否为整数
不使用内置函数判断一个数字是否为整数：
function isInt(value) {
return value % 1 === 0;
}
// 测试用例
isInt(4.0); // true
isInt(12.2); // false
isInt(0.3); // false
此方法利用了整数除以 1 余数为 0 的特性。对于浮点数，除以 1 会有余数。
3. 生成指定范围内的随机数
function randomNumberGeneratorInRange(rangeStart, rangeEnd) {
return rangeStart + Math.round(Math.random() * (rangeEnd - rangeStart));
}
randomNumberGeneratorInRange(10, 50); // 可能输出 12
Math.random() 生成 [0,1) 的随机数，通过缩放和平移可得到任意范围的随机数。注意 Math.round 会导致边界概率稍低，也可使用 Math.floor。
4-5. 字符串反转
字符串反转是常见面试题，有多种实现方式：
// 方法1：循环拼接
const str = "JavaScript is awesome";
let reversedString = "";
for (let i = 0; i < str.length; i++) {
reversedString = str.charAt(i) + reversedString;
}
// 方法2：数组操作（简洁）
str.split("").reverse().join("");
// 按单词反转
str.split(" ").reverse().join(" "); // "awesome is JavaScript"
// 反转每个单词
str.split(" ")
.map(word => word.split("").reverse().join(""))
.join(" "); // "tpircSavaJ si emosewa"
6. 反转整数
// 数学方法
let num = 3849;
let reversedNum = 0;
while (num !== 0) {
reversedNum = reversedNum * 10 + (num % 10);
num = Math.floor(num / 10);
}
// 字符串方法
let numStr = String(num);
+numStr.split("").reverse().join("");
数学方法更高效，字符串方法更简洁但涉及类型转换。
7. 替换字符串中的空格
const str = "Hello World";
str.split(" ").join("_"); // "Hello_World"
str.replaceAll(" ", "_"); // ES2021引入
replaceAll 是 ES2021 新增方法，之前需要使用正则表达式 / /g 实现全局替换。
8. 12小时制转24小时制
function convertTo24HrsFormat(timeText) {
const timeTextLower = timeText.toLowerCase();
let [hours, mins] = timeTextLower.split(":");
if (timeTextLower.endsWith("am")) {
hours = hours == 12 ? "0" : hours;
} else if (timeTextLower.endsWith("pm")) {
hours = hours == 12 ? hours : String(+hours + 12);
}
return hours.padStart(2, 0) + ":" + mins.slice(0, -2).padStart(2, 0);
}
处理时间转换时需特别注意 12:00 AM/PM 的特殊情况。
9. 计算字符'X'之间的字符数
function getTheGapX(str) {
if (!str.includes("X")) return -1;
const firstIndex = str.indexOf("X");
const lastIndex = str.lastIndexOf("X");
return firstIndex === lastIndex ? -1 : lastIndex - firstIndex;
}
此函数利用 indexOf 和 lastIndexOf 方法定位首尾'X'的位置。
10-11. 字符串截断
// 按字符数截断
function truncateString(str, charCount) {
return str.length > charCount
? str.substr(0, charCount - 3) + "..."
: str;
}
// 按单词数截断
const str = "JavaScript is simple but not easy to master";
const wordLimit = 3;
str.split(" ").slice(0, wordLimit).join(" ");
12. 验证印度手机号
function validateMobile(str) {
return /^(\+91|0)?\s?\d{10}$/.test(str);
}
正则表达式验证可选的国家代码(+91或0)，然后是10位数字。
13. 筛选包含数字的字符串
function numInStr(mixArray) {
return mixArray.filter(value => /[0-9]/.test(value));
}
使用正则表达式测试字符串是否包含数字。
14. 验证姓名开头
function validateName(str, searchText) {
const regex = new RegExp("^(\\w*\\s)?" + searchText + "\\w*?", "i");
return regex.test(str);
}
创建不区分大小写的正则表达式检查姓名开头。
15. 按长度分割字符串
function stringChop(str, size = str.length) {
return str.match(new RegExp(".{1," + size + "}", "g"));
}
使用正则表达式简洁地分割字符串。
16. 移除所有元音字母
const str = "I love JavaScript";
str.replace(/[aeiou]/gi, ""); // "_ lv JvScrpt"
正则表达式配合 replace 方法全局替换元音字母。
17. 生成随机十六进制颜色
function getRandomHEXColor() {
return `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;
}
生成随机的 RGB 颜色值并转换为十六进制格式。
18. 计算日期差
const DAY_IN_MS = 86400000;
function getDaysBetweenDates(date1, date2) {
return Math.ceil(Math.abs(new Date(date2) - new Date(date1)) / DAY_IN_MS);
}
利用 JavaScript 日期对象计算毫秒差再转换为天数。
19. 检测 NaN
// 推荐方法
Number.isNaN(NaN); // true
Number.isNaN("abc"); // false
// 传统方法（会进行类型转换）
isNaN(NaN); // true
isNaN("abc"); // true
Number.isNaN 是 ES6 引入的更安全的检测方法。
20. 使用 Object.is 进行严格比较
Object.is(NaN, NaN); // true
Object.is(0, -0); // false
Object.is(5, 5); // true
Object.is 比 === 更严格，能正确识别 NaN 和区分 ±0。
这些挑战涵盖了 JavaScript 基础数据类型处理的常见场景，掌握这些技巧能显著提升日常编码效率。每个解决方案都考虑了性能、可读性和边缘情况，是学习 JavaScript 基础的良好素材。
