腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

18個(gè)JavaScript編寫簡潔高效代碼的技巧分享

更新時(shí)間：2024年01月30日 09:47:04 作者：南城FE

在這篇文章中,小編將和大家分享18個(gè)JavaScript技巧,以及一些你應(yīng)該知道的示例代碼,以編寫簡潔高效的代碼,感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧

箭頭函數(shù)
Array.from()
使用console.table顯示數(shù)據(jù)
使用const和let
使用解構(gòu)提取對象屬性
使用邏輯OR運(yùn)算符設(shè)置默認(rèn)值
清空數(shù)組
JSON.parse()
Map()函數(shù)
Object.seal()
Object.freeze()
刪除數(shù)組重復(fù)項(xiàng)
使用解構(gòu)交換值
擴(kuò)展運(yùn)算符
模板字符串
三元運(yùn)算符
使用===代替==
使用語義化變量和函數(shù)名稱

本文翻譯自 18 JavaScript Tips : You Should Know for Clean and Efficient Code，作者：Shefali，略有刪改。

箭頭函數(shù)

可以使用箭頭函數(shù)來簡化函數(shù)聲明。

function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

Array.from()

Array.from()方法可用于將任何可迭代對象轉(zhuǎn)換為數(shù)組。

const str = "Hello!";
const arr = Array.from(str);

console.log(arr); //Output: ['H', 'e', 'l', 'l', 'o', '!']

使用console.table顯示數(shù)據(jù)

如果您希望在控制臺中組織數(shù)據(jù)或以表格格式顯示數(shù)據(jù)，則可以使用console.table()。

const person = {
    name: 'John', 
    age: 25,
    profession: 'Programmer'
}
console.table(person);

輸出效果：

使用const和let

對于不會(huì)被重新分配的變量使用const

const PI = 3.14;
let timer = 0;

使用解構(gòu)提取對象屬性

通過使用解構(gòu)從對象中提取屬性，可以增強(qiáng)代碼的可讀性。

const person = {
    name: 'John', 
    age: 25,
    profession: 'Programmer'
}

//Instead of this ??
console.log(person.name);
console.log(person.age);

//Use this??
const {name, age} = person;
console.log(name);
console.log(age);

使用邏輯OR運(yùn)算符設(shè)置默認(rèn)值

使用||操作符輕松設(shè)置默認(rèn)值。

function greet(name) {
  name = name || 'Person';
  console.log(`Hello, ${name}!`);
}

greet(); //Output: Hello, Person!
greet("John"); //Output: Hello, John!

清空數(shù)組

你可以使用length屬性輕松清空數(shù)組。

let numbers = [1, 2, 3, 4];
numbers.length = 0;
console.log(numbers); //Output: []

JSON.parse()

使用JSON.parse()將JSON字符串轉(zhuǎn)換為JavaScript對象，這確保了無縫的數(shù)據(jù)操作。

const jsonStr = '{"name": "John", "age": 25}';
const person = JSON.parse(jsonStr);
console.log(person); 
//Output: {name: 'John', age: 25}

Map()函數(shù)

使用map()函數(shù)轉(zhuǎn)換新數(shù)組中的元素，而不修改原始數(shù)組。

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(numbers); //Output: [1, 2, 3, 4]
console.log(doubled); //Output: [2, 4, 6, 8]

Object.seal()

您可以使用Object.seal()方法來防止在對象中添加或刪除屬性。

const person = {
    name: 'John', 
    age: 25
};
Object.seal(person);
person.profession = "Programmer";
console.log(person); //Output: {name: 'John', age: 25}

Object.freeze()

您可以使用Object.freeze()方法來阻止對對象的任何更改，包括添加，修改或刪除屬性。

const person = {
    name: 'John', 
    age: 25
};
Object.freeze(person);
person.name = "Mark";
console.log(person); //Output: {name: 'John', age: 25}

刪除數(shù)組重復(fù)項(xiàng)

您可以使用Set從數(shù)組中刪除重復(fù)的元素。

const arrWithDuplicates = [1, 12, 2, 13, 4, 4, 13];
const arrWithoutDuplicates = [...new Set(arrWithDuplicates)];
console.log(arrWithoutDuplicates); 
//Output: [1, 12, 2, 13, 4]

使用解構(gòu)交換值

你可以使用解構(gòu)輕松地交換兩個(gè)變量。

let x = 7, y = 13;
[x, y] = [y, x];
console.log(x); //13

擴(kuò)展運(yùn)算符

您可以使用擴(kuò)展運(yùn)算符有效地復(fù)制或合并數(shù)組。

const arr1 = [1, 2, 3];
const arr2 = [9, 8, 7];

const arr3 = [...arr2];
const mergedArr = [...arr1, ...arr2];

console.log(arr3); //[9, 8, 7]
console.log(mergedArr); //[1, 2, 3, 9, 8, 7]

模板字符串

利用模板文字進(jìn)行字符串插值并增強(qiáng)代碼可讀性。

const name = 'John';
const message = `Hello, ${name}!`;

三元運(yùn)算符

可以用三元運(yùn)算符簡化條件語句。

const age = 20;

//Instead of this??
if(age>=18){
    console.log("You can drive");
}else{
    console.log("You cannot drive");
}

//Use this??
age >= 18 ? console.log("You can drive") : console.log("You cannot drive");

使用===代替==

通過使用嚴(yán)格相等（===）而不是==來防止類型強(qiáng)制轉(zhuǎn)換問題。

const num1 = 5;
const num2 = '5';

//Instead of using ==
if (num1 == num2) {
  console.log('True');
} else {
  console.log('False');
}

//Use ===
if (num1 === num2) {
  console.log('True');
} else {
  console.log('False');
}

使用語義化變量和函數(shù)名稱

為變量和函數(shù)使用有意義的描述性名稱，以增強(qiáng)代碼的可讀性和可維護(hù)性。

// Don't declare variable like this
const a = 18;

// use descriptive names
const numberOfTips = 18;

以上就是18個(gè)JavaScript編寫簡潔高效代碼的技巧分享的詳細(xì)內(nèi)容，更多關(guān)于JavaScript技巧的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线