提升效率的JavaScript简写技巧有哪些

发布时间：2022-01-14 09:36:46 作者：iii
来源：亿速云阅读：173

# 提升效率的JavaScript简写技巧有哪些

## 引言

在现代Web开发中，JavaScript已成为不可或缺的核心语言。随着ECMAScript标准的不断演进，开发者们拥有了更多高效简洁的编码方式。本文将系统性地介绍42个能够显著提升开发效率的JavaScript简写技巧，涵盖变量操作、条件判断、函数处理、数组/对象操作等核心领域，帮助您写出更优雅、更专业的代码。

## 一、变量与赋值简写

### 1. 多变量同时声明
```javascript
// 传统写法
let x;
let y = 2;

// 简写
let x, y = 2;

2. 解构赋值

// 对象解构
const { name, age } = person;

// 数组解构
const [first, second] = arr;

3. 默认值设置

// 传统写法
let name = person.name || 'Anonymous';

// ES6简写
let { name = 'Anonymous' } = person;

4. 交换变量值

// 传统写法
let temp = a;
a = b;
b = temp;

// 简写
[a, b] = [b, a];

二、条件判断优化

5. 三元运算符

// 传统if-else
let access;
if (age > 18) {
  access = true;
} else {
  access = false;
}

// 简写
let access = age > 18 ? true : false;

6. 短路求值

// 传统写法
if (isValid) {
  submitForm();
}

// 简写
isValid && submitForm();

7. 空值合并运算符

// 传统写法
const value = input !== null && input !== undefined ? input : 'default';

// ES2020简写
const value = input ?? 'default';

8. 多条件检查

// 传统写法
if (value === 1 || value === 'one' || value === 2) {...}

// 简写
if ([1, 'one', 2].includes(value)) {...}

三、函数相关简写

9. 箭头函数

// 传统函数
function sayHello(name) {
  return 'Hello ' + name;
}

// 简写
const sayHello = name => `Hello ${name}`;

10. 默认参数

// 传统写法
function volume(l, w, h) {
  w = w || 1;
  h = h || 1;
  return l * w * h;
}

// ES6简写
function volume(l, w = 1, h = 1) {
  return l * w * h;
}

11. 立即执行函数

// 传统IIFE
(function() {
  console.log('IIFE');
})();

// 简写箭头函数
(() => console.log('IIFE'))();

12. 参数解构

// 传统写法
function getUser(user) {
  const name = user.name;
  const age = user.age;
  // ...
}

// 简写
function getUser({ name, age }) {
  // ...
}

四、数组操作技巧

13. 数组创建

// 传统写法
const arr = new Array();
arr[0] = 'a';
arr[1] = 'b';

// 简写
const arr = ['a', 'b'];

14. 数组合并

// 传统concat
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2);

// 扩展运算符
const combined = [...arr1, ...arr2];

15. 数组克隆

// 传统slice
const cloned = original.slice();

// 简写
const cloned = [...original];

16. 数组去重

// 传统写法
const unique = arr.filter((v, i, a) => a.indexOf(v) === i);

// Set简写
const unique = [...new Set(arr)];

五、对象处理技巧

17. 属性简写

// 传统写法
const name = 'John';
const obj = {
  name: name,
  age: 30
};

// ES6简写
const obj = { name, age: 30 };

18. 动态属性名

// 传统写法
const key = 'name';
const obj = {};
obj[key] = 'John';

// 计算属性名
const obj = {
  [key]: 'John'
};

19. 对象合并

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

// 扩展运算符
const merged = { ...obj1, ...obj2 };

20. 方法定义

// 传统写法
const obj = {
  greet: function() {
    console.log('Hello');
  }
};

// 简写
const obj = {
  greet() {
    console.log('Hello');
  }
};

六、字符串处理

21. 模板字符串

// 传统拼接
const str = 'Hello ' + name + ', welcome to ' + city;

// 模板字面量
const str = `Hello ${name}, welcome to ${city}`;

22. 多行字符串

// 传统写法
const str = '第一行\n' +
            '第二行\n' +
            '第三行';

// 模板字符串
const str = `第一行
第二行
第三行`;

23. 字符串转数字

// 传统parseInt
const num = parseInt('123');

// 一元加号
const num = +'123';

七、循环优化

24. for…of循环

// 传统for
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// for...of简写
for (const item of arr) {
  console.log(item);
}

25. 数组遍历方法

// 传统for循环
for (let i = 0; i < arr.length; i++) {
  arr[i] = arr[i] * 2;
}

// map简写
const doubled = arr.map(item => item * 2);

26. 对象遍历

// 传统for...in
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

// Object.entries简写
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

八、数学运算

27. 指数运算

// 传统Math.pow
const squared = Math.pow(2, 3);

// **运算符
const squared = 2 ** 3;

28. 取整简写

// 传统Math.floor
const floor = Math.floor(6.8);

// ~~运算符
const floor = ~~6.8;

29. 数字分隔符

// 难读的大数
const billion = 1000000000;

// 可读性更强的写法
const billion = 1_000_000_000;

九、逻辑处理进阶

30. 可选链操作符

// 传统安全访问
const street = user && user.address && user.address.street;

// 可选链
const street = user?.address?.street;

31. 逻辑空赋值

// 传统空值检查
if (value === null || value === undefined) {
  value = defaultValue;
}

// ??=运算符
value ??= defaultValue;

32. 类型转换

// 显式转换
const str = String(123);
const num = Number('123');

// 隐式转换
const str = 123 + '';
const num = +'123';

十、其他实用技巧

33. 快速console.log

// 传统写法
console.log('variable:', variable);

// 简写（利用对象属性简写）
console.log({ variable });

34. 快速JSON克隆

// 传统深拷贝
const cloned = JSON.parse(JSON.stringify(original));

35. 延迟执行

// setTimeout传统写法
setTimeout(function() {
  // code
}, 1000);

// 箭头函数简写
setTimeout(() => {
  // code
}, 1000);

36. Promise简写

// 传统Promise
new Promise(function(resolve, reject) {
  // code
});

// 箭头函数简写
new Promise((resolve, reject) => {
  // code
});

十一、ES6+新特性应用

37. 私有类字段

class Person {
  #privateField = 'secret';
  
  getSecret() {
    return this.#privateField;
  }
}

38. 静态类成员

class Utils {
  static version = '1.0';
  
  static log(message) {
    console.log(message);
  }
}

39. 顶层await

// 模块中直接使用
const data = await fetchData();
console.log(data);

40. 动态import

// 按需加载模块
const module = await import('/modules/myModule.js');

十二、性能优化相关

41. 位运算技巧

// 判断奇偶
const isEven = num => (num & 1) === 0;

// 交换整数
let a = 5, b = 7;
a ^= b; b ^= a; a ^= b;

42. 缓存函数结果

const memoize = fn => {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    return cache.has(key) ? cache.get(key) : (cache.set(key, fn(...args)), cache.get(key));
  };
};

结语

掌握这些JavaScript简写技巧不仅能提升代码的简洁性和可读性，还能显著提高开发效率。但需要注意的是，简洁不应以牺牲代码可读性为代价——团队协作中应确保其他成员也能轻松理解这些简写形式。建议根据项目实际情况和个人/团队的熟悉程度，选择性地采用这些技巧。

随着JavaScript语言的持续发展，新的简写方式和语法糖会不断出现。保持学习，定期更新知识库，才能写出更现代化、更高效的JavaScript代码。

扩展阅读建议： - MDN JavaScript文档 - ECMAScript最新规范 - 《JavaScript高级程序设计》 - 《你不知道的JavaScript》系列 “`

注：本文实际约4500字，完整4850字版本需要进一步扩展每个技巧的详细说明、应用场景和注意事项。您可以根据需要添加更多示例或深入解释某些概念的段落。