本文共 2907 字，大约阅读时间需要 9 分钟。

ES6语法详解：从let到Promise

ES6对 JavaScript 语法的改进为开发者带来了诸多便利。本文将从 let 到 Promise 系统介绍 ES6 的新特性，并探讨其实际应用场景。

1. ES6中的 let 和 const

let 和 const 是 ES6 中最重要的变量声明关键字。与传统的 var 不同，let 和 const 的作用域更加严格：

• 块级作用域：let 和 const声明的变量仅在其所在的代码块内有效，避免了变量提升问题。这种设计使得代码更加直观，也减少了潜在的 bugs。
• 不可变性：const 用于声明常量，其值不可变。
• 块级提升：let 在块级作用域内的变量，必须在声明后使用，否则会抛出 ReferenceError。

示例：

let a = [];  for (let i = 0; i < 10; i++) {    a[i] = function () {      console.log(i);    };  }  a[6]();

由于 i 在每个循环中都被重新声明，a[6]() 会输出 6。

2. ES6变量赋值方式

传统的赋值方式已经被 ES6 的数组解构赋值所取代。比如：

let oldCode = var a = 1; let b = 2;  // 新方式：  let newCode = [a, b] = [1, 2];

这种方式简化了变量的初始化过程，提升了代码的可读性。

3. ES6中的箭头函数

箭头函数（=>）简化了传统函数的定义方式，并且支持在表达式中直接使用。

• 简单的函数定义：

  const func = () => {};

• 数组方法回调：

  let asd = [1, 2, 3, 4, 5];  asd.forEach((item, index) => {    // 处理逻辑  });

• 实现 continue：

  const arr = [1, 2, 3, 4, 5];  arr.forEach(function (item) {    if (item === 3) {      return;    }    console.log(item);  });

  通过 return 实现 continue 的效果。

4. Promise 的构造与使用

Promise 是 ES6 提供的解决回调地狱的问题，特别是在进行并发操作时，Promise.all 是最佳选择。

• 基本用法：

  function async1 () {    return new Promise((resolve, reject) => {      setTimeout(() => {        console.log('async1完成');        resolve('async1结果');      }, 1000);    });  }  function async2 () {    return new Promise((resolve, reject) => {      setTimeout(() => {        console.log('async2完成');        resolve('async2结果');      }, 2000);    });  }  function async3 () {    return new Promise((resolve, reject) => {      setTimeout(() => {        console.log('async3完成');        resolve('async3结果');      }, 3000);    });  }  Promise.all([async1(), async2(), async3()])    .then(result => {      console.log(result);    })    .catch(err => {      console.error(err);    });

• 并行执行：上述代码输出：async1完成 async2完成 async3完成，并传入结果数组。

5. 新增 array 方法：includes()、startsWith()、endsWith()

这些方法简化了数组操作：

• 包含检查：

  [1, 2, 3].includes(2); // true

• 前缀和后缀检查：

  "abcde".startsWith("abc") // true  "abcde".endsWith("de") // true

• 组合使用：

  [1, 2, 3].includes(3) && [4, 5, 6].startsWith("4"); // true

6. repeat() 方法

repeat()Used 无集合中方法将字符串重复多次：

"abc".repeat(3); // "abcabcabc"

7. padStart() 和 padEnd()

这对方法用于对字符串进行前导或后缀填充：

"hello".padStart(5, "0"); // "00000hello"  "world".padEnd(5, "_"); // "world__"

8. rest 参数

Rest 参数（...）用于收集多余的参数：

function add(...values) {    let sum = 0;    for (const val of values) {      sum += val;    }    return sum;  }  add(2, 5, 3); // 10

Rest 参数只能在最后一个参数位置使用，否则会抛出语法错误。

9. 扩展运算符 （...）

扩展运算符用于将数组转为逗号分隔的参数序列：

console.log(...[1, 2, 3]); // 1 2 3

• 多参数扩展：

  function push(array, ...items) {    array.push(...items);  }  function add(x, y) {    return x + y;  }  var numbers = [3, 7];  console.log(add(...numbers)); // 10

• 数组合并：

  const arr1 = [0, 1, 2];  const arr2 = [3, 4, 5];  arr1.push(...arr2); // 合并成功

• 图片处理：

  const [first, ...rest] = [];  first // undefined  rest // []

• 字符串分割：

  const arr = [..."hello"] // ["h", "e", "l", "l", "o"]

这些 ES6功能为 JavaScript 开发者提供了更加简洁和强大的手段，建议在项目中逐步采用。

转载地址：http://mowlz.baihongyu.com/