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

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

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

图源:www.szhulian.com


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对象中不能作为属性使用。


你学会了吗?


图源:www.hexacta.com


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. arr.length = 5
  6. arr // [ 90, <4 empty items> ]

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


4. 函数构造器


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


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


  1. const mul = (a, b) => a * b

  2. // OR

  3. function mul(a, b) {
  4. return a * b
  5. }

  6. // OR

  7. const mul = function(a, b) {
  8. return a * b
  9. }

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


  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. l(mul(7, 8)) // 56

图源:www.pianshen.com


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. const { 1: secA } = arr
  3. secA // 88

  4. const { 0: firstA, 1: secA, 2: thirdA }= arr

  5. firstA // 99
  6. secA // 88
  7. thirdA // 77

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


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

等于:


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

图源:www.hxrwx.com


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


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


独乐乐不如众乐乐~


留言点赞关注

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

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