ts：数组的常用方法（push、pop、shift、unshift、splice、slice）

一、主要内容说明

本文中，push、pop、shift、unshift、splic方法是对原有数组进行方法转变，使用方法后原数组结构会发生改变。而slice方法只是提取原数组的元素组成新数组，原数组未发生改变。数组的方法主要是数组对象自己使用，其他非数组对象无法使用的。
我们下文举例，每个源码都有数字数组、字符串数组、对象数组，各个使用不同的数组方法，分开看各个源码就可以看各个数组方法的使用。本文只是列举了push、pop、shift、unshift、splice、llice方法，数组方法还有其他的，如forEach、map等方法，笔者会另起博文。

二、例子

（一）、push方法（尾添加）

ts中数组的push方法，是在尾部添加1，或多个元素。

1.源码1 （push方法）

let num_1: number[] = [764, 765, 766];
let str_2: string[] = ["小蜗牛", "764号"];// 向数组中添加元素
num_1.push(767,768);
str_2.push("这个是真的");// 输出修改后的数组
console.log(num_1); // 输出: [764, 765, 766, 767]
console.log(str_2); // 输出: ["小蜗牛", "764号", "这个是真的"]// 定义消息接口
interface Message {name: string;age: number;height: number;
}// 创建消息数组
let mes: Message[] = [{ name: "小七", age: 14, height: 170 },{ name: "小巴", age: 24, height: 160 }
];
console.log("\n 原数组:");
console.log(mes); // 输出: 消息数组
mes.push({ name: "小七", age: 14, height: 170 }); // 添加新的消息对象
console.log(mes); // 输出: 更新后的消息数组

2.源码1运行效果

（二）、pop方法（尾删除）

ts中数组的pop方法，是删除数组尾部的一个元素。pop方法和push方法用法相反，但需要注意的是，pop只支持删除一个元素，若想删除多个元素可以使用splice方法，这个可以查看后面的内容。

• pop()的括号里不填值，因为它只删除尾部一个元素，不接收任何参数。

1.源码2（pop方法）

// 定义数组
let num_1 = [764, 765, 766];
let str_2 = ["小蜗牛", "764号"];// 使用 pop 方法删除数组最后一个元素
num_1.pop(); // 删除最后一个元素
str_2.pop(); // 删除最后一个元素// 输出修改后的数组
console.log(num_1); // 输出: [764, 765]
console.log(str_2); // 输出: ["小蜗牛"]// 定义消息接口
let mes = [{ name: "小七", age: 14, height: 170 },{ name: "小巴", age: 24, height: 160 }
];
console.log("\n 原数组:");
console.log(mes); // 输出: 消息数组
mes.pop(); // 删除最后一个消息对象
console.log(mes); // 输出: 更新后的消息数组

2.源码2运行效果

（三）、shift方法（开头删除）

ts中数组的shift方法，是删除数组头部的一个元素。shift方法和后面的unshift方法用法相反，也需要注意的是，shift方法也只支持删除一个元素，若想删除多个元素可以使用splice方法，splice方法后面的会讲。

• shift()的括号里不填值，因为它只删除头部一个元素，不接收任何参数。

1.源码3（shift方法）

// 定义数组
let num_1 = [764, 765, 766];
let str_2 = ["小蜗牛", "764号"];console.log("原数组为----" + num_1);
console.log("原数组为----" + str_2);
console.log("使用 shift 数组方法后，从开头删除一个元素-------");num_1.shift(); // 从开头删除一个元素
str_2.shift(); // 从开头删除一个元素// 输出修改后的数组
console.log(num_1); // 输出: [765, 766]
console.log(str_2); // 输出: ["764号"]// 定义消息接口
let mes = [{ name: "小七", age: 14, height: 170 },{ name: "小巴", age: 24, height: 160 }
];
console.log("\n原对象数组为：");
console.log(mes);console.log("使用 shift 数组方法后，从开头删除一个元素-------");
mes.shift(); // 删除第一个消息对象
console.log(mes); // 输出: 更新后的消息数组

2.源码3运行效果

（四）、unshift方法（开头添加）

ts中数组的unshift方法，是在数组头部添加一个，或多个元素。unshift方法和前面面的push方法类似，区别只是添加元素的位置不同，如unshift头部添加，push尾部添加。

1.源码4（unshift方法）

// 再次定义数组
let num_1 = [764, 765, 766];
let str_2 = ["小蜗牛", "764号"];console.log("原数组为----" + num_1);
console.log("原数组为----" + str_2);
console.log("使用 unshift 数组方法后，从开头增加一个元素-------");num_1.unshift(763); // 从开头添加元素
str_2.unshift("我是"); // 从开头添加元素// 输出修改后的数组
console.log(num_1); // 输出: [763, 764, 765, 766]
console.log(str_2); // 输出: ["我是", "小蜗牛", "764号"]// 定义消息接口
let mes = [{ name: "小七", age: 14, height: 170 },{ name: "小巴", age: 24, height: 160 }
];
console.log("\n原对象数组为：");
console.log(mes);console.log("使用 unshift 数组方法后，从开头增加两个元素-------");
mes.unshift({ name: "月儿", age: 22, height: 163 },{ name: "春雅", age: 21, height: 166 }
); // 从开头添加两个消息对象
console.log(mes); // 输出: 更新后的消息数组

