前言

一、字符串的使用方法

二、数组的使用方法

总结

前言

字符串和数组是开发中经常使用到的一些api，需要我们熟练的掌握和使用，今天在此总结一下它们的使用方法。

一、字符串的使用方法

1.1：字符串在开发中经常使用，那我们如何快速掌握它们的使用方法那？

  1. str.trim() 只能去掉字符串末尾和开头的空格 
    let str: string = 'H E L L OWorld '
console.log('str的结果是', str)
console.log('str的结果是', str.trim() + '=')

    2. str.trimStart()只能去掉开头的空格

  2. let str: string = ' H E L L OWorld '
console.log('str的结果是', '=' + str.trimStart())

    3 . str.trimEnd()只能去掉结尾的空格

  3. let str: string = ' H E L L OWorld '
console.log('str的结果是=' + str.trimEnd())

    4.str.padStart(maxLength: number, fillString?: string) 头部填充数据

  4. let str1: string = '三儿'
//padStart 是用来在头部填充数据的，参数1：表示字符串的最大长度，参数2：表示要填充的值
let newStr = str1.padStart(3, '李')

    5.str.padEnd(maxLength:number,fillString?:string) 末尾填充数据

  5. let str2: string = '三儿'
//padStart 是用来在末尾填充数据的，参数1：表示字符串的最大长度，参数2：表示要填充的值
let newStr2 = str1.padEnd(3, '李')

    6.str.slice(startIndex?:number,endIndex?:number) 根据索引提取数据

  6. //slice 是用来提取数据的，参数1：表示从索引几开始，参数2:表示从索引几结束，返回的新数据是开始到结尾的数据
let str3: string = '用来在末尾填充数据的'
let newStr3 = str3.slice(2, 5)
console.log(newStr3)

    7.str.split(separator: string | RegExp, limit?: number): string[]  切割字符串，返回字符串数组

  7. //参数1 ：表示用于分割的字符串或者正则表达式，参数2，表示分割后返回长度为几的数组
let str4: string = '用来-在末-尾填-充数-据的'
let newStr4: string [] = str4.split('-', 2)
console.log('分割后的数组是', ...newStr4, newStr4.length.toString())

    8.str.search(regexp: string | RegExp): number;  返回目标值在字符串中的索引值。

  8. //search(regexp: string | RegExp): number; 参数：表示要查询的目标，返回结果是表示查询的目标所在的索引值
let str5: string = '假如生活欺骗了你，请不要悲伤'
console.log('搜索的结果是:', str5.search('伤'))

    9.str.toLowerCase() 表示大写字母转小写，str.toUpperCase()  表示小写字符转大写

  9. let str6: string = 'HELLOWORLD'
console.log('转换小写结果:', str6.toLowerCase())
let str7: string = 'helloworld'
console.log('转换大写结果:', str7.toUpperCase())

    10.str.substr(from: number, length?: number): string; 参数1：表示从下标是几开始截取，参数2：表示截取长度为几，可以省略不写，不写表示截取到最后一位

  10. let str8: string = 'helloWorld'
console.log('字符串截取:', str8.substr(1, 4))

    11.str.match() 表示字符串匹配，如果匹配成功，返回匹配到的值，如果匹配失败，返回null，注意区分大小写

  11. //match(regexp: string | RegExp): RegExpMatchArray | null;
let str1: string = 'helloWorld'
console.log('匹配结果是:', str1.match('W'))

    12.str.replace() 表示字符串替换 

  12. //replace(searchValue: string | RegExp, replaceValue: string): string;
//参数1，要替换的原值，参数2，要替换成的新值
let str2: string = 'helloWorld'
console.log('替换的结果是:', str2.replace('p', '你好'))

    13.str.lastIndexof()表示查询目标值所在的索引下标

  13. //lastIndexOf(searchString: string, position?: number): number;
//如果没有查到，返回-1，如果字符串中有相同的字符，则返回最后一个相同字符的索引下标
let str3: string = 'helloWorld'
console.log('查询的索引是:', str3.lastIndexOf('l'))

    14.array.concat() 两个数组组成一个新的字符串，

  14. let str4: string[] = ['1', '2', '3']
let array: string[] = ['a', 'b', ' c']
let dd = str4.concat(...array)  //表示数组展开
console.log('数组组和成字符串:', dd)

    15.str.indexof() 表示查找目标字符的下标值

  15. //查询到，返回所在下标，查询不到，返回-1，如果是重复的，则返回第一个出现所在的索引值
let str5: string = 'helloWorld'
console.log('查找字符下标是:', str5.indexOf('l'))

    16.str.includes() 方法执行区分大小写的搜索，以确定是否可以在一个字符串中找到另一个字符串，并根据情况返回 true 或 false

  16. let str5: string = 'helloWorld'
