【JS】JavaScript数组-操作方法-concat-数组强制打平-slice-splice方法使用

对于数组元素，有很多操作方法，今天来介绍三种最常见操作方法分别是concat()、slice()、splice()方法~

1. concat()

在现在数组全部元素基础上创建一个新数组

1. 创建一个当前数组的副本
2. 把它的参数添加至副本末尾
3. 返回新构建的数组

let colors = ["red", "green", "blue"];
let colors2 = color.concat("yellow", ["black", "brown"]);

console.log(colors); // ["red", "green", "blue"]
console.log(colors2); // ["red", "green", "blue", "yellow", "black", "brown"]

这里可以看出，concat() 对参数数组进行了打平操作
打平数组参数的行为可以重写，方法是在参数数组上指定一个特殊的符号: Symbol.isConcatSpreadable
这个符号可以阻止concat()打平参数数组。

强制不打平数组

let colors = ["red", "green", "blue"];
let newColors = ["black", "brown"];

newColors[Symbol.isConcatSpreadable] = false;

let colors3 = colors.concat("yellow", newColors); // ["red", "green", "blue", "yellow", ["black", "brown"]]

强制打平数组

let colors = ["red", "green", "blue"];
let moreNewColors = {
     
	[Symbol.isConcatSpreadable]: true,
	length: 2,
	0: "pink",
	1: "cyan"
};

let colors4 = colors.concat("yellow", moreNewColors); // ["red", "green", "blue", "yellow", "pink", "cyan"]

2. slice()

构建一个包含原有数组中一个或多个元素的新数组

接收参数
一个：返回该索引到数组末尾的所有元素
两个：返回从开始索引到结束索引对应的所有元素，不包括结束索引所对应的元素
操作不影响原数组

let colors = ["red", "green", "blue", "yellow", "purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1,4)

console.log(colors2); // ["green", "blue", "yellow", "purple"]
console.log(colors3); // ["green", "blue", "yellow"]

参数出现负值：用 数组长度+负值 确定位置

3. splice()

• 最强大的数组方法

在数组中间插入元素

1. 删除

传两个参数
①要删除的第一个元素的位置要 ②删除元素的数量

2. 插入

传三个参数
①开始位置 ②要删除的元素数量(0) ③要插入的位置

3. 替换

传三个参数
①开始位置 ②要删除元素的数量 ③要插入的任意多个元素

splice()方法返回一个数组，包含从数组中被删除的元素

let colors = ["red", "green", "blue", "yellow", "purple"];

let colors2 = colors.splice(0, 1); // 删除第一项
console.log(colors); // ["green", "blue"]
console.log(colors2); // ["red"]

let colors3 = colors.splice(1, 0, "yellow", "orange"); // 在位置1插入两个元素
console.log(colors); // ["green", "yellow", "orange", "blue"]
console.log(colors3); // []

let colors4 = colors.splice(1, 1, "red", "purple"); // 插入两个元素，删除一个元素
console.log(colors); // ["green", "red", "purple", "orange", "blue"]
console.log(colors3); // ["yellow"]