JavaScript 简写技巧

一、三元运算符简化条件判断

传统写法：

let result;
if (someCondition) {
    result = 'yes';
} else {
    result = 'no';
}

简写方式：

const result = someCondition? 'yes' : 'no';

解释：当遇到简单的二选一条件判断时，使用三元运算符可以将多行代码浓缩为一行，使逻辑更加清晰简洁，避免了繁琐的 if - else 结构。

二、空值合并运算符

传统写法：

const name = user.name!== null && user.name!== undefined? user.name : 'default';

简写方式：

const name = user.name?? 'default';

解释：在处理可能为空值（null 或 undefined）的变量时，以往需要双重判断，现在使用空值合并运算符，能直接简洁地指定默认值。

三、可选链操作符

传统写法：

const street = user && user.address && user.address.street;

简写方式：

const street = user?.address?.street;

解释：当访问嵌套对象的深层属性时，为了防止中间某个属性不存在导致报错，传统写法需要层层判断。有了可选链操作符，代码更加简洁直观，它会在属性不存在时返回 undefined，而不会引发错误。

四、数组去重

传统写法：

function unique(arr) {
    return arr.filter((item, index) => arr.indexOf(item) === index);
}

简写方式：

const unique = arr => [...new Set(arr)];

解释：对于去除数组中的重复元素，传统方法使用 filter 结合 indexOf 来判断，较为复杂。利用 ES6 的 Set 数据结构，它会自动去除重复值，再通过扩展运算符将其转换回数组，短短一行代码就搞定，简洁高效。

五、快速取整

传统写法：

const floor = Math.floor(4.9);

简写方式：

const floor = ~~4.9;

解释：在需要将浮点数向下取整时，除了使用 Math.floor 方法，还可以用双波浪线操作符，它利用了位运算的特性，能快速实现取整功能，在一些性能要求较高且简单取整场景下很实用，不过要注意它对负数的处理稍有不同。

六、合并对象

传统写法：

const merged = Object.assign({}, obj1, obj2);

简写方式：

const merged = {...obj1,...obj2};

解释：把多个对象合并为一个新对象，Object.assign 是常见做法，但 ES6 的扩展运算符语法更简洁，直接将对象展开合并，方便快捷，常用于配置对象的合并等场景，如合并默认配置和用户自定义配置。

七、短路求值

传统写法：

if (condition) {
    doSomething();
}

简写方式：

condition && doSomething();

解释：当只想在某个条件满足时执行一个函数或表达式，短路求值可以省略 if 语句，让代码更紧凑。若条件为真，后面的表达式才会执行，常用于函数调用前的条件判断，比如判断用户是否有权限执行某个操作，有权限时才调用相应函数。

八、默认参数值

传统写法：

function greet(name) {
    name = name || 'Guest';
    console.log(`Hello ${name}`);
}

简写方式：

const greet = (name = 'Guest') => console.log(`Hello ${name}`);

解释：在定义函数时，给参数设置默认值，以往用逻辑或运算符来实现，存在一定缺陷，如传入 0、空字符串等假值时会误判。现在 ES6 的默认参数语法能精准地为参数指定默认值，让函数更健壮，比如定义一个打招呼函数，若不传名字就默认向“Guest”打招呼。

九、解构赋值

传统写法：

const person = { name: 'John', age: 30 };
const name = person.name;
const age = person.age;

简写方式：

const { name, age } = { name: 'John', age: 30 };

解释：当从对象或数组中提取数据时，解构赋值能一次性完成多个变量的赋值，避免了逐个赋值的繁琐，让代码简洁易读。还可以结合函数参数使用，如函数接收一个对象参数，直接解构出需要的值，增强了代码的灵活性。

十、字符串转数字

传统写法：

const num = parseInt('123', 10);

简写方式：

const num = +'123';

