JavaScript 简写语法

  • JavaScript 简写语法已关闭评论
  • 168 次浏览
  • A+
所属分类:Web前端
摘要

使用括号将函数定义包裹起来,再在末尾加上另一对括号,即可创建一个自执行函数。例如:


JavaScript 简写语法

1、简写的闭包自执行函数(Immediately Invoked Function Expression (IIFE))

使用括号将函数定义包裹起来,再在末尾加上另一对括号,即可创建一个自执行函数。例如:

(() => {   console.log("Hello, world!"); })(); 

2、简写的对象方法定义(Method Definition)

使用方法名和箭头函数的简写方式,可以更简洁地定义对象的方法。例如:

const obj = {   x: 1,   add(y) {     return this.x + y;   },   double: () => this.x * 2, }; console.log(obj.add(2)); // 3 console.log(obj.double()); // NaN 

注意,箭头函数中的 this 指向的是定义时的上下文,而不是调用时的上下文。

3、简写的类定义(Class Definition)

使用 class 和 constructor 的简写方式,可以更简洁地定义类。例如:

class Person {   constructor(name, age) {     this.name = name;     this.age = age;   }    sayHello() {     console.log(       `Hello, my name is ${this.name}, and I am ${this.age} years old.`     );   } } const alice = new Person("Alice", 20); alice.sayHello(); // 'Hello, my name is Alice, and I am 20 years old.' 

4、简写的模块导出(Module Export)

使用 export 和 default 的简写方式,可以更简洁地导出模块。例如:

// math.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b; export default {   multiply: (a, b) => a * b,   divide: (a, b) => a / b, };  // main.js import { add, subtract } from "./math.js"; import math from "./math.js"; console.log(add(1, 2)); // 3 console.log(subtract(3, 2)); // 1 console.log(math.multiply(2, 3)); // 6 console.log(math.divide(6, 2)); // 3 

5、解构赋值(Destructuring Assignment)

使用花括号{}或方括号[]可以将对象或数组中的值解构(拆解)到变量中。例如:

const obj = { x: 1, y: 2 }; const { x, y } = obj; console.log(x, y); // 1, 2  const arr = [1, 2, 3]; const [a, b] = arr; console.log(a, b); // 1, 2 

6、通过操作符简写语法

JavaScript 操作符

7、对象字面量简写

可以使用对象字面量的简写形式来定义对象,例如:

const name = "Alice"; const age = 30;  // 传统写法 const user = {   name: name,   age: age, };  // 简写写法 const user = { name, age }; 

8、模板字符串简写

可以使用模板字符串的简写形式来拼接字符串,例如:

const name = "Alice"; const age = 30;  // 传统写法 const message = "My name is " + name + " and I am " + age + " years old.";  // 简写写法 const message = `My name is ${name} and I am ${age} years old.`; 

9、省略对象方法的 function 关键字

在对象中定义方法时,可以省略 function 关键字,例如:

const obj = {   foo() {     // ...   },   bar() {     // ...   }, }; 

10、省略参数列表的圆括号

在只有一个参数的箭头函数中,可以省略参数列表的圆括号,例如:

const double = (x) => x * 2; 

11、省略对象属性的引号

在对象字面量中定义属性时,可以省略属性名称的引号,前提是属性名称不包含空格和特殊字符,例如:

const obj1 = {   prop1: "value1",   prop2: "value2",   prop3: "value3", };  const obj2 = {   prop1: "value1",   "prop with spaces": "value2",   ["computedProp"]: "value3", }; 

12、省略布尔值的比较操作符

可以直接将布尔值作为条件,而不必使用比较操作符,例如:

// 传统写法 if (done === true) {   // ... }  // 简写写法 if (done) {   // ... }