2021 年需要了解的 34 个 JavaScript 优化技巧 #8078

cool-summer-021 · 2021-02-24T06:46:50Z

Resolved #8041

master

Python的优化 — 驻留机制

同步原项目的更新内容

同步原项目更新的内容

Python List 使用注意事项

根据校对意见完成修改

同步原仓库的更新

更新

同步更新的内容

根据校对意见修改完成

为什么如今 Deno 正全面取代 Node.js

删除多余内容

根据校对意见修改完成

更新原仓库的内容

更新

翻译完成

与原仓库同步

更新

PassionPenguin

请修改代码，代码全是...坑
或者你别修改了，等到时候你push以后再去修改吧

PassionPenguin · 2021-02-26T18:50:09Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md

-# 34 JavaScript Optimization Techniques to Know in 2021
-Optimize your JavaScript code using modern shorthand techniques, tips, and tricks
+# 2021 年需要了解的 34 个 JavaScript 优化技巧
+使用先进的速记技巧优化你的 JavaScript 代码


Suggested change

使用先进的速记技巧优化你的 JavaScript 代码

> 使用先进的速记技巧优化你的 JavaScript 代码

PassionPenguin · 2021-02-26T18:50:36Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md


-The life of a developer is always learning new things and keeping up with the changes shouldn’t be harder than it already is, and my motive is to introduce all the JavaScript best practices such as shorthand and features which we must know as a frontend developer to make our life easier in 2021.
+开发者需要持续学习新技术，跟以前相比，如今跟随技术变化是比较容易做到的，我写这篇文章的目的是介绍诸如速写法之类的 JavaScript 最佳实践和其中的特性，这些都是我们作为一名前端开发人员必须了解的，它会给我们的工作生活带来便利。


Suggested change

开发者需要持续学习新技术，跟以前相比，如今跟随技术变化是比较容易做到的，我写这篇文章的目的是介绍诸如速写法之类的 JavaScript 最佳实践和其中的特性，这些都是我们作为一名前端开发人员必须了解的，它会给我们的工作生活带来便利。

开发者需要持续学习新技术，跟以前相比，如今跟随技术变化是比较容易做到的。我写这篇文章的目的是介绍诸如速写法之类的 JavaScript 最佳实践和其中的特性，这些都是我们作为一名前端开发人员必须了解的，因为它们会给我们的工作生活带来便利。

PassionPenguin · 2021-02-26T18:52:16Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md


