JavaScript keeps adding new and neat features. Sometimes, it’s hard to keep up. In this article, I’ll share a couple of cool tips & tricks to keep you up to speed and deepen your JS knowledge.

JavaScript不断添加新的功能。 有时，很难跟上。 在本文中，我将分享一些很酷的提示和技巧，以使您快速掌握和加深JS知识。

1.使用Slice方法获取数组的最后一项 (1. Get the last items of an array using the Slice method)

I never knew the slice method takes negative integers. It’s a great way of getting the last items of an array. Just enter the number of items you want from the end of the array as a negative argument to the slice function, and there you go!

我不知道slice方法采用负整数。 这是获取数组的最后一项的好方法。 只需从数组末尾输入想要的项数作为slice函数的负参数，就可以了！

let array = [0, 1, 2, 3 ,4 , 5 , 6 , 7 , 8 , 9];console.log(array.slice(-1)); // Result: [9]console.log(array.slice(-2)); // Result: [8, 9]console.log(array.slice(-3)); // Result: [7, 8, 9]

A great benefit to the slice method is that it doesn’t affect the original array, so it will stay as it was.

slice方法的一大好处是它不会影响原始数组，因此它将保持原样。

2.使用方括号动态设置对象的关键点 (2. Set a key of an object dynamically using square brackets)

Sometimes, when creating an object, you will want to change the name of one of the keys inside an object based on a certain condition or variable.

有时，在创建对象时，您将需要根据特定条件或变量来更改对象内部键之一的名称。

You can do this using square brackets!

您可以使用方括号来做到这一点！

const dynamic = "model";const item = { brand: "Porsche", [dynamic]: "Panamera"}console.log(item);// { brand: "Porsche", model: "Panamera" }

Just set a string to a variable and you’ll be able to dynamically set it inside your new object.

只需将字符串设置为变量，您就可以在新对象中动态设置它。

3.通过使用“ translate3d”提高自定义光标的性能 (3. Improve custom cursor performance by using “translate3d”)

Nowadays, a lot of websites use custom cursors.

如今，许多网站都使用自定义光标。

There’s a huge debate going on about IF you should do this or not, but if you HAVE to do it, please use this simple trick to improve your performance.

关于是否应该执行此操作，存在着巨大的争论，但是如果您必须执行此操作，请使用此简单技巧来提高性能。

You should transform the cursor’s position using “translate3d” instead of using its “top” and “left” properties.

您应该使用“ translate3d”而不是其“ top”和“ left”属性来变换光标的位置。

// Slow :(customCursor.style.top = "100px"; customCursor.style.left = "50px";// Better! :D customCursor.style.transform =

Why?

为什么？

2 reasons.

2个原因。

First, updating a top/right/bottom/left property of a DOM element will trigger a redraw of the layout layer. Avoiding this would be great for performance!

首先，更新DOM元素的top / right / bottom / left属性将触发布局层的重绘。 避免这种情况对性能很有帮助！

Secondly, using “translate3d” instead of the regular “translate” will force the animation into hardware acceleration. This will speed up performance and will make the animation/transition a lot smoother.

其次，使用“ translate3d”而不是常规的“ translate”将迫使动画加速硬件。 这样可以提高性能，并使动画/过渡更加流畅。

4.使用“ ||”设置变量默认值 (4. Set a variable default using “||”)

The “||” operator will, just like inside an if statement, work as an OR operator.

“ ||” 就像在if语句中一样，运算符将作为OR运算符。

This means, that it will check if the first value is truthy and if not, it’ll use the second value entered.

这意味着它将检查第一个值是否为真，否则将使用输入的第二个值。

doSomethingVeryCool = (coolParameter) => { const coolThing = coolParameter || "This is not so cool" console.log(coolThing);}doSomethingVeryCool("This is super cool") // Result: "This is super cool"doSomethingVeryCool() // Result: "This is not so cool"

In the example above, it will check if the “coolParameter” is a truthy value and if not, it will set the string “This is not so cool” to the “coolThing” const.

在上面的示例中，它将检查“ coolParameter”是否为真实值，如果不是，则将字符串“ This is not so cool”设置为“ coolThing” const。

This way, we can make sure we properly set-up a variable or object.

这样，我们可以确保我们正确设置了变量或对象。

5.使用“减少”方法获取数组的平均值 (5. Get the average value of an array using the “reduce” method)

The reduce method is a great way to loop through an array and get one single output based on the values inside the array.

reduce方法是一种遍历数组并根据数组内的值获得单个输出的好方法。

One of the ways to use the reduce method is to get the average on an array.

使用reduce方法的一种方法是获取数组的平均值。

let values = [13, 2, 27, 90, 8, 57, 34]; let sum = values.reduce((previous, current) => current += previous); let avg = sum / values.length; // avg = 33

We can get the total sum of all the items inside an array using the reduce method, after which we divide it by its length to get the average.

我们可以使用reduce方法获得数组中所有项目的总和，然后将其除以其长度以获得平均值。

6.将真实/虚假值转换为布尔值 (6. Convert truthy/falsy values to boolean)

JavaScript can be way too confusing when it comes to values being true/false/truthy/falsy.

当值是true / false / truthy / falsy时，JavaScript可能会太令人困惑。

A great simple trick to find out if a value is true/false is using the “!!” operator.

找出值是否为真的一个很棒的简单技巧是使用“ !!” 操作员。

Above a couple of examples to get you started, but you can use the “!!” with any kind of value (string / int / array /object) you like!

以上是几个示例，可以帮助您入门，但是可以使用“ !!” 带有任何您喜欢的值(字符串/整数/数组/对象)！

就这样！ (That’s all!)

Thanks for reading, look at how much you’ve learned 😄

感谢您的阅读，看看您学到了多少东西😄

Want to improve your JS skills even more? Check out my other article, 5 Must-know Javascript Tips & Tricks to get even better at JS 💪

想要进一步提高您的JS技能吗？ 查看我的另一篇文章，“ 5个必备的Java技巧和窍门”，以使JS变得更好。

翻译自: https://blog.prototypr.io/6-essential-javascript-tips-for-the-developer-of-2020-6128c0181625