Javascript 学习笔记—— Array.slice() 和Array.splice()

Array.prototype.slice(start,end)

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.slice(1,5);
arr:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

slice()是不会改变原数组的。

• slice(start_i,end_i)在源码中时这样处理下标的

 if (start_i < 0) {
        start_i += len;
        if (start_i < 0) start_i = 0;
    } else {
        if (start_i > len) start_i = len;
    }

    if (end_i < 0) {
        end_i += len;
        if (end_i < 0) end_i = 0;
    } else {
        if (end_i > len) end_i = len;
    }

start_i和end_i在为负的时候都会进行一次和总长度的相加，再与0取最大值。 比如 len＝10的时候，slice(-9,-2)
就会变成 slice(1,8) , 但是当end_i 大于start_i的时候 返回一个空数组 MaxSimple 是取最大值

var result = ArraySpeciesCreate(array, MaxSimple(end_i - start_i, 0));
if (end_i < start_i) 
return result;

• 练习

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = [];

arr2 = arr.slice();  //slice() =>slice(0,length)
console.log('arr2:', arr2); //[1,2,3,4,5,6,7,8,9,10]

arr2 = arr.slice(3);
console.log('arr2:', arr2);//[4,5,6,7,8,9,10]
arr2 = arr.slice(3.3);
console.log('arr2:', arr2);//[4,5,6,7,8,9,10]
arr2 = arr.slice(3.9);
console.log('arr2:', arr2);//[4,5,6,7,8,9,10]
arr2 = arr.slice(-4);
console.log('arr2:', arr2);//[7,8,9,10]
arr2 = arr.slice(1, 3);
console.log('arr2:', arr2);//[2,3]
arr2 = arr.slice(2, 30);
console.log('arr2:', arr2);//[3,4,5,6,7,8,9,10]
arr2 = arr.slice(10, 8);
console.log('arr2:', arr2);//[]
arr2 = arr.slice(-2, 10);
console.log('arr2:', arr2);//[9,10]
arr2 = arr.slice(3, -4);
console.log('arr2:', arr2);//[4,5,6]
arr2 = arr.slice(-5, -8);
console.log('arr2:', arr2);//[]
arr2 = arr.slice(-11, 3);
console.log('arr2:', arr2);//[1,2,3]
arr2 = arr.slice(-13, -2);
console.log('arr2:', arr2);//[1,2,3,4,5,6,7,8]

console.log('arr::',arr);//[1,2,3,4,5,6,7,8,9,10] 

Array.prototype.splice(start,deleteCount,items)

var arr=[1,2,3,4,5,6,7,8,9,10]
var arr2=arr.splice(1,4,'444','3333')
arr: [1, "444", "3333", 6, 7, 8, 9, 10]
arr2:[2, 3, 4, 5]

从上面可以看出,splice()返回的是删除掉的数组元素，同时splice是可以改变原数组的元素的

• 从数组中删除元素 :

splice(index) //删除从index开始到最后一个的元素（包括index）

splice(index ,deleteCount) //删除从index开始的deleteCount个元素（包括index）
这里的index需要根据正负情况来进行判断

if(index>0)
 index =Math.min(index,length)
if(index<0)
index =Max.max(length+index,0)

• 添加元素：

splice(index,deleteCount,items)//
从下标index开始，删除deleteCount个，并在index开始插入items 这里的index和count和上面的判断时一样的，

var arr=[1,2,3,4,5,6,7,8,9,10]
arr.splice(-2,-1,'333’)
arr:[1, 2, 3, 4, 5, 6, 7, 8, "333", 9, 10]
splice(-2,-1,’333’)=>  splice(8,0,’333’)  =>在index==8的地方删除0个元素，并在index 添加上333

• 练习

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var arr2 = arr.splice();  //arr.splice()=>arr.splice(0,0)
console.log(arr2);//[]
console.log(arr);//[1,2,3,4,5,6,7,8,9,10]

var arr2 = arr.slice();
var arr3 = arr2.splice(3);
console.log(arr2);//[1,2,3]
console.log(arr3);//[4,5,6,7,8,9,10]

arr2 = arr.slice();
arr3 = arr2.splice(1, 3);
console.log(arr2); //[1,5,6,7,8,9,10]
console.log(arr3);//[2,3,4]

arr2 = arr.slice();
arr3 = arr2.splice(1, 30);
console.log(arr2); //[1]
console.log(arr3);//[2,3,4,5,6,7,8,9,10]

arr2 = arr.slice();
arr3 = arr2.splice(-1, 30);
console.log(arr2); //[1,2,3,4,5,6,7,8,9]
console.log(arr3);//[10]

arr2 = arr.slice();
arr3 = arr2.splice(-18, 30);
console.log(arr2); //[]
console.log(arr3);//[1,2,3,4,5,6,7,8,9,10]

arr2 = arr.slice();
arr3 = arr2.splice(-18, 30,’2222');
console.log(arr2);  //[‘2222']
console.log(arr3);//[1,2,3,4,5,6,7,8,9,10] 

arr2 = arr.slice();
arr3 = arr2.splice(-18, -20,’2222');
console.log(arr2);  //[‘2222’,1,2,3,4,5,6,7,8,9,10]
console.log(arr3);//[]