🔥🔥🔥作为前端的你需要掌握的 JavaScript 简写

嘿，JavaScript 爱好者们！

今天，我们将探讨 JavaScript 简写艺术 - 使你的代码变得更加简洁和优雅。
我们将深入研究普通 JavaScript 和简写形式的真实用例示例。

因此，系好安全带，让我们将你的 JavaScript 技能提升到新的高度！

1.三元运算符：

用例： 条件分配

普通 JavaScript：

let isAdmin;
if (user.role === 'admin') {
  isAdmin = true;
} else {
  isAdmin = false;
}

简写：

const isAdmin = user.role === 'admin' ? true : false;

简写

const isAdmin = user.role === 'admin';

2.对象属性简写：

用例：使用变量创建对象

普通 JavaScript：

const name = 'Leandro';
const age = 30;

const person = {
  name: name,
  age: age
};

简写：

const name = 'Leandro';
const age = 30;

const person = {
  name,
  age
};

3. 默认参数值：

用例： 为函数参数提供默认值

普通 JavaScript：

function greet(name) {
  name = name || 'Guest';
  return `Hello, ${name}!`;
}

简写：

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}

4. 短路评估：

用例： 未定义或空值的回退

普通 JavaScript：

const username = getUsernameFromAPI();
const displayName = username ? username : 'Anonymous';

简写：

const username = getUsernameFromAPI();
const displayName = username || 'Anonymous';

5. 数组解构：

用例： 交换变量

普通 JavaScript：

let a = 5;
let b = 10;

const temp = a;
a = b;
b = temp;

简写：

let a = 5;
let b = 10;

[a, b] = [b, a];

6. 模板文字：

用例： 动态字符串拼接

普通 JavaScript：

const name = 'Leandro';
const greeting = 'Hello, ' + name + '!';

简写：

const name = 'Leandro';
const greeting = `Hello, ${name}!`;

7. 箭头功能：

用例： 简洁的函数定义

普通 JavaScript：

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

简写：

const add = (a, b) => a + b;

8. 空合并运算符：

用例： 为空或未定义的变量提供默认值

普通 JavaScript：

const data = fetchUserData();
const username = data !== null && data !== undefined ? data.username : 'Guest';

简写：

const data = fetchUserData();
const username = data ?? 'Guest';

9. 对象解构：

用例： 将对象属性提取到变量中

普通 JavaScript：

const user = {
  name: 'Leandro',
  age: 30,
  country: 'USA'
};

const name = user.name;
const age = user.age;
const country = user.country;

简写：

const user = {
  name: 'Leandro',
  age: 30,
  country: 'USA'
};

const { name, age, country } = user;

10. 价差运算符：

用例： 合并数组或对象

普通 JavaScript：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = arr1.concat(arr2);

简写：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];

11. 逻辑或赋值：

用例： 为变量分配默认值

普通 JavaScript：

let count;
if (!count) {
  count = 0;
}

简写：

let count;
count ||= 0;

12. 函数调用的短路评估：

用例： 避免不必要的函数执行

普通 JavaScript：

function fetchData() {
  if (shouldFetchData) {
    return fetchDataFromAPI();
  } else {
    return null;
  }
}

简写：

function fetchData() {
  return shouldFetchData && fetchDataFromAPI();
}

你有它！

JavaScript 简写以其优雅和高效继续给人留下深刻印象。
将这些简洁的示例合并到你的代码库中，将你的 JavaScript 技能飙升至新的高度。

快乐编码并享受在项目中释放 JavaScript 简写的魔力吧！🚀