JavaScript开发中常见问题代码和相关优化Demo参考2.0

11. 默认参数与解构赋值的误用

问题代码：

function createUser({ name = 'Guest', age }) {
  return { name, age };
}

console.log(createUser()); // 抛出错误

解决方案： 确保为函数参数提供默认对象。

function createUser({ name = 'Guest', age } = {}) {
  return { name, age };
}

console.log(createUser()); // { name: 'Guest', age: undefined }

12. 不必要的字符串拼接

问题代码：

let message = '';
for (let i = 0; i < 1000; i++) {
  message += `Item ${i}\n`;
}

解决方案： 使用数组连接和join()方法，或者模板字符串。

const messages = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);
const message = messages.join('\n');

13. 不恰当的类型转换

问题代码：

let num = "123";
num += 456; // 结果是"123456"

解决方案： 明确地进行类型转换。

let num = "123";
num = Number(num) + 456; // 结果是579

14. 忽视性能优化

问题代码：

function findUser(users, id) {
  for (let user of users) {
    if (user.id === id) return user;
  }
}

解决方案： 考虑使用更高效的数据结构或算法，例如Map。

const userById = new Map(users.map(user => [user.id, user]));
function findUser(id) {
  return userById.get(id);
}

15. 未处理的Promise拒绝

问题代码：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

解决方案： 总是添加.catch()来处理可能的拒绝情况。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

16. 滥用全局变量

问题代码：

var globalVar = 'I am global';
function myFunction() {
  globalVar = 'Changed!';
}

解决方案： 避免使用全局变量，尽量使用局部变量和模块化设计。

function myFunction() {
  let localVar = 'I am local';
  console.log(localVar);
}

17. 忽略输入验证

问题代码：

function calculateTotal(items) {
  return items.reduce((acc, item) => acc + item.price, 0);
}

解决方案： 在计算之前检查输入的有效性。

function calculateTotal(items) {
  if (!Array.isArray(items)) throw new Error('Invalid input');
  return items.reduce((acc, item) => acc + (item && item.price || 0), 0);
}

18. 过早优化

问题代码： 开发者花费大量时间优化尚未证明成为瓶颈的部分代码。

解决方案： 遵循“先让它工作，再让它快速”的原则，优先保证代码的正确性和可维护性，然后根据性能分析工具的结果针对性地优化。

19. 忽略代码复用

问题代码： 重复编写相似的功能逻辑。

解决方案： 提取公共功能成独立函数或组件，并通过参数配置其行为。

function createButton(label, onClick) {
  const button = document.createElement('button');
  button.textContent = label;
  button.addEventListener('click', onClick);
  return button;
}

20. 缺乏测试

问题代码： 没有为关键业务逻辑编写单元测试或其他形式的自动化测试。

解决方案： 建立一个持续集成（CI）环境，编写单元测试、集成测试等，以确保代码质量。

// 使用Jest框架作为示例
test('adds 1 + 2 to equal 3', () => {
  expect(1 + 2).toBe(3);
});

2.0 - 完