TypeScript数组

数组

数组 数据存储的集合

声明数组的两种方式

1.只声明不赋值

：let arr1:string[]

<>泛型 数组在使用前先赋值

2.边声明边赋值

let arr3:string[]=[];//空数组
// [数据1,数据2,.....数据n]数据之间用,隔开
let arr4:string[]=['张三','李四','王五'];
let arr5:Array<number>=[]
let arr6:Array<number>=[1,2,3,4]
console.log(arr5);
console.log(arr6);

长度属性 用来确定数组中数据的数量 (length)

let l1:number=arr3.length
console.log(`arr3的长度是:${l1}`);

元素名称：类型=数组名[下标/索引] 下标从0开始

最后一个元素的下标 length-1

获取数组中的元素

let names:string[]=['张三','刘进修','龙队','文文','好啊']
let name1:string=names[1]
console.log(name1);
let namen:string=names[names.length-1]
console.log(namen);

添加元素/替换原本元素:

let names:string[]=['张三','刘进修','龙队','文文','好啊']
names[5]='斌斌'
console.log(names);
names[1]='kk'//替换了原来的元素
console.log(names);

遍历：把所有的数据检查一遍

for(let i=0;i<names.length;i++){
    let namem:string=names[i];
    console.log('姓名:'+namem);
}

使用 for in 遍历 没有赋值的会自动跳过去

for(let i in names){
    console.log('姓名:'+names[i]);
}
let arr7:string[]=['sdf','fgh','sb'];

拼接数组，并组成新的数组 concat

let arr8:string[]=names.concat(arr7)
for(let i in arr8){
console.log(arr8[i]);
}

把数组变成字符串，并用分隔符分割:join

pop删除并返回最后一个元素

push向末尾添加元素并返回新的长度

颠倒元素reverse

删除并返回第一个shift

获取指定元素 (开始的下标，结束的下标)slice

删除指定位置的元素 并向数组添加元素splice(删除的下标，删除的数量)

把数组转换为字符串，并返回结果。toString()

toLocaleString()把数组转换为本地数组，并返回结果。

unshift向数组的开头添加一个或更多元素，并返回新的长度。

例：

let names:string[]=['张三','刘进修','龙队','文文','好啊']
console.log(names.join('/'));
console.log(names.pop());
console.log(names);
console.log(names.push('hello'));
console.log(names.reverse());
console.log(names.shift());
console.log(names);
console.log(names.slice(2,5));
names.splice(1,1)//(删除的下标，删除的数量)
names.splice(1,2,'as啊','阿萨德')
console.log(names.toString());
console.log(names.toLocaleString());
names.unshift('水电费规划局快乐')
console.log(names);

数组综合练习

Divider提供分隔器组件，分隔不同内容块/内容元素。

自定义组件

@Builder DeleteButton(index:number){
Row(){
  Button({type:ButtonType.Circle}){
    Image($r('app.media.icons')).height(30)
  }.height(50).width(50)
  .onClick(()=>{
    this.task.splice(index,1)
  })
}
}

利用自定义组件设置滑动

.swipeAction({
  start:this.DeleteButton(index),//左边滑动
  end:this.DeleteButton(index)//右边滑动
})

List列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。

该组件的父组件只能是List或者ListItemGroup。仅支持ListItem、ListItemGroup子组件。

ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如，ListItem组件要求ForEach的父容器组件必须为List组件。

   Column(){
     List({space:10}){
        ForEach(this.task,(n:number,index)=>{
      ListItem(){
        Row(){
          Text(`任务`)
          Text(`${n}`)
        }
          .width('90%').height(60).backgroundColor('#fff').borderRadius(30).border({width:1,color:'red'})
      }
        .swipeAction({
          start:this.DeleteButton(index),//左边滑动
          end:this.DeleteButton(index)//右边滑动
        })
        })
     }.height('80%')
     .width('100%')
     .backgroundColor('#ccc')
     .alignListItem(ListItemAlign.Center)
   }

跳转页面:

router.pushUrl({
  url:'pages/StuShowPage'

isChecked是用来知道复选框是否被选中。如果复选框被选中，该方法将返回真，否则将返回假。
例子：

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct StuShowPage {
  @State message: string = '学生信息展示';
  @State ids:number[]=[1,2,3,4,5,6];
  @State names:string[]=['张三','李四','王五','张留','赵六','孙琦']
  @State sexs:number[]=[0,1,0,1,0,1];//0女 1男
  @State ages:number[]=[18,19,18,16,23,21]
  @State zys:string[]=['h5','jave','h5','python','c++','c#']
  @State clas:string[]=['01','02','03','04','11','33']
  @State tels:string[]=['13245321543','10293847563','17293840382','28172382911','12345678901','23456789012']

  @State id1:number=0
  @State name:string=''
  @State sex:number=0
  @State age:number=0
  @State zy:string=''
  @State cla:string=''
  @State tel:string=''
  build() {
   Column(){
     Text(`${this.message}`).fontSize(30)
     List({space:10}){
       ForEach(this.ids,(id1:number,index)=>{
         ListItem(){
           Column(){
              Row(){
                Text(`学号:${id1}`)
                Text(`姓名:${this.names[index]}`)
                Text(`性别:${this.sexs[index]===0? '女':'男'}`)
                Text(`年龄:${this.ages[index]}`)
              }.width('100%').height(50).justifyContent(FlexAlign.SpaceAround)
              Row(){
                Text(`专业:${this.zys[index]}`)
                Text(`班级:${this.clas[index]}`)
                Text(`电话:${this.tels[index]}`)
              }.width('100%').height(50).justifyContent(FlexAlign.SpaceAround)
           }.width('95%').border({color:"#ccc",width:1}).backgroundColor('#eee')

         }
         .swipeAction({
           end:this.DeleteBt(index)

         })
       })
     }
     .alignListItem(ListItemAlign.Center)
     .height(500)
     //  Divider提供分隔器组件，分隔不同内容块/内容元素。
     Divider().color('#ccc').strokeWidth(2)
     Row(){
      TextInput({placeholder:'学号'}).width('20%').borderRadius(0)
        .onChange(val=>{
          this.id1=parseInt(val)
        })
       TextInput({placeholder:'姓名'}).width('20%').borderRadius(0)
         .onChange(val=>{
           this.name=(val)
         })
       TextInput({placeholder:'年龄'}).width('20%').borderRadius(0)
         .onChange(val=>{
           this.age=parseInt(val)
         })
       Row(){
        Text('性别:')
         Column(){
          Radio({value:`1`,group:'sex'})
            .onChange(isChecked=>this.sex=1)
           Text('男')
         }
         Column(){
           Radio({value:`0`,group:'sex'}).checked(true)
             .onChange(isChecked=>this.sex=0)
           Text('女')
         }
       }.width('30%')
     }.width('100%').height(80)
     .justifyContent(FlexAlign.SpaceAround)
     .alignItems(VerticalAlign.Center)
     Row(){
        TextInput({placeholder:'专业'}).width('20%').borderRadius(0)
          .onChange(val=>{
            this.zy=val
          })
       TextInput({placeholder:'班级'}).width('20%').borderRadius(0)
         .onChange(val=>{
           this.cla=val
         })
       TextInput({placeholder:'电话'}).width('40%').borderRadius(0)
         .onChange(val=>{
           this.tel=val
         })
     }.width('100%').height(50)
     .justifyContent(FlexAlign.SpaceAround)
     .alignItems(VerticalAlign.Center)

     Button('添加').width('90%').margin({top:20}).type(ButtonType.Normal)
       .onClick(()=>{
          if(this.id1==0||this.name===''||this.age===0||this.zy==''||this.cla==''||this.tel==''){
            promptAction.showToast({message:'数据不能为空'})
          }else {
           let isId:boolean=false;//默认不重复
            for(let i:number=0;i<this.ids.length;i++){
              if(this.ids[i]==this.id1){
                isId=true//id重复
                break;
              }
            }
            if(isId){//重复
              promptAction.showToast({message:'学号不能重复'})
            }else {
              this.ids.push(this.id1)
              this.names.push(this.name)
              this.sexs.push(this.sex)
              this.ages.push(this.age)
              this.clas.push(this.cla)
              this.zys.push(this.zy)
              this.tels.push(this.tel)
              promptAction.showToast({message:'添加成功!'})
            }
          }
       })
   }
    .height('100%')
    .width('100%')
  }
  @Builder DeleteBt(index:number){
  Button({type:ButtonType.Normal}){
    Image($r('app.media.icons')).height(50).interpolation(ImageInterpolation.High)
  }.height(102).width(100)
    .onClick(()=>{
      this.ids.splice(index,1)
      this.names.splice(index,1)
      this.ages.splice(index,1)
      this.sexs.splice(index,1)
      this.clas.splice(index,1)
      this.zys.splice(index,1)
      this.tels.splice(index,1)
      promptAction.showToast({message:'删除成功！'})
    })
  }
}