Logo

菜单

发布于 2026-01-05 0 阅读
0

我最喜欢的 JavaScript 小技巧和窍门 动力 这并非终点 js-tips-tricks 非常感谢所有用星标(⭐)支持本项目的星标者们！

我最喜欢的 JavaScript 使用技巧

动机

这并非结局

js技巧

非常感谢所有Stargazers用星星(⭐)支持本项目的朋友！

动机

大多数编程语言都足够开放，允许程序员用多种方式实现类似的结果。JavaScript 也不例外。在 JavaScript 中，我们经常会发现实现类似结果有多种方法，这有时会让人感到困惑。

有些用法比其他用法更好，因此，这些是我最喜欢的。我将在本文中列出它们。我相信，你也会在你的清单上找到很多类似的用法。

1. 忘记字符串拼接，使用模板字符串（字面量）

使用运算符连接字符串+来构建有意义的字符串是一种过时的方法。此外，连接包含动态值（或表达式）的字符串可能会导致各种问题和错误。

let name = 'Charlse';
let place = 'India';
let isPrime = bit => {
  return (bit === 'P' ? 'Prime' : 'Nom-Prime');
}

// string concatenation using + operator
let messageConcat = 'Mr. ' + name + ' is from ' + place + '. He is a' + ' ' + isPrime('P') + ' member.'
Enter fullscreen mode Exit fullscreen mode

模板字面量（或模板字符串）允许嵌入表达式。它的语法很独特，字符串必须用反引号括起来。模板字符串可以包含动态值的占位符，这些占位符用美元符号和花括号 (${表达式}) 标记。

以下是一个例子来说明这一点：

let name = 'Charlse';
let place = 'India';
let isPrime = bit => {
  return (bit === 'P' ? 'Prime' : 'Nom-Prime');
}

// using template string
let messageTemplateStr = `Mr. ${name} is from ${place}. He is a ${isPrime('P')} member.`
console.log(messageTemplateStr);
Enter fullscreen mode Exit fullscreen mode

2. isInteger

判断一个值是否为整数还有一种更简洁的方法。JavaScript NumberAPI 提供了一个名为 `int` 的方法isInteger()来实现这个目的。它非常有用，最好了解一下。

let mynum = 123;
let mynumStr = "123";

console.log(`${mynum} is a number?`, Number.isInteger(mynum));
console.log(`${mynumStr} is a number?`, Number.isInteger(mynumStr));
Enter fullscreen mode Exit fullscreen mode

输出：

2.png

3. 数值

你有没有注意到，event.target.value即使输入框的类型是数字，它总是返回字符串类型的值？

是的，请看下面的例子。我们有一个简单的数字类型文本框，这意味着它只接受数字输入。它有一个事件处理程序来处理按键抬起事件。

<input type='number' onkeyup="trackChange(event)" />
Enter fullscreen mode Exit fullscreen mode

在事件处理方法中，我们使用 `parseFloat()` 函数获取值event.target.value。但是它返回的是一个字符串类型的值。现在我又得费劲地把它解析成整数了。如果输入框接受的是浮点数（比如 16.56）呢？难道要用 `parseFloat()` 函数吗？啊，真是让人头疼，还得做额外的工作！

function trackChange(event) {
   let value = event.target.value;
   console.log(`is ${value} a number?`, Number.isInteger(value));
}
Enter fullscreen mode Exit fullscreen mode

请改用event.target.valueAsNumber此方法。它会返回数字形式的值。

let valueAsNumber = event.target.valueAsNumber;
console.log(`is ${value} a number?`, Number.isInteger(valueAsNumber));
Enter fullscreen mode Exit fullscreen mode

3.png

4. 使用 AND 的简写

让我们考虑这样一种情况：我们有一个布尔值和一个函数。

let isPrime = true;
const startWatching = () => {
    console.log('Started Watching!');
}
Enter fullscreen mode Exit fullscreen mode

检查布尔条件并调用函数的代码太多了。

if (isPrime) {
    startWatching();
}
Enter fullscreen mode Exit fullscreen mode

使用 AND(&&) 运算符的简写方式怎么样？没错，if完全可以避免使用语句。很棒吧？

isPrime && startWatching();
Enter fullscreen mode Exit fullscreen mode

5. 默认值为 || 或 ??

如果你想为变量设置默认值，可以使用 OR(||) 运算符轻松实现。

