练习1(打印星星,查找字符位置与次数,冒泡排序,驼峰转换)

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">{{ item }}</div>
    <button @click="abc">anniu</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [0]
    }
  },
  created() {
    // this.fun()
    // this.fun1()
    // this.fun2()
    // this.fun3()
    // this.fun4()
    // this.fun5()
    // this.fun6()
    // this.fun7()
    this.fun8()
  },
  methods: {
    abc() {
      this.$set(this.list, 1, '123')
      // this.list[1] = '123'  // 按钮点击之后数据并不会显示在页面上
    },
    fun() {
      // 五排星星
      var str = ''
      for (var i = 0; i < 5; i++) {
        for (let j = 0; j < 5; j++) {
          str += ' ⭐'
        }
        str += '\n'
      }
      console.log(str)
    },
    fun1() {
      // 正三角星星
      var str = ''
      for (let i = 0; i < 5; i++) {
        for (let j = 0; j <= i; j++) {
          str += ' ⭐'
        }
        str += '\n'
      }
      console.log(str)
    },
    fun2() {
      // 倒三角
      var str = ''
      for (let i = 0; i < 5; i++) {
        for (let j = i; j < 5; j++) {
          str += ' ⭐'
        }
        str += '\n'
      }
      console.log(str)
    },
    fun3() {
      // 查找字符串中某个数的位置以及出现了几次
      const str = 'abocjocdfogogeopp'
      var i = str.indexOf('o')
      var num = 0
      for (let index = 0; index < str.length; index++) {
        if (i !== -1) {
          i = str.indexOf('o', i + 1) // 让查到后的索引+1,要不然会陷入死循环
          num++
          console.log('o所在索引的位置' + i, '出现的次数' + num)
        }
      }
    },
    fun4() {
      // 利用for of 获取每一个元素
      const str = 'abocjocdfogogeopp'
      const obj = {}
      for (const i of str) {
        // 与chatAt相同都可以直接获取单独的字符串
        if (obj[i]) {
          obj[i] += 1
        } else {
          obj[i] = 1 // 刚开始每一个都为1
        }
      }
      console.log(obj)
      var max = 0
      for (const key in obj) {
        if (obj[key] > max) {
          max = obj[key]
          var a = key
        }
      }
      console.log(max, a)
    },
    fun5() { // 获取某个元素出现最多次数
      // 利用charAt进行获取每一个元素 根据索引进行获取到每一个元素
      const str = 'abocjocdfogogeopp'
      const obj = {}
      for (let index = 0; index < str.length; index++) {
        var cha = str.charAt(index)
        if (obj[cha]) {
          obj[cha]++
        } else {
          obj[cha] = 1
        }
      }
      console.log(obj)
      var max = 0
      for (const key of obj) {
        if (obj[key] > max) {
          max = obj[key]
          var a = key
        }
      }
      console.log(max, a)
    },
    fun6() {
      // 排序
      var abc = [5, 3, 1, 6]
      var a = [5, 13, 1, 6]
      var b = abc.sort() // 直接引用只适用于0-9
      var c = a.sort(function (q, w) {
        // 适用于大于9的数值进行排序
        return w - q // 从大到小排序 q-w 从到大排序
      })
      console.log(b)
      console.log(c)
    },
    fun7() {
      // 冒泡排序 (从大到小,从小到大改变大小符号就好) sort方法
      var arr = [1, 12, 5, 6, 2, 7]
      console.log(arr.length)
      // for (let i = 0; i < arr.length - 1; i++) { // 外面这层for循环只起到要遍历几次的作用
      //   for (let j = 0; j < arr.length - i - 1; j++) { // 处理真正的逻辑
      //     if (arr[j] < arr[j + 1]) {
      //       var b = arr[j]
      //       arr[j] = arr[j + 1]
      //       arr[j + 1] = b
      //     }
      //   }
      // }
      for (let i = 0; i < arr.length - 1; i++) {
        // 外层只起到循环几次的作用
        for (let j = 0; j < arr.length - i - 1; j++) {
          if (arr[j] < arr[j + 1]) {
            var b = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = b
          }
        }
      }
      console.log(arr)
    },
    fun8() {
      // 字符串驼峰命名转换
      var foo = 'get-element-by-id'
      var a = foo.split('-')
      console.log(a)
      var b = a.map((i) => {
        return i.charAt(0).toUpperCase() + i.substr(1)
      })
      console.log(b.join('-'))
    }
  }
}
</script>