-The life of a developer is always learning new things and keeping up with the changes shouldn’t be harder than it already is, and my motive is to introduce all the JavaScript best practices such as shorthand and features which we must know as a frontend developer to make our life easier in 2021.
+开发者需要持续学习新技术，跟以前相比，如今跟随技术变化是比较容易做到的，我写这篇文章的目的是介绍诸如速写法之类的 JavaScript 最佳实践和其中的特性，这些都是我们作为一名前端开发人员必须了解的，它会给我们的工作生活带来便利。

 ![https://miro.medium.com/max/2400/0*K49jVcTGrpgm_5mX.png](https://miro.medium.com/max/2400/0*K49jVcTGrpgm_5mX.png)


Suggested change

![https://miro.medium.com/max/2400/0*K49jVcTGrpgm_5mX.png](https://miro.medium.com/max/2400/0*K49jVcTGrpgm_5mX.png)

![帖图](https://miro.medium.com/max/2400/0*K49jVcTGrpgm_5mX.png)

PassionPenguin · 2021-02-26T18:53:30Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md


 ![https://miro.medium.com/max/2400/0*K49jVcTGrpgm_5mX.png](https://miro.medium.com/max/2400/0*K49jVcTGrpgm_5mX.png)

-You might be doing JavaScript development for a long time but sometimes you might be not updated with the newest features which can solve your issues without doing or writing some extra codes. These techniques can help you to write clean and optimized JavaScript Code. Moreover, these topics can help you to prepare yourself for JavaScript interviews in 2021.
+可能你做了多年的 JavaScript 开发工作，但有时候对一些最新的技术不了解，这些新技术可能有助于某些问题的解决，因此你需要编写额外的代码。这些新技术也能帮助你进行代码优化。此外，如果你今年需要为 JavaScript 面试作准备，本文也是一份实用的参考资料。


Suggested change

可能你做了多年的 JavaScript 开发工作，但有时候对一些最新的技术不了解，这些新技术可能有助于某些问题的解决，因此你需要编写额外的代码。这些新技术也能帮助你进行代码优化。此外，如果你今年需要为 JavaScript 面试作准备，本文也是一份实用的参考资料。

可能你已经进行了多年的 JavaScript 开发工作，但有时候你还是会对一些最新的技术不那么了解，而这些新技术可能有助于某些问题的解决而不需要你去编写更多的代码。有时候，这些新技术也能帮助你进行代码优化。此外，如果你今年需要为 JavaScript 面试作准备，本文也是一份实用的参考资料。

PassionPenguin · 2021-02-26T18:53:53Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md


-# **1. If with multiple conditions**
+# **1. 含有多个条件的 if 语句**


Suggested change

# **1. 含有多个条件的 if 语句**

## **1. 含有多个条件的 if 语句**

PassionPenguin · 2021-02-26T19:06:43Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md

@@ -467,7 +467,7 @@ if (arr.includes(item)) {

 # **28. Object.entries()**

-This feature helps to convert the object to an array of objects.
+该特性可以把对象转换成一个由若干对象组成的数组。

 ```
 const data = { test1: 'abc', test2: 'cde', test3: 'efg' };


const data = { test1: 'abc', test2: 'cde', test3: 'efg' }; const arr = Object.entries(data); console.log(arr); /** Output: [ [ 'test1', 'abc' ], [ 'test2', 'cde' ], [ 'test3', 'efg' ] ] **/

PassionPenguin · 2021-02-26T19:06:59Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md

@@ -482,7 +482,7 @@ console.log(arr);/** Output:

 # **29. Object.values()**

-This is also a new feature introduced in ES8 that performs a similar function to `Object.entries()`, but without the key part:
+这也是 ES8 中介绍的一个新特性，它的功能与 `Object.entries()` 类似，但没有其核心功能：

 ```
 const data = { test1: 'abc', test2: 'cde' };


const data = { test1: 'abc', test2: 'cde' }; const arr = Object.values(data); console.log(arr); /** Output: [ 'abc', 'cde'] **/

PassionPenguin · 2021-02-26T19:07:41Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md


 ```
 let str = 'abc';
 //Longhand 
 str.charAt(2); // c//Shorthand 
-Note: If we know the index of the array then we can directly use index insted of character.If we are not sure about index it can throw undefined
+注意：如果事先知道目标字符在字符串中的索引，我们可以直接使用该索引值。如果索引值不确定，运行时就有可能抛出 undefined。


Suggested change

注意：如果事先知道目标字符在字符串中的索引，我们可以直接使用该索引值。如果索引值不确定，运行时就有可能抛出 undefined。

// 注意：如果事先知道目标字符在字符串中的索引，我们可以直接使用该索引值。如果索引值不确定，运行时就有可能抛出 undefined。

PassionPenguin · 2021-02-26T19:07:51Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md


 ```
 const arr = [1, 2, 3]; 
 Math.max(…arr); // 3
 Math.min(…arr); // 1
 ```

-# **33. Get character from string**
+# **33. 获取字符串中的字符**

 ```
 let str = 'abc';
 //Longhand 
 str.charAt(2); // c//Shorthand 


Suggested change

str.charAt(2); // c//Shorthand

str.charAt(2); // c

//Shorthand

PassionPenguin · 2021-02-26T19:08:18Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md


-Shorthand for a Math exponent power function:
+指数幂函数的速记法:

 ```
 //longhandMath.pow(2,3); // 8//shorthand2**3 // 8


PassionPenguin · 2021-02-26T19:11:44Z

就是机译那篇文章也没有漏这么多啊... https://www.isolves.com/it/cxkf/yy/js/2021-01-11/35302.html = =

Ashira97 · 2021-03-05T07:02:26Z

@lsvih 校对认领~

lsvih · 2021-03-05T07:03:40Z

@Ashira97 好的~

Ashira97

@lsvih @SamYu2000 校对完啦 ~

Ashira97 · 2021-03-07T15:04:01Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md

-# 34 JavaScript Optimization Techniques to Know in 2021
-Optimize your JavaScript code using modern shorthand techniques, tips, and tricks
+# 2021 年需要了解的 34 个 JavaScript 优化技巧
+使用先进的速记技巧优化你的 JavaScript 代码


使用先进的速记技巧优化你的 JavaScript 代码
=> 使用现代语法中的缩写和语法糖优化你的 JavaScript 代码

Ashira97 · 2021-03-07T15:06:38Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md


-Here I am coming with a new series to cover **shorthand techniques** that help you to write more clean and optimized JavaScript Code. This is a **Cheat list for JavaScript** Coding you must know in 2021.
+在这里，我会介绍一些新的**速记方法**，它可以优化你的 JavaScript 代码，使代码更简洁。下面是一份 **JavaScript 偷懒法列表**，你需要了解一下。


速记方法 => 简写方法
下面是一份 JavaScript 偷懒法列表，你需要了解一下。 => 下面是一份你需要了解的 JavaScript 偷懒法列表。

Ashira97 · 2021-03-07T15:08:04Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md

@@ -29,9 +29,9 @@ We can store multiple values in the array and we can use the array includes meth
 }
 ```

-# **2. If true … else Shorthand**
+# **2. If … else 的速记法**


建议在"速记"和“简写”中选择一种说法并保持全文统一~

Ashira97 · 2021-03-07T15:08:44Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md


-This is a greater short cut for when we have if-else conditions that do not contain bigger logics inside. We can simply use the ternary operators to achieve this shorthand.
+当我们的 if-else 条件中的逻辑比较简单时，可以使用这种简洁的方式——三元条件运算符。


方式——三 => 方式 —— 三

Ashira97 · 2021-03-07T15:10:38Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md


 ```
 let test1 = undefined,
    test2 = test1 || '';console.log("undefined check", test2); // output will be ""
 ```

-Normal Value checks
+Normal Value checks对正常值的检查


Normal Value checks对正常值的检查 => 对正常值的检查

Ashira97 · 2021-03-07T15:21:49Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md


-When we are dealing with a multi-line string in code we can go for this function:
+When we are dealing with a multi-line string in code we can go for this function:当我们在代码中处理多行文本时，可以使用这样的技巧


还是没删除原文哈...

Ashira97 · 2021-03-07T15:22:42Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md


-When we do have an array of objects and we want to find the specific object based on the object properties find method is really useful.
+当我们需要在一个对象数组中按属性值查找特定对象时，find 方法很有用。


Ashira97 · 2021-03-07T15:26:24Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md

@@ -504,9 +504,9 @@ Math.floor(1.9) === 1 // true
 ~~1.9 === 1 // true
 ```

-# **31. Repeat a string multiple times**
+# **31. 把一个字符串重复输出多次**


原文似乎没有提到输出...
=>把一个字符串重复多次

Ashira97 · 2021-03-07T15:26:55Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md


-To repeat the same characters again and again we can use the for loop and add them in the same loop but what if we have a shorthand for this?
+我们可以使用 for 循环把一个字符串反复输出多次，那这种功能有没有速记法呢？


我们可以使用 for 循环把一个字符串反复输出多次
=>我们可以使用 for 循环把一个字符串重复多次

Ashira97 · 2021-03-07T15:29:09Z

article/2021/34-javascript-optimization-techniques-to-know-in-2021.md

结尾似乎缺了点什么？

如果发现译文存在错误或其他需要改进的地方，欢迎到掘金翻译计划对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。

cool-summer-021 · 2021-03-10T03:36:59Z

@lsvih 已发布 https://juejin.cn/post/6937828220033040415

cool-summer-021 and others added 30 commits September 1, 2020 16:24

Merge pull request #1 from xitu/master

409fa28

master

Python的优化 — 驻留机制

b25fc11

Python的优化 — 驻留机制

根据校对的意见修改完成

c20bc99

根据校对意见修改完成

92f8c24

Merge pull request #2 from xitu/master

17509cf

同步原项目的更新内容

Update optimization-in-python-interning.md

62b0bf6

Update optimization-in-python-interning.md

07f7654

Merge pull request #3 from xitu/master

9536184

同步原项目更新的内容

Python List 使用注意事项

bda4a3e

Python List 使用注意事项

根据校对意见完成修改

99d7468

根据校对意见完成修改

根据校对意见完成修改

d336f81

根据校对意见完成修改

Merge pull request #4 from xitu/master

a66f143

同步原仓库的更新

Merge pull request #5 from xitu/master

a67339c

更新

Merge pull request #6 from xitu/master

97ca333

同步更新的内容

根据校对意见修改完成

caf0c7b

根据校对意见修改完成

Revert

4228fc8

Update the-dos-and-don-ts-of-python-list-comprehension.md

1553ae1

为什么如今 Deno 正全面取代 Node.js

03415de

为什么如今 Deno 正全面取代 Node.js

删除多余内容

89a9ef3

删除多余内容

Revert

11950f7

Revert

d86cfb9

根据校对意见修改完成

663526a

根据校对意见修改完成

Merge pull request #7 from xitu/master

1c716a5

更新原仓库的内容

Merge pull request #8 from xitu/master

da6e38d

更新

Merge pull request #9 from xitu/master

86f01a6

更新

翻译完成

19c7711

翻译完成

翻译完成

c89b7cc

翻译完成

删除 Applications of Some of The Famous Algorithms译文

5401dec

根据校对意见修改完成

79157d1

格式问题修改完成

07b65fb

lsvih and others added 6 commits December 21, 2020 15:17

Revert

d91975c

Update why-deno-is-perfectly-ready-to-take-over-node-js-now.md

9cf11c8

Merge pull request #10 from xitu/master

1307664

与原仓库同步

Merge pull request #12 from xitu/master

5a4437f

更新

Merge pull request #14 from xitu/master

bea596c

更新

译文翻译完成

dda2d77

lsvih changed the title 更新 2021 年需要了解的 34 个 JavaScript 优化技巧 Feb 24, 2021

lsvih added 前端校对认领 labels Feb 24, 2021

PassionPenguin suggested changes Feb 26, 2021

View reviewed changes

lsvih added 正在校对 and removed 校对认领 labels Mar 5, 2021

Ashira97 reviewed Mar 7, 2021

View reviewed changes

根据校对意见完成修改

b718536

lsvih approved these changes Mar 10, 2021

View reviewed changes

lsvih merged commit 0b13873 into xitu:master Mar 10, 2021

lsvih added 翻译完成 and removed 正在校对 labels Mar 10, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

2021 年需要了解的 34 个 JavaScript 优化技巧 #8078

2021 年需要了解的 34 个 JavaScript 优化技巧 #8078

cool-summer-021 commented Feb 24, 2021 •

edited by lsvih

Loading

PassionPenguin left a comment •

edited

Loading

PassionPenguin Feb 26, 2021

PassionPenguin Feb 26, 2021

PassionPenguin Feb 26, 2021

PassionPenguin Feb 26, 2021

PassionPenguin Feb 26, 2021

PassionPenguin Feb 26, 2021

PassionPenguin Feb 26, 2021

PassionPenguin Feb 26, 2021

PassionPenguin Feb 26, 2021

PassionPenguin Feb 26, 2021

PassionPenguin commented Feb 26, 2021

Ashira97 commented Mar 5, 2021

lsvih commented Mar 5, 2021

Ashira97 left a comment

Ashira97 Mar 7, 2021

Ashira97 Mar 7, 2021

Ashira97 Mar 7, 2021

Ashira97 Mar 7, 2021

Ashira97 Mar 7, 2021

Ashira97 Mar 7, 2021

Ashira97 Mar 7, 2021

Ashira97 Mar 7, 2021

Ashira97 Mar 7, 2021

Ashira97 Mar 7, 2021

cool-summer-021 commented Mar 10, 2021

	使用先进的速记技巧优化你的 JavaScript 代码

	> 使用先进的速记技巧优化你的 JavaScript 代码


		The life of a developer is always learning new things and keeping up with the changes shouldn’t be harder than it already is, and my motive is to introduce all the JavaScript best practices such as shorthand and features which we must know as a frontend developer to make our life easier in 2021.
		开发者需要持续学习新技术，跟以前相比，如今跟随技术变化是比较容易做到的，我写这篇文章的目的是介绍诸如速写法之类的 JavaScript 最佳实践和其中的特性，这些都是我们作为一名前端开发人员必须了解的，它会给我们的工作生活带来便利。

	开发者需要持续学习新技术，跟以前相比，如今跟随技术变化是比较容易做到的，我写这篇文章的目的是介绍诸如速写法之类的 JavaScript 最佳实践和其中的特性，这些都是我们作为一名前端开发人员必须了解的，它会给我们的工作生活带来便利。
	开发者需要持续学习新技术，跟以前相比，如今跟随技术变化是比较容易做到的。我写这篇文章的目的是介绍诸如速写法之类的 JavaScript 最佳实践和其中的特性，这些都是我们作为一名前端开发人员必须了解的，因为它们会给我们的工作生活带来便利。

	![https://miro.medium.com/max/2400/0K49jVcTGrpgm_5mX.png](https://miro.medium.com/max/2400/0K49jVcTGrpgm_5mX.png)
	![帖图](https://miro.medium.com/max/2400/0*K49jVcTGrpgm_5mX.png)

	可能你做了多年的 JavaScript 开发工作，但有时候对一些最新的技术不了解，这些新技术可能有助于某些问题的解决，因此你需要编写额外的代码。这些新技术也能帮助你进行代码优化。此外，如果你今年需要为 JavaScript 面试作准备，本文也是一份实用的参考资料。
	可能你已经进行了多年的 JavaScript 开发工作，但有时候你还是会对一些最新的技术不那么了解，而这些新技术可能有助于某些问题的解决而不需要你去编写更多的代码。有时候，这些新技术也能帮助你进行代码优化。此外，如果你今年需要为 JavaScript 面试作准备，本文也是一份实用的参考资料。


		# 1. If with multiple conditions
		# 1. 含有多个条件的 if 语句

	# 1. 含有多个条件的 if 语句
	## 1. 含有多个条件的 if 语句

	注意：如果事先知道目标字符在字符串中的索引，我们可以直接使用该索引值。如果索引值不确定，运行时就有可能抛出 undefined。
	// 注意：如果事先知道目标字符在字符串中的索引，我们可以直接使用该索引值。如果索引值不确定，运行时就有可能抛出 undefined。


		Here I am coming with a new series to cover shorthand techniques that help you to write more clean and optimized JavaScript Code. This is a Cheat list for JavaScript Coding you must know in 2021.
		在这里，我会介绍一些新的速记方法，它可以优化你的 JavaScript 代码，使代码更简洁。下面是一份 JavaScript 偷懒法列表，你需要了解一下。


		This is a greater short cut for when we have if-else conditions that do not contain bigger logics inside. We can simply use the ternary operators to achieve this shorthand.
		当我们的 if-else 条件中的逻辑比较简单时，可以使用这种简洁的方式——三元条件运算符。


		When we are dealing with a multi-line string in code we can go for this function:
		When we are dealing with a multi-line string in code we can go for this function:当我们在代码中处理多行文本时，可以使用这样的技巧


		When we do have an array of objects and we want to find the specific object based on the object properties find method is really useful.
		当我们需要在一个对象数组中按属性值查找特定对象时，find 方法很有用。


		To repeat the same characters again and again we can use the for loop and add them in the same loop but what if we have a shorthand for this?
		我们可以使用 for 循环把一个字符串反复输出多次，那这种功能有没有速记法呢？

2021 年需要了解的 34 个 JavaScript 优化技巧 #8078

2021 年需要了解的 34 个 JavaScript 优化技巧 #8078

Conversation

cool-summer-021 commented Feb 24, 2021 • edited by lsvih Loading

PassionPenguin left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PassionPenguin commented Feb 26, 2021

Ashira97 commented Mar 5, 2021

lsvih commented Mar 5, 2021

Ashira97 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cool-summer-021 commented Mar 10, 2021

cool-summer-021 commented Feb 24, 2021 •

edited by lsvih

Loading

PassionPenguin left a comment •

edited

Loading