你可能不知道的 7 个 JS 巧妙技巧,感谢阅读

2025-05-27

你可能不知道的 7 个 JS 巧妙技巧

感谢阅读

厌倦了学习,想要掌握一些炫酷的技巧来赢得炫耀的资格?你来对地方了。这里有一些巧妙的技巧,甚至可以让你的生活更轻松!

1. 可读的数字

你是否曾经遇到过一个长得难以辨认的数字,不得不用手指在屏幕上才能读出来?幸运的是,有一个简单的解决方案,就是_在数字的范围内使用。

const number = 123_456_789;
Enter fullscreen mode Exit fullscreen mode

您可以_在数字内放置任何位置以使其更易于阅读,而不会妨碍数字本身。

2. 截断数组末尾

大多数人将其用作Array.lengthgetter函数。鲜为人知的是:它也可以用作setter 函数

let array = [1, 2, 3, 4, 5];

console.log(array); // [1, 2, 3, 4, 5]
console.log(array.length); // 5

array.length = 3;

console.log(array); // [1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

3. 短路评估

短路

不,我们不是在谈论那些短路

&&and运算||可以轻松地在一行中用于检查条件和返回值,这称为短路评估

用例&&

const showUserData = true;
const data = "not so secret data";

// will display false if showUserData is false
console.log(showUserData && data);
Enter fullscreen mode Exit fullscreen mode

用例||

const fallbackData =
  "nothing to see folks";
const data = "random data";

// will display `fallbackData` if
// data is false-ish (eg: null, undefined, '', etc)
console.log(data || fallbackData);
Enter fullscreen mode Exit fullscreen mode

4. 可选链式调用

可选链运算符 ( ?.) 使你能够读取位于连接对象链深处的属性值,而不必检查链中的每个引用是否有效

这是一个获取深度嵌套属性的简单解决方案,无需检查链中每个引用的有效性。

// usage (will return undefined if any of the items is not defined)
user.data?.name;
user.data?.addressList?.[0];
user.greet?.(time);
Enter fullscreen mode Exit fullscreen mode

5. 获取数组中的唯一值

访问数组中的唯一值是一个非常常见的操作。有一种常见的方法,也有一种巧妙的方法。

// USUAL WAY
// O(n^2) time complexity & O(n) space complexity
const uniqueValues = array.filter(
  (value, index, self) =>
    self.indexOf(value) === index
);

// SMART WAY
// complexity: O(n) time & space
const uniqueValues = [
  ...new Set(array),
];
Enter fullscreen mode Exit fullscreen mode

6. 空值合并

空值合并运算符 ( ??) 是一个逻辑运算符,当其左侧操作数为空或未定义时,返回其右侧操作数,否则返回其左侧操作数。

当你想要在变量可能包含空值时返回默认值时,值合并非常有用。

const getUserName = (user) => {
  return user?.name ?? "Anonymous";
};
Enter fullscreen mode Exit fullscreen mode

7. 全部替换

string.replace方法通常用于替换子字符串的第一次出现,但有一个简单的方法可以通过使用带有全局标志的正则表达式将其转换为可以替换所有出现的函数

const replace_string =
  "Visit replacesoft. replacesoft is a software company";

console.log(
  replace_string.replace(
    /replace/,
    "Micro"
  )
); // "Visit Microsoft. replacesoft is a software company"

console.log(
  replace_string.replace(
    /replace/g,
    "Micro"
  )
); // "Visit Microsoft. Microsoft is a software company"
Enter fullscreen mode Exit fullscreen mode

就这样吧,伙计们!

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗?在Upwork上联系我

想看看我正在做什么吗?查看我的个人网站GitHub

想联系我吗?请在LinkedIn上联系我

关注我的博客,每两周Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

  1. 我是初学者,该如何学习前端 Web 开发?
    可以参考以下文章:

    1. 前端流行语
    2. 前端开发路线图
    3. 前端项目构想
    4. 从初学者过渡到中级前端开发人员
  2. 你能指导我吗?

    抱歉,我工作已经很忙了,没时间指导任何人。

文章来源:https://dev.to/ruppysuppy/7-neat-tricks-for-js-that-you-probously-did-not-know-358d
PREV
专业人士使用的 7 个 TypeScript 秘密技巧😎🤫 使用的资源 感谢阅读
NEXT
7 个你不知道的 JavaScript Web API,助你打造未来网站🤯 感谢阅读