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

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

//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、全局方法

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!