2.源码4运行效果

（五）、splice方法（增、删、替）

ts的数组方法的splice方法，可以添加、删除、替换元素。splice方法可接收3个参数，如下

let arr;
arr.splice(A,B,C);A----要删除的位置B----删除几个C----删除的部分替换为

当A为0时表示从第一个开始删，当A为1时从第二个开始删。B为2就表示删2个，为1就删1个。C部分编写为与数组相同属性的元素即可，可以有多个元素。

1.源码5（splice方法）

// 定义数组
let num_1 = [764, 765, 766];
let str_2 = ["小蜗牛", "764号"];console.log("原数组为----" + num_1);
console.log("原数组为----" + str_2);
console.log("使用 splice 数组方法后，num_1 从第二个开始删，删 1 个，替换为 777，str_2 从第一个开始删，删 1 个，替换为“我是”-------");num_1.splice(1, 1, 777); // 从索引 1 删除 1 个元素，替换为 777
str_2.splice(0, 1, "我是"); // 从索引 0 删除 1 个元素，替换为“我是”// 输出修改后的数组
console.log(num_1); // 输出: [764, 777, 766]
console.log(str_2); // 输出: ["我是", "764号"]// 定义消息接口
let mes = [{ name: "小七", age: 14, height: 170 },{ name: "小巴", age: 24, height: 160 },{ name: "月儿", age: 22, height: 163 },{ name: "删除使用", age: 0, height: 0 },
];
console.log("\n原对象数组为：");
console.log(mes);console.log("使用 splice 数组方法后，从第 4 个开始删，删 1 个，替换为“{name:春雅,age:21,height:166} 等”-------");
mes.splice(3, 2, { name: "春雅", age: 21, height: 166 },{ name: "夏婉", age: 22, height: 163 }); // 从索引 3 删除 1 个元素，替换为新对象
console.log(mes); // 输出: 更新后的消息数组

2.源码5运行效果

（六）、slice方法（提取）

ts中数组slice方法，用于提取数组中的元素，组成新的数组，原来的数组结构不会发生改变。slice方法可以接收2个参数，如下：

let arr;
arr.slice(A,B);A----元素提取的开始位置B----元素提取的结束位置，不包含。

A表示元素提取的起始位置，当A=0表示第一个开始提取，A=3表示从第4个开始提取，-2则表示倒数第2个开始。B为提取的结束位置，但不包含B位置，如当B为7时，7表示第八个位置，但只提取到第七个位置，不包含7的第八位置。slice()的括号里也可以填单值，表示起始的提取位置，提取到末尾。也可以不填值，表示全部提取数组元素。

• 编程语言里，从0开始算一。
• 提取元素产生新数组，原数组结构不改变。

1.源码6（slice方法）

// 定义数组
let num_1 = [764, 765, 766];
let str_2 = ["小蜗牛", "764号"];console.log("原数组为----" + num_1);
console.log("原数组为----" + str_2);
console.log("使用 slice 数组方法后，从原数组中提取元素作为新数组，num_1 从第 2 个提取到第 3 个（不含），str_2 从第 1 个提取到尾，-------");let num_2 = num_1.slice(1, 2); // 从索引 1 提取到 2（不含）
let str_3 = str_2.slice(0); // 从索引 0 提取到数组末尾console.log(num_2); // 输出: [765]
console.log(str_3); // 输出: ["小蜗牛", "764号"]
console.log("原数组对比是否变化----" + num_1); // 输出: 原数组未变化
console.log("原数组对比是否变化----" + str_2); // 输出: 原数组未变化// 定义消息接口
let mes = [{ name: "小七", age: 14, height: 170 },{ name: "小巴", age: 24, height: 160 },{ name: "月儿", age: 22, height: 163 },{ name: "春雅", age: 21, height: 166 }
];
console.log("\n原对象数组为：");
console.log(mes);console.log("使用 slice 数组方法后，从第 3 个开始提取元素到末尾，生成新数组-------");
let mes_2 = mes.slice(-2); // 从索引 -2 提取到末尾，倒数2个
console.log(mes_2); // 输出: 提取后的新数组console.log("原始值如下，用以对比是否变化-------");
console.log(mes); // 输出: 原数组未变化

2.源码6运行效果

三、结语

本文只讲了push、pop、shift、unshift、splice、slice的方法，它们是数组的方法，只适用于数组。除这些还有其他数组方法，由于时间问题，便分开编写了。当然一下子大量内容也不好观看，分成几个小模块，小模块分开编写学习，效率也高一些。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

四、定位日期

添加文章架构，添加源码1-6，源码已调试完毕，还未添加文字说明。明天继续。
2024-10-26;
23:36;

2024-10-27；
10:09；