console.log('查找字符下标是:', str5.includes('l'))

    17.字符串模板使用

  17. //字符串模板：使用反引号，并使用${所要打印的变量值}
let str5: string = 'helloWorld'
console.log(`字符串模板使用:${str5}`)

    18.字符串转数字

  18. //Number()：将字符串类型数据转换为数字型，转换失败返回NaN（字符串中包含非数字）
let str11: string = '1.1'
let str21: string = '1.9'
let str31: string = '1.1a'
console.log('数字是', Number(str11)) // 1.1
console.log('数字是', Number(str21)) // 1.9
console.log('数字是', Number(str31)) // NaN

//parseInt()：去掉小数部分将字符串类型转为数字型，转换失败返回NaN 如果是数字开头的字符串，只保留开头数字
let str12: string = '1.1'
let str22: string = '1.9'
let str32: string = '1.1a'
console.log('数字是', parseInt(str12)) // 1
console.log('数字是', parseInt(str22)) // 1
console.log('数字是', parseInt(str32)) // 1

//parseFloat()：保留小数部分将字符串类型转为数字型，转换失败返回NaN  如果是数字开头的字符串，只保留开头数字
let str13: string = '1.1'
let str23: string = '1.9'
let str33: string = '1.1a'
console.log('数字是', parseFloat(str13)) // 1.1
console.log('数字是', parseFloat(str23)) // 1.9
console.log('数字是', parseFloat(str33)) // 1.1

    二、数组的使用方法

  • 1:查找和修改数组
  • //查找和修改数组
let names: string[] = ['张三丰', '张无忌', '张翠山']
console.log('查找姓名', names[0]) //1. 查找
console.log('数组长度为', names.length) // 2. 长度
names[1] = 'Jack' //3. 修改
console.log('names数组', names)

    2:增加数组：开头加   结尾加

  • let names: string[] = ['张三丰', '张无忌', '张翠山']
// push()：结尾新增
names.push('lily', '大壮')
// unshift()： 开头新增
names.unshift('Jack')
console.log('数组names', names)

    3:删除数组：开头删  结尾删

  • let names: string[] = ['张三丰', '张无忌', '张翠山']
names.pop() // pop(): 结尾删除  返回删除的数据  修改原数据
names.shift() // shift(): 开头删除  返回删除的数据  修改原数据
console.log('数组names', names)

    4：任意位置增删数组数据 

  • //语法: 数组名.splice(起始位置, 删除的个数, 新增元素1, 新增元素2, ......)
//  注意: 如果不写该参数,代表从开始的位置起,删除往后所有的元素	 返回值： 删除的元素组成的新数组，会修改原数据
let names: string[] = ['张三丰', '张无忌', '张翠山']
names.splice(1, 1, 'jack')
console.log('数组names', names)

    5：indexof方法  获取数组元素中某个元素的具体下标

  • //数组.indexof(要查找的元素)// 存在返回具体下标，不存在返回 -1
let names: string[] = ['张三丰', '张无忌', '张翠山']
console.log('返回下标', names.indexOf('张无忌'))

    6：join  数组拼接

  • //join方法将数组用逗号或指定的分隔符,将数组的每一项拼接到一起
//数组.join('分隔符') // 基于传入的分隔符 将数组的每一项拼接到一起
//数组.join() // 使用【逗号】将数组的每一项 拼接到一起
let names: string[] = ['张三丰', '张无忌', '张翠山']
console.log('分隔成的数组是', names.join('-'))

    7：foreach方法  循环遍历数组

  • //forEach方法会遍历数组，并且将数组的每一项作为参数传入到回调函数中，
//无返回值,索引如果用不上，可以省略
let names: string[] = ['张三丰', '张无忌', '张翠山']
names.forEach((item) => {
  console.log(item)
})

    8：map方法  映射出一个新的数组数据

  • //map方法使用样例
interface HeroData {
  id: number
  name: string
  title: string
}

// 有头像数据的接口
interface HeroDataPlus {
  id: number
  name: string
  title: string
  avatar: ResourceStr
}

const heroArr: HeroData[] = [
  { id: 123, name: '吕布', title: '无双之魔' },
  { id: 124, name: '周瑜', title: '铁血都督' },
  { id: 126, name: '夏侯惇', title: '不羁之风' },
  { id: 127, name: '甄姬', title: '洛神降临' },
  { id: 128, name: '曹操', title: '鲜血枭雄' }
]

