es6有哪些新特性？用法和案例

目录

箭头函数

模板字符串

 解构赋值

Promise

 async/await

---

箭头函数

箭头函数使用 => 符号定义，可以更简洁地书写函数并且自动绑定 this。比如：

// ES5
var add = function(x, y) {
  return x + y;
};
// ES6
const add = (x, y) => x + y;

箭头函数通常用在回调函数中，例如：

const numbers = [1, 2, 3, 4];
// ES5
numbers.map(function(number) {
  return number * 2;
});
// ES6
numbers.map((number) => number * 2);

模板字符串

模板字符串是一种新的字符串格式，可以包含变量、表达式和换行符。通过使用占位符 ${} 可以插入变量或表达式。比如：

// ES5
var message = 'Hello, ' + name + '!';
// ES6
const message = `Hello, ${name}!`;
// 多行字符串
const string = `
  This is a
  multiline string
`;

 解构赋值

解构赋值是一种方便的方式，可以从数组或对象中提取值并将它们赋值给变量。比如：

// 数组解构
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a); // 1

// 对象解构
const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // John

Promise

Promise 是一种新的异步编程方式，使用 Promise 可以更优雅地处理回调地狱问题，并通过 then() 和 catch() 方法跟踪异步操作的状态。比如：

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('data fetched!');
    }, 2000);
  });
}

fetchData().then((result) => {
  console.log(result);
}).catch((error) => {
  console.log(error);
});

 async/await

async/await 是一种基于 Promise 的新的异步编程方式，可以更直观地编写异步代码，并且可以让代码看起来像是同步执行。使用 async/await 需要将函数标记为 async，并在需要等待异步操作完成的地方使用 await 关键字。比如：

async function fetchData() {
  const data = await fetch('/data.json');
  const result = await data.json();
  return result;
}

fetchData().then((result) => {
  console.log(result);
}).catch((error) => {
  console.log(error);
});

以上仅是ES6中的部分特性，并且案例也只是其中的一些例子，更多详细内容可以查阅ES6官方文档。