JS在对象中使用数组方法

对对象的理解和探索,可以从console.log()console.dir()看得很详细,一个简单示例

var a = [1,2,3] 
var b = {x:1,y:2,z:3}
var c = new String(123)
console.log(a,b,c)
三个原型表明了各自的类型

继续跟循prototype指向,会发现所有类型的原型都是一个对象,万物皆对象……

来看一个例子:首先定义一个对象,给对象添加数组的pushsplice方法,然后执行一下push方法。

var obj={
  '2':3,
  '3':4,
  'length':2,
  'splice':Array.prototype.splice,
  'push':Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj)

这似乎是不科学的,对象怎么能使用数组的方法呢?我们先来看一下执行结果

emmm……并没有报错

2、3的值和length全部改变,证明塞进去的方法起效了。
我们先看一下Array​.prototype​.push()push()方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。由此可见该方法是有length返回值的,似乎都对应上了,那么到底是怎么实现的呢?

//push的内部原理
Arrary.prototype.push = function(target){
  this[this.length] = target    //把目标值设为this数组的最后一项
  this.length ++    //设置数组的长度,使其+1
}
//----------------------
var a =[1,2,3]
console.log(a.length)    //---> 3
console.log(a[a.length-1])    //--->3

//我们套入刚才的对象进行比对
var obj={
  '2':3,
  '3':4,
  'length':2,
  'splice':Array.prototype.splice,
  'push':Array.prototype.push
}

obj.push(1)
//-------------------------------
obj.push(1) = 1 => {
  obj[obj.length] = 1    //obj[2] = 1
  obj.length ++          //obj.length = 3
}
//-------------------------------

obj.push(2)
//-------------------------------
obj.push(2) = 2 => {
  obj[obj.length] = 2    //obj[3] = 2
  obj.length ++          //obj.length = 4
}
//-------------------------------

console.log(obj)
/*所以obj里的值就出来了
obj = {
  2: 1
  3: 2
  length: 4
}
吃透了原理,原来JS像加减法一样简单*/

JS的世界如此奇妙,食髓知味,那么我们再来研究一下splice()的原理吧。
Array​.prototype​.splice()splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
简而言之,array.splice(start,deleteCount,value,...)方法实现了三个功能:插入,删除和替换,而且删除了元素之后还会返回一个包含删除元素的新数组

var a = [1,2,3,4]
console.log(a.splice(1,2),a)    
//[2,3],[1,4]  在索引值为1的位置删除了两个元素(删除)

console.log(a.splice(1,0,2,3),a)    
//[],[1,2,3,4]  在索引值为1的位置删除了0个元素并添加了两个元素(插入)

console.log(a.splice(1,2,5,6),a)    
//[2,3],[1,5,6,4]  在索引值为1的位置删除了两个元素并添加了两个元素(替换)

我们分析另外几种情况:array.splice(s,d,v,...)

  • 删除 (s,d)s为-1,代表从倒数第1个开始;②d不传参,代表从s处删到尾巴;③d为负数,需要传递v,0或负数代表插入元素。
  • 插入 (s,0,v,...)s处插入v.length个元素,后段元素后移。
  • 替换 (s,d,v,...)s处删除d个元素,插入v.length个元素,视dv.length大小操作后段元素前移或后移。
    splice()方法一直诟病较多,从几种方法的实现不难看出, start及之后的元素被全部重新排列了,很是浪费时间,我们先尝试这几种操作的代码实现

Array​.prototype​.splice(start,deleteCount,value) = function(s,d,v){
for(var i = 0,i<d,i++){ this[s] } 新建数组,根据s d传入删除元素,等待返回;调用内部方法删除指定位置数组元素;准备value列表,在s处插入,其后元素依次向后平移;考虑d>v.length时,原数组后段元素向前平移……}阿西吧,好吧,我说着玩的,尝试失败【手动捂脸】

回到前面的例子,推导不出来详细的实现代码怎么计算所得值呢?上边测试结果用的是火狐开发者工具,现在转用chrome,截张图看看

var obj={
  '2':3,
  '3':4,
  'length':4,
  'splice':Array.prototype.splice,
  'push':Array.prototype.push
}
console.log(obj)

Object(4) [empty × 2, 3, 4, splice: ƒ, push: ƒ]看到这里就好玩了,chrome把符合数组结构的对象(有数组的属性)注释为数组了,而对应的键变成了索引般的存在。这里把length变成了4,是为了对应“索引”3(3:4),这样再按数组计算就可以了。
obj.splice(2,1)操作[empty,empty,3,4]数组,应该得到[empty,empty,4],再回到原对象结构,就是{2:4,length:3}我们截个图see see


我们来走个测试,验证一下

var obj={
  '2':3,
  '3':4,
  'length':4,
  'splice':Array.prototype.splice,
  'push':Array.prototype.push
}    //[empty,empty,3,4]
obj.splice(2,0,5,6)    //[empty,empty,5,6,3,4]
obj.splice(0,4,1,2)    //[1,2,3,4]
console.log(obj)

成了,就是这么计算的

当对象拥有数组的“length”和“索引”时,可以认为是个伪数组[ArrayLike],我们这个等于强塞进去两个数组的方法,需要注意的是,push()splice()还不太一样,push()是特意设计为通用的,splice()对对象用起来还有局限,start超过length的值就操作不动了。再看一眼官方push()的例子

var obj = {
    length: 0,
    addElem: function addElem (elem) {
        [].push.call(this, elem);
    }
};
//加两个空对象
obj.addElem({});
obj.addElem({});
console.log(obj.length,obj);    
// → 2      {0: {}, 1: {}, length: 2, addElem: ƒ}

异曲同工,不过人家的更为规整。本篇先记录到这,发现好玩的例子再来添加。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,504评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,434评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,089评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,378评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,472评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,506评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,519评论 3 413
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,292评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,738评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,022评论 2 329
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,194评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,873评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,536评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,162评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,413评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,075评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,080评论 2 352