对各个对象的理解和探索，可以从
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指向，会发现所有类型的原型都是一个对象，万物皆对象……
来看一个例子：首先定义一个对象，给对象添加数组的
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)
这似乎是不科学的，对象怎么能使用数组的方法呢？我们先来看一下执行结果
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个元素，视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: ƒ}
异曲同工，不过人家的更为规整。本篇先记录到这，发现好玩的例子再来添加。
网友评论