一，输出语句，基础数据类型，数组，函数，对象，联合类型，枚举类型

已于 2025-07-26 20:40:46 修改
阅读量700 收藏 17
点赞数 25
CC 4.0 BY-SA版权
分类专栏： ArkUI+ArkTs基础 文章标签： javascript 开发语言 ecmascript
于 2024-11-10 22:07:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CC__xy/article/details/143436833

一，输出语句

console.log('消息说明', '打印的内容')

注释：

  1. 单行注释 // 注释内容，快捷键： Ctrl +/
  2. 块注释 /* 注释内容*/，快捷键：Ctrl + Shift + /

二、基础数据类型 

编程语言的核心是处理 数据。

基础数据类型(都是小写)

1.string 字符串：描述信息(引引号引起来，单引双引引都可以，一般单引引)
2.number数字：计算
3.boolean 布尔：判断，值true真，false假

4.undefined 未定义型
5.null 空类型

三、变量let

变量：专门用来存储数据的容器(可变)

语法：let变量名：类型=值

变量存储的数据可以修改  ： 变量名=新值

// 基础数据类型:(都是小写)
// 1,string字符串。(引号引起来，单引双引都可以，一般单引)
// 2,number数字。
// 3,boolean,布尔值(真true,假false) 用来判断真假

// let变量名：类型=值
// let定义变量保存数据→变→数据可变
// 修改变量:变量名=新值(修改变量)
let name:string = '字符串'
console.log(`输出的类型是`,name)// 输出的类型是 字符串

let age:number = 12
console.log(`当前的年龄是`,age)//  当前的年龄是 12
let isShow:boolean= true
console.log(`是否显示呢`,isShow)//  是否显示呢 true

age=18

四、常量const

常量：用来存储数据 （不可变）

语法：const 常量名: 类型 = 值

五、命名规则

①只能包含数字、字母、下划线、$，不能以数字开头
②不能使用内置关键字或保留字(比如let、const)
③严格区分大小写置关键字或保留字(比如let、const)
④起名字语义化
--规范化
--多个单词小驼峰命名法->第二个单词开始首字母大写isLogin

// const 常量名:类型 = 值
// (常量值不可修改 | 修改变量:变量名=新值)

const PI:number=0
/*命名规则:
 * 1,只能包括数字,字母,下划线,$,不能数字开头
 * 2,不能使用内置关键字或保留字 （比如 let、const）
 * 3,严格区分大小写
 * */
const _:string='1'
const $1:number=1
const a:boolean=true
let _$1aA:number=12
console.log(`_$1aA的数字是`,_$1aA)//$1aA的数字是 12
_$1aA=21
console.log(`_$1aA的新数字是`,_$1aA)//_$1aA的新数字是 21

六、数组array

注意：数组指定的类型和存储的数据类型要必须一致，否则会报错

// let 数组名:类型[]=[数组]
// 拿数组下标:数组名[下标]
let ziMu:number[]=[1,2,3,4,5,6,7,8,9,10]
let days:string[]=['10月20日','10月21日','10月22日','10月23日','10月24日']
// 数组里面每个数据对应一个从0开始的编号，用来查找某个数据这个编号叫索引/下标
// 拿数组下标:数组名[下标]
console.log(`第一个数字是`,ziMu[0])//第一个数字是 1
console.log(`第二个数字是`,ziMu[1])//第二个数字是 2
console.log(`第三个数字是`,ziMu[2])//  第三个数字是 3
console.log(`今天的日期是`,days[0])// 今天的日期是 10月20日
// Length数组长度--数组里面数据的个数
console.log(`所有的字母的有`,ziMu.length,`个`)//所有的字母的有 10 个
// let 数组名:类型[]=[数组]

七、函数function

函数：是可以被重复使用的代码块

函数可以把具有相同或相似逻辑的代码“包裹”起来，有利于代码复用

1；基本使用

先定义后调用（只定义不调用，函数不执行）

