让前端飞Web前端之路

JS在对象中使用数组方法

2019-05-28  本文已影响1人  嘟滴嘟滴嘟

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

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,...)

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: ƒ}

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

上一篇 下一篇

猜你喜欢

热点阅读