前端之ECMAscript常用语法

目录

一 变量声明：

二 解构赋值：

三 模板字符串（也称为模板字面量）：

四 对象简写语法：

五 方法简写：

六 参数默认值：

七 扩展运算符：

八 数组扩展：

九 箭头函数：

十 Promise：

十一 总结

---

ECMAScript（简称 ES）是 JavaScript 语言的核心规范，下面是一些常用的 ECMAScript 语法：

一 变量声明：

• var：传统的变量声明方式，在同一作用域内可以重新赋值且可能会发生变量提升。
• let：在块级作用域内有效，不能在同一作用域重复声明，没有变量提升现象。
• const：声明常量，一旦赋值后不能再改变其值，同样具有块级作用域。

二 解构赋值：

let obj = { a: 1, b: 2 };
let { a, b } = obj; // a = 1, b = 2

三 模板字符串（也称为模板字面量）：

let name = "John";
let age = 30;
console.log(`Hello, my name is ${name} and I am ${age} years old.`);

四 对象简写语法：

let name = "Alice";
let person = { name }; // 等同于 { name: name }

五 方法简写：

let person = {
  firstName: 'Bob',
  sayHello() {
    console.log(`Hello, my name is ${this.firstName}`);
  }
};

六 参数默认值：

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}
greet(); // 输出 "Hello, Guest!"

七 扩展运算符：

对象扩展：

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

八 数组扩展：

let arr1 = [1, 2];
let arr2 = [...arr1, 3]; // [1, 2, 3]

九 箭头函数：

const add = (a, b) => a + b;

十 Promise：

function asyncFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (/* 成功条件 */) {
        resolve("Success!");
      } else {
        reject(new Error("Failed!"));
      }
    }, 1000);
  });
}

asyncFunction().then(value => console.log(value)).catch(error => console.error(error));

十一 总结

以上只是 ECMAScript 中一部分常用和重要特性。随着版本的更新，例如 ES6、ES7、ES8 等，还引入了类(class)、模块(import/export)、迭代器(Iterator)、生成器(generator)、async/await 异步处理、Map/Set 数据结构等更多新特性。