前端javaScript es6+语法的整理

对ES6及其后的主要语法变化的整理：ES6+：（ECMAScript 2015及其后续版本），引入了大量的新特性和语法更新，旨在让JavaScript的开发更加高效、简洁和现代化

ES2022语法

私有字段和方法 (ES2022)

通过#符号来定义类的私有字段和方法。

class Person {
  #name;
  
  constructor(name) {
    this.#name = name;
  }

  #greet() {
    console.log(`Hello, ${this.#name}`);
  }

  publicMethod() {
    this.#greet();
  }
}

const p = new Person("Alice");
p.publicMethod(); // "Hello, Alice"

ES9语法

Object Rest/Spread Properties

对象的剩余属性和展开属性语法。

const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(rest); // { c: 3, d: 4 }

ES7语法

async/await 

async和await让异步代码看起来像同步代码，使得编写和理解异步代码更加容易。

async function fetchData() {
  const response = await fetch('https://api.example.com');
  const data = await response.json();
  console.log(data);
}

let fetchData = async function () {
  const response = await fetch('https://api.example.com');
}


const fetchData = async () => {
  const response = await fetch('https://api.example.com'); 
}

ES6语法

1. 变量声明：let 和 const

ES6引入了let和const，替代了传统的var，提供了块级作用域。

• let：用于声明可变变量，具有块级作用域。
• const：用于声明常量，常量值不能被修改，具有块级作用域。

2. 箭头函数 (=>)

箭头函数简化了函数的声明方式，并且没有自己的this，它的this会从外部作用域继承。

const a = () =>{
  retrun 3+6
}

3. 模板字符串 (Template Literals)

模板字符串使用反引号（`）定义，可以在字符串中嵌入变量，支持多行字符串。

const abgc =元
let a= `1099${abgc}`

4. 解构赋值 (Destructuring)

解构赋值让你可以方便地从数组或对象中提取值并赋给变量。

//数组解构
const arr = [1, 2, 3];
const [a, b] = arr; // a = 1, b = 2

//对象解构
const obj = { name: "Alice", age: 25 };
const { name, age } = obj; // name = "Alice", age = 25

5. 默认参数 (Default Parameters) 

为函数的参数设置默认值。

function abc (a:10,b:'30',c:false){
   if(c){
     let d =b + `${a}`
     retrun  d
   }
  
}

abc()
abc(1000,'Alice',true)

6. 剩余参数 (Rest Parameters) 和 扩展运算符 (Spread Operator)

...语法可以将函数的多余参数收集到一个数组中。...也可以展开数组或对象。

// 集中收集数据到一个数组中
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

sum(1, 2, 3); // 6



// 数组扩展
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]


//对象扩展
const obj1 = { name: "Alice", age: 25 };
const obj2 = { ...obj1, city: "New York" }; // { name: "Alice", age: 25, city: "New York" }

8. 类 (Classes)

ES6引入了面向对象编程的类语法，提供了构造函数、方法、继承等功能。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

const person = new Person("John", 30); //创建new 实例化对象
person.greet(); // "Hello, I'm John" 调用实例化对象

9. 模块化 (Modules)

ES6引入了内置的模块化支持，可以使用import和export进行模块的导入和导出。

导入
// module.js
export const name = "Alice";
export function greet() {
  console.log("Hello, " + name);
}


导出
// app.js
import { name, greet } from './module.js';
greet(); // "Hello, Alice"

10. Promise

Promise是异步编程的一种方案，用于处理异步操作的结果，避免回调地狱。

// 创建promise 实例
const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Operation successful");
  } else {
    reject("Operation failed");
  }
});

// 调用实例化promise then调用成功  catch返回调用失败信息 ，相当于resolve和reject
promise.then(result => console.log(result)).catch(error => console.log(error));

11. Set 和 Map

Set是一个不允许重复值的集合，Map是一个键值对集合。

Set：

const set = new Set([1, 2, 3, 3]);
console.log(set); // Set { 1, 2, 3 }


Map：

const map = new Map();
map.set("name", "Alice");
map.set("age", 25);

console.log(map.get("name")); // "Alice"
map = {"name":"Alice", "age":25}

12. 符号（Symbols）

Symbol是新的原始数据类型，通常用于定义唯一且不可变的值。

const sym = Symbol("description");
console.log(sym); // Symbol(description)

}

13. Object.entries() 和 Object.values()

Object.entries()返回一个给定对象自身的所有可枚举属性的键值对数组，Object.values()返回对象所有的值。

const obj = { a: 1, b: 2 };
console.log(Object.entries(obj)); // [["a", 1], ["b", 2]]
console.log(Object.values(obj)); // [1, 2]

14. Array.includes()

Array.prototype.includes()用于判断数组中是否包含某个值。

const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

15. 二进制和八进制字面量

ES6支持使用0b或0B表示二进制数字，0o或0O表示八进制数字。

const binary = 0b1010; // 10  二进制
const octal = 0o12;    // 10  八进制

16. 动态导入 (Dynamic Imports)

动态导入允许按需加载模块，使用import()函数。

import('module.js').then(module => {
  module.someFunction();
});

总结

ES6+的语法变化极大地提升了JavaScript的表达能力和开发效率。随着版本的演进，新的特性不断丰富，使得JavaScript成为了一种更为现代化、易用的编程语言。这些新特性大大简化了代码的结构和可维护性，促进了开发者的工作流优化。