观V8源码中的array.js,解析 Array.prototype.slice为什么能将类数组对象转为真正的数组?

在官方的解释中,如[mdn]

The slice() method returns a shallow copy of a
portion of an array into a new array object.

简单的说就是根据参数,返回数组的一部分的copy。所以了解其内部实现才能确定它是如何工作的。所以查看V8源码中的Array.js    
可以看到如下的代码:


一、方法 
ArraySlice,源码地址,直接添加到Array.prototype上的“入口”,内部经过参数、类型等等的判断处理,分支为SmartSlice和SimpleSlice处理。


function ArraySlice(start, end) {
CHECK_OBJECT_COERCIBLE(this, "Array.prototype.slice");
var len = TO_UINT32(this.length);
var start_i = TO_INTEGER(start);
var end_i = len;

if (!IS_UNDEFINED(end)) end_i = TO_INTEGER(end);//如果没传入end,end=length,即slice第二个参数可选。

if (start_i < 0) {
start_i += len;//参数1的A分支 处理负值,+= length。如:为-1,则start从倒数第一个开始,负值绝对值小于length
if (start_i < 0) start_i = 0;//参数1的A.a分支 若仍未负值,则等于0。 即处理负值绝对值大于length [1,2,3].slice(-4)。
} else {
if (start_i > len) start_i = len;//参数1的B分支 参数大于length,则等于length,处理 [1,2,3].slice(5),返回[]
}

if (end_i < 0) {
end_i += len;//参数2的A分支 处理负值,+= length。如:为-1,则start从倒数第一个开始,负值绝对值小于length
if (end_i < 0) end_i = 0;//参数2的A.a分支 若仍未负值,则等于0。 即处理负值绝对值大于length [1,2,3].slice(1,-4)。
} else {
if (end_i > len) end_i = len;//参数2的B分支 参数大于length,则等于length,处理 [1,2,3].slice(1,5) == [1,2,3].slice(1) ==
}
//最终返回结果的值。可以看到这里会返回一个新的真正的数组(ps:slice的好基友splice是修改原数组的。)
var result = [];
// 处理分支1 如果经历了上面代码的层层检查设置,结束值小于开始值,那么直接返回空数组,处理 [1,2,3].slice(2,1)
if (end_i < start_i) return result;
// 处理分支2 如果是数组 && !%IsObserved(this) && 结束大于1000 && %EstimateNumberOfElements(this) < 结束值 ,那么使用方法SmartSlice来处理
if (IS_ARRAY(this) &&
!%IsObserved(this) &&
(end_i > 1000) &&
(%EstimateNumberOfElements(this) < end_i)) {
SmartSlice(this, start_i, end_i - start_i, len, result);
} else {
// 处理分支2 调用SimpleSlice 处理。
SimpleSlice(this, start_i, end_i - start_i, len, result);
}
//设置length,似乎多余?还是v8中的数组[] 需指定length。 此处待探寻。。。
result.length = end_i - start_i;

return result;
}
/*
* ......
*/
// Set up non-enumerable functions of the Array.prototype object and
// set their names.
// Manipulate the length of some of the functions to meet
// expectations set by ECMA-262 or Mozilla.
InstallFunctions($Array.prototype, DONT_ENUM, $Array(
//......
"slice", getFunction("slice", ArraySlice, 2)
//......
));

二、  SmartSlice,源码地址,字面意思是智能的slice。SimpleSlice,源码地址,简单的slice,不管他们的判断逻辑,可以看到,所有的slice处理,都是for循环,操作新建的result空数组的。也就是说,正因为返回值是新建的真实的数组,所有Array.prototype.slice.call(ArrayLike)
才会将类数组转化为真实的数组。


 1 // This function implements the optimized splice implementation that can use
