JavaScript中反转字符串的7种方法全攻略

function reverseStr(str) {
  // 第一步：把字符串 'abc' 拆成数组 ['a','b','c']
  // split('') 中的 '' 表示“按每个字符拆开”
  const arr = str.split('');

  // 第二步：把数组 ['a','b','c'] 反转成 ['c','b','a']
  // reverse() 是数组的内置方法，会直接修改原数组！
  const reversedArr = arr.reverse();

  // 第三步：把数组 ['c','b','a'] 合并成字符串 'cba'
  // join('') 中的 '' 表示“中间不加任何符号”
  const result = reversedArr.join('');

  return result;
}

console.log(reverseStr('abc')); // 输出：'cba'

function reverseStr(str) {
  let result = ''; // 准备一个空盒子，用来装反转后的字符

  // 从最后一个字符开始，往前数：i = 2 → 1 → 0（因为 'abc' 长度是3，索引是0,1,2）
  for (let i = str.length - 1; i >= 0; i--) {
    result = result + str[i]; // 把当前字符 str[i] 加到 result 后面
  }

  return result;
}

console.log(reverseStr('abc')); // 输出：'cba'

function reverseStr(str) {
  let result = ''; // 还是那个空盒子

  // for...of 会自动一个一个拿出字符串里的字符
  for (const char of str) {
    result = char + result; // 关键！不是加在后面，而是加在前面！
  }

  return result;
}

console.log(reverseStr('abc')); // 输出：'cba'

function reverseStr(str) {
  // [...str] 就像魔法：把 'abc' 变成 ['a','b','c']
  // 然后照旧反转 + 合并
  return [...str].reverse().join('');
}

console.log(reverseStr('abc')); // 输出：'cba'

function reverseStr(str) {
  // 🚨 退出条件（非常重要！没有它会无限循环直到崩溃）
  if (str === '') {
    return ''; // 空字符串反转还是空字符串
  }

  // 🧩 递归核心：把第一个字符放到“剩下部分的反转结果”后面
  // str.substring(1) → 去掉第一个字符（如 'abc' → 'bc'）
  // str.charAt(0) → 拿到第一个字符（如 'abc' → 'a'）
  return reverseStr(str.substring(1)) + str.charAt(0);
}

console.log(reverseStr('abc')); // 输出：'cba'

function reverseStr(str) {
  return [...str].reduce((reversed, char) => {
    // reversed：之前累积的结果（初始为空字符串 ''）
    // char：当前正在处理的字符
    return char + reversed; // 把新字符加到前面，实现反转
  }, ''); // '' 是初始值（reversed 的起点）
}

console.log(reverseStr('abc')); // 输出：'cba'

function reverseStr(str) {
  // Array.from(str) 和 [...str] 功能完全一样，都是把字符串变成数组
  return Array.from(str).reverse().join('');
}

console.log(reverseStr('abc')); // 输出：'cba'

// 在 Chrome 80 以下或某些手机浏览器中：
'👨‍💻'.split(''); // 可能返回 ['', '', '', '']（乱码！）
[...'👨‍💻'];        // 正确返回 ['👨‍💻']（一个完整的 emoji）

// 错误示范！没有 if 判断，会一直调用自己直到崩溃
function badReverse(str) {
  return badReverse(str.substring(1)) + str.charAt(0);
}
badReverse('abc'); // ❌ 页面卡死！

const arr = ['a', 'b', 'c'];
arr.reverse(); // 直接把 arr 改成了 ['c','b','a']！
console.log(arr); // 输出：['c','b','a']（原数组被改了！）

const newArr = arr.slice().reverse(); // slice() 创建副本

// 1. 反转一个句子（注意空格位置）
reverseStr('hello world'); // 应该输出 'dlrow olleh'

// 2. 反转带 emoji 的字符串
reverseStr('I ❤️ JS 🌟'); // 应该保持 ❤️ 和 🌟 完整

// 3. 写一个“安全版”函数：对非字符串输入也友好
reverseStr(null);    // 应该输出 ''
reverseStr(123);     // 应该输出 '321'

// 方法1：split+reverse+join（基础版）
function reverse1(str) { return str.split('').reverse().join(''); }

// 方法2：传统for循环（最稳）
function reverse2(str) { let r=''; for(let i=str.length-1;i>=0;i--) r+=str[i]; return r; }

// 方法3：for...of循环（现代简洁）
function reverse3(str) { let r=''; for(const c of str) r=c+r; return r; }

// 方法4：展开运算符（2024推荐！）
function reverse4(str) { return [...str].reverse().join(''); }

// 方法5：递归（理解思想）
function reverse5(str) { return str===''? '': reverse5(str.substring(1)) + str.charAt(0); }

// 方法6：reduce（函数式）
function reverse6(str) { return [...str].reduce((r,c)=>c+r, ''); }

// 方法7：Array.from（方法4的兄弟）
function reverse7(str) { return Array.from(str).reverse().join(''); }

// 测试
console.log('方法1:', reverse1('abc'));
console.log('方法2:', reverse2('abc'));
console.log('方法3:', reverse3('abc'));
console.log('方法4:', reverse4('abc'));
console.log('方法5:', reverse5('abc'));
console.log('方法6:', reverse6('abc'));
console.log('方法7:', reverse7('abc'));