解释：把字符串转换为数字，除了使用 parseInt 函数，还可以用一元加运算符，它会尝试将操作数转换为数字类型，对于简单的字符串数字转换场景，这种写法更加简洁，如将用户输入的数字字符串转换为实际数字进行计算。

十一、多重条件判断

传统写法：

if (num > 10 && num < 20) {
    // 执行操作
}

简写方式：

if (10 < num && num < 20) {
    // 执行操作
}

解释：在进行多重比较判断时，调整一下比较顺序，有时能让代码逻辑看起来更清晰自然，尤其是连续比较大小的场景，更符合阅读习惯，减少理解成本。

十二、快速幂运算

传统写法：

function power(base, exponent) {
    let result = 1;
    for (let i = 0; i < exponent; i++) {
        result *= base;
    }
    return result;
}

简写方式：

const power = (base, exponent) => Math.pow(base, exponent);

解释：计算一个数的幂次方，自己实现循环累乘固然可行，但 JavaScript 内置的 Math.pow 函数更加高效可靠，直接调用就能完成复杂的幂运算，节省开发时间。

十三、对象属性简写

传统写法：

const name = 'John';
const person = { name: name };

简写方式：

const name = 'John';
const person = { name };

解释：在创建对象时，如果对象属性名和变量名相同，ES6 允许我们直接简写，省去重复书写属性名的麻烦，让代码更简洁，常用于对象字面量的创建。

十四、数组映射

传统写法：

const numbers = [1, 2, 3];
const doubled = [];
for (let i = 0; i < numbers.length; i++) {
    doubled.push(numbers[i] * 2);
}

简写方式：

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);

解释：对数组中的每个元素进行相同操作并返回新数组，使用数组的 map 方法比传统的循环遍历 push 更加简洁明了，函数式编程风格让代码更具可读性，常用于数据转换场景，如将一组数据统一格式化。

十五、交换变量值

传统写法：

let a = 5;
let b = 10;
let temp;
temp = a;
a = b;
b = temp;

简写方式：

let a = 5;
let b = 10;
[a, b] = [b, a];

解释：交换两个变量的值，传统方法需要借助临时变量，而利用解构赋值可以巧妙地在一行内完成交换，代码简洁高效，是一种很巧妙的技巧。

十六、动态对象属性

传统写法：

const obj = {};
obj[dynamic + 'name'] = value;

简写方式：

const obj = {
    [`${dynamic}name`]: value
};

解释：当对象的属性名需要动态生成时，以往是用字符串拼接，现在使用模板字面量结合方括号语法，更加直观，能清晰地表达属性名是动态生成的，常用于根据不同条件创建对象属性的场景。

十七、箭头函数简写对象方法

传统写法：

const obj = {
    sayHello: function() {
        console.log('Hello');
    }
};

简写方式：

const obj = {
    sayHello: () => console.log('Hello')
};

解释：在定义对象的方法时，如果方法体较为简单，使用箭头函数可以让代码更简洁。这种写法在一些简单的事件处理函数或者工具函数作为对象方法时非常实用，减少了函数声明的冗余。

十八、利用扩展运算符复制数组

传统写法：

const originalArray = [1, 2, 3];
const copiedArray = originalArray.slice();

简写方式：

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

解释：当需要复制一个数组时，以往常用 slice 方法，但使用扩展运算符更加直观简洁，它会创建一个新的数组副本，避免了直接赋值导致的引用共享问题，在处理数据时能保证原数组不被意外修改。

十九、合并数组并去重

传统写法：

const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
const combined = arr1.concat(arr2).filter((item, index, self) => self.indexOf(item) === index);

简写方式：

const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
const combined = [...new Set([...arr1,...arr2])];

解释：要合并两个数组合并去除重复元素，传统写法需要先 concat 再用 filter 配合 indexOf 去重，较为繁琐。利用扩展运算符结合 Set 结构，先展开数组合并，再利用 Set 去重，最后转回数组，一步到位，简洁高效。