十六：統計字符出現次數

• 我們給用戶什么樣的結果比較合適？{'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)