如何写出优雅耐看的JavaScript代码(2)

一个方法里面最好只做一件事，不要过多的处理，这样代码的可读性非常高

//bad code 
function emailClients(clients) { 
  clients.forEach((client) => { 
    const clientRecord = database.lookup(client); 
    if (clientRecord.isActive()) { 
      email(client); 
    } 
  }); 
} 
 
//better code 
function emailActiveClients(clients) { 
  clients 
    .filter(isActiveClient) 
    .forEach(email); 
} 
function isActiveClient(client) { 
  const clientRecord = database.lookup(client);     
  return clientRecord.isActive(); 
} 

3、对象设置默认属性

//bad code 
const menuConfig = { 
  title: null, 
  body: 'Bar', 
  buttonText: null, 
  cancellable: true 
}; 
function createMenu(config) { 
  config.title = config.title || 'Foo'; 
  config.body = config.body || 'Bar'; 
  config.buttonText = config.buttonText || 'Baz'; 
  config.cancellable = config.cancellable !== undefined ? config.cancellable : true; 
} 
createMenu(menuConfig); 
 
 
//better code 
const menuConfig = { 
  title: 'Order', 
  // 'body' key 缺失 
  buttonText: 'Send', 
  cancellable: true 
}; 

4、避免副作用

函数接收一个值返回一个新值，除此之外的行为我们都称之为副作用，比如修改全局变量、对文件进行 IO 操作等。

当函数确实需要副作用时，比如对文件进行 IO 操作时，请不要用多个函数/类进行文件操作，有且仅用一个函数/类来处理。也就是说副作用需要在唯一的地方处理。

副作用的三大天坑：随意修改可变数据类型、随意分享没有数据结构的状态、没有在统一地方处理副作用。

//bad code 
// 全局变量被一个函数引用 
// 现在这个变量从字符串变成了数组，如果有其他的函数引用，会发生无法预见的错误。 
var name = 'Ryan McDermott'; 
function splitIntoFirstAndLastName() { 
  name = name.split(' '); 
} 
splitIntoFirstAndLastName(); 
console.log(name); // ['Ryan', 'McDermott']; 
 
 
//better code 
var name = 'Ryan McDermott'; 
var newName = splitIntoFirstAndLastName(name) 
 
function splitIntoFirstAndLastName(name) { 
  return name.split(' '); 
} 
 
console.log(name); // 'Ryan McDermott'; 
console.log(newName); // ['Ryan', 'McDermott']; 

在 JavaScript 中，基本类型通过赋值传递，对象和数组通过引用传递。以引用传递为例：

假如我们写一个购物车，通过 addItemToCart()方法添加商品到购物车，修改 购物车数组。此时调用 purchase()方法购买，由于引用传递，获取的 购物车数组正好是最新的数据。

看起来没问题对不对?

如果当用户点击购买时，网络出现故障， purchase()方法一直在重复调用，与此同时用户又添加了新的商品，这时网络又恢复了。那么 purchase()方法获取到 购物车数组就是错误的。

为了避免这种问题，我们需要在每次新增商品时，克隆 购物车数组并返回新的数组。

//bad code 
const addItemToCart = (cart, item) => { 
  cart.push({ item, date: Date.now() }); 
}; 
 
//better code 
const addItemToCart = (cart, item) => { 
  return [...cart, {item, date: Date.now()}] 
}; 

5、全局方法

（编辑：ASP站长网）