TypeScript数组和对象的操作

TypeScript数组和对象的操作

一、数组的声明

typescript 复制代码
let arr1: Array<number>;
let arr2: number[];

二、数组初始化

typescript 复制代码
let arr1: Array<number> = new Array<number>();
let arr2: number[] = [1,2,3];

三、数组元素赋值、添加、更改

typescript 复制代码
// 基本变量不需要声明后可以不需要初始化;
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] 

四、删除

typescript 复制代码
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] 

五、合并、断开数组

typescript 复制代码
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]

六、查找数组元素

typescript 复制代码
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} 

七、连接数组元素

typescript 复制代码
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" 

八、排序、反序数组

typescript 复制代码
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] 

九、遍历数组,对象

  • 定义数组
typescript 复制代码
let persons = [
    { id: 1, name: '张三', age: 23 },
    { id: 2, name: '李四', age: 11 },
    { id: 3, name: '王五', age: 16 }
];
  1. for 循环
typescript 复制代码
for ( let index = 0; index < persons.length; ++index) {
    console.log(persons[index]);
}
  1. for...in 循环
typescript 复制代码
for (let index in persons) {
  console.log(persons[index])  
}
  1. for...of循环
typescript 复制代码
for (let person of persons) {
  console.log(person)  
}
  1. forEach循环
typescript 复制代码
persons.forEach((value, index, array) => {
    console.log(value, index)
})
相关推荐
满怀10152 分钟前
【HTML 全栈进阶】从语义化到现代 Web 开发实战
前端·html
繁依Fanyi10 分钟前
用 UniApp 构建习惯打卡 App —— HabitLoop 开发记
javascript·uni-app·codebuddy首席试玩官
东锋1.314 分钟前
前端动画库 Anime.js 的V4 版本,兼容 Vue、React
前端·javascript·vue.js
满怀101526 分钟前
【Flask全栈开发指南】从零构建企业级Web应用
前端·python·flask·后端开发·全栈开发
小杨升级打怪中1 小时前
前端面经-webpack篇--定义、配置、构建流程、 Loader、Tree Shaking、懒加载与预加载、代码分割、 Plugin 机制
前端·webpack·node.js
Yvonne爱编码1 小时前
CSS- 4.4 固定定位(fixed)& 咖啡售卖官网实例
前端·css·html·状态模式·hbuilder
SuperherRo2 小时前
Web开发-JavaEE应用&SpringBoot栈&SnakeYaml反序列化链&JAR&WAR&构建打包
前端·java-ee·jar·反序列化·war·snakeyaml
大帅不是我2 小时前
Python多进程编程执行任务
java·前端·python
前端怎么个事2 小时前
框架的源码理解——V3中的ref和reactive
前端·javascript·vue.js
Ciito2 小时前
将 Element UI 表格元素导出为 Excel 文件(处理了多级表头和固定列导出的问题)
前端·vue.js·elementui·excel