JS应用:统计字符串中每个字符出现的次数

·  阅读 884

前言

将字符串例如:str = “abcddcbaAABBC”中每个字符统计,数据结果为使用对象形式表示。
即:{ a:2,b:2,c:2,d:2,A:2,B:2,C:1 }

思想方式

1. 首先将字符串转换成数组

通过 Array.from() 方法从一个类似数组或可迭代对象创建一个新的、浅拷贝的数组实例,返回值为新的数组。
例如:

image.png

Array.from(str)
复制代码

2.1 创建空对象,通过遍历数组判断字符

在对象内判断是否有数组中的元素(字符) Object.hasOwnProperty()

Object.hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)。
const obj = {a:1}; obj.hasOwnProperty("a"); 返回是true
例如:

image.png

2.1 实现

const str = "abcddcbaAABBC"
const arr = Array.from(str)
var obj = {}
for(i in arr){
  if(obj.hasOwnProperty(arr[i])){
    obj[arr[i]] = obj[arr[i]] + 1
  }else{
    obj[arr[i]] = 1
  }
}
console.log(obj)
复制代码
{ a: 2, b: 2, c: 2, d: 2, A: 2, B: 2, C: 1 }
复制代码

2.2 使用 Array.reduce() 对数组内的每个元素进行统计

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。 语法:Array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

image.png

例子:
[1,2,3,4,5].reduce((calc,curr)=>[...calc,curr],[])
输出结果为:[1,2,3,4,5]
[...calc,curr] curr当前元素放入calc数组中

[1,2,3,4,5].reduce((calc,curr)=>calc+=curr,'')
输出结果为:"12345"
calc+=curr curr当前元素拼接到 calc

[1,2,3,4,5].reduce((calc, curr)=>{ return{ [curr]:1 } } , {})
输出结果为:{ 5:1 }
[curr]可获取当前curr元素

Tips:~(取反) 对于undefinednullNaN0等取反都是-1
且对于1, 2取反,~1-2(二进制即~01 为 10 ,且正数取反为负数)~2-3
所以可以根据这个取反且加负数的方式来获取增值.

2.2 实现

var obj = arr.reduce((calc, curr)=> {
  return {
    ...calc,
    [curr]:-~calc[curr]
  }
},{})
console.log(obj)
复制代码
{ a: 2, b: 2, c: 2, d: 2, A: 2, B: 2, C: 1 }
复制代码

2.3 由于涉及到对象{} 使用 对象变量 in 数组/对象 判断

所以上面两种方法可以改写成如下:

// hasOwnProperty 改写 in
var obj = {}
for (i in arr) {
  if (obj[arr[i]] in arr) {
    obj[arr[i]] = obj[arr[i]] + 1
  } else {
    obj[arr[i]] = 1
  }
}
console.log(obj)
复制代码
// reduce 改写 in
var obj = arr.reduce((calc, curr)=> {
  if(curr in calc){
    calc[curr]++
  }else{
    calc[curr] = 1
  }
  return calc
},{})
console.log(obj)
复制代码

总结

先将字符串通过Array.from()转换成数组

  1. 使用Object.hasOwnProperty()来判断空对象中是否含有数组中元素

  2. 将数组通过累加器Array.reduce() 进行累加,累加的结果通过对象形式呈现,对象中的 key 是数组的元素值,每次遍历到当前数组元素时,对当前对象中的key进行赋值,值为 -~value,且通过累加器放在一个 calc 对象中,最后返回累加值calc对象。

如果返回一个对象,需要特别注意,如果是单表达式要返回自定义对象,不写括号会报错,因为和函数体的{ ... }有语法冲突。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改