2020-12-08

web前端学习总结5：在原生JS中自定义封装一个将伪数组转为正式数组的方法toArray

1. 今天突然发现一个问题，对于平常学习web前端遇到的比较常见的问题：如何将DOM操作的getElementsByTagName等方式获取的对象伪数组转为正式的数组，从而能正常使用数组的push()、sort()等方法呢？
2. 我的思考：或许通过最近学习的prototype原型与对象的方式可以实现一个专门用于将伪数组转为正式数组的方法，而且创建好之后其他大部分对象都能使用。
3. 开始动手：在这之前，得细细思考一下应该给哪个高级对象的prototype添加这种方法呢？或许Object最合适，因为“万物皆对象”；
4. 先用getElementsByTagName等系列方法获得的DOM元素试验：
   
5. 进一步试验字符串str1：

6. HTML DOM元素和JavaScript对象中还有很多其他伪数组的类型数据：

7. 方法二：利用ECMAScript6的语法：rest运算符/扩展运算符，点点点"…"语法：
（1）普通函数形式书写：


（2）箭头函数形式书写：**
1）可以将点点点"…" 运算符看成是拆解为一个个元素来分别输出（多变多），
2）而一整个放入就是不用拆解，直接将一整个合成为一个元素。（多变一）**
① 正确形式（一）：


② 正确形式（二）：


③ 正确书写形式（三）：

④正确书写形式（四）：此方法是将整个DOM元素集合解析成一个元素
（多变一）！！！

（3）错误书写形式：
① 错误书写形式（一）：

② 错误书写形式（二）：
1）形式参数：arr，只有一个，（没用点点点"…"）；
2）传入参数：…rr，有多个参数传入，就不符合参数对应传入了，当然报错。

③ 错误书写形式（三）：箭头函数没有arguments内置对象！！！

9. 当然，当还有其他功能需求与改进时，比如将方法名修改为容易记忆的方法名，或者在方法内部进一步优化如添加其他功能，这又是我的web前端学习的一个小知识，一次学习小记录。