面试题：JavaScript类数组对象的基础转换

Question

请简述如何将一个类数组对象（如arguments对象）转换为真正的数组，至少说出两种方法，并解释每种方法在不同浏览器环境下可能存在的兼容性问题。

Answer 1

方法一：使用 Array.from()

1. 实现方式：

   const args = {0: 'a', 1: 'b', 2: 'c', length: 3};
   const arr = Array.from(args);
   console.log(arr); // ['a', 'b', 'c']
   

2. 兼容性问题：
   • Array.from() 是ES6新增的方法。在较旧的浏览器（如IE系列）中不支持。可以通过引入Polyfill来解决兼容性问题，例如在项目中引入Babel，Babel会自动为不支持的环境添加 Array.from() 的Polyfill代码。

方法二：使用 [].slice.call()

1. 实现方式：

   const args = {0: 'a', 1: 'b', 2: 'c', length: 3};
   const arr = [].slice.call(args);
   console.log(arr); // ['a', 'b', 'c']
   

2. 兼容性问题：
   • 这种方法兼容性较好，几乎所有现代浏览器以及IE8及以上版本都支持。slice 方法在JavaScript早期就已经存在，并且是数组原型链上的标准方法。通过 call 改变 slice 方法的 this 指向为类数组对象，从而可以将类数组对象转换为数组。但在IE8以下版本中，由于对 call 方法在某些类数组对象上的实现可能存在差异，可能会导致兼容性问题，但这种情况较为罕见，因为IE8以下浏览器已经很少使用。

方法三：使用展开运算符 ...

1. 实现方式：

   const args = {0: 'a', 1: 'b', 2: 'c', length: 3};
   const arr = [...args];
   console.log(arr); // ['a', 'b', 'c']
   

2. 兼容性问题：
   • 展开运算符 ... 是ES6新增的特性。与 Array.from() 类似，在较旧的浏览器（如IE系列）中不支持。同样可以通过引入Babel等工具来添加Polyfill以解决兼容性问题。