JavaScript 简写语法

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) {
  // ...
}

原文链接:https://www.cnblogs.com/yuzhihui/p/17332214.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript 简写语法 - Python技术站

(0)
上一篇 2023年4月22日
下一篇 2023年4月22日

相关文章

  • JS实现登录页面记住密码和enter键登录方法推荐

    下面是JS实现登录页面记住密码和enter键登录方法的攻略: 实现登录页面记住密码功能 通过 localStorage 存储用户名和密码 // 存储用户名和密码到 localStorage 中 localStorage.setItem(‘username’, ‘yourUsername’); localStorage.setItem(‘password’, …

    JavaScript 2023年6月11日
    00
  • JavaScript面向对象编程入门教程

    JavaScript面向对象编程是一种常见的编程技术,通过对象和类的概念,可以更好地组织和管理代码。以下是JavaScript面向对象编程的完整攻略: 1. 了解对象和类的概念 在JavaScript中,对象可以看作是包含属性和方法的实体,而类可以看作是包含相同属性和方法的一组对象。要定义一个类,可以使用构造函数或类声明的方式。例如: // 使用构造函数定义…

    JavaScript 2023年5月18日
    00
  • js运动事件函数详解

    JS运动事件函数详解 在JS中,事件函数是编写交互逻辑的重要部分。其中,运动事件函数可以实现对象的平移、缩放、旋转等效果。本文将详细讲解JS中的运动事件函数,包括常见的函数、使用注意事项和两个示例说明。 常见的运动事件函数 以下是JS常用的运动事件函数: setInterval():重复调用一个函数或执行一段代码,间隔一定的时间(以毫秒为单位)。 setTi…

    JavaScript 2023年5月27日
    00
  • 常见JS验证脚本汇总

    “常见JS验证脚本汇总”是一篇介绍JavaScript验证脚本的文章。JavaScript验证脚本用来验证表单输入的内容是否符合预期,可以提高表单的准确性和安全性。以下是详细的攻略: 标题 介绍 在介绍JavaScript验证脚本之前,需要先了解HTML表单的基本结构和form元素的常见属性。 JavaScript验证脚本的基本结构 JavaScript验证…

    JavaScript 2023年6月10日
    00
  • JS 验证码功能的三种实现方式

    下面为您讲解JS验证码功能的三种实现方式的完整攻略。 方式一:纯前端方法生成 实现过程 在HTML页面中添加验证码输入框和一个生成验证码的按钮; JS随机生成一个包含数字和字母的随机字符串并将其绑定到验证码文本框上; 当用户输入验证码并提交时,将输入的验证码与生成的验证码进行比较,判断验证码是否正确。 代码示例 HTML部分: <!DOCTYPE ht…

    JavaScript 2023年6月10日
    00
  • js实现宇宙星空背景效果的方法

    为了实现宇宙星空背景效果,我们可以使用Canvas和JavaScript来实现。下面是步骤: 步骤1:HTML布局 <!DOCTYPE html> <html> <head> <title>宇宙星空背景</title> </head> <body> <canvas id…

    JavaScript 2023年6月11日
    00
  • JavaScript函数中的this四种绑定形式

    JavaScript 中的 this 指向可以按照四种绑定形式进行绑定,这四种形式分别是默认绑定、隐式绑定、显式绑定和 new 绑定。下面将分别对这四种绑定形式进行详细介绍。 默认绑定 当函数直接被调用时,且函数内部没有使用特殊的this绑定方式,this 指向就是默认绑定到全局对象上。 function printThis() { console.log(…

    JavaScript 2023年5月27日
    00
  • Web开发之JavaScript

    Web开发之JavaScript 一、JavaScript入门 1. JavaScript是什么 JavaScript是一种广泛应用于Web开发的脚本语言,主要用于为网页添加动态效果、实现交互功能等。 2. 学习JavaScript的基本要素 (1)掌握HTML和CSS的基本用法 在使用JavaScript进行Web开发时,HTML和CSS是最基本的语言。 …

    JavaScript 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部