Distal Tips # 2 - to convert arguments to the best practices Array

This article synchronization from simple time and space JSCON - technology blog, click to read

Video explain

Text to explain

1, talk about the conclusion

There are many ways to convert arguments into an array, then which way is best?

To save time and everybody's here to talk about the conclusion: if you want to convert arguments into an array, the best way is to use a rest mode parameters for the conversion (ie, using ...spread operators), such as:

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

The reason: the performance is optimal readability is also very good.

Want to know why, we can continue to look down.

2, Analysis

argumentsAll objects are local variables (non-arrow) functions are available, it is a "Array-Like" object, that is "like an array of objects" means that some articles will be translated into "pseudo-array object." (According to the index value, having lengthproperties, but not necessarily have push, concatand other array methods, specifically refer to articles dummy array (ArrayLike) content)

!> Note: The arrow function does not exist in argumentsthe object

The current tip is not to speak at length about the intellectual content of the arguments object (specific knowledge of the content of this lecture can be read at the end of the reference article), this lecture that focused on best practices when it converts into an array.

Browse the many technical articles, the argumentsobject into an array of four basic ways:

1. Use Array.prototype.slice.call(arguments)conversion, or using an equivalent method [].slice.call(arguments);
2. Use Array.from(arguments)conversion
3. Use forcycle one by one to argumentscopy the contents of the object to the new array
4. ES6 rest parameter using the conversion let a = (...args) => args;

Most of the article is only mentioned here so far, we did not continue the discussion over what the optimal way.

Then we use the benchmark (Benchmark) way to quantify this performance better that way.

3, performance testing

In the " ready: new V8 upcoming release, Node performance is changing ," the text to the conclusion:

I send my test code mentioned in the text thrown jsPerfon the site (test address: https://jsperf.com/rest-arguments-slice ), results are as follows:

FIG higher value representative of better performance, the results of the above two reflected FIG consistent:

1. rest parameter conversion performance by using the best ES6
2. Secondly, the use of forloop mode conversion
3. [].slice Way performance is weak
4. The worst is to use Array.fromconversion

Performance test may also be performed locally, in the test code here acquired; source from benchmark example of official

So, if you want to argumentsconvert into an array, then there is no doubt should use parameter conversion rest of the way ES6.

In addition to the better performance, restthe use of parameters with respect to the direct use argumentsalso the following advantages:

1. Arrow function and a normal function can be used.
2. More flexible, the number of reception parameters is fully customizable.
3. More readable, parameters are defined in the function parentheses, not a sudden arguments, looked very awkward.

4、Q & A

Here's my simple answers to some common doubts:

Q: Why do I need to argumentsconvert objects into an array?

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

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

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

Q: 为什么需要 Array-Like 对象（伪数组对象）的存在？

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

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

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

5、参考文章

• 做好准备：新的V8即将发布，Node 的性能正在改变：官方译文，V8 团队新的 JIT 编译器Turbofan 中很多以往的性能问题都获得了解决，推荐阅读；
• V8 性能优化杀手：这篇文章过时了，文中性能优化建议是针对 V8 上一代编译器；之所以还陈列在这儿，是为了方便和上一条参考文章做对比阅读，加深对新 V8 引擎优化的了解。
• arguments is special：arguments 这个变量是特殊的，使用的时候需要多加注意
• JavaScript arguments 对象全面介绍：非常全面的介绍，介绍了它的来历、注意事项
• JavaScript深入之类数组对象与arguments: 本文详细讲解了类数组和 arguments 对象
• 伪数组(ArrayLike)：简要介绍了类数组对象的概念和转换；
• JavaScript: arguments leak var array.slice.call?： v8 无法优化 slice 方法的原因，是因为该方法会保持对 arguments 对象的引用，无法将其优化成 stack 变量。
• Array-Like Objects and Generic Methods：犀牛书中对 “伪数组” 概念的解释
• Arraylike的7种实现: 罗列了原生的伪数组列表，同时说明了伪数组出现的缘故 —— 它的出现为一组数据的行为（函数）扩展提供了基础
• JavaScript类数组对象参考：JS 中有哪些伪数组对象？本文给了非常详细的讲解
• 如何创建伪数组：stackoverflow 上关于如何创建伪数组的讨论
• JS Array From an Array-Like Object：本文罗列了将 Array-Like 对象转换成数组的方法，基本就是和本 tip 中罗列的方式差不多
• ES6 系列之箭头函数：本篇重点比较一下箭头函数与普通函数，比较全面
• 详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景：本文这篇文章中还讲了很多 rest 参数的优点

---

关于 “前端Tips专栏”

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

有两种方式获取历史 tips：

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

Welcome to the concern of my knowledge column, waiting for you to dig more