let person = {name: 'Jack'};
let age = person.age || 35; // sets the value 35 if age is undefined
console.log(`Age of ${person.name} is ${age}`);
Enter fullscreen mode Exit fullscreen mode

但是等等，这里有个问题。如果这个人的年龄是0岁（比如刚出生的婴儿），年龄会被计算为35岁0 || 35 = 35。这显然出乎意料。

输入nullish coalescing operator (??)。这是一个逻辑运算符，当其左侧操作数为null或 时undefined，返回其右侧操作数；否则，返回其左侧操作数。

要使用运算符重写上述代码??，

let person = {name: 'Jack'};
let age = person.age ?? 35; // sets the value 0 if age 0, 35 in case of undefined and null
console.log(`Age of ${person.name} is ${age}`);
Enter fullscreen mode Exit fullscreen mode

6. 随机

生成随机数或从数组中获取随机元素是一个非常实用的方法，值得掌握。我在很多项目中都多次用到过它们。

从数组中获取一个随机元素。

let planets = ['Mercury ', 'Mars', 'Venus', 'Earth', 'Neptune', 'Uranus', 'Saturn', 'Jupiter'];
let randomPlanet = planets[Math.floor(Math.random() * planets.length)];
console.log('Random Planet', randomPlanet);
Enter fullscreen mode Exit fullscreen mode

通过指定最小值和最大值，生成一个范围内的随机数。

 let getRandom = (min, max) => {
     return Math.round(Math.random() * (max - min) + min);
 }
 console.log('Get random', getRandom(0, 10));
Enter fullscreen mode Exit fullscreen mode

7. 函数默认参数

在 JavaScript 中，函数参数（或 params）就像该函数的局部变量。调用函数时，您可以选择是否为这些参数传递值。如果您不为某个参数传递值，它将无法被正确调用undefined，并可能导致一些意想不到的副作用。

在定义函数参数时，有一种简单的方法可以给它们传递默认值。以下示例展示了如何给函数Hello参数传递默认值。messagegreetings

let greetings = (name, message='Hello,') => {
    return `${message} ${name}`;
}

console.log(greetings('Jack'));
console.log(greetings('Jack', 'Hola!'));
Enter fullscreen mode Exit fullscreen mode

8. 必需的函数参数

在默认参数技术的基础上，我们可以将参数标记为必填项。首先，定义一个函数，用于抛出错误并传递错误信息，

let isRequired = () => {
    throw new Error('This is a mandatory parameter.');
}
Enter fullscreen mode Exit fullscreen mode

然后将该函数设置为所需参数的默认值。请记住，如果在调用时将值作为参数传递，则默认值将被忽略。但是，如果参数值为空，则会考虑默认值undefined。

let greetings = (name=isRequired(), message='Hello,') => {
    return `${message} ${name}`;
}
console.log(greetings());
Enter fullscreen mode Exit fullscreen mode

在上面的代码中，` nameis` 将为 undefined，并且会尝试为其设置默认值（即isRequired()函数值）。这将抛出一个错误，如下所示：

8.png

9. 逗号运算符

当我意识到逗号（,）是一个独立的运算符，而且之前从未注意到时，我感到非常惊讶。我在代码中经常使用它，却从未真正意识到它的存在。

在 JavaScript 中，逗号 (,) 运算符用于从左到右计算每个操作数，并返回最后一个操作数的值。

let count = 1;
let ret = (count++, count);
console.log(ret);
Enter fullscreen mode Exit fullscreen mode

在上面的例子中，变量的值ret将是 2。类似地，以下代码的输出将在控制台中记录值 32。

let val = (12, 32);
console.log(val);
Enter fullscreen mode Exit fullscreen mode

哪里会用到它？大家猜猜看？逗号（,）运算符最常见的用途是在 for 循环中提供多个参数。

for (var i = 0, j = 50; i <= 50; i++, j--)
Enter fullscreen mode Exit fullscreen mode

10. 合并多个对象

您可能需要将两个对象合并在一起，创建一个信息更丰富的对象以便于处理。您可以使用扩展运算符...（没错，就是三个点！）。

考虑两个对象，分别是员工和工作，

let emp = {
 'id': 'E_01',
 'name': 'Jack',
 'age': 32,
 'addr': 'India'
};

let job = {
 'title': 'Software Dev',
  'location': 'Paris'
};
Enter fullscreen mode Exit fullscreen mode

使用扩展运算符合并它们，如下所示：

 // spread operator
 let merged = {...emp, ...job};
 console.log('Spread merged', merged);
Enter fullscreen mode Exit fullscreen mode

