遠位先端#2 - ベストプラクティスの配列に引数を変換します

この資料の同期の単純な時間と空間JSCON -技術のブログは、読むためにクリック

ビデオを説明します

説明するテキスト

1、結論の話

配列に引数を変換する多くの方法が最適な方法は、その後、ありますか?

結論について話をする時間と、ここでみんなのを保存するには:あなたは配列に引数を変換したい場合は、最良の方法は、使用することです残りの(使用してすなわち、変換のためのモードパラメータ...拡散演算子を)、のような:

function test(…args) {
   console.log(args)
}
test(1,2,3); // [1,2,3]

理由:性能が最適な読みやすさも非常に良いです。

理由を知りたい、私たちは下を見続けることができます。

2、分析

argumentsすべてのオブジェクトはローカル変数(非矢印)の機能が利用可能であり、それはいくつかの記事をに翻訳されることを意味し、「オブジェクトの配列のように」ある「アレイ状」オブジェクト、あるある「疑似配列オブジェクト。」(インデックス値に従って有するlength特性を必ずしも有していないpushconcatおよび他の配列方法、具体的に記事を参照して、ダミーアレイ(ArrayLike)コンテンツ)

!>注:矢印の機能は存在しないargumentsオブジェクト

現在の先端には、引数のオブジェクト(この講義の内容の具体的な知識が基準記事の最後に読むことができます)、それは配列に変換するときのベストプラクティスに焦点を当てたこの講義の知的内容について長々と話すことではありません。

、多くの技術記事を参照しarguments4つの基本的な方法の配列にオブジェクトを:

  1. 使用のArray.prototype.slice.call(arguments)変換、または同等の方法を用いて[].slice.call(arguments)
  2. 使用Array.from(arguments)変換
  3. 使用forサイクルにする一つ一つargumentsの新しい配列にオブジェクトの内容をコピーします
  4. 変換を使用してES6の残りのパラメータlet a = (...args) => args

記事のほとんどは、唯一のこれまでのところ、ここで言及されている、私たちはどのような最適な方法を介して議論を継続しませんでした。

そして、私たちはより良い、そのように、この性能を定量化するためのベンチマーク(ベンチマーク)の方法を使用します。

3、パフォーマンステスト

で「:準備ができて新しいV8次期リリース、ノードの性能が変化しているという結論にテキストを、」:

結果

私は私のテストコードがスローテキストで述べた送信jsPerf(テストアドレス:サイト上https://jsperf.com/rest-arguments-slice)、結果は次の通りです:

ベンチマーク結果

より良い性能の図より高い値を表す、上記の二つの結果を図に一貫性の反射しました:

  1. 最高ES6を使用して、残りのパラメータ変換性能
  2. 第二に、使用forループモード変換
  3. [].slice ウェイ性能が弱いです
  4. 最悪は使用することですArray.from変換

性能試験は、テストコードでは、ローカルに実行することができる、ここで取得した。からソース公式のベンチマーク例

あなたがしたいのであれば、arguments配列に変換し、道ES6のパラメータ変換残りを使用する必要がありますは間違いありません。

より優れた性能に加えて、rest直接使用に対するパラメータの使用argumentsも、以下の利点:

  1. アロー機能と正常な機能を使用することができます。
  2. より柔軟な、受信パラメータの数は、完全にカスタマイズ可能です。
  3. 読みやすく、パラメータは関数の括弧ではなく、突然の引数で定義されている、非常に厄介に見えました。

4、Q&A

ここではいくつかの共通の疑問への私の単純な答えです:

Q:なぜ私がしなければならないのarguments配列にオブジェクトを変換しますか?

A: 答案也简单,因为 Array 实例提供了很多数组方法,比如 .push.concat 等,提供了更多数据操作方式,归根到底,转换成数组就是为了方便操作数据。

Q: 既然经常要将 arguments 转换成数组,为什么最初不把 arguments 设计成数组格式呢?

A: 按照文章 《JavaScript arguments 对象全面介绍》所言, arguments 在语言的早期就引入了,当时的 Array 对象具有 4 个方法: toStringjoinreversesortarguments 继承于 Object 的很大原因是不需要这四个方法。(当时设计的人也不知道后续的发展会对 arguments 有这方面的强需求...变化无处不在..)

Q: 为什么需要 Array-Like 对象(伪数组对象)的存在?

A: 前面说了,转换成数组也是为了提供更多数据操作方式;其实 Array-Like 对象的存在,也是为了给数据提供更多的操作的可能,因为可以在对象上挂载很多 自定义 的操作方法,使用起来灵活度会很高。

Q: 上述讨论的数组转换结果,是否也适应于其他 “伪数组对象”?

A: 因为 arguments 也是“伪数组对象”,不难推而广之,上面讨论的数组转换的方式都可以应用在“伪数组对象”上;至于每个转换方法的性能如何,我因为没有单独去测试过,所以也不能妄下定论,大家可以自己写 benchmark 去测试一下(个人猜测应该结论也差不多)。

5、参考文章


关于 “前端Tips专栏”

前端Tips”专栏,隶属于是 JSCON 专栏系列,设计初衷是快速获取前端小技巧知识,取材广泛,涵盖前端编程诸多领域。设计初衷是快速消费类知识,所以每个 tips 阅读耗时大约 5 分钟。为方便读者在不同场合阅读,每篇 tips 配有视频音频文字,挑自己喜欢方便的就行。

有两种方式获取历史 tips:

① 在公众号内回 "tips" +"期号" 就可以。例如:回复 “tips25” 即可获取第25期 tips
② 前往网站:https://boycgit.github.io/fe-program-tips里面提供了搜索功能

あなたはもっと掘るのを待って、私の知識のコラムの懸念へようこそ

個人マイクロチャンネル公衆数

おすすめ

転載: www.cnblogs.com/boychenney/p/12132350.html