Javascript-day09-每日微醺案例16-20

十六：统计字符出现次数

• 我们给用户什么样的结果比较合适？{'a':2,'b':3,'c':1,'e':3}
• 我们发现这个案例的实际需求就是：根据处理生成对象，添加对象的键值

统计字符串 'abcoefoxyozzopp' 中每个字符出现的次数

1.遍历字符串，获取里面的每一个字符 --- 字符串的本质是字符数组

2.根据遍历到字符

• 如果这个字符所对应的键在对象中存在，就将数量+1
• 如果字符不存在，就添加一个新的键值，键就是这个字符，值就是1

// 统计字符串 'abcoefoxyozzopp' 中每个字符出现的次数(字符串可以随意设置啊)
// 将功能封装为函数
let str = 'aaabadfasdfasjdfjashdfkjashdflkj'

// {'a':2,'b':3,'c':1,'e':3}
let obj = {}

for (let i = 0; i < str.length; i++) {
    // str[i]
    let s = str[i] // a

    // 判断当前对象是否有这个值所对应的键
    if (obj[s]) {
        obj[s] = obj[s] + 1
    } else {
        obj[s] = 1
    }
}
console.log(obj)

`

十七:驼峰命名转换

一：转换字符串大小写的基本api

• 第一个单词小写：toLowerCase()
• 后面的每一个单词的首字母大写，其它字符小写：toUpperCase()

二：获取需要进行转换的单词

• 每个单词是以-分隔：字符串.split('分隔符')：返回一个数组

三：遍历数组，获取每一个字符串单词，对单词进行如下操作：

• 第一个单词转换为小写
• 后面的单词
  • 先取出第一个字符，转换为大写:
    • 字符串.substr(起始索引，长度) ：获取从起始索引开始指定长度的字符
    • 字符串.substr(起始索引) :获取从起始索引位置开始的所有字符
  • 取出后面的所有字符，转换为小写
• 拼接为一个整体

// 封装一个函数，实现功能：往函数传参为该格式字符串：'get-elements-by-class-name'，得到驼峰命名法的返回值为‘getElementsByClassName’
function exchange(str) {
    let result = ''
    // 进行字符串的分隔，使用split方法，分割之后返回一个数组
    let arr = str.split('-') //  ['GET', 'elemenTs', 'bY', 'cLAss', 'nAMe']
    // 遍历数组，去处理其中的每一个单词
    arr.forEach(function(value,index) {
        if(index == 0){
            // 第一个单词转换为小写
            result += value.toLowerCase()
        }else{
            // 后面的单词：取出第一个字符转大写，其它的字符转小写，进行拼接
            result += value[0].toUpperCase() + value.substr(1).toLowerCase()
        }
    })

    return result
}

console.log(exchange('GET-elemenTs-bY-cLAss-nAMe'))

`

十八：参数字符串转换为对象

• 这种参数格式的转换是后期业务处理的一个环节

获取查询参数部分：以?做为分割---split('?')

再将字符串使用&符号进行分割---split('&')

遍历数组，获取每一个值，每一个值应该对着一组 键值对

• 对遍历到的值再次进行分割，根据=分割
• 获取数据的第0个元素就是对象所需要添加的key,第一个元素就是key所对应的值

function exchange(str) {
    let obj = {}
    // 浏览器地址栏中的地址称为 url
    // 如果在url地址进行参数的拼接，那么拼接的参数称为  查询字符串
    // 这种参数有一个标识： ？，将 ？及?后面的统一称为查询参数
    // 有一个url(字符串)如下: http://www.heima.com?key0=haha&key1=hello&key2=xixi ; 要求处理此url, 
        得到一个如下格式的对象: let obj = { key0:’haha’, key1:’hello’, key2:’xixi’ }
    let search = str.split('?')[1] // key0=haha&key1=hello&key2=xixi

    // 将字符串再次进行分割
    let arr = search.split('&') //  ['key0=haha', 'key1=hello', 'key2=xixi']
    // 遍历
    arr.forEach(function(value) {
        // console.log(value) // key0=haha
        let temp = value.split('=') // ['key0', 'haha']
        let k = temp[0],
            v = temp[1]
        // 第一个元素(索引0)就是对象的键，第二个元素(索引1)就是对象的值
        obj[k] = v // {key0:'haha'}
        // obj[temp[0]] = temp[1]
    })
    return obj
}

`

十九：对象转换为参数字符串

• {id:1000,bookname:'你好呀',author:'张三',publisher:'黑马出版社'} 》》id=1000&bookname=你好呀

一：遍历对象 -- for ...in

• key就是对象的键
• obj[key]就是对象的键所对应的值

二：拼接字符串

• 要拼接&符号
• 记得将多余的&清除

// {id:1000,bookname:'你好呀'} 》》id=1000&bookname=你好呀
function parseObjToString(obj) {
    let str = ''
    // 1.遍历对象
    // key:对象的键
    for (let key in obj) {
        console.log(key, obj[key])
        str += `&${key}=${obj[key]}`
    }

    // console.log(str.substr(0, str.length - 1))
    // console.log(str.substr(1))
    return str.substr(1)
      }

`

二十：回调函数

// 不止一个用户调用这个方法获取这个数据实现渲染
// 有一个模拟数据：只有这个方法可以获取到数据
// 1.方法并不能决定数据如何渲染
// callback:回调函数
function getData(callback) {
   let arr = [123, 12, 3, 234, 34, 54, 64, 6]
   callback(arr)
}

// 0-----------------------------------
// 实现动态渲染
function render(arr) {
   let str = ''
   arr.forEach(function(value) {
       str += `<li>${value}</li>`
   })
   document.querySelector('ul').innerHTML = str
}
// 调用一个函数A，传入一个函数B做为参数，函数B就称为回调函数
// 1.回调函数是我们准备的
// 2.回调函数不是我们自己调用，而是在函数A中调用
function render2(arr) {
   console.log(arr)
   let str = ''
   arr.forEach(function(value) {
       str += `<p>${value}</p>`
   })
   document.querySelector('div').innerHTML = str
}

// 现在我们需要调用这个方法，实现数据的动态渲染
// 我调用这个方法获取数据，我当前清楚数据应该如何处理 --- 我有数据吗？
// 当我调用方法获取数据的时候，我将数据的处理方式传递给函数
getData(render)