全文共3482字，预计学习时长10分钟

JavaScript中有很多神奇且实用的性能，常常会被人忽视。但，金子始终会发光。今天，小芯就当一回“掘金者”，为大家挖一挖那些鲜为人知却超实用的JavaScript性能。

注意收藏好，随时温习哟~

1. 数组构造器

不用传统的方法就可以定义一个数组。

1. const arr = [90,88,77]

可以使用数组构造器。

1. const arr = new Array(90, 88,77)

传给构造器的参数排列将构成它们索引的基础。

第一个参数90将在索引0处，第二个参数88将在索引1处，最后一个参数77将在索引2处。

1. arr[0] // 90
2. arr[1] // 88
3. arr[2] // 77

使用new Array(...)与使用数组文字是一样的。

因此，

1. const arr = new Array(90, 88, 77)

等于:

1. const arr = [90, 88, 77]

2. in运算符

in是一个关键字，用于检查对象中是否存在属性。它一直用于for..in循环中，却没有人意识到它的身份。

如果对象存在属性，in将返回true，否则将返回false。

1. const o = {
2. prop: 90
3. }l("prop" in o) // true

此时，in是独立使用的，没有for...in循环。

它将检查“prop”是否为o对象中的属性，并将返回true，因为已经在o中定义了“prop”。

如果检查未定义的属性，

1. const o = {
2. prop: 90
3. }l("prop1" in o) // false

则返回false，因为“prop1”在o对象中不能作为属性使用。

你学会了吗？

3. 用length属性减少数组的content

对length属性的操作可以减少数组。

数组中的length属性代表数组中的元素数。

1. const arr = [99, 88, 77]
2. arr.length // 3

减少length属性将使JS engine减少元素，使其等于length属性的值。

1. const arr = [99, 88, 77]
2. arr.length // 3
3. arr.length = 1
4. arr // [ 99 ]

arr的length属性更改为1，因此从右边开始减少元素，使其等于length属性的值。

如果增加length属性，JS engine将添加元素（未定义的元素），使数组中的元素数量与length属性的值一致。

1. const arr = [99, 88, 77]
2. arr.length // 3
3. arr.length = 1
4. arr // [ 99 ]
5. 
   
6. arr.length = 5
7. arr // [ 90, <4 empty items> ]

arr中的元素只有一个，然后将长度增加到5个，因此又增加了4个条目，使content在数量上变为5个。

4. 函数构造器

可以使用函数构造器定义一个函数。

换言之，在JS中，可以这样定义函数:

1. const mul = (a, b) => a * b
2. 
   
3. // OR
4. 
   
5. function mul(a, b) {
6. return a * b
7. }
8. 
   
9. // OR
10. 
    
11. const mul = function(a, b) {
12. return a * b
13. }

仍然可以使用以下函数来执行此操作:

1. const mul = new Function("a","b", "return a * b")

传给函数的参数构成函数的参数和本体。变量mul成为函数名。

最后一个参数将是函数的本体，而最后一个参数之前的参数将成为函数的参数。

在mul中，参数“a”和“b”是函数将接收的参数，参数“return a*b”是函数的本体，它将“a”和“b”相乘并返回结果。

要调用该函数，可以编写带有括号“mul(…)”的变量，并将参数传入:

1. const mul = newFunction("a", "b", "return a * b")
2. 
   
3. l(mul(7, 8)) // 56

5. 标记文字

1. taggingThis`Hey!!, I'm ${name} !!`

使用React中的样式化组件时，就会用到标记文字。

标记文字加强了对文字解析的控制，允许使用一个函数解析模板文本。

1. taggingThis`Hey!!, I'm ${name} !!`

taggingThis就是一个函数。tag函数的第一个参数包含一组字符串值，其余参数则与表达式相关。

1. function taggingThis(strings,...vals) {
2. //...
3. }
4. taggingThis`Hey!!, I'm ${name} !!`

strings参数将保留["Hey!!, I'm ", ' !!' ]，其余参数则传递到数组vals[ 'Nnamdi' ]中。

在taggingThis函数中，可以控制字符串并返回不同的结果。

1. function taggingThis(strings,...vals) {
2. return strings[0] + vals[0] +strings[1]
3. }
4. const name = "Nnamdi"
5. taggingThis `Hey!!, I'm ${name} !!` //Hey!!, I'm Nnamdi !!

带有样式化组件的标记文字:

6. with关键字

with是JS中的关键字，用于扩展statement的作用域链。

如下所示:

1. with(expression)
2. statement// ORwith(expression) {
3. statement
4. statement
5. ...
6. }

评估expression并围绕表达式创建作用域。括号中可见with statement的表达式和父范围。

1. const a = 45
2. let b = 8
3. var f = 909with(f) {
4. l(f, b, a)
5. }

作用域链中包含with关键字以及f。f和with关键字块之外的其他变量将在with关键字块本体中可见。

注意，用with关键字块标示的let和const变量只在块内可见，在with关键字块外不可见。

1. with(f) {
2. l(f, b, a)
3. let withi = 20
4. }l(withi)

尝试访问withi将引发ReferenceError，因为withi变量仅存在于with关键字块中。

虽然with很不错，但建议避免使用。

7. 逗号操作符

“,”是分离表达式并返回链中最后一个表达式的运算符。

1. let oo = (99, 88, 77)
2. l(oo) // 77

99、88和77为三个主要表达式。所有的表达式都将接受评估，最后一个分配给oo。

这一点可在循环中得到证实:

1. for(let i = 0, ii = 1; i< 10;i++, ii--) { ... }

如果想要编写简短的lambda函数，这就派上了用场:

1. const lb = (a, b, arr) =>(arr.push(a*b), a*b)

这里有两个statement，第一个是将乘法结果推送到arr数组，第二个是把a和b相乘。第二个结果将返回给调用方。

8. 解构数组

可以通过使用元素的索引号来解构数组中的元素。

1. const arr = [99, 88, 77]

元素99、88、77具有索引0、1、2。要从arr数组获得元素99，可以将它作为属性传给arr，

arr[1]

就像处理对象一样:

1. let o = {
2. prop: 99
3. }
4. o[prop] // 99

可以像这样从o中解构prop:

1. const {prop} = o
2. prop // 99

也可以这样处理数组：

1. const arr = [99, 88, 77]
2. 
   
3. const { 1: secA } = arr
4. secA // 88
5. 
   
6. const { 0: firstA, 1: secA, 2: thirdA }= arr
7. 
   
8. firstA // 99
9. secA // 88
10. thirdA // 77

用索引数来提取元素。索引是定义数组中元素位置的属性。所以，

1. const arr = [99, 88, 77]

等于:

1. const arr = {
2. 0: 99,
3. 1: 88,
4. 2: 77,
5. length: 3
6. }

JavaScript中有这么多奇妙的性能，当然除了这8种还有很多其它我们没有提到的，并且我们相信未来JavaScript会开发更多性能，令人期待。

最后，如果你也有挖掘到JavaScript中罕为人知的性能，记得在评论区分享哟~

独乐乐不如众乐乐~

留言点赞关注

我们一起分享AI学习与发展的干货

如转载，请后台留言，遵守转载规范