还有另一种方法可以执行此合并操作。使用Object.assign()……你可以像这样操作：

 console.log('Object assign', Object.assign({}, emp, job));
Enter fullscreen mode Exit fullscreen mode

输出：

10.png

注意，扩展运算符和 Object.assign 都会执行浅合并。在浅合并中，第一个对象的属性会被第二个对象的相同属性值覆盖。

对于深度合并，请使用类似lodash_merge的工具。

11. 解构

将数组元素和对象属性分解为变量的技术称为……destructuring让我们通过几个例子来了解一下。

大批

这里我们看到一系列表情符号，

let emojis = ['🔥', '⏲️', '🏆', '🍉'];
Enter fullscreen mode Exit fullscreen mode

要进行解构，我们可以使用以下语法：

let [fire, clock, , watermelon] = emojis;
Enter fullscreen mode Exit fullscreen mode

这和之前的操作类似，let fire = emojis[0];但更加灵活。
你有没有注意到，我刚才用空格代替了奖杯表情符号？那么，这样做会得到什么结果呢？

console.log(fire, clock, watermelon);
Enter fullscreen mode Exit fullscreen mode

输出：

11.png

这里我还想介绍一下“解构运算符” rest。如果你想解构一个数组，将一个或多个元素赋值给变量，并将剩余部分放入另一个数组中，你可以使用...rest如下所示的方法。

let [fruit, ...rest] = emojis;
console.log(rest);
Enter fullscreen mode Exit fullscreen mode

输出：

11.a.png

目的

与数组类似，我们也可以对对象进行解构。

let shape = {
  name: 'rect',
  sides: 4,
  height: 300,
  width: 500
};
Enter fullscreen mode Exit fullscreen mode

解构，得到一个名称，几个变量中包含部分内容，其余部分则在另一个对象中。

let {name, sides, ...restObj} = shape;
console.log(name, sides);
console.log(restObj);
Enter fullscreen mode Exit fullscreen mode

输出：

11.b.png

点击这里了解更多相关信息。

12. 交换变量

destructuring现在运用我们刚才学到的概念，这肯定非常简单。

let fire = '🔥';
let fruit = '🍉';

[fruit, fire] = [fire, fruit];
console.log(fire, fruit);
Enter fullscreen mode Exit fullscreen mode

13. isArray

另一种判断输入是否为数组的有效方法。

let emojis = ['🔥', '⏲️', '🏆', '🍉'];
console.log(Array.isArray(emojis));

let obj = {};
console.log(Array.isArray(obj));
Enter fullscreen mode Exit fullscreen mode

14. undefined 与 null

undefined是指变量已声明但未定义其值的情况。

null它本身是一个空值，并不存在，必须显式地将其赋值给一个变量。

undefined它们null并不完全相等，

undefined === null // false
Enter fullscreen mode Exit fullscreen mode

点击这里了解更多相关信息。

15. 获取查询参数

window.location该对象包含许多实用方法和属性。我们可以使用这些属性和方法从浏览器 URL 中获取有关协议、主机、端口、域名等信息。

我发现其中一个非常有用的特性是：

window.location.search
Enter fullscreen mode Exit fullscreen mode

该search属性返回位置 URL 中的查询字符串。以下是一个 URL 示例：https://tapasadhiary.com?project=js。它将location.search返回：?project=js

我们可以使用另一个名为的有用接口，URLSearchParams以及location.search来获取查询参数的值。

let project = new URLSearchParams(location.search).get('project');
Enter fullscreen mode Exit fullscreen mode

输出：
js

点击这里了解更多相关信息。

这并非结局

这并非全部示例，还有很多很多。我决定在遇到类似示例时，将它们作为简短的示例添加到 Git 仓库中。

GitHub 标志 atapas / js-tips-tricks

我每天都在学习的 JavaScript 使用技巧和窍门列表！




在 GitHub 上查看


你最喜欢的 JavaScript 使用技巧是什么？不妨在下方评论区分享一下你的心得吧！

如果您觉得这篇文章对您有用，请点赞/分享，让更多人看到。我热爱UI/UX设计，也乐于通过文章分享我的知识。欢迎访问我的博客了解更多信息。

您可能也喜欢，

欢迎在推特上私信我@tapasadhikary或关注我。

文章来源：https://dev.to/atapas/my-favorite-javascript-tips-and-tricks-4jn4
5 个 JavaScript Gi...
🔥 解锁免费 AWS 认证：分步...