对对象的理解和探索,可以从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)
来看一个例子:首先定义一个对象,给对象添加数组的
push
和splice
方法,然后执行一下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)
这似乎是不科学的,对象怎么能使用数组的方法呢?我们先来看一下执行结果
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
个元素,视d
和v.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: ƒ}
异曲同工,不过人家的更为规整。本篇先记录到这,发现好玩的例子再来添加。