TypeScript数组和对象的操作

这篇具有很好参考价值的文章主要介绍了TypeScript数组和对象的操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

ts文件运行环境

  1. 安装 TypeScript
npm install -g typescript
  1. 安装 ts-node
npm install -g ts-node
  1. 运行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 }
];
  1. for 循环
for ( let index = 0; index < persons.length; ++index) {
    console.log(persons[index]);
}
  1. for…in 循环
for (let index in persons) {
  console.log(persons[index])  
}
  1. for…of循环
for (let person of persons) {
  console.log(person)  
}

  1. 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
}] 

 */
  • 删除在另一个数组中包含的元素:

  • 删除在另一个数组中不包含的元素:文章来源地址https://www.toymoban.com/news/detail-683291.html

  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)
    }
  }

到了这里,关于TypeScript数组和对象的操作的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • TypeScript 数组

            ts的数组几乎与js数组操作一致。本文主要讲一些需要关注的地方。         初始化字符串数组         除了使用中括号 [] 的方法来声明数组,我们还可以使用数组泛型来定义数组         至于什么是泛型,请看后面的推文。         对象数组: 解构是一种表

    2024年02月09日
    浏览(37)
  • 《前端面试题》- TypeScript - TypeScript的优/缺点

    简述TypeScript的优/缺点 优点 增强了代码的可读性和可维护性 包容性,js可以直接改成ts,ts编译报错也可以生成js文件,兼容第三方库,即使不是ts编写的 社区活跃,完全支持es6 缺点 增加学习成本 增加开发成本,因为增加了类型定义 需要编译,类型检查会增加编译时长,语

    2024年04月23日
    浏览(40)
  • 单例模式——javascript和typescript

    确保某个方法或者类只有一个是咧。而且自行实例子并向整个系统提供这个实例。 某个方法或类只能一个; 必须自行创建这个实例 必须自行向整个系统提供这个实例。

    2024年02月05日
    浏览(49)
  • 五、typescript(内置对象)

    四、typscript(类型断言)-CSDN博客 5.1 ES 的内置对象(JS 中有很多内置对象,可以直接在 TS 中当做定义好了的类型) 5.2 DOM 和 BOM 的内置对象 5.3 TS 核心库的定义文件

    2024年01月20日
    浏览(32)
  • typescript 对象的属性定义

    [propName: string] :表示对象属性可以是任意值

    2024年02月21日
    浏览(32)
  • 一文了解JavaScript 与 TypeScript的区别

    TypeScript 和 JavaScript 是两种互补的技术,共同推动前端和后端开发。在本文中,我们将带您快速了解JavaScript 与 TypeScript的区别。   一、TypeScript 和 JavaScript 之间的区别 JavaScript 和 TypeScript 看起来非常相似,但有一个重要的区别。 JavaScript 和 TypeScript 之间的主要区别在于 JavaS

    2024年02月14日
    浏览(51)
  • TypeScript中数组,元组 和 枚举类型

    方式一 方式二,使用泛型定义 方式三,使用any 可以定义不同类型 定义类型顺序需保持一直 枚举类型都有自己的编号,默认从0开始,也可以自定义,依次增加1

    2024年02月15日
    浏览(37)
  • TypeScript类与对象:面向对象编程的基础

    TypeScript 是 JavaScript 的一个超集,它为 JavaScript 添加了静态类型、类、接口和装饰器等面向对象编程的特性,并通过编译器将 TypeScript 编译成JavaScript,可以在任何 JavaScript 环境中运行,因此成为了 JavaScript 开发中不可或缺的工具。面向对象编程是现代编程语言的基础,而 Ty

    2024年02月09日
    浏览(45)
  • TypeScript是什么?它与JavaScript有什么区别?

    面试题-TS(1):TypeScript是什么?它与JavaScript有什么区别? TypeScript是一种编程语言,它是JavaScript的超集。它通过添加静态类型、类、接口和模块等功能来扩展JavaScript。 JavaScript是一种广泛应用于Web开发的脚本语言,它的灵活性和易用性使得它成为了开发者们的首选。然而,JavaS

    2024年02月16日
    浏览(46)
  • React框架:TypeScript支持的JavaScript库

    React 框架是一个功能强大的 JavaScript 库,让用户可以轻松地构建高度动态的用户界面。它借助虚拟 DOM 的思想实现高效的性能,并具有易于使用和灵活的编程接口。随着越来越多的人开始使用 React ,在不断的发展和变化中, React 框架现在加入了 TypeScript 的支持,使其成为一个

    2024年02月11日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包