js 数组方法 - 子数组操作 - splice()

splice（）方法既可以删除也可以添加数组元素，但会改变原始数组

新数组取值赋值，使用JSON.parse( JSON.stringify(arr))，则不会受旧数组影响

let a=[1,2,3,4], b=JSON.parse(JSON.stringify(a));
a[0]=2;
console.log(a,b);//[2,2,3,4]   [1,2,3,4] 
// 可以看出b数组不会收a数组影响了

（1）删除元素：array.splice(index,howmany)

var arr= ["a", "b", "c", "d"];
var newArr = arr.splice(1, 2); // splice(1,2)的意识是删除数组下标为1的两个数
console.log(arr,newArr);     // arr:a d    newArr:b c

（2）替换元素：array.splice(index,howmany,item1....itemx)

var arr = [1, 2, 3, 4, 5, 6];
var newArr = arr.splice(3, 1, "1", "2");//splice(3, 1, "1", "2")表示数组下标为3的数被1和2代替
console.log(arr,newArr);   // arr:1,2,3,1,2,5,6   newArr:4 

（3）插入元素：array.splice(index,howmany,item1,.....,itemX)。和替换很相似，只需要将howmany的数值改为0即可。

var arr = [1, 2, 3, 4, 5, 6];
var newArr = arr.splice(3, 0, "1", "2"); 
//splice(3, 0, "1", "2")表示在数组下标为3的数之前添加数1、2
console.log(arr);   // arr:1,2,3,1,2,5,6 
console.log(newArr); 

（4）在for循环中使用。定一个数组，假设我要把中间的数字3删掉，数字3是数组下标2的元素，而且只需删掉1个数字。 

var arr = [1, 2, 3, 4, 5]; 
for(var i=0; i<arr.length; i++){
    if(arr[i] === 3){   //如果找到要被删除的数字所在的数组下标
        var num = arr.splice( i, 1 );   //从i位置开始删除1个数字
        console.log("成功删除 "+num);    //输出被删除的数字
    } else{
        console.log(arr[i]+" 未被删除"); //如果i下标的数组元素不是需要被删除的数字，就输出数字
    }
}

打印结果可以看出，数字3被删掉了。但4没了。因为splice 是直接操作并修改数组的，所以当找到数字3时在循环中的 i 下标是2，而当删除数字3后，数组下标 i 位置中保存的数字变为了数字4，然后到了下一个循环 i 下标为3时，数组下标 i 位置中保存的数字是5，所以跳过了数字4，于是调试信息中没有数字4 。如何解决呢？在使用 splice 的下一句，改一下循环变量值即可

if(arr[i] === 3){   //如果找到要被删除的数字所在的数组下标
    var num = arr.splice( i, 1 );   //从i位置开始删除1个数字
    console.log("成功删除 "+num);    //输出被删除的数字
    
    i = i-1;    //解决方案
}

更多例子：

let arr1 = [
  { label: "aaa",value: 1},
  { label: "bbb",value: 2},
  { label: "ccc",value: 3},
];
let arr2 = [
  { label: "aaa",value: 1},
  { label: "bbb",value: 2},
];
let arr3 = [
  { label: "aaa", value: 1 },
  { label: "bbb", value: 2 },
  { label: "ccc", value: 3 },
  { label: "ddd", value: 4 },
];

（1）删除arr1中比arr2中多的对象

for (let i = 0; i < arr1.length; i++) {
  let found = false;
  for (let j = 0; j < arr2.length; j++) {
    if (
      arr1[i].label === arr2[j].label &&
      arr1[i].value === arr2[j].value
    ) {
      found = true;
      break;
    }
  }
  if (!found) {
    arr1.splice(i, 1);
    i--;
  }
}
console.log(arr1); // [{label: "1", value: 15},{label: "1", value: 16}]

（2）将arr1中比arr2中多的对象，label值改为空字符串

for (let i = 0; i < arr1.length; i++) {
	let found = false;
	for (let j = 0; j < arr2.length; j++) {
		if (
			arr1[i].label === arr2[j].label &&
			arr1[i].value === arr2[j].value
		) {
			found = true;
			break;
		}
	}
	if (!found) {
		arr1[i].label = "";
	}
}
console.log(arr1); // [{label: "aaa", value: 1},{label: "bbb", value: 2},{label:"", value: 3}]

（3）若label和value相同，不往arr3中添加arr1中的对象；若value相同而label不同，arr3中的label值改为'eee'；若arr1对中对象的value，arr3中没有，这个对象直接添加到arr3中

for (let i = 0; i < arr1.length; i++) {
  let found = false;
  for (let j = 0; j < arr3.length; j++) {
    if (
      arr1[i].label === arr3[j].label &&
      arr1[i].value === arr3[j].value
    ) {
      found = true;
      break;
    } else if (
      arr1[i].value === arr3[j].value &&
      arr1[i].label !== arr3[j].label
    ) {
      arr3[j].label = "eee";
      found = true;
      break;
    }
  }
  if (!found) {
    arr3.push(arr1[i]);
  }
}
console.log(arr3);// [{ label: "aaa", value: 1 },{ label: "bbb", value: 2 },{ label: "eee", value: 3 },{ label: "ddd", value: 4 }];