请选择 进入手机版 | 继续访问电脑版

#楼主# 2020-3-29

跳转到指定楼层

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

8个鲜为人知的JavaScript性能,你知道吗?-1.jpg

图源: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] // 90arr[1] // 88arr[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对象中不能作为属性使用。




你学会了吗?




8个鲜为人知的JavaScript性能,你知道吗?-2.jpg

图源: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 // 3arr.length = 1arr // [ 99 ]

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




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



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

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

8个鲜为人知的JavaScript性能,你知道吗?-3.jpg

图源: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 !!

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

8个鲜为人知的JavaScript性能,你知道吗?-4.jpg

8个鲜为人知的JavaScript性能,你知道吗?-5.jpg

6. with关键字




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




如下所示:



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

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



    const a = 45let b = 8var 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} = oprop // 99

也可以这样处理数组:



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

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



    const arr = [99, 88, 77]

等于:



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

8个鲜为人知的JavaScript性能,你知道吗?-6.jpg

图源:www.hxrwx.com




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




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




独乐乐不如众乐乐~




8个鲜为人知的JavaScript性能,你知道吗?-7.jpg

8个鲜为人知的JavaScript性能,你知道吗?-8.jpg

留言点赞关注

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

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

原文地址:https://www.toutiao.com/a6785686529957167628/
转播转播 分享淘帖
回复

使用道具

0

主题

80

帖子

170

积分

注册会员

Rank: 2

积分
170
小猪散步 发表于 2020-3-29 10:07:34
看了第一个我就笑了,明明字面量是用来简化构造器方式的,到你这反而构造器变得比字面量实用了[黑线]
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则