定义 ：function函数名（形参：类型）{函数体）
调用 ：函数名（实参）

2；参数

作用：可以把函数变得更灵活高效

形参：形式的参数函数定义的时候写的形参
实参：真实的数据函数调用写的实参

/*.......................................................*/
//无参构造
 function sum(){
  let res:number=10+10
  console.log( '加法的总和是',res)
}
sum()
/*.......................................................*/
// 有参构造
function sum1(a:number,b:number){
  let res111:number=a+b
  console.log( '加法的总和是',sum1)
  return

}
sum1(10,10)
sum1(20,30)
sum1(40,50)

/*.......................................................*/
/*参数:有参数的函数灵活性高、通用性高
 *定义函数时传入的是形参，作用：接收真实数据
 *调用函数时传入的是实参，作用：真实的数据
 */
//函数定义的时候用形参,
function zonghe(a:number,b:number){
// 函数体
  let num:number=a+b
  console.log('总和',num)
}
// 调用函数
zonghe(10,20)
/*...........................例子.....................................*/
/*用一个函数计算每个产品花多少钱
*苹果:单价3块;买2斤
*榴莲:单价30块;买10斤*/

function buy(jiage:number,shuliang:number){
 let huafei:number=jiage+shuliang
}

buy(3,2)
buy(30,10)

/*................................................................*/
// 返回值
function summ(a:number,b:number){
  let zz:number=a+b
  console.log( '加法的总和是',res12)
  return res12

}
summ(10,10)
summ(20,30)
summ(40,50)
let res12:number=summ(40,50)
console.log('加法的总和是',res12)





@Entry
@Component
struct  Index {
  build() {
    Column(){

    }
    .width('100%')
    .height('100%')
  }
}

3；return 返回值

1.return返回值  语法:return 结果

2遇到return会退出当前函数→下方的代码不执行（拓展）

作用：可以在函数的外面使用函数内部计算的结果

（函数内部的计算结果无法直接拿到外部来使用→把这个结果作为函数的返回值返回到函数外面）

返回值返回的位置是函数调用的位置=函数名(实参)

一般会设置—个变量接受返回值

console.log（函数返回值，函数名（实参））

let变量名：类型=函数名(实参)

function buy(jiage: number, shuliang: number) {

  let huafei: number = jiage * shuliang


  //   return返回值/遇到return会退出当前函数→下方的代码不执行
  return huafei
  console.log('提示')
}
/*函数内部的计算结果无注直接拿到外部来使用→
把这个结果作为函数的返回值返回到函数外面
 * */
// 返回值返回的位置是函数调用的位置（一般会设置一个变量接受返回值）
console.log(``, buy(3, 2))

// 函数调用的位置保存返回值→把函数调用保存一个变量

let qian: number = buy(30, 10)
console.log(``, qian)

4；箭头函数

箭头函数是比普通函数更简洁的一种函数写法

箭头函数语法 ：()=>{ }

let 函数名 = (形参1: 类型, 形参2: 类型) => {
  // 函数体
  // 1. 计算过程
  // 2. 返回结果
  return 计算的结果
}

函数名(实参1, 实参2)

为什么let函数名...后面没有：类型不报错

因为箭头函数需要调用 /  函数名()，但没有函数名，

所以设置一个变量let 函数名(变量名):类型=箭头函数（()=>0）给箭头函数起个名字
(而又因为没有返回值所以省略了类型，计算机自动可以推断，所以不报错

例子1

//*一个函数计算每个产品花多少钱，并返回计算结果到函数外面使用
// ★苹果：单价3块；买2斤
// *榴莲：单价30块：买10斤
//1.有参数吗？>一个函数是否结算不同数据的结果→单价和数量都不同→有参数-有几个参数？-→有两个参数：单价和数量
//2.有返回值吗？是否需要把函数内的计算结果拿到外面使用--有返回值

let zongjia = (a: number, b: number) => {
  return a * b
}

zongjia(3, 2)
zongjia(30,10)
/*香蕉：单价3块；买2斤
*菠萝蜜：单价20块：买10斤
 * */
let jia=(aa:number,ss:number)=>{
  return aa*ss
}
//函数返回的位置就是函数调用的位置
console.log(``,jia(3,2))
jia(20,10)

例子2

两种做法：

// 定义函数：传入不同水果、单价、购买数量、折扣（例如：0.8表示8折），函数内部计算并输出支付金额和节省的钱数
/*例如:
 * 苹果，5元一斤,购买3斤,折扣0.8
 * 香蕉，3元一斤,购买4斤,折扣0.5
 * */
function fruits(danjia:number,shuliang:number){
let yuanjia:number=danjia*shuliang
  return yuanjia
}

function fff(danjia:number,shuliang:number,zhekou:number){
  let zhekouhou:number=danjia*shuliang*zhekou
  return zhekouhou
}
console.log(`购买苹果原价`, fruits(5,3),'折扣后价位',fff(5,3,0.8))//购买苹果原价 15 折扣后价位 12

// 定义函数：传入不同水果、单价、购买数量、折扣（例如：0.8表示8折），函数内部计算并输出水果、支付金额和节省的钱数
/*例如:
 * 苹果，5元一斤,购买3斤
 * 香蕉，3元一斤,购买4斤
 * */
/*...........................................................*/
function fruits(price:number,count:number) {
  let res:number=price*count
  return res
}
// 水果没有打折时的价格
let pp:number=fruits(5,3)
let xx:number=fruits(3,4)
/*...........................................................*/
// 折扣后节省
function zk(dz:number){
  return pp-pp*dz
}
// 折扣0.8折

console.log(`购买苹果的原价是`,pp,'节省',zk(0.8),'钱')//购买苹果的原价是 15 节省 3 钱
console.log(`购买香蕉的原价是`,xx,'节省',zk(0.8),'钱')//购买香蕉的原价是 12 节省 3 钱

例子3

// 定义函数：传入不同水果、单价、购买数量、折扣（例如：0.8表示8折），函数内部计算并输出支付金额和节省的钱数
// 例如：
// 苹果:5元1斤，购买4斤
// 草莓:10元1斤，购买5斤
function fruits(name:string ,dajia:number,count:number,zhekou:number){
 let zhekouhou:number= dajia*count*zhekou
  let yuanjia:number=dajia*count
  let jiesheng:number= yuanjia-zhekouhou
  console.log("购买信息",name,'原价',yuanjia,'节省钱',jiesheng,'支付金额', zhekouhou,)
  // console.log("购买信息",name,'原价',yuanjia,'节省钱',jiesheng,'支付金额', zhekouhou,)
}
fruits('苹果',5,4,0.8)
fruits('草莓',10,5,0.9)
//购买信息 苹果 原价 20 节省钱 4 支付金额 16
//购买信息 草莓 原价 50 节省钱 5 支付金额 45

八、对象object

object作用：

是一个可以存储多个数据的容器 ,

用于描述一个物体的特征（属性）和行为（方法-->函数，只能是箭头函数）。

1 : 接口 interface

通过interface接口约定 对象结构类型

拓展：可选练操作符？只作用于属性，不能给方法使用

// 接口：接口名习惯首字母大写
interface person{
  name:string
  age:number
  work?:string
}
// 可以用接口约定对象的结构和类型了
let yy:person={
  name:'杨洋',
  age:34,
  work:'演员'
}
console.log(``,yy.name)//杨洋
yy.name='丁真'
console.log(`名字是`,yy.name)//名字是 丁真
// 拿到对象里面的数据，对象名.属性名
let yichen:person={
  name:'熠辰',
  age:5,
  work:'幼儿园大班'
}
console.log(`小朋友的名字是`,yichen.name,'年龄已经', yichen.age,'岁啦','现在是',yichen.work)
// 小朋友的名字是 熠辰 年龄已经 5 岁啦 现在是 幼儿园大班

2 ：对象方法 （箭头函数）

方法作用：描述对象的具体行为（方法-->函数，只能是箭头函数）

//对象:描述一个物体的特征（属性）和行为（方法-->箭头函数）
interface person{
  name:string
  age:number
  //对象方法     方法名: (参数:类型) => 返回值类型
  // 无参，无返回值
  sayhi:()=>void
//  有参，无返回值
  say:(a:number,b:number)=>void
//   无参，有返回值
  hi:()=>number
//有参 有返回值
 day: (cs:number,css:number)=>number
}
let aa:person={
  name:'jijianwen',
  age:18,
  sayhi:( )=> {
    console.log(`无参，无返回值`)
  },
  say:(a:number,b:number)=> {
    console.log(`有参，无返回值`)
  },
  // 无参，有返回值
  hi:()=>{
    return 2
  },
  //有参 有返回值
day:(cs:number,css:number)=>{
   return cs*css
}
}
//调用箭头函数
aa.sayhi()
aa.say(12,23)
aa.hi()
aa.day(34,44)
/*..................................................................*/
interface year {
  yue:number
  day:number
  //无参无返回值
  miaoshu:()=>void
  //无参有返回值
  miao:()=>number
}

let now:year={
  yue:10,
    day:22,
  //无参无返回值
  miaoshu:()=> {
    console.log(`今天休息`)
   
  },
  miao:()=> {
    return 3
    
  }
}

now.miaoshu
console.log(``,now.miao())
now.miao()

// 对象：是一个可以存储多个数据的容器
//对象 作用：用于描述一个物体的特征（属性）和行为（方法-->函数，只能是箭头函数）
// 定义接口
interface person{
 /*......................................... 特征（属性）........................................*/
  name:string
  age:number
  work?:string//可选练操作符只作用于属性，不能给方法使用
  /*...................................行为（方法-->函数，只能是箭头函数）.............................*/
  //dance: ()=>返回值类型
  //无参,无返回值
  dance: ()=>void
  // 有参 无返回值
  sing:(a:number,b:string)=>void
  //无参 有返回值
  say:()=>number
  // 有参 有返回值
  hi:(a:string)=>string
}
// 通过interface接口约定 对象结构类型
let yy:person= {
  name: 'yangyang',
  age: 23,
  work: 'yanyuan',
  //无参,无返回值
  dance: () => {
    console.log('yangyang跳舞')
  },
  // 有参 无返回值
  sing: (a: number, b: string) => {
    console.log('')
  },
  //无参 有返回值
  say: () => {
    return 2
  },
  // 有参 有返回值
  hi: (a: string) => {
    return a
  }
}

九、联合类型

// 隔开的具体数据类型-->放大变量的取值范围
let judge: number | string=100
console.log('年终考试评价', judge)
judge = 'A+'
console.log('年终考试评价', judge)
judge = '优秀'
console.log('年终考试评价', judge)
// 联合类型分割了具体的字符串数据→缩小变量的取值范围
// (let是变量，可变的，不赋值也不报错。const是常量，不可变，不赋值会报错)
let day:'白天'|'晚上'|'30天'
day='晚上'

十、枚举类型

// 枚举类型名字和别名推荐首字母大写
//  enum 枚举名{
// 常量1=值,（常量，不可修改）
// 常量2=值,}
enum Gs{
  name='hw',
  work='keyan',
}
let aa:Gs=Gs.name
// Gs.name='xm'  不能修改,枚举里面的数值还叫做常量，不可修改

enum MyColo{
}

界面

// @饰器，起到修饰的作用
// //程序入口 @Entry
@Entry
  //组件－鸿蒙界面开发最小单元就是组件下一行代码是组件
@Component
  //Index组件名
struct Index {
  // 构建-→构建界面→界面的内容都放到buind的大括号里面
  // build里面要有唯一的根组件，必须是容器组件
  build() {
    // 容器组件，内容垂直排列
    // 容器组件，内容水平排列Row
    Column() {
      Text('主题')
      // 文本
      Row() {
        Text('学习')
          .width(80)
          .height(50)
          .backgroundColor(Color.Orange)
        .textAlign(TextAlign.Center)
        Text('鸿蒙')
          .width(80)
          .height(50)
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
        Text('黑马')
          .width(80)
          .height(50)
          .backgroundColor(Color.Yellow)
          .textAlign(TextAlign.Center)
      }
      // 最大宽度是360=width('100%')
      // .width('100%')
      .width(300)
      .height(300)
      .backgroundColor(Color.Gray)
.justifyContent(FlexAlign.Center)
    }.width('100%')
    .height('100%')
    .backgroundColor('#22B591')
  }
}

小案例练习（函数、枚举）

// 计算班级分数总分
// 需求说明: 封装函数, 传递3个参数, 函数外打印三个班级同学的总分
// 高三一班 三个同学 分数为 87 98 56
// 高三二班 三个同学 分数为 67 58 100
// 高三三班 三个同学 分数为 97 68 56


function fn(a:number,b:number,c:number){
return a+b+c
}
console.log(`高三一班,总分`,fn(87, 98, 56))
console.log(`高三二班,总分`,fn(67, 58, 100))
console.log(`高三三班，总分`,fn(97, 68, 56))

// 定义对象描述偶像的信息
// 姓名/年龄/身高/体重/家乡/能力(行为)

interface person{
  name:string
  age:number
  height:string |number
  weight:string |number
  address:string
  ability:(work:string)=>string
}
let yy:person={
  name:'杨洋',
  age:30,
  height:"180cm",
  weight:"130kg",
  address:'不知道',
  ability:(work:string)=> {
    return work
  }
}
let work=yy.ability('工作能力很厉害')
console.log(`偶像是${yy.name}、他的年龄${yy.age}、身高${yy.height}、体重${yy.weight}、 他家地址${yy.address}、他的${work}`)
// 黑马水果店小票打印
// 需求如下：
// 水果店说明：
// ·现有苹果20斤，售卖10元1斤
// ·现有香蕉20斤,售卖5元1斤
// ·现有橘子20斤，售卖8元1斤
// 购买者说明
// ·购买了5斤苹果,4斤橘子
// 1.根据已有数据,计算并输出消费总额
// 2.用数组保存水果店库存数据，计算并输出剩余库存
// 3.根据已有数据,整合并输出 单个产品消费明细
function fruit(price:number,weight:number){
  let  goodsPrice:number=0//小计
 return  goodsPrice = price * weight//小计
}
let apple=fruit(10,5)
let orange=fruit(8,4)
console.log(`消费总额:${apple+orange}元`)// 1.根据已有数据,计算并输出消费总额

let fruitCount:number[]=[20,20,20]// 2.用数组保存水果店库存数据，计算并输出剩余库存
console.log(`苹果的库存`,fruitCount[0]-5)
console.log(`香蕉的库存`,fruitCount[1]-0)
console.log(`苹果的库存`,fruitCount[2]-4)
// 3.根据已有数据,整合并输出 单个产品消费明细
console.log(`苹果产品消费金额${apple}`)
console.log(`橘子产品消费金额${orange}`)

// 1. 桌子尺寸信息枚举保存
// 需求如下：
// 1. 现有三个尺寸大中小需要进行保存:
//   300cm * 350cm
//   200cm * 249cm
//   100cm * 150cm
enum chiCun{
  One="300cm * 350cm",
  Two="200cm * 249cm",
  Three="100cm * 150cm"
}
let One: chiCun =chiCun.One
let Two: chiCun =chiCun.Two
let Three: chiCun =chiCun.Three

console.log(`尺寸1`,One)
console.log(`尺寸2`,Two)
console.log(`尺寸3`,Three)


@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
    }
    .height('100%')
    .width('100%')
  }
}

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值