2 // special array operations to handle sparse arrays in a sensible fashion.
3 /**
4 * 源码:https://github.com/v8/v8/blob/master/src/array.js#L196-L221
5 * @param {Array} array 具体需要艹做的数组
6 * @param {Number} start_i 参数1,从何处开始
7 * @param {Number} del_count 需要取到的长度。 参数2 - 参数1,
8 * @param {Number} len 数组长度
9 * @param {Array} deleted_elements 对于slice来说,是选择的那部分数组,对于splice来说,是删除的那些数组。
10 * @returns {undefined} 此处直接艹做 传入的reuslt,即可反馈到ArraySlice作用域的result,与真实的浏览器环境不一样!。
11 */
12 function SmartSlice(array, start_i, del_count, len, deleted_elements) {
13 // Move deleted elements to a new array (the return value from splice).
14 // 猜测? 获取start_i + del_count的key。[1,2,3,4].slice(1,2) 返回 [1,2,3,4][1+2]索引3 ,而当tart_i + del_count大于length时候返回整个数组,如[1,2,3,4].slice(2,3) 即[1,2,3,4][5] 返回整个数组
15 var indices = %GetArrayKeys(array, start_i + del_count);
16 if (IS_NUMBER(indices)) {
17 var limit = indices;
18 for (var i = start_i; i < limit; ++i) {
19 var current = array[i];
20 if (!IS_UNDEFINED(current) || i in array) {
21 deleted_elements[i - start_i] = current;
22 }
23 }
24 } else {
25 var length = indices.length;
26 for (var k = 0; k < length; ++k) {
27 var key = indices[k];
28 if (!IS_UNDEFINED(key)) {
29 if (key >= start_i) {
30 var current = array[key];
31 if (!IS_UNDEFINED(current) || key in array) {
32 deleted_elements[key - start_i] = current;
33 }
34 }
35 }
36 }
37 }
38 }
39
40
41 // This is part of the old simple-minded splice. We are using it either
42 // because the receiver is not an array (so we have no choice) or because we
43 // know we are not deleting or moving a lot of elements.
44 /**
45 * 源码:https://github.com/v8/v8/blob/master/src/array.js#L271-L282
46 * @param {Array} array 具体需要艹做的数组
47 * @param {Number} start_i 参数1,从何处开始
48 * @param {Number} del_count 需要取到的长度。 参数2 - 参数1,
49 * @param {Number} len 数组长度
50 * @param {Array} deleted_elements 对于slice来说,是选择的那部分数组,对于splice来说,是删除的那些数组。
51 * @returns {undefined} 此处直接艹做 传入的reuslt,即可反馈到ArraySlice作用域的result,与真实的浏览器环境不一样!。
52 */
53 function SimpleSlice(array, start_i, del_count, len, deleted_elements) {
54 for (var i = 0; i < del_count; i++) {
55 var index = start_i + i;
56 // The spec could also be interpreted such that %HasLocalProperty
57 // would be the appropriate test. We follow KJS in consulting the
58 // prototype.
59 var current = array[index];
60 if (!IS_UNDEFINED(current) || index in array) {
61 deleted_elements[i] = current;
62 }
63 }
64 }

三、
既然了解了实现思路,我们可以写个自己的slice方法,来实现slice的功能,不难看出。“slice.call的作用原理就是,利用call,将slice的方法作用于arrayLikeslice的两个参数为空,slice内部解析使得arguments.lengt等于0的时候
相当于处理 slice(0) :
即选择整个数组,slice方法内部没有强制判断必须是Array类型,slice返回的是新建的数组(使用循环取值)
”,所以这样就实现了类数组到数组的转化,call这个神奇的方法、slice的处理缺一不可,花几分钟实现模拟slice如下:

ps: ie低版本,无法处理dom集合的slice call转数组。(虽然具有数值键值、length
符合ArrayLike的定义,却报错)搜索资料得到?(此处待确认): 因为ie下的dom对象是以com对象的形式实现的,js对象与com对象不能进行转换


(function(global, undefined) {
‘use strict‘;
function SimpleSlice(array, start_i, del_count, len) {
var deleted_elements = [];
for (var i = 0; i < del_count; i++) {
var index = start_i + i;
var current = array[index];
if (current !== void(0) || index in array) {
deleted_elements[i] = current;
}
}
return deleted_elements;
}
Array.prototype.mySlice = function(start_i, end_i) {
var len = this.length;
start_i = start_i === undefined ? 0 : start_i - 0;
end_i = end_i === undefined ? len : end_i - 0;
if (start_i < 0) {
start_i = Math.max(start_i + len, 0);
} else if (start_i > len) {
start_i = len;
}

if (end_i < 0) {
end_i = Math.max(end_i + len, 0);
} else if (end_i > len) {
end_i = len;
}
if (end_i < start_i)
return [];
return SimpleSlice(this, start_i, end_i - start_i, len);
}
})(this);
var arr = [1,2,3,4,5,6,7,8,9,10];
console.log(‘test ‘,arr)
console.log(arr.slice(2),arr.mySlice(2))
console.log(arr.slice(6,7),arr.mySlice(6,7))
console.log(arr.slice(-4),arr.mySlice(-4))
console.log(arr.slice(-4,-2),arr.mySlice(-4,-2));

(function(){
console.log(‘slice call arguments : ‘,Array.prototype.slice.call(arguments));
console.log(‘mySlice call arguments : ‘,Array.prototype.mySlice.call(arguments));
})([],‘String‘,false);

console.log(Array.prototype.slice.call({0:‘a‘,length:1}),Array.prototype.mySlice.call({0:‘a‘,length:1}));

在控制台输出如下:
 

观V8源码中的array.js,解析
Array.prototype.slice为什么能将类数组对象转为真正的数组?,码迷,mamicode.com

观V8源码中的array.js,解析
Array.prototype.slice为什么能将类数组对象转为真正的数组?

时间: 2024-08-24 03:28:50

观V8源码中的array.js,解析 Array.prototype.slice为什么能将类数组对象转为真正的数组?的相关文章

从express源码中探析其路由机制

