翼度科技»论坛 编程开发 JavaScript 查看内容

JavaScript 简写语法

11

主题

11

帖子

33

积分

新手上路

Rank: 1

积分
33
JavaScript 简写语法

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

使用括号将函数定义包裹起来,再在末尾加上另一对括号,即可创建一个自执行函数。例如:
  1. (() => {
  2.   console.log("Hello, world!");
  3. })();
复制代码
2、简写的对象方法定义(Method Definition)

使用方法名和箭头函数的简写方式,可以更简洁地定义对象的方法。例如:
  1. const obj = {
  2.   x: 1,
  3.   add(y) {
  4.     return this.x + y;
  5.   },
  6.   double: () => this.x * 2,
  7. };
  8. console.log(obj.add(2)); // 3
  9. console.log(obj.double()); // NaN
复制代码
注意,箭头函数中的 this 指向的是定义时的上下文,而不是调用时的上下文。
3、简写的类定义(Class Definition)

使用 class 和 constructor 的简写方式,可以更简洁地定义类。例如:
  1. class Person {
  2.   constructor(name, age) {
  3.     this.name = name;
  4.     this.age = age;
  5.   }
  6.   sayHello() {
  7.     console.log(
  8.       `Hello, my name is ${this.name}, and I am ${this.age} years old.`
  9.     );
  10.   }
  11. }
  12. const alice = new Person("Alice", 20);
  13. alice.sayHello(); // 'Hello, my name is Alice, and I am 20 years old.'
复制代码
4、简写的模块导出(Module Export)

使用 export 和 default 的简写方式,可以更简洁地导出模块。例如:
  1. // math.js
  2. export const add = (a, b) => a + b;
  3. export const subtract = (a, b) => a - b;
  4. export default {
  5.   multiply: (a, b) => a * b,
  6.   divide: (a, b) => a / b,
  7. };
  8. // main.js
  9. import { add, subtract } from "./math.js";
  10. import math from "./math.js";
  11. console.log(add(1, 2)); // 3
  12. console.log(subtract(3, 2)); // 1
  13. console.log(math.multiply(2, 3)); // 6
  14. console.log(math.divide(6, 2)); // 3
复制代码
5、解构赋值(Destructuring Assignment)

使用花括号{}或方括号[]可以将对象或数组中的值解构(拆解)到变量中。例如:
  1. const obj = { x: 1, y: 2 };
  2. const { x, y } = obj;
  3. console.log(x, y); // 1, 2
  4. const arr = [1, 2, 3];
  5. const [a, b] = arr;
  6. console.log(a, b); // 1, 2
复制代码
6、通过操作符简写语法

JavaScript 操作符
7、对象字面量简写

可以使用对象字面量的简写形式来定义对象,例如:
  1. const name = "Alice";
  2. const age = 30;
  3. // 传统写法
  4. const user = {
  5.   name: name,
  6.   age: age,
  7. };
  8. // 简写写法
  9. const user = { name, age };
复制代码
8、模板字符串简写

可以使用模板字符串的简写形式来拼接字符串,例如:
  1. const name = "Alice";
  2. const age = 30;
  3. // 传统写法
  4. const message = "My name is " + name + " and I am " + age + " years old.";
  5. // 简写写法
  6. const message = `My name is ${name} and I am ${age} years old.`;
复制代码
9、省略对象方法的 function 关键字

在对象中定义方法时,可以省略 function 关键字,例如:
  1. const obj = {
  2.   foo() {
  3.     // ...
  4.   },
  5.   bar() {
  6.     // ...
  7.   },
  8. };
复制代码
10、省略参数列表的圆括号

在只有一个参数的箭头函数中,可以省略参数列表的圆括号,例如:
  1. const double = (x) => x * 2;
复制代码
11、省略对象属性的引号

在对象字面量中定义属性时,可以省略属性名称的引号,前提是属性名称不包含空格和特殊字符,例如:
  1. const obj1 = {
  2.   prop1: "value1",
  3.   prop2: "value2",
  4.   prop3: "value3",
  5. };
  6. const obj2 = {
  7.   prop1: "value1",
  8.   "prop with spaces": "value2",
  9.   ["computedProp"]: "value3",
  10. };
复制代码
12、省略布尔值的比较操作符

可以直接将布尔值作为条件,而不必使用比较操作符,例如:
  1. // 传统写法
  2. if (done === true) {
  3.   // ...
  4. }
  5. // 简写写法
  6. if (done) {
  7.   // ...
  8. }
复制代码
来源:https://www.cnblogs.com/yuzhihui/p/17332214.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具