在这篇文章中，我将分享 18 个 JavaScript 技巧，以及您应该了解的编写简洁高效代码的示例。

箭头函数

您可以使用箭头函数来简化函数声明。

function add(a, b) {  return a + b;}// Arrow functionconst add = (a, b) => a + b;

Array.from()

Array.from() 方法可用于将任何可迭代对象转换为数组。

const str = "Hello!";const arr = Array.from(str);console.log(arr); //Output: ['H', 'e', 'l', 'l', 'o', '!']

使用 console.table() 显示数据

如果您希望在控制台中以表格格式组织数据，那么您可以使用 console.table() 。

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

高效地使用 const 和 let

对于不会重新分配的变量使用 const ，对于需要重新分配的变量使用 let ，以便更好地组织代码。

const PI = 3.14;let timer = 0;

通过解构提取对象属性

通过使用解构从对象中提取属性，可以增强代码的可读性。

const person = {    name: 'John',     age: 25,    profession: 'Programmer'}//Instead of this console.log(person.name);console.log(person.age);//Use thisconst {name, age} = person;console.log(name);console.log(age);

使用逻辑 OR 运算符设置默认值

使用 || 运算符轻松设置默认值。

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

轻松清空数组

您可以使用 length 属性轻松清空数组。

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

JSON.parse()

使用 JSON.parse() 将 JSON 字符串转换为 JavaScript 对象，这确保了无缝的数据操作。

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

Map() 函数

使用 map() 函数转换新数组中的元素，而不修改原始数组。

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}

删除数组重复项

您可以使用 Set 从数组中删除重复元素。

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

使用解构交换值

您可以使用解构轻松交换两个变量。

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

拓展运算符

您可以使用扩展运算符有效地复制或合并数组。

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]

模板插值

利用模板文字进行字符串插值并增强代码可读性。

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

三元运算符

您可以使用三元运算符简化条件语句。

const age = 20;//Instead of thisif(age>=18){    console.log("You can drive");}else{    console.log("You cannot drive");}//Use thisage >= 18 ? console.log("You can drive") : console.log("You cannot drive");

使用 === 而不是 ==

通过使用严格相等 ( === ) 而不是松散相等 ( == ) 来防止类型强制问题。

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');}

使用描述性变量和函数名称

为变量和函数使用有意义且具有描述性的名称，以增强代码的可读性和可维护性。

// Don't declare variable like thisconst a = 18;// use descriptive namesconst numberOfTips = 18;

这就是今天的全部内容，希望对您有帮助。谢谢阅读。