引言 在web开发中,一个简化的处理流程就是:客户端发起请求,然后服务端进行处理,最后返回相关数据.不管对于哪种语言哪种框架,除去细节的处理,简化后的模型都是一样的.客户端要发起请求,首先需要一个标识,通常情况下是URL,通过这个标识将请求发送给服务端的某个具体处理程序,在这个过程中,请求可能会经历一系列全局处理,比如验证.授权.URL解析等,然后定位到某个处理程序进行业务处理,最后将生成的数据返回客户端,客户端将数据结合视图模版呈现出合适的样式.这个过程涉及到的模块比较多,本文只探讨前半部分,

Redis源码中探秘SHA-1算法原理及其编程实现

导读 SHA-1算法是第一代"安全散列算法"的缩写,其本质就是一个Hash算法.SHA系列标准主要用于数字签名,生成消息摘要,曾被认为是MD5算法的后继者.如今SHA家族已经出现了5个算法.Redis使用的是SHA-1,它能将一个最大2^64比特的消息,转换成一串160位的消息摘要,并能保证任何两组不同的消息产生的消息摘要是不同的.虽然SHA1于早年间也传出了破解之道,但作为SHA家族的第一代算法,对我们仍然很具有学习价值和指导意义. SHA-1算法的详细内容可以参考官方的RFC:ht

科普 | 编译 V8 源码

2017-02-13 justjavac 象尘说 对于JavaScript程序员来说,可以瞧一瞧justjavac给大家写的科普类读物,V8引擎的分析,"也许你不懂C++",但是你可以了解一下,总是好的. 本系列得到了justjavac的授权,同意我在公众号中转载,来源于知乎专栏:https://zhuanlan.zhihu.com/v8core V8 的源码已经从 google code 迁移到了 github,而版本控制工具也从 svn 换成了 git.V8 源码地址 v8/v8.

Python源码中的PyCodeObject

1.Python程序的执行过程 Python解释器(interpreter)在执行任何一个Python程序文件时,首先进行的动作都是先对文件中的Python源代码进行编译,编译的主要结果是产生的一组Python的字节码(byte code),然后将编译的结果交给Python虚拟机(Virtual Machine),由虚拟机按照顺序一条一条地执行字节码,从而完成对Python程序的执行动作. 对比java的执行: java:     .java-->(javac)-->.class-->(

tf源码中的object_detection_tutorial.ipynb文件

今天看到原来下载的tf源码的目标检测源码中test的代码不知道跑哪儿去了,这里记录一下... Imports import numpy as np import os import six.moves.urllib as urllib import sys import tarfile import tensorflow as tf import zipfile from collections import defaultdict from io import StringIO from ma

Redis源码中的CRC校验码(crc16、crc64)原理浅析

在阅读Redis源码的时候,看到了两个文件:crc16.c.crc64.c.下面我抛砖引玉,简析一下原理. CRC即循环冗余校验码,是信息系统中一种常见的检错码.大学课程中的"计算机网络"."计算机组成"等课程中都有提及.我们可能都了解它的数学原理,在试卷上手工计算一个CRC校验码,并不是难事.但是计算机不是人,现实世界中的数学原理需要转化为计算机算法才能实现目的.实际上作为计算机专业背景人并不会经常使用或接触到CRC的计算机算法实现的原理,通常是电子学科背景的人士

从源码中浅析Android中如何利用attrs和styles定义控件

一直有个问题就是,Android中是如何通过布局文件,就能实现控件效果的不同呢?比如在布局文件中,我设置了一个TextView,给它设置了textColor,它就能够改变这个TextView的文本的颜色.这是如何做到的呢?我们分3个部分来看这个问题1.attrs.xml  2.styles.xml  3.看组件的源码. 1.attrs.xml: 我们知道Android的源码中有attrs.xml这个文件,这个文件实际上定义了所有的控件的属性,就是我们在布局文件中设置的各类属性 你可以找到attr

[C/C++]_[VS2010源码中使用UTF8中文字符串被转码为ANSI的问题]

场景: 1.本以为vs设置了源文件的UTF8编码,代码中出现的中文字符串就一定是utf8编码了,可惜不是,如果源码中出现了中文字符串,会在内存中转码为ANSI编码. Unicode(UTF8带签名) 代码页(65001),从菜单->文件->高级保存选项 设置. 例子: char path[] = "resources\\中文\\"; for(int i = 0; i < strlen(path); ++i) { printf("0x%x,",(un

android四大组件之Activity - (1)从源码中理解并巧用onWindowFocusChanged(boolean hasFocus)

这里开始到后面,想趁着有时间,将Android四大组件和一些系统组件做一些总结和记录.由于网上已经有很多写的很好并且总结也全面的文章.小弟我也囊中羞涩不敢献丑,就记录一些自己觉得重要的有用的知识点,顺便大家一起学习讨论啥的也好 Activity作为四大组件之一,对于整个Android开发有多重要就无需赘言了.关于它的生命周期,这里借用下官网的图,便一目了然: 那么它的生命周期和我们所说的onWindowFocusChanged(boolean hasFocus)方法有何关系? Activity生