TypeScript 中类似 Python list 的数组操作及示例

TypeScript 中类似 Python list 的数组操作及示例

在 Python 中,list(列表)是常用的数据结构,支持追加、排序、插入等操作。TypeScript 中的数组(Array)与 Python list 功能类似,也提供了丰富的方法实现这些操作。下面一一对应讲解并给出示例。

一、数组的定义(类似 Python list 初始化)

Python list 定义

ini 复制代码
# 空列表
py_list = []
# 带初始值的列表
py_list = [1, 2, 3, 4]

TypeScript 数组定义

ini 复制代码
// 空数组(指定类型,推荐)
let tsArray: number[] = [];
// 带初始值的数组
let tsArray: number[] = [1, 2, 3, 4];
// 也可用泛型表示
let tsArray: Array<number> = [1, 2, 3, 4];
// 多维数组
let matrix: number[][] = [[1, 2], [3, 4]];

二、追加元素(类似 Python list.append ())

Python list 追加

scss 复制代码
py_list = [1, 2, 3]
py_list.append(4)
print(py_list)  # 输出:[1, 2, 3, 4]

py_list.extend([5, 6])  # 扩展list
print(py_list)  # 输出:[1, 2, 3, 4, 5, 6]

TypeScript 数组追加

使用push()方法,在数组末尾添加元素,与append()功能一致。

typescript 复制代码
let tsArray: number[] = [1, 2, 3];
tsArray.push(4);
console.log(tsArray);  // 输出:[1, 2, 3, 4]

tsArray.push(...[5, 6]);   # 数组合并
console.log(tsArray);  // 输出:[1, 2, 3, 4, 5, 6]

let fruits: string[] = ["apple", "banana"];
fruits.push("orange"); // ["apple", "banana", "orange"]
fruits.push(...["grape", "mango"]); // 追加多个元素
fruits.unshift("kiwi"); // 开头追加

三、排序(类似 Python list.sort ())

Python list 排序

ini 复制代码
py_list = [3, 1, 4, 2]
py_list.sort()  # 升序排序
print(py_list)  # 输出:[1, 2, 3, 4]
py_list.sort(reverse=True)  # 降序排序
print(py_list)  # 输出:[4, 3, 2, 1]

TypeScript 数组排序

使用sort()方法,默认按字符串 Unicode 码点排序,对于数字排序需传入比较函数。

typescript 复制代码
let tsArray: number[] = [3, 1, 4, 2];
// 升序排序
tsArray.sort((a, b) => a - b);
console.log(tsArray);  // 输出:[1, 2, 3, 4]
// 降序排序
tsArray.sort((a, b) => b - a);
console.log(tsArray);  // 输出:[4, 3, 2, 1]

nums.reverse();  // 反序


//自定义排序,快速排序
function quickSort(arr: number[]): number[] {
  if (arr.length <= 1) return arr;
  const pivot = arr[arr.length - 1];
  const left = arr.filter((x, i) => x < pivot && i !== arr.length - 1);
  const right = arr.filter(x => x > pivot);
  return [...quickSort(left), pivot, ...quickSort(right)];
}

四、插入元素(类似 Python list.insert ())

Python list 插入

scss 复制代码
py_list = [1, 2, 4]
py_list.insert(2, 3)  # 在索引2处插入3
print(py_list)  # 输出:[1, 2, 3, 4]

TypeScript 数组插入

使用splice()方法,第一个参数是插入位置,第二个参数为 0(表示不删除元素),第三个及以后参数是要插入的元素。

typescript 复制代码
let tsArray: number[] = [1, 2, 4];
tsArray.splice(2, 0, 3);  // 在索引2处插入3
console.log(tsArray);  // 输出:[1, 2, 3, 4]

let colors: string[] = ["red", "blue"];
colors.splice(1, 0, "green"); // 索引1处插入,不删除元素 → ["red", "green", "blue"]

五、删除元素(类似 Python list 的 pop ()、remove ())

Python list 删除

scss 复制代码
py_list = [1, 2, 3, 4]
# 根据索引删除(pop)
py_list.pop(1)  # 删除索引1的元素
print(py_list)  # 输出:[1, 3, 4]
# 根据值删除(remove)
py_list.remove(3)
print(py_list)  # 输出:[1, 4]

TypeScript 数组删除

  • 根据索引删除:用splice(索引, 1),第二个参数 1 表示删除 1 个元素。
  • 根据值删除:先通过indexOf()找到值的索引,再用splice()删除。
ini 复制代码
let tsArray: number[] = [1, 2, 3, 4];
// 根据索引删除(类似pop)
tsArray.splice(1, 1);  // 删除索引1的元素
console.log(tsArray);  // 输出:[1, 3, 4]
// 根据值删除(类似remove)
const valueToRemove = 3;
const index = tsArray.indexOf(valueToRemove);
if (index !== -1) {  // 确保找到了该值
  tsArray.splice(index, 1);
}
console.log(tsArray);  // 输出:[1, 4]


colors.pop(); // 删除并返回最后一个
colors.shift(); // 删除并返回第一个
colors.splice(0, 1); // 从索引0删除1个元素
const filtered = colors.filter(color => color !== "green"); // 条件删除,返回新数组

六、遍历元素(类似 Python 的 for 循环遍历)

Python list 遍历

python 复制代码
py_list = [1, 2, 3, 4]
# 遍历元素
for item in py_list:
    print(item)
# 遍历索引和元素
for index, item in enumerate(py_list):
    print(f"索引{index}:{item}")

TypeScript 数组遍历

  • 遍历元素:用for...of循环。
  • 遍历索引和元素:用for循环或forEach()方法。
typescript 复制代码
let tsArray: number[] = [1, 2, 3, 4];
// 遍历元素(类似for item in py_list)
for (const item of tsArray) {
  console.log(item);
}
// 遍历索引和元素(类似enumerate)
// 方法1:for循环,需要索引时
for (let index = 0; index < tsArray.length; index++) {
  console.log(`索引${index}:${tsArray[index]}`);
}
// 方法2:forEach()
tsArray.forEach((item, index) => {
  console.log(`索引${index}:${item}`);
});
list.forEach(x => console.log(x));

// map() 生成新数组(如转换数据)
const doubled = arr.map(x => x * 2);

// reduce() 累积计算(如求和)
const sum = arr.reduce((acc, val) => acc + val, 0);

七、操作对比总结

操作 Python list 方法 TypeScript 数组方法
定义 [] 或 list() number[] 或 Array
追加单个元素 append(value) push(value)
追加多个元素 extend(iter) push(...iter)
排序(升序) sort() sort((a, b) => a - b)
排序(降序) sort(reverse=True) sort((a, b) => b - a)
反转 reverse() reverse()
插入元素 insert(index, value) splice(index, 0, value)
按索引删除 pop(index) splice(index, 1)
删除末尾 pop() pop()
按下标删除 del lst[i] splice(i, 1)
按值删除 remove(value) 先indexOf(value)再splice(index, 1)
遍历元素 for item in list for...of 循环
遍历索引元素 enumerate(list) for循环或forEach((item, index) => {})
切片 lst[a:b] slice(a,b)
过滤 列表推导 filter()

通过以上对比可以看出,TypeScript 数组的操作与 Python list 类似,只是方法名和语法略有差异。掌握这些对应关系,能帮助 Python 开发者快速上手 TypeScript 数组操作。

相关推荐
站大爷IP26 分钟前
Python多态实战:从基础到高阶的“魔法”应用指南
python
Hilaku30 分钟前
为什么我坚持用git命令行,而不是GUI工具?
前端·javascript·git
码界筑梦坊1 小时前
108-基于Python的中国古诗词数据可视化分析系统
python·信息可视化·数据分析·django·毕业设计·numpy
歪歪1001 小时前
Vue原理与高级开发技巧详解
开发语言·前端·javascript·vue.js·前端框架·集成学习
用户2519162427111 小时前
Canvas之画图板
前端·javascript·canvas
紫金修道1 小时前
python安装部署rknn-toolkit2(ModuleNotFoundError: No module named ‘rknn_toolkit2‘)
开发语言·python
EndingCoder2 小时前
Next.js API 路由:构建后端端点
开发语言·前端·javascript·ecmascript·全栈·next.js·api路由
阳火锅3 小时前
# 🛠 被老板逼出来的“表格生成器”:一个前端的自救之路
前端·javascript·面试
Hilaku3 小时前
我给团队做分享:不聊学什么,而是聊可以不学什么
前端·javascript·架构
何以问天涯3 小时前
K210人脸识别系统
人工智能·python·嵌入式硬件·ai编程