10个JS简写小技巧，让你的代码更漂亮

牵手就能做朋友

已于 2023-03-09 22:27:03 修改

阅读量133

点赞数

文章标签： javascript 前端开发语言

于 2023-03-09 22:25:53 首次发布

本文链接：https://blog.csdn.net/weixin_58582793/article/details/129432744

版权

JS代码简写技巧可以使代码更加简洁易读，提高开发效率和代码运行速度，降低出错率，更易于维护。同时，它可以减少代码量，提高可读性，是一种实用的编程技巧，适用于大型项目。
输入图片描述

Ternary Operator（三元运算符）

// 传统写法
if (condition) {
  value = x;
} else {
  value = y;
}
// 简写
value = condition ? x : y;

Short-circuit Evaluation（短路运算）

// 传统写法
if (variable !== null || variable !== undefined || variable !== '') {
  doSomething();
}
// 简写
if (variable) {
  doSomething();
}

Spread Operator（展开运算符）

// 传统写法
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = arr1.concat(arr2);
// 简写
var arr3 = [...arr1, ...arr2];

Destructuring（解构）

// 传统写法
var first = arr[0];
var second = arr[1];
// 简写
var [first, second] = arr;

Default Parameters（默认参数）

// 传统写法
function doSomething(param) {
  var param = param || 'default';
}
// 简写
function doSomething(param = 'default') {
  // ...
}

Object Shorthand（对象简写）

// 传统写法
var x = 1;
var y = 2;
var obj = { x: x, y: y };
// 简写
var x = 1;
var y = 2;
var obj = { x, y };

Arrow Functions（箭头函数）

// 传统写法
function add(x, y) {
  return x + y;
}
// 简写
var add = (x, y) => x + y;

Template Literals（模板字面量）

// 传统写法
var name = 'Tom';
var greeting = 'Hello, ' + name + '!';
// 简写
var name = 'Tom';
var greeting = `Hello, ${name}!`;

Array.reduce()（数组reduce方法）

// 传统写法
var arr = [1, 2, 3, 4, 5];
var sum = 0;
for (var i = 0; i < arr.length; i++) {
  sum += arr[i];
}
// 简写
var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce((acc, cur) => acc + cur, 0);

Object.assign()（对象assign方法）

// 传统写法
var obj1 = { x: 1, y: 2 };
var obj2 = { z: 3 };
var obj3 = Object.assign({}, obj1, obj2);
// 简写
var obj1 = { x: 1, y: 2 };
var obj2 = { z: 3 };
var obj3 = { ...obj1, ...obj2 };