const heroArrWithAvatar: HeroDataPlus[] = heroArr.map<HeroDataPlus>(item => {
  return {
    id: item.id,
    name: item.name,
    title: item.title,
    avatar: $r(`app.media.ic_avatar_${item.id}`)
  }
})

    9：filter() 方法  过滤想要的数据，不会改变原数据

  • /*
数组.filter((数组项:类型,索引:number)=>{
 根据回调函数的执行结果，筛选出符合要求的元素,返回一个新数组
  return true  或者false
})*/
// filter基本使用 01 - 筛选出大于 5 的数
const nums = [11, 22, 31, 40, 54, 62, 76, 81, 94, 130]
nums.filter((item)=>{
  return item>50
})

    10：sort（）数组排序，会改变原数组数据

  • //sort 方法就地对数组的元素进行排序，并返回对相同数组的引用。排序是改变原数组
const arr = [543, 1212, 3238, 130, 44]
arr.sort((a, b) => {
  // return a-b  //升序排列
  return b - a  //降序排列
})
console.log(arr.toString())

    11：reduce()方法 求和对象数组某属性求和需要起始值，reduce((上一次累加结果，当前元素值)=>{}, 初始值) ，纯粹的数字求和不需要初始值。

  • // reduce方法的作用是求和，他会逐个遍历数组元素，每一步都将当前元素的值与前一步的结果相加
const arr = [512, 132, 812, 13, 4]
const res = arr.reduce((a, b) => {
  return a + b
})
console.log('res:', res)

    12：findIndexof() 查找数组中元素所在的下标

  • //findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1,找到了返回所在的下标。
const dd = names.findIndex((item: string, index: number) => {
  if (item == '张翠山') {
    return true
  } else {
    return false
  }
})
console.log(dd + '')

    13:find()方法 查找数组中的某一个元素

  • let names: string[] = ['张三丰', '张无忌', '张翠山']
// 索引，如果用不上可以省略不写  find() 方法返回通过测试（函数内判断）的数组的第一个元素的值，找不到返回 undefined
names.find((item) => {
  return true // 找到了需要的元素
  return false // 或者可以解析为 false 的值  不是这一项
})

    14：every() 查找数组中每一项是否都能满足目标值  都满足返回true，如果都不满足，返回false

  • let names: string[] = ['张三丰', '张无忌', '张翠山']
//every 方法方测试一个数组内的【所有元素】是否都能通过指定函数的测试。它返回一个布尔值true/false
const yy = names.every((item) => {
  if (item.includes('张')) {
    return true // 找到了需要的元素
  } else {
    return false
  }
})

    15：some（） 查找数组项中是否有满足目标值的数据，只要有一个满足返回true，否则返回false

  • let names: string[] = ['张三丰', '张无忌', '张翠山']
//some 方法方测试一个数组内的【所有元素】只要有一个满足目标值，则返回true，否则false
const yy = names.some((item) => {
  if (item.includes('山')) {
    return true // 找到了需要的元素
  } else {
    return false
  }
})

三：快速创建数组的方法

//方法1：创建数组长度为10的字符串数组
const arr:string[] = Array.from({ length: 10 })
//方法2：创建数组长度为10，元素为6的数组
const arr1:number[]=new Array(10).fill(6)

总结

今天主要总结鸿蒙开发中经常使用到的一些字符串处理方法和数组的一些使用方法，希望能够帮助到需要帮助的人。

# 前端 # javascript # 开发语言 # 华为 # harmonyos # 经验分享
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

HarmonyOs 开发基础教程

avatar HarmonyOS开发者社区

【鸿蒙原生应用实战】第三篇：装备详情页——路由传参与多维信息展示

本文将介绍鸿蒙原生应用实战中的装备详情页开发，重点涵盖路由传参与多维信息展示技术。主要内容包括： 路由传参实现：通过router.pushUrl传递参数，在aboutToAppear中使用router.getParams接收参数，并处理类型安全转换 数据模型设计：定义包含装备详情的GearDetail接口，比列表页数据结构更丰富 渐变头部实现：使用Stack布局和linearGradient创建美

avatar HarmonyOS开发者社区

【鸿蒙原生应用实战】第五篇：活动记录页——数据筛选、统计与成就系统

本文介绍了鸿蒙原生应用开发系列的最后一篇——活动记录页的实现。该页面包含年份筛选、统计行、季节分布、成就系统和活动卡片列表等功能。 文章重点讲解了： 数据模型设计，包含活动记录的完整字段 年份筛选逻辑（使用startsWith方法） 使用reduce计算总里程等统计数据 活动卡片和成就徽章的UI实现 通过模拟6条不同季节、难度和评分的数据，展示了筛选和统计功能的实现。最后提到这是该系列的收官之作，

avatar HarmonyOS开发者社区