揭秘JavaScript性能：8个你可能不知道的秘密

发表时间: 2020-01-25 17:00

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

图源：www.szhulian.com

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

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

1. 数组构造器

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

const arr = [90,88,77]

可以使用数组构造器。

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

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

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

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

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

因此，

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

等于:

const arr = [90, 88, 77]

2. in运算符

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

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

const o = {
prop: 90
}l("prop" in o) // true

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

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

如果检查未定义的属性，

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

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

你学会了吗？

图源：www.hexacta.com

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

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

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

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

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

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

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

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

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

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

4. 函数构造器

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

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

const mul = (a, b) => a * b
// OR
function mul(a, b) {
return a * b
}
// OR
const mul = function(a, b) {
return a * b
}

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

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

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

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

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

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

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

图源：www.pianshen.com

5. 标记文字

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

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

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

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

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

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

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

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

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

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

6. with关键字

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

如下所示:

with(expression)
statement// ORwith(expression) {
statement
statement
...
}

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

const a = 45
let b = 8
var f = 909with(f) {
l(f, b, a)
}

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

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

with(f) {
l(f, b, a)
let withi = 20
}l(withi)

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

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

7. 逗号操作符

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

let oo = (99, 88, 77)
l(oo) // 77

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

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

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

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

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

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

8. 解构数组

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

const arr = [99, 88, 77]

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

arr[1]

就像处理对象一样:

let o = {
prop: 99
}
o[prop] // 99

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

const {prop} = o
prop // 99

也可以这样处理数组：

const arr = [99, 88, 77]
const { 1: secA } = arr
secA // 88
const { 0: firstA, 1: secA, 2: thirdA }= arr
firstA // 99
secA // 88
thirdA // 77

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

const arr = [99, 88, 77]

等于:

const arr = {
0: 99,
1: 88,
2: 77,
length: 3
}

图源：www.hxrwx.com

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

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

独乐乐不如众乐乐~

留言点赞关注

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

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