九、数组增删改查、条件语句(渲染)、三元运算、

原创 于 2024-11-01 18:16:31 发布 · 273 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos

1. 案例-美团购物车

@Entry
@Component
struct Index {

  @State count:number =0

  build() {
    Column() {
      Column() {
        // 产品
        Row({ space: 10}){
          // 图片
          Image($r('app.media.product1'))
            .width(100)
            .borderRadius(8)
          // 文字
          Column({space: 10}) {
            Column({ space: 6}) {
              Text('冲销量1000ml缤纷八果水果捞')
                .lineHeight(20)
                .fontSize(14)
              Text('含1份折扣商品')
                .fontSize(12)
                .fontColor('#7f7f7f')
            }
            .width('100%')
            .alignItems(HorizontalAlign.Start)
            Row(){
              // 价格
              Row({ space: 5}) {
                Text() {
                  Span('￥')
                    .fontSize(14)
                  Span('20.2')
                    .fontSize(18)
                }
                .fontColor('#ff4000')
                Text() {
                  Span('￥')
                  Span('40.4')
                }
                .fontSize(14)
                .fontColor('#999')
                .decoration({type: TextDecorationType.LineThrough, color: '#999'})
              }
              // 加减
              Row() {
                Text('-')
                  .width(22)
                  .height(22)
                  .border({width:1, color: '#e1e1e1', radius: {topLeft: 5, bottomLeft: 5}})
                  .textAlign(TextAlign.Center)
                  .fontWeight(700)
                  .onClick(()=>{
                    if (this.count>0) {
                      this.count--
                    }else {
                      AlertDialog.show({message:'不能再减啦~(*≧︶≦))(￣▽￣* )ゞ'})
                    }
                  })
                Text(this.count.toString())
                  .height(22)
                  .border({width: { top:1, bottom: 1 }, color: '#e1e1e1'})
                  .padding({left: 10, right: 10})
                  .fontSize(14)
                Text('+')
                  .width(22)
                  .height(22)
                  .border({width:1, color: '#e1e1e1', radius: {topRight: 5, bottomRight: 5}})
                  .textAlign(TextAlign.Center)
                  .fontWeight(700)
                  .onClick(()=>{
                    this.count++
                  })
              }
            }
            .width('100%')
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .height(75)
          .layoutWeight(1)
          .justifyContent(FlexAlign.SpaceBetween)
        }
        .width('100%')
        .alignItems(VerticalAlign.Top)
        .padding(20)

        // 结算
        Row({ space: 10 }){
          // 价格
          Column({space: 5}) {
            Text() {
              Span(`已选${this.count}件，`)
                .fontColor('#848484')
              Span('合计:')
              Span('￥')
                .fontColor('#fd4104')
              Span((20.2*this.count).toFixed(2))
                .fontColor('#fd4104')
                .fontSize(16)
            }
            .fontSize(14)
            Text(`共减￥${(20.2*this.count).toFixed(2)}`)
              .fontColor('#fd4104')
              .fontSize(12)
          }
          .alignItems(HorizontalAlign.End)
          // 结算按钮
          Button('结算外卖')
            .width(110)
            .height(40)
            .backgroundColor('#fed70e')
            .fontColor('#564200')
            .fontSize(16)
            .fontWeight(600)
        }
        .width('100%')
        .height(70)
        .backgroundColor('#fff')
        .position({x:0, y: '100%'})
        .translate({y: '-100%'})
        .padding({ left: 20, right: 20 })
        .justifyContent(FlexAlign.End)
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f3f3f3')
  }
}

2. 数组

增 push unshift

数组名.push(数据1, 数据2, ...)、 数组名.unshift(数据1, 数据2, ...)

// 数组增加和删除数据
// 'Rose' 'Lisa' 'Taylor'
let names:string[]=['Tom','Jack','Jerry']
console.log('',names)

// 1. 增加
// 1.1 数组开头新增数据
// names.unshift('Rose')
// 返回值: (返回值指的是操作后的结果) 增加数据之后的元素个数,即数组的新长度
console.log('',names.unshift('Rose'))
console.log('',names)
// 1.2 数组最后新增数据
// names.push('Lisa')
console.log('',names.push('Lisa'))
console.log('',names)

删 pop shift

数组名.pop()、数组名.shift()

// 数组增加和删除数据
// 'Rose' 'Lisa' 'Taylor'
let names:string[]=['Tom','Jack','Jerry','Rose','Lisa']
console.log('',names)

// 2. 删除
// 2.1 数组开头删除数据
// 返回值: 删除的数据
console.log('',names.shift())
console.log('',names)
// 2.2 数组最后删除数据
console.log('',names.pop())
console.log('',names)

改

数组名[下标] = 新值

查

数组名[下标]

任意位置添加/删除数组元素

语法: 数组名.splice(起始位置, 删除的个数, 新增元素1, 新增元素2, ......)

注意: 如果不写该参数,代表从开始的位置起,删除往后所有的元素

返回值: 删除的元素组成的新数组

// 数组增加和删除数据
// 'Rose' 'Lisa' 'Taylor'
let names: string[] = ['Tom', 'Jack', 'Jerry', 'Rose', 'Lisa']
console.log('', names)

// 开头删除一个数据后 新增一个
console.log('', names.splice(0, 1, 'Taylor'))
console.log('', names)
// 最后删除一个数据后 新增一个
console.log('', names.splice((names.length)-1, 1, 'Taylor'))
console.log('', names)

3. if

// 表达式： 可以被求值的代码，并将其计算出一个结果
// 语句： 一段可以执行的代码，是一个行为，例如分支语句和循环语句

let age: number = 16
if (age >= 18) {
  console.log('年龄达到规定，可以进入网吧')
} else {
  console.log('年龄未达到规定，禁止进入')
}

let score:number = 71
if (score>=90){
  AlertDialog.show({message:'优秀'})
}else if(score>=70){
  AlertDialog.show({message:'良好'})
}else if (score>=60){
  AlertDialog.show({message:'及格'})
}else {
  AlertDialog.show({message:'不及格'})
}
// 括号内的判断表达式不可被打乱顺序，若打乱顺序需&&连接

4. switch

// switch case break default
/* 基础语法
  switch (表达式) {
  case 值1:
    与值1匹配执行的语句
    break
  case 值2:
    与值2匹配执行的语句
    break
  default:
    以上都未成功匹配执行的代码
}*/
// 区间判断用if，判断是否相等用switch
// 如果没有break语句，会发生switch穿透现象
let fruit: string = '橘子'

switch (fruit) {
  case '苹果':
    console.log('苹果5元/斤')
    break
  case '橘子':
    console.log('橘子3元/斤')
    break
  default:
    console.log('不好意思，您查询的水果已售完')
}

5. 条件表达式/三元运算符

// 条件表达式 三元运算符
// 条件 ? 条件成立执行的表达式 : 条件不成立执行的表达式
let num1: number = 20
let num2: number = 30

num1 > num2 ? num1 : num2
console.log('较大值为',num1 > num2 ? num1 : num2)

6. 案例-单击切换

@Entry
@Component
struct Index {
  @State isFollowed: boolean = false

  build() {
    Column() {
      Button(this.isFollowed ? '已关注' : '+ 关注')
        .backgroundColor(this.isFollowed ? Color.Orange : Color.Blue)
        .onClick(() => {
          this.isFollowed = !this.isFollowed
        })
    }
    .height('100%')
    .width('100%')
  }
}

7. 案例-京东加购

@Entry
@Component
struct Index {
  @State count: number = 0
  @State isOpacity: number = 1

  build() {
    Column() {
      Column() {
        // 底部菜单
        Row({ space: 10 }) {
          // 左侧菜单
          Row() {
            Column({ space: 5 }) {
              Image($r('app.media.ic_dianpu'))
                .width(20)
              Text('店铺')
                .fontSize(10)
                .fontColor('#262626')
            }

            Column({ space: 5 }) {
              Image($r('app.media.ic_kefu'))
                .width(20)
                .fillColor('#666')
              Text('客服')
                .fontSize(10)
                .fontColor('#262626')
            }

            Column({ space: 5 }) {
              Image($r('app.media.ic_cart2'))
                .width(20)
                .fillColor('#666')
              Text('购物车')
                .fontSize(10)
                .fontColor('#262626')
            }
          }
          .layoutWeight(1)
          .justifyContent(FlexAlign.SpaceBetween)

          if (this.count > 0) {
            // 右侧按钮 -- 可以购买
            Row({ space: 5 }) {
              Button('加入购物车')
                .width(105)
                .height(40)
                .backgroundColor('#ffcc00')
                .fontSize(14)
                .fontWeight(600)
              Button('立即购买')
                .width(105)
                .height(40)
                .backgroundColor('#f92c1b')
                .fontSize(14)
                .fontWeight(600)
            }
          } else {
            // 右侧按钮 -- 不能购买
            Row() {
              Button('查看类似商品')
                .width(170)
                .height(40)
                .backgroundColor('#ffcc00')
                .fontSize(14)
                .fontWeight(600)
            }
          }


        }
        .width('100%')
        .height(60)
        .backgroundColor('#f7f7f7')
        .padding({ left: 20, right: 10 })

        if (this.count <= 0) {
          // 消息提示：库存 <= 0 显示，否则隐藏
          Row() {
            // 左侧
            Row({ space: 5 }) {
              Image($r('app.media.ic_lingdang'))
                .width(12)
                .fillColor('#de6a1c')
              Text('该商品暂时没有库存，看看相似商品吧')
                .fontSize(10)
                .fontColor('#de6a1c')
            }

            // 右侧
            Image($r('app.media.ic_close'))
              .width(15)
              .padding(3)
              .fillColor('#d0662c')
              .backgroundColor('rgba(0,0,0,0.1)')
              .borderRadius(8)
              .onClick(() => {
                this.isOpacity = 0
              })
          }
          .width('100%')
          .height(36)
          .backgroundColor('#fbf9da')
          .position({ x: 0, y: '-36' })
          .padding({ left: 20, right: 20 })
          .justifyContent(FlexAlign.SpaceBetween)
          .opacity(this.isOpacity)
        }

      }
      .position({ x: 0, y: '100%' })
      .translate({ y: '-100%' })
    }
    .width('100%')
    .height('100%')
    .padding({ bottom: 20 })
    .backgroundColor('#f2f2f2')
  }
}

「前端+鸿蒙」鸿蒙应用开发-ArkTS语法说明 - 渲染控制
拥抱AI Design
06-15 444
ArkTS 作为鸿蒙（HarmonyOS）应用开发中的现代框架，提供了声明式渲染和组件化开发的能力。渲染控制是 ArkTS 中一个重要的概念，允许开发者根据状态变化有条件地渲染组件。以下是 ArkTS 中渲染控制的基本语法说明和示例代码。
三元表达式的嵌套（多层三元运算）
小多的博客
01-07 6740
有时候我们需要根据条件获取不同的值，但又不方便写条件语句（比如：根据不同的值获取不同的字符段以渲染不同的数据）,此时我们就需要三元表达式的嵌套来完成 a = 条件1 ? 值1 : (条件2 ? 值2 : (条件3 ? 值3 : (条件4 ? 值4 : 值5))); ...
算法——数组的增删查改
seelune_的博客
09-07 472
数组的修改和查询不具有特别的坑，在此我们不再赘述。对于基础的数组增删，下标越界是让人十分恼火的事情，恼火的原因就是思路是对的，但是因为其中某个点忘记加等号导致数组越界，所以感觉简单不可靠，只有一步步把简单的里面的坑拔掉才能在面试的关键时刻不掉链子！
数组常见操作：增、删、改、查（筛选），遍历，排序
955姜太根的博客
01-10 846
数组常见操作
js数组的增删改查，十二种方法(含代码)
m0_74577714的博客
09-15 3605
​让我为大家介绍一下数组的增删改查的方法吧！
数组增删查改
weixin_57727027的博客
08-07 185
数组增删查改 数组的增删查改是什么？ 增：在数组里面添加数据 在数组的最前面添加三条数据 let arr = ["d","e","f"]; // 方式一：比较复杂 // arr.unshift("a"); // arr.unshift("b"); // arr.unshift("c"); // 方式二：比较方便 ▲// unshift() 和push（）方法一样，会返回新增的数组的长度 // unshift()方法和push（）方法一样，可以
数组的增、删、改、连
weixin_41875025的博客
03-04 401
** 数组的增、删、接、变 其中方法：2增3删1连2变 ** /* ***增：从数组的最后增加元素 方法名称：push();*** 功能：在数组的最前面增加一位元素 参数：数组 返回值：数组的长度 调用者：数组 打印结果：13 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, "aaa"] */ var arryPush = [0,1...
React- jsx的使用 不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代...
09-08
在JSX中，不能直接使用if else语句，但可以使用条件（三元运算）表达式来替代。 条件表达式是一种简洁的语法结构，用于根据某个条件返回不同的值。它的基本语法是：condition ? expression1 : expression2。其中，...
react在div的三元运算中插入svg图片
05-20
可以使用JSX语法在React组件中通过三元运算符来动态渲染SVG图片。 首先，需要导入SVG图片，可以使用import语句将SVG文件导入到React组件中，例如： ```jsx import { ReactComponent as MySvg } from './my-svg.svg...
如果在模版中存在多个判断条件 如何用三元运算符
最新发布
05-13
#### 三、样式绑定中的多条件三元运算 在动态样式（如 `v-bind:style`）中也可使用嵌套三元运算符： ```html backgroundColor: skin === 'white' ? '#fff' : (skin === 'dark' ? '#333' : '#f0f0f0') }"> ...
数组的常见方法二
ssk的博客
08-28 545
16.lastIndexOf()方法 查找数组中最后一次出现元素的索引值 let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1] arr.lastIndexOf(1) // 10 17.map()方法 遍历数组的每一项，可以对每一项统一进行操作，并且返回一个新的数组。 let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] arr.map(item => item * 10) // [10, 20, 30.
数组新增
明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。 但愿人长久，千里共婵娟。
08-21 418
前言 最近研究zepto源码的时候发现一些非常好用的数组方法，这些就是es5新增的数组方法，而w3c这些网站并没有这些方法介绍，可能是太久没更新维护了。总结了一下，给这些方法分了类，大体如下：  5个迭代方法：forEach()、map()、filter()、some()、every()；  2个索引方法：indexOf() 和 lastIndexOf()；  2个归并方法：reduce()、r...
JS：array数组增、删方法
weixin_43856797的博客
12-17 292
栈方法 push() pop() js中数组有出栈入栈的方法，也就是向“数组栈”中入栈、出栈，"栈"简单来说就是添加与删除都会从后面一个一个来 push() 方法会返回入栈后的数组长度，并将内容添加到数组后 var students=["Tom","Gary","Lucy"]; alert(students.push("Jack","Mario"));//5 alert(students);//T...
java数组增，删，改，查（元素）
热门推荐
Half of if的博客
07-06 2万+
创建数组的三种方式：(以整型数组为例)        1， int [ ] nums=new int[5];     //nums变量名  [5]是数组大小         2,  int  [ ] nums= new int[]{1,2,3,4,5};         3,  int [] nums={1,2,3,4,5};        array 数组   index下标    out of...
c语言删增,C语言数组的增加-删除--以及经典冒泡排序算法
weixin_34040270的博客
05-19 429
虽然是最基本的，但成功靠的是一点一点的积累#include #include int main(){int i,j;int temp;int count = 5;int nums[] = {23,5,87,29,9};int delete_nums;int delete_Index = -1;int insert_nums;printf("打印出要操作的值:");for(i=0;i{printf(...
数组增加一个元素的方法
weixin_46457589的博客
03-04 5142
1.unshift 2…length 3.push 4.splice function fn(arr){ arr.unshift(-1,0); return arr; } console.log(fn([1,2,3])); 2. function fn(arr1){ arr1[arr1.length] = 1; return arr1; } console.log(fn([1,2,3]));...
自学javaSE-数组的追加
Antg的博客
07-26 2195
一维数组 public class test { public static void main(String args[]){ int[] array = {};//创建一个空的一维数组 int[] a = {1,2,3,4,5,6,7,8,9};//要追加的值列表，可以是单个值，把数组类型改成int类型就行 for(int i = 0;i<a.length;i++){//循环追加输出 array = addArray
增加数组的长度
qq_42903710的博客
01-09 4752
public static void main(String[] args) { int [] i = new int[4]; //第一个参数是数组本体，第二个参数是要增加的长度， i=amend(i,10);//使用增加数组长度的方法 System.out.println(i.length); } public static int[] amend(int[] obj...
简单的数组增删改查
yz_123_456的博客
05-31 5229
      数组是Java中比较基础的内容，但是却是在java体系中一个非常重要的内容，它和集合都是容器，不同点是数组的长度不可变，而集合的长度却可以任意变化，所以在增删改查这个练习中，使用数组来练习比起用集合来做就更加复杂。接下来我用代码来说明使用数组的用法。首先，做这个联系，要做的是把对象封装，我做的是学生的的增删改查，所以我先创建一个学生的类，把学生需要的属性都放在这个类当中，public ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值