没必要使用 let

意思等同于：默认都用 const 替代，只有极少数场景必须使用 let。

let 出现的原因之一是 var 不支持 块级作用域。

if (true) {
  var x = 5;
}
console.log(x); // 输出: 5

if (true) {
  let y = 5;
}
console.log(y); // 输出: undefined

为什么支持块级作用域是好的呢？避免变量提升和全局变量污染

所以一定要使用 let 来替换 var。

与 let 一起出现的还有一个 const，相对于 let 来说，const 是 不可变，可预测，能够帮我们组织出更安全，更易阅读的代码。

所以优先考虑使用 const 是一个更好的实践。（拥抱不变性）

一，用 const 替代（怎么替代？）

1.  赋值（简单）

优化前：

let userCount = 0;
if (users.length > 0) {
  userCount = users.length;
}

优化后：

const userCount = users.length > 0 ? users.length : 0;

2.  赋值（中等）

优化前：

let res;
try {
  res = getShareArticleUrl(urlData, '', { openApp: false });
} catch (error) {}

if (!res) {
 res = defaultUrl;
}
return res; 

优化后：

// 封装函数
function getSafeShareArticleUrl(urlData, defaultUrl) {
  try {
    return getShareArticleUrl(urlData, '', { openApp: false });
  } catch (error) {
    return defaultUrl;
  }
}

// 函数调用
const res = getSafeShareArticleUrl(urlData, defaultUrl);

3.  赋值（复杂）

优化前：

let formattedAddress = '';
switch (user.country) {
  case 'USA':
    // formatt 逻辑处理后赋值给变量
    formattedAddress = ''
    break;
  case 'UK':
    // formatt 逻辑处理后赋值给变量
    formattedAddress = ''
    break;
  default:
    throw new Error('Unhandled country');
}

优化后：

// 封装函数
function formatAddress(user) {
  switch (user.country) {
    case 'USA':
      return formatUsaAdress(user);
    case 'UK':
      return formatUkAdress(user);
    default:
      throw new Error('Unhandled country');
  }
}

// 函数调用
const formattedAddress = formattedAddress(user);

二，极少数场景（哪些场景？）

1.  标志

// 示例1
let isUserLoggedIn = false;
if (loginSucessful) {
  isUserLoggedIn = true;
}

// 示例2
let isFound = false;

const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
  if (array[i] === 3) {
    isFound = true;
    break;
  }
}
console.log(isFound);  // 输出 true

2.  循环计数

for 循环

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

拖拽 dragstart / dragover / dragend

let curX = 0;
let curY = 0;
let targetX;
let targetY;

export default function drag(elm, callback) {
  let x = 0;
  let y = 0;
  elm.addEventListener('dragstart', (e) => {
    x = e.clientX;
    y = e.clientY;
  }, false);
  document.addEventListener('dragover', (e) => {
    targetX = curX - (e.clientX - x);
    targetY = curY - (e.clientY - y);
    callback(targetX, targetY);
  }, false);

  document.addEventListener('dragend', (e) => {
    curX = targetX;
    curY = targetY;
  }, false);
}

触摸移动 touchstart / touchmove

let startX = 0;
let startY = 0;

function handleTouchStart(event) {
  // 记录触摸开始时的位置
  const touch = event.touches[0];
  startX = touch.clientX;
  startY = touch.clientY;
}

function handleTouchMove(event) {
  // 计算触摸移动的距离
  const touch = event.touches[0];
  const moveX = touch.clientX - startX;
  const moveY = touch.clientY - startY;
  console.log(`Moved X: ${moveX}px, Moved Y: ${moveY}px`);
}

element.addEventListener('touchstart', handleTouchStart, false);
element.addEventListener('touchmove', handleTouchMove, false);