c语言编程笔录

首页 >   > 笔记大全

笔记大全

快速详解ES6ES12的全部特性

更新时间:2023-09-13

ES6新特性

ES6增加了很多新特性,其中包括:

  • let和const关键字
  • 箭头函数
  • 模板字符串
  • 解构赋值
  • 默认参数
  • 导出和导入模块
// let和const关键字
let x = 5;
const y = 10;

// 箭头函数
const func = (a, b) => a + b;

// 模板字符串
const name = "John";
console.log(`Hello, ${name}`);

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

// 默认参数
function add(x, y = 0) {
  return x + y;
}

// 导入和导出模块
// module.js
export const x = 5;
export function func() {}

// main.js
import { x, func } from "./module.js";

ES7新特性

ES7引入了一些新的特性,其中包括:

  • Array.includes
  • 指数运算符
// Array.includes: 判断数组中是否包含某个值
const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

// 指数运算符: 对一个数进行指数运算
const result = 2 ** 3;
console.log(result); // 8

ES8新特性

ES8增加了一些新特性,其中包括:

  • Object.entries和Object.values
  • async/await
// Object.entries和Object.values: 将对象转为数组
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]
console.log(Object.values(obj)); // [1, 2, 3]

// async/await: 异步编程语法
async function myFunc() {
  const result = await fetch("https://www.example.com/api/data");
  const data = await result.json();
  console.log(data);
}

ES9新特性

ES9包含了一些新特性,其中最重要的是:

  • async/await改进
  • Rest/Spread操作符允许对象和数组
// async/await改进: Promise.catch()不再需要使用
async function myFunc() {
  try {
    const result = await fetch("https://www.example.com/api/data");
    const data = await result.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

// Rest/Spread操作符允许对象和数组
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = {...obj1, ...obj2};
console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 }

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // [1, 2, 3, 4, 5, 6]
总结:
ES6~ES12新特性大大提升了JavaScript的开发体验和功能,使得编写JavaScript变得更加高效和易于维护。ES6引入了let和const关键字、箭头函数、模板字符串、解构赋值、默认参数和导出/导入模块等新特性;ES7增加了一些小型特性,如Array.includes和指数运算符;ES8提供了Object.entries和Object.values和async/await语法等新特性;ES9改进了async/await语法和Rest/Spread操作符允许对象和数组。这些新特性在实际应用中的具体使用可以有效地提高开发效率和代码质量。