JavaScript中的簡寫語法分享
1、簡寫的閉包自執(zhí)行函數(shù)(Immediately Invoked Function Expression (IIFE))
使用括號將函數(shù)定義包裹起來,再在末尾加上另一對括號,即可創(chuàng)建一個自執(zhí)行函數(shù)。例如:
(() => {
console.log("Hello, world!");
})();
2、簡寫的對象方法定義(Method Definition)
使用方法名和箭頭函數(shù)的簡寫方式,可以更簡潔地定義對象的方法。例如:
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
注意,箭頭函數(shù)中的 this 指向的是定義時的上下文,而不是調(diào)用時的上下文。
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、簡寫的模塊導(dǎo)出(Module Export)
使用 export 和 default 的簡寫方式,可以更簡潔地導(dǎo)出模塊。例如:
// 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、解構(gòu)賦值(Destructuring Assignment)
使用花括號{}或方括號[]可以將對象或數(shù)組中的值解構(gòu)(拆解)到變量中。例如:
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、通過操作符簡寫語法
7、對象字面量簡寫
可以使用對象字面量的簡寫形式來定義對象,例如:
const name = "Alice";
const age = 30;
// 傳統(tǒng)寫法
const user = {
name: name,
age: age,
};
// 簡寫寫法
const user = { name, age };
8、模板字符串簡寫
可以使用模板字符串的簡寫形式來拼接字符串,例如:
const name = "Alice";
const age = 30;
// 傳統(tǒng)寫法
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 關(guān)鍵字
在對象中定義方法時,可以省略 function 關(guān)鍵字,例如:
const obj = {
foo() {
// ...
},
bar() {
// ...
},
};
10、省略參數(shù)列表的圓括號
在只有一個參數(shù)的箭頭函數(shù)中,可以省略參數(shù)列表的圓括號,例如:
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、省略布爾值的比較操作符
可以直接將布爾值作為條件,而不必使用比較操作符,例如:
// 傳統(tǒng)寫法
if (done === true) {
// ...
}
// 簡寫寫法
if (done) {
// ...
}
到此這篇關(guān)于JavaScript中的簡寫語法分享的文章就介紹到這了,更多相關(guān)JavaScript簡寫語法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript必知必會(十) call apply bind的用法說明
這篇文章主要介紹了JavaScript必知必會(十) call apply bind的用法說明 的相關(guān)資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-06-06
用javascript連接access數(shù)據(jù)庫的方法
用javascript連接access數(shù)據(jù)庫的方法...2006-11-11
理解Javascript的caller,callee,call,apply區(qū)別
理解Javascript的caller,callee,call,apply區(qū)別...2007-03-03

