TypeScript数组和对象的操作_ts 对象数组

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
TypeScript数组和对象的操作

ts文件运行环境
一、数组的声明
二、数组初始化
三、数组元素赋值、添加、更改
四、删除
五、合并、断开数组
六、查找数组元素
七、连接数组元素
八、排序、反序数组
九、遍历数组，对象
十、删除数组，对象中符合条件的数据
ts文件运行环境

安装 TypeScript
npm install -g typescript
安装 ts-node 
npm install -g ts-node
运行ts文件,cmd下 
ts-node demo.ts
一、数组的声明
 
let arr1: Array<number>;
let arr2: number[];
二、数组初始化
 
let arr1: Array<number> = new Array<number>();
let arr2: number[] = [1,2,3];
三、数组元素赋值、添加、更改
 
// 基本变量不需要声明后可以不需要初始化；
let a:number;
a = 1;
console.log(a); // 1
let b: string;
b = "string";
console.log(b); // string
// 数组和对象使用之前必须要初始化；
let arr1: Array<number>;
// arr1[0] = 100; // Variable 'arr1' is used before being assigned.
//arr1.push(100);  // 就算使用push来添加也不行
//console.log(arr1)
let arr2: Array<number> = new Array<number>();
arr2[0] = 1;  // 赋值和修改格式一样
arr2.push(2);	// 最后面增加,可以多个值
arr2.unshift(3) // 最前面增加，可以多个值
console.log(arr2)  // [3, 1, 2, 3] 
let arr: Array<number> = [1,2,3,4,5]
arr.pop();
console.log(arr);   // [1, 2, 3, 4] 
arr.shift();
console.log(arr);   // [2, 3, 4] 
arr.splice(0,2);     // 删除元素（index, deleteCount）
console.log(arr);    // [4] 
五、合并、断开数组
 
let arr: Array<number> = [1,2,3]
let arr2: Array<number> = [4,5,6]
let arrValue = 7
arr = arr.concat(arr2)
console.log(arr) //[1, 2, 3, 4, 5, 6] 
arr = arr.concat(arrValue)
console.log(arr) //[1, 2, 3, 4, 5, 6, 7] 
let newArray = arr.slice(1, 3)
console.log(newArray)  // [2,3]
六、查找数组元素
 
let arr: Array<string> = ["a", "b", "c", "d"]
let index = arr.indexOf("c") //返回查找到的第一个元素所在位置
console.log(index) // 2
index = arr.lastIndexOf("d") //返回反序查找的第一个元素所在位置
console.log(index) // 3
// 对象
let persons = [
    { id: 1, name: '张三', age: 23 },
    { id: 2, name: '李四', age: 11 },
    { id: 3, name: '王五', age: 16 }
// persons.forEach((value, index, array) => {
//     console.log(value, index)
// })
// find() 方法返回相应的对象, 从未返回真值，则 find() 方法返回 undefined
const person = persons.find(obj => {
    return obj.id === 2;
console.log(person); // {  "id": 2,  "name": "李四",  "age": 11} 
// filter, 也可以反向选择
const p1 = persons.filter(obj => {
    // return obj.name != "李四"
    return obj.id == 2;
console.log(p1); // {  "id": 2,  "name": "李四",  "age": 11} 
const p2 = persons.filter(obj => {
    return obj.id != 2;
console.log(p2); 
  "id": 1,
  "name": "张三",
  "age": 23
  "id": 3,
  "name": "王五",
  "age": 16
// 查找元素的index
const c1 = persons.findIndex(person => {
    return person.name == "李四"
console.log(c1); // 1
console.log(persons[c1]) //{  "id": 2,  "name": "李四",  "age": 11} 
七、连接数组元素
 
let arr: Array<string> = ["a", "b", "c", "d"]
let joinString = arr.join(",") //返回查找到的第一个元素所在位置
console.log(joinString) // "a,b,c,d" 
joinString = arr.join("-") //返回反序查找的第一个元素所在位置
console.log(joinString) // "a-b-c-d" 
八、排序、反序数组
 
let arr: Array<number> = [1,4,3,5,2]
arr.sort()
console.log(arr) // [1, 2, 3, 4, 5] 
arr.reverse() //返回反序查找的第一个元素所在位置
console.log(arr) // [5, 4, 3, 2, 1] 
九、遍历数组，对象
 
let persons = [
    { id: 1, name: '张三', age: 23 },
    { id: 2, name: '李四', age: 11 },
    { id: 3, name: '王五', age: 16 }
for 循环 
for ( let index = 0; index < persons.length; ++index) {
    console.log(persons[index]);
for…in 循环 
for (let index in persons) {
  console.log(persons[index])  
for…of循环 
for (let person of persons) {
  console.log(person)  
forEach循环 
persons.forEach((value, index, array) => {
    console.log(value, index)
十、删除数组，对象中符合条件的数据
 
 目前要上面的遍历方法都有问题，因为 删除后，索引就变了
 
 目前能想到和实现的办法是通过while 来实现
  
let persons = [
    { id: 1, name: '张三', age: 23 },
    { id: 2, name: '李四', age: 11 },
    { id: 3, name: '王五', age: 16 },
    { id: 4, name: '王xx', age: 16 }
let i = persons.length;
while (i--) {
    if (persons[i].id == 1 || persons[i].id == 3) {
        persons.splice(i, 1);
console.log(persons);
  "id": 2,
  "name": "李四",
  "age": 11
  "id": 4,
  "name": "王xx",
  "age": 16
 删除在另一个数组中包含的元素：
 
 删除在另一个数组中不包含的元素：
  
  deleteNotInList(currList: any[], otherList: any[]) {
    let i = currList.length
    while (i--) {
      if (!otherList.some((x) => {
        return currList[i].scanItemName === x.scanItemName
      })) currList.splice(i, 1)
var alpha = ["a", "b", "c"];
var numeric = [1, 2, 3];
var alphaNumeric = alpha.concat(numeric);
console.log("alphaNumeric : " + alphaNumeric );    // a,b,c,1,2,3
					欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
					05-26
				您好！关于您的问题，我可以回答：使用Vue3 + TypeScript操作响应式数组的方法是，首先需要使用ref或reactive函数将数组转换为响应式对象，然后再用toRefs函数将响应式对象的属性转换为响应式引用，并在模板中使用v-for指令进行循环渲染。下面是一个示例代码：
<template>
    <div v-for="item in list" :key="item.id">{{ item.name }}</div>
    <button @click="add">添加</button>
</template>
<script lang="ts">
import { ref, reactive, toRefs } from 'vue'
export default {
  setup() {
    const list = ref([
      { id: 1, name: '张三' },
      { id: 2, name: '李四' },
      { id: 3, name: '王五' },
    function add() {
      const length = list.value.length
      list.value.push({
        id: length + 1,
        name: `新成员${length + 1}`
    return {
      ...toRefs(reactive({ list })),
</script>
这样就可以在Vue3 + TypeScript中操作响应式数组了。希望对您有所帮助！