【前端基础系列】slice方法将类数组转换数组实现原理

阅读目录

• 问题描述
• 类数组对象
• 转换过程
• 源码实现
• 参考

回到顶部

问题描述

在日常编码中会遇到将类数组对象转换为数组的问题，其中常用到的一种方式使用Array.prototype.slice()方法。

回到顶部

类数组对象

所谓的类数组对象，JavaScript对它们定义为：它们看起来很像数组，只是具有部分和数组相同特性：

• 拥有length属性
• 元素保存在对象中，可以通过索引访问
  但是没有数组的其他方法，例如：push、slice、indexOf等。

回到顶部

转换过程

例如：

var foo = {
    0: 'Java',
    1: 'Python',
    2: 'JavaScript',
    length: 3
};
// 因为foo对象本身并没有slice方法，所以通过call调用
var arr = Array.prototype.slice.call(foo); // [‘Java’,’Python’,’JavaScript’]

那么问题来了，为什么slice方法可以将对象转换为数组？最简单的方式就是查看源码实现。

回到顶部

源码实现

可以查看V8引擎中的Array内部方法实现

function ArraySlice(start, end) { 

CHECK_OBJECT_COERCIBLE(this, "Array.prototype.slice"); 
var array = TO_OBJECT(this); 
var len = TO_LENGTH(array.length); 
var start_i = TO_INTEGER(start); 
var end_i = len; 
if (!IS_UNDEFINED(end)) end_i = TO_INTEGER(end); 
if (start_i < 0) { 
start_i += len; 
if (start_i < 0) start_i = 0; 
} else { 
if (start_i > len) start_i = len; 
} 
if (end_i < 0) { 
end_i += len; 
if (end_i < 0) end_i = 0; 
} else { 
if (end_i > len) end_i = len; 
} 
var result = ArraySpeciesCreate(array, MaxSimple(end_i - start_i, 0)); // 先转换为数组
if (end_i < start_i) return result; // 如果没有任何参数，直接返回数组
if (UseSparseVariant(array, len, IS_ARRAY(array), end_i - start_i)) { 
%NormalizeElements(array); 
if (IS_ARRAY(result)) %NormalizeElements(result); 
SparseSlice(array, start_i, end_i - start_i, len, result); 
} else { 
SimpleSlice(array, start_i, end_i - start_i, len, result); 
} 
result.length = end_i - start_i; 
return result; 
} 

由以上代码可以看出，当没有输入参数的时候，会创建一个新数组，然后把当前数组的所有元素扔进去，最后返回这个新数组。

回到顶部

参考

V8的array实现