分享7个实用的 JavaScript 方法技巧

男娘i 2022-10-06 10:43 243阅读 0赞

![ecb34473b8a8bc5a38e1b51746f494f0.png][]

英文 | https://javascript.plainenglish.io/7-useful-javascript-tricks-and-tips-fdf92dd9b869

翻译 | 杨小二

在本文中，我收集了一些关于JavaScript 技巧和窍门，我相信它们可以让你成为更好的 JavaScript 开发人员。没有特别的顺序，这里一共收集整理了7个 JavaScript 技巧！

# **1、转换为数字** #

JavaScript 是一种松散类型语言，这意味着我们不必明确指定变量的类型。JavaScript 还可以根据使用上下文自由地将值转换为类型。

将值转换为数字，尤其是将字符串转换为数字，是一个常见的要求，可以使用许多方法。

## **一元 + 运算符** ##

将字符串类型转换为数字的最简洁方法是一元运算符：+

+"42" // 42

一元运算是只有一个操作数的运算。该操作数出现在运算符之前或之后。

一元加号运算符位于其操作数之前并计算其操作数，但如果尚未将其转换为数字，则会尝试将其转换为数字。

以下是它的行为方式的更多示例：

+true // 1 
    +false // 0 
    +null // 0

但是，如果我们想在我们的代码中更加明确怎么办？

## **数字** ##

Number是一个原始包装对象，用于表示和操作数字。当用作函数时，Number(value)将字符串或其他值转换为数字类型。如果该值无法转换，则返回NaN(Not a Number)。

Number("42") // 42 
    Number("1.3") // 1.3 
    Number("tax") // NaN

## **解析整数** ##

parseInt()接受一个字符串作为第一个参数和一个字符串将被转换成的整数。此方法始终返回一个整数。

parseInt("1234", 10) // 1234 
    parseInt("11 
    player ", 10) // 11 parseInt("player 2", 10) // NaN 
    parseInt("10.81", 10) // 10

parseInt()尝试从不仅包含数字的字符串中获取数字，但如果字符串不以数字开头，你将获得NaN。

## **解析浮点数** ##

如果我们想保留小数部分而不仅仅是整数部分，我们可以使用parseFloat()将字符串作为参数并返回等效的浮点数。

parseFloat("10.42") // 10.42 
    parseFloat("10.00") // 10

还有一些方法可以转换为数字，但这些是更常见的方法。

# **2、管理对象** #

解构是 ES6 的重要组成部分，您可能会经常使用。它允许我们从对象中提取数据，并将提取的数据分配给变量：

const rectangle = { h: 100, w: 200 };
    const { h, w } = rectangle;

如果我们想，我们可以重命名变量：

const { h: height, w: width} = rectangle;
    console.log(height); // 100

我们可以做的另一件方便的事情是通过函数解构返回的对象并选择我们想要使用的值：

function getPerson() {
      return {
        firstName: 'Max',
        lastName: 'Best',
        age: 42
      }
    }
    const { age } = getPerson();
    console.log(age); // 42

因此，通过解构，我们可以通过返回一个对象并选择我们想要返回的部分来从函数中返回多个值。

以不可变的方式删除属性需要由 spread 的对应方提供的一个小技巧，rest operator，它用三个点 (...) 写成，类似于 spread。

但是，在这种情况下，我们将剩余的属性分散到一个新对象中。

const { age:_ , …person } = getPerson();
    console.log(person); // {firstName: “Max”, lastName: “Best”}

现在该person对象拥有原始 person 对象的所有属性，除了age。

# **3、交换两个变量** #

使用我们在上一个技巧中学到的知识，可以轻松地交换变量：

let me = "happy", you = "sad";
    [me, you] = [you, me];
    // me = "sad", you = "happy"

上面的代码创建了一个 \[you, me\] 数组，并立即将它们解构为相反的变量。

不再需要临时变量了！

# **4、 设置默认值** #

我们都见过他们。检查值是否已设置的无休止的 if 语句。如果我说有更好的方法呢？嗯，这正是我要说的，默认值。

## **变量** ##

所述nullish合并运算符（？）是否返回其右侧的操作，其左侧操作是一个逻辑运算符null或undefined否则返回其左侧。我们可以使用它来设置默认值，例如，当我们收到尚未设置为数组的列表时：

const bookList = receivedBooks ?? [];

## **参数** ##

我们可以使用空合并运算符为函数中的变量设置默认值，但有更好的方法，默认参数：

function calculateArea(width, height = 100) {
      return width * height;
    }
    
    
    const area = calculateArea(50);
    console.log(area); // 5000

这里我们将默认值设置为height:100。

## **对象** ##

解构对象时的另一个技巧是设置默认值：

const rectangle = { height: 400 };
    const { height = 750, width = 500 } = rectangle;
    console.log(height); // 400 - comes from rectangle object
    console.log(width); // 500 - fallback to default

ES6 解构默认值仅在值为undefined时。

# **5、区间随机数** #

有时我们需要在一个范围内生成一个随机数。该Math.random()函数帮助我们生成一个随机数，然后，我们可以将其转换为我们想要的范围：

const randomIntFromInterval = (min, max) => Math.floor(Math.random() * (max — min + 1) + min);

如果你查看函数的构造方式，还有另一个技巧可以融入到这个技巧中。

# **6、删除数组重复项** #

ES6 中引入的 Set 对象类型允许你存储唯一值。与扩展运算符 (...) 一起，我们可以使用它来创建一个只有唯一值的新数组：

const uniqueArray = [...new Set(array)]

我们从数组创建一个Set，因为Set中的每个值都必须是唯一的，所以，我们删除了所有重复项。然后，我们使用扩展运算符将Set转换回新数组。

# **7、动态属性名称** #

ES6 为我们带来了计算属性名称，允许对象字面量的属性键使用表达式。通过用括号包围键\[\]，我们可以使用变量作为属性键：

const type = "fruit";
    const item = {
     [type]: "kiwi"
    };
    
    
    console.log(item); // {fruit: "kiwi"}

这个在你希望动态创建密钥的情况下很有用。

我们可以使用括号表示法访问该值：

item[type];   // "kiwi"
    item["fruit"] // "kiwi"

或使用点符号：

item.fruit; // "kiwi"

# **8、奖励你一个额外的小技巧** #

如果我们想在没有改变的情况下向数组添加一个新项目（我们通常希望避免这种情况），我们可以使用 ES6扩展运算符和slice创建一个新数组：

const insert = (arr, index, newItem) => [
     ...arr.slice(0, index), // first half of array
     newItem,                // new item
     ...arr.slice(index)       // rest of array
    ];
    
    
    const items = ['S', 'L', 'C', 'E']
    const result = insert(items, 2, 'I');
    console.log(result); // ["S", "L", "I", "C", "E"]

# **结论** #

我希望，你发现这些 JavaScript 技巧中的一些有用并且值得添加到您的日常武器库中。请记住，负责任远比高效重要。

#  #

**学习更多技能**

**请点击下方公众号**

![11a0c4d79fb013669ab04310e0c548af.gif][]

[ecb34473b8a8bc5a38e1b51746f494f0.png]: /images/20221005/0bb2074d9589427596084d643f47b767.png
[11a0c4d79fb013669ab04310e0c548af.gif]: /images/20221005/1f44d4b8fa104e9c9a561bf5d749cf74.png