JavaScript 前端开发实用技巧：数值处理与对象数组操作
本文整理了 JavaScript 前端开发中的常用技巧，涵盖数值格式化、取整、精确小数处理，以及数组的合并、去重、截断与克隆，还包括对象的深拷贝、合并及数据类型判断方法，帮助提升代码简洁性与执行效率。
数值处理技巧
格式化金钱数值
const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
const money = ThousandNum(20190214);
// money => "20,190,214"对于正数，可以使用位运算符（如 ~~、| 0、>> 0）代替 Math.floor() 进行取整；对于负数，则需使用 Math.ceil()。示例代码展示了如何对 1.69 进行取整，结果均为 1。
const num1 = ~~ 1.69;
const num2 = 1.69 | 0;
const num3 = 1.69 >> 0;
// num1 num2 num3 => 1 1 1使用一元加号运算符（+）转换数据类型时，仅对 null、空字符串 ""、false 以及数值型字符串有效，其他类型可能返回 NaN。示例中 null、空字符串和 false 均转换为 0，字符串 "169" 转换为数字 169。
const num1 = +null;
const num2 = +"";
const num3 = +false;
const num4 = +"169";
// num1 num2 num3 num4 => 0 0 0 169处理精确小数时，可通过 Math.round() 结合指数运算实现。例如，将 1.69 保留 1 位小数，结果为 1.7。
const RoundNum = (num, decimal) => Math.round(num * 10 ** decimal) / 10 ** decimal;
const num = RoundNum(1.69, 1);
// num => 1.7获取数组中的最小值和最大值，可以使用展开运算符配合 Math.min() 和 Math.max()。示例中数组 [0, 1, 2] 的最小值为 0，最大值为 2。
const arr = [0, 1, 2];
const min = Math.min(...arr);
const max = Math.max(...arr);
// min max => 0 2数组操作技巧
判断对象是否为空，需先确认数据类型为 object，再检查 Object.keys() 返回的数组长度是否为 0。
const obj = {};
const flag = DataType(obj, "object") && !Object.keys(obj).length;
// flag => true判断数据类型时，建议使用 Object.prototype.toString.call() 方法，并通过正则替换提取类型名称，转换为小写后与目标类型比较。该方法能准确区分 string、number、boolean、array 和 object 等类型。
function DataType(tgt, type) {
const dataType = Object.prototype.toString.call(tgt).replace(/\[object (\w+)\]/, "$1").toLowerCase();
return type ? dataType === type : dataType;
}
DataType("liner"); // "string"
DataType(2020630); // "number"
DataType(true); // "boolean"
DataType([], "array"); // true
DataType({}, "array"); // false克隆数组可使用展开运算符（...）快速实现浅拷贝。示例中数组 [0, 1, 2] 被克隆为新数组，内容保持一致。
const _arr = [0, 1, 2];
const arr = [..._arr];
// arr => [0, 1, 2]合并两个数组时，可将两个数组通过展开运算符放入新数组中。示例中 [0, 1, 2] 与 [3, 4, 5] 合并为 [0, 1, 2, 3, 4, 5]。
const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
const arr = [...arr1, ...arr2];
// arr => [0, 1, 2, 3, 4, 5];数组去重可利用 Set 数据结构自动去重的特性，将数组转换为 Set 后再展开回数组。示例中 [0, 1, 1, null, null] 去重后为 [0, 1, null]。
const arr = [...new Set([0, 1, 1, null, null])];
// arr => [0, 1, null]截断数组长度时，可直接修改数组的 length 属性，或使用展开运算符结合索引截取。示例展示了通过 Set 去重后的数组处理，实际截断操作通常直接调整 length 或使用 slice。
const arr = [...new Set([0, 1, 1, null, null])];
// arr => [0, 1, null]对象与变量操作技巧
交换两个变量的值，可以使用解构赋值语法，如 [a, b] = [b, a]，无需引入临时变量。示例中 a 和 b 的值互换，结果分别为 1 和 0。
let a = 0;
let b = 1;
[a, b] = [b, a];
// a b => 1 0克隆对象可采用展开运算符或 JSON.parse(JSON.stringify()) 方法。展开运算符实现浅拷贝，JSON 方法可实现深拷贝。示例中对象 { a: 0, b: 1, c: 2 } 被成功克隆。
const _obj = { a: 0, b: 1, c: 2 }; // 以下方法任选一种(本人偏爱第一种，简单明了，与克隆数组几乎一样)
const obj = { ..._obj };
const obj = JSON.parse(JSON.stringify(_obj));
// obj => { a: 0, b: 1, c: 2 }合并两个对象时，使用展开运算符可将后一个对象的属性覆盖前一个对象的同名属性。示例中 { a: 0, b: 1, c: 2 } 与 { c: 3, d: 4, e: 5 } 合并，c 的值被覆盖为 3，最终结果为 { a: 0, b: 1, c: 3, d: 4, e: 5 }。
const obj1 = { a: 0, b: 1, c: 2 };
const obj2 = { c: 3, d: 4, e: 5 };
const obj = { ...obj1, ...obj2 };
// obj => { a: 0, b: 1, c: 3, d: 4, e: 5 }
为何 obj 不是 {a:0,b:1,c:2,d:4,e:5} 而是上述结果，下方相同示例可作说明
本文介绍了 JavaScript 前端开发中数值运算与对象数组处理的实用技巧，更多相关内容请参考本站其他文章。
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式：声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23