js復(fù)習(xí)

js階段的主要內(nèi)容有：

1.變量的定義和使用

2.循環(huán)結(jié)構(gòu)：for forEach map filter

3.分支結(jié)構(gòu)：if...else 三元表達式

4.數(shù)組的定義和操作

5.對象的定義和操作

6.函數(shù)及函數(shù)封裝

一：動態(tài)生成商品信息

• 以后凡是根據(jù)數(shù)據(jù)生成動態(tài)結(jié)構(gòu)，都遵守一個原則： 要動態(tài)，先靜態(tài)

我們需接收用戶從鍵盤輸入的四個值，最終生成一個html結(jié)構(gòu)，打印到頁面中

1.接收四個值-----定義4個變量 從鍵盤輸入：prompt

2.根據(jù)變量生成html結(jié)構(gòu) ---- 拼接字符串---模板字符串

3.在頁面中打印 ---- document.write

// 1.4個變量的定義
      let goodsName, goodsPrice, goodsNum, address

      // 2.從鍵盤輸入并接收
      goodsName = prompt('請輸入商品名稱')
      goodsPrice = prompt('請輸入商品價格')
      goodsNum = prompt('請輸入商品數(shù)量')
      address = prompt('請輸入商品收貨地址')

      // 3.準備生成網(wǎng)頁結(jié)構(gòu)
      let htmlStr = `<table>
                      <thead>
                        <th>名稱</th>
                        <th>價格</th>
                        <th>數(shù)量</th>
                        <th>地址</th>
                      </thead>
                      <tbody>
                        <tr>
                          <td>${goodsName}</td>
                          <td>${goodsPrice}</td>
                          <td>${goodsNum}</td>
                          <td>${address}</td>
                        </tr>
                      </tbody>
                    </table>`
      // 4.將生成的結(jié)構(gòu)輸出到頁面中
      document.write(htmlStr)

二：時間補0案例

• 在js中，轉(zhuǎn)換bool值為false的有： '' "" 0 undefined null NaN
• NaN不能與任意值進行比較，比較的結(jié)果都是false

接收用戶從鍵盤輸入的一個數(shù)字，如果數(shù)字小于10，則在前面補0

• 接收用戶輸入：定義變量 + prompt
• prompt接收的值一定是字符串
• 判斷是否是數(shù)字，如果不是，則給出提示，如果是則補0 -- if + 先轉(zhuǎn)換再判斷
• 在前面補一個字符串0，因為如果在數(shù)字前面+0，數(shù)字不變

let num = prompt('請輸入一個數(shù)字')
// 判斷當前用戶輸入的是否是數(shù)字--先轉(zhuǎn)換再判斷
// 1.能夠轉(zhuǎn)換 》》
// 2.不能轉(zhuǎn)換 》》
console.log(+num)
if (!+num) {
    alert('你輸入的不是一個數(shù)字')
} else {
    // 如果用戶輸入的是數(shù)字，我要再判斷值是否小于10
    if (num < 10) {
        console.log('0' + num)
    } else {
        console.log(num)
    }
}

三：for-1-100偶數(shù)和

• 變量的使用：先聲明 ，賦值，使用

有一個變量存儲和

1-100：加每一個值，應(yīng)該是一個循環(huán)操作，范圍固定為1-100，固定循環(huán)次數(shù)，優(yōu)先使用for循環(huán)

循環(huán)三要素：變量初始值 判斷條件 變量的變化

// for-1-100偶數(shù)和
let sum = 0
// 要素可以寫在其它位置，但是for中的;不能少
for (let i = 1; i <= 100; i++) {
    if (i % 2 == 0) {
        sum += i
    }
}
console.log(sum)

四：ATM

• 需求驅(qū)動開發(fā)

要根據(jù)用戶的輸入來決定到底重復(fù)操作多少次 --- while循環(huán)(適合執(zhí)行不確定次數(shù)的循環(huán)操作)

判斷用戶的輸入，根據(jù)用戶輸入執(zhí)行不同的操作 ---- if

建議：

1.先做一次

2.再加循環(huán)

3.處理細節(jié)

// 定義一個初始金額
let initMoney = 1000
let choice
// 重復(fù)讓用戶進行操作
while (1) {
    // 1.用戶提示
    choice = prompt(`請輸入你的選擇
    1.取款 
    2.存款
    3.查看余額
    4.退出`)
    // 2.判斷用戶輸入
    if (choice == 1) {
        let money = +prompt('請輸入取款金額')
        // 判斷取款金額是否小于總金額
        if (money < initMoney) {
            initMoney -= money
        } else {
            alert('余額不足')
        }
    } 
    else if (choice == 2) {
        let money = +prompt('請輸入存款金額')
        if (money > 0) {
            initMoney += money
        } else {
            alert('輸入的存款金額不合理')
        }
    } 
    else if (choice == 3) {
        alert(initMoney)
    } 
    else if (choice == 4) {
        console.log('退出')
        break
    } 
    else {
        console.log('輸入不正確')
    }
}

五：打印多行多列小星星

• 需求驅(qū)動開發(fā)

先打印一行N個星星：for循環(huán)

再打印多行 -- for循環(huán)

// 打印一行col個星星
let col = +prompt('請輸入你一行需要打印的星星的數(shù)量')
let row = +prompt('請輸入你想打印的星星的行數(shù)')

for (let j = 0; j < row; j++) {
    for (let i = 0; i < col; i++) {
        document.write('?')
    }
    document.write('<br>')
}

六：打印九九乘法表

• 需求驅(qū)動開發(fā)
• 建議一個復(fù)雜的效果：先完成一個簡單的功能，再根據(jù)效果進行代碼的完善

// 打多行
// 第一行： j = 1   i:1
// 第二行： j = 2   i:1，2
// 第三行： j = 3   i:1，2，3
for (let j = 1; j <= 9; j++) {
    // 先打印一行
    for (let i = 1; i <= j; i++) {
        document.write(`<span>${i} * ${j} = ${i * j}</span>`)
    }

    document.write('<br>')
}

七：數(shù)組-求和，最大值和最小值

• 凡是要獲取數(shù)組的每一個元素，都是循環(huán)遍歷
• 數(shù)組的遍歷，在現(xiàn)階段如果沒有特別意外，都是使用for循環(huán)
• 函數(shù)返回多個值的時候，要將值包裝為對象

將代碼封裝為一個函數(shù)

• 函數(shù)的聲明定義
• 函數(shù)的參數(shù)傳遞
• 函數(shù)的返回值

獲取最大，最小，和：我們需要獲取數(shù)組的每一個元素，進行相應(yīng)的操作

// 封裝函數(shù)，求數(shù)組和的和，最大值，最小值
// arr:數(shù)組，調(diào)用方法需要傳入數(shù)組
function getValue(arr) {
    let sum = 0,
        max = arr[0], // 不能直接賦值為0，我們壓根不知道數(shù)組中是什么值(全部是負數(shù)怎么辦)
        min = arr[0] // 不能直接賦值為0，我們壓根不知道數(shù)組中是什么值(全部是正數(shù)怎么辦)
    // 循環(huán)遍歷數(shù)組
    for (let i = 1; i < arr.length; i++) {
        // 求和
        sum += arr[i]
        // 求最大值：如果遍歷的元素大于max,說明max需要被覆蓋
        if (arr[i] > max) {
            max = arr[i]
        }
        // 求最小值：如果遍歷的元素小于min,說明min需要被覆蓋
        if (arr[i] < min) {
            min = arr[i]
        }
    }
    // 方法只是進行操作，而不能對操作結(jié)果進行處理
    // 如果在函數(shù)中使用reutrn直接返回多個值，最終只有最后一個值
    //return只能返回一個變量,所以我們一般對多個進行包裝，如果沒有特別意外，都包裝為對象
    return { sum, max, min }
    // return { 'sum':sum, 'max':max, 'min':min }
}

let result = getValue([12, 3, 2134, 23, 543, 6, 54, 6756])
console.log(result)

八：動態(tài)生成柱子

• 要動態(tài)，先靜態(tài)
• 凡是說到動態(tài)渲染，必須要準備好 數(shù)據(jù) + 靜態(tài)結(jié)構(gòu)
• 現(xiàn)階段的動態(tài)渲染的實現(xiàn)過程就是：遍歷拼接

接收用戶的輸入數(shù)據(jù)---多個值，定義數(shù)組進行存儲

遍歷數(shù)組，根據(jù)數(shù)組元素值動態(tài)拼接指定的html結(jié)構(gòu)

細節(jié)：不要忘記了父容器

// 柱子的數(shù)量，柱子的數(shù)量對應(yīng)于需要接收的用戶輸入的值的數(shù)量
let num = 4
// 定義一個數(shù)組用于存儲用戶數(shù)據(jù)--數(shù)組命名：要么單詞本身是一個復(fù)數(shù)或本身表示數(shù)組，要么你自己添加s/es
// arr  list children  items names
let datas = []
// 循環(huán)遍歷為數(shù)組添加元素
for (let i = 0; i < num; i++) {
    // push / unshift / 數(shù)組[索引] = 值
    // datas.push(+prompt())
    datas[i] = +prompt(`請輸入第${i + 1}個值`)
}
// 實現(xiàn)動態(tài)渲染:數(shù)據(jù) + 結(jié)構(gòu) --實現(xiàn)的過程就是 遍歷拼接
// 遍歷誰：datas
// 拼接什么：
let htmlStr = `<div class="box">`
for (let i = 0; i < datas.length; i++) {
    htmlStr += ` <div class="sub" style='height:${datas[i]}px'>
                    <span>${datas[i]}</span>
                    <p>第${i + 1}季度</p>
                 </div>`
}
htmlStr += '</div>'

document.write(htmlStr)

九：猜數(shù)字游戲

• 回顧api,階段總結(jié)
• 學(xué)會拆分業(yè)務(wù)中的需求

1.得自動的生成一個1-10 之間的數(shù)字

2.添加while循環(huán)

讓用戶輸入數(shù)字，進行比較

• 如果大了，就提示大了 --繼續(xù)輸入
• 如果小了，就提示小了 --繼續(xù)輸入
• 如果猜 對了，給出提示 -- 不再繼續(xù) break

// 1.生成一個1-10之間的隨機數(shù)字
// Math.random():生成0-1之間的小數(shù)，包含0不包含1
let num = Math.ceil(Math.random() * 10)
// 讓用戶循環(huán)--重復(fù)輸入-重復(fù)次數(shù)不確定，就用for
for (;;) {
    let guess = prompt('請輸入你猜測的數(shù)字')
    // - 如果大了，就提示大了 --繼續(xù)輸入
    if (guess > num) {
        alert('輸入大了，繼續(xù)?。?！')
    }
    // - 如果小了，就提示小了 --繼續(xù)輸入
    else if (guess < num) {
        alert('輸入小了，繼續(xù)！??！')
    }
    // - 如果猜 對了，給出提示 -- 不再繼續(xù) break
    else {
        alert('棒')
        break
    }
}

十：刪除數(shù)組中所有的偶數(shù)

自己模擬一個數(shù)組

遍歷數(shù)組，實現(xiàn)元素的刪除

// 刪除數(shù)組中所有的偶數(shù)
let arr = [12, 456, 234, 4, 34, 6, 8, 10, 878]

// 遍歷，刪除splice(索引，數(shù)量)
for (let i = 0; i < arr.length; i++) {
    if (arr[i] % 2 == 0) {
        arr.splice(i, 1)
        i--
    }
}
console.log(arr)

十一：filter方法的使用

• 兩個重點使用場景： 查詢 刪除

// 刪除數(shù)組中所有的偶數(shù)
let arr = [12, 457, 44, 5, 12, 9, 8, 11, 68]

// 刪除偶數(shù)的本質(zhì)  是  保留奇數(shù)
// filter方法會返回一個新數(shù)組
// filter(回調(diào)函數(shù))
// filter(function(元素值，索引){})
// let temp = arr.filter(function(v) {
//   return v % 2 != 0
// })

// 建議：如果是遍歷數(shù)據(jù)：兩個參數(shù)名稱一般就是value index
// 如果是遍歷元素，兩個參數(shù)的名稱一般就是ele index

// 它會從頭到尾遍歷指定的數(shù)組（用那個數(shù)組調(diào)用這個方法，就會遍歷這個數(shù)組）
// 每次遍歷給回調(diào)函數(shù)傳入當前遍歷到的數(shù)組元素
// 執(zhí)行回調(diào)函數(shù)，如果回調(diào)函數(shù)的返回結(jié)果為true,就將當前遍歷到的元素存儲到filter內(nèi)部所創(chuàng)建的數(shù)組中
// 最終將內(nèi)部數(shù)組返回
let temp = arr.filter(function(value, index) {
    return value % 2 != 0
})
console.log(temp)

十二：數(shù)組-forEach-動態(tài)拼接html

• 要動態(tài)，先靜態(tài)
• 凡是說到動態(tài)渲染，必須準備好 數(shù)據(jù)和結(jié)構(gòu)
• 動態(tài)渲染的實現(xiàn)過程： 遍歷 + 拼接

// forEach的作用：單純的遍歷
// 語法：arr.forEach(function(value,index){})
// 從頭到尾遍歷指定的數(shù)組，每次遍歷給回調(diào)函數(shù)傳入一個參數(shù)，調(diào)用回調(diào)函數(shù)

<!-- 引入數(shù)據(jù)文件,引入之后，當前頁面就可以使用data.js文件中定義的數(shù)據(jù)了
    引入一個文件，相當于在當前頁面中也有引入的js的文件的代碼 -->
    <script src="./data/data.js"></script>
    <script>
      let str = `<div class="box w">
                  <div class="box-hd">
                    <h3>精品推薦</h3>
                    <a href="#">查看全部</a>
                  </div>
                  <div class="box-bd">
                    <ul class="clearfix">`
      //  遍歷拼接
      data.forEach(function(value, index) {
        str += `<li>
                  <img src="${value.src}" alt="" />
                  <h4>
                    ${value.title}
                  </h4>
                  <div class="info">
                    <span>高級</span> ? <span>${value.num}</span>人在學(xué)習(xí)
                  </div>
                </li>`
      })
      str += `</ul>
            </div>
          </div>`

      document.write(str)
    </script>

十三：1~100中前4個能被7整除的數(shù)

一：1~100 >> for循環(huán)遍歷

二：前4個

• 定義一個數(shù)組，每當有數(shù)據(jù)滿足的時候，將值添加到數(shù)組，判斷數(shù)組的長度是否到4，如果到4就break
• 定義一個計數(shù)器，每當有數(shù)據(jù)滿足的時候，+1，判斷是否到4

三：能被7整除 >> 值 % 7 == 0

// let arr = []
let count = 0
// 1~100中前4個能被7整除的數(shù)
for (let i = 1; i <= 100; i++) {
    if (i % 7 == 0) {
        // arr.push(i)
        console.log(i)
        count++
        if (count == 4) {
            break
        }
        // if(arr.length == 4){
        //   break
        // }
    }
}

十四：隨機生成16進制的顏色

16進制：0 1 2 3 4 5 6 7 8 9 A B C D E F

16進制顏色的組成：# + 6位16進制的值

需求：

• 隨機獲取6位16進制的值，組成一個顏色
• 使用一個數(shù)組來存儲所有的16進制的值
• 隨機生成一個合理的索引，通過索引取出一個值
• 我們需要生成6個值，所以需要使用循環(huán)，每次循環(huán)獲取一個值，6次循環(huán)獲取6個值，拼接在一起生成一個顏色值

實現(xiàn)步驟

• 定義一個數(shù)組
• 添加一個for循環(huán)，在循環(huán)中
  • 生成隨機數(shù)，獲取一個顏色值
  • 拼接到一個字符串中

要求：將操作封裝為一個函數(shù)

// 封裝一個函數(shù)隨機生成16進制的顏色，格式為#******
function getColor() {
    // 定義16進制的顏色值
    let colors = [
        '0',
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F'
    ]

    let str = '#'
    // 添加一個循環(huán)
    for (let i = 0; i < 6; i++) {
        // 生成一個隨機數(shù)
        let index = parseInt(Math.random() * colors.length)
        // 通過索引獲取數(shù)組中的某個值，進行拼接
        str += colors[index]
    }
    // 將生成的顏色值返回
    return str
}

document.querySelector('p').style.color = getColor()

十五：降序排序

一：隨機10個10-110之間的整數(shù)存入數(shù)組, 并且降序排列

• 隨機生成指定范圍內(nèi)的值：
• 隨機生成數(shù)據(jù)存儲到數(shù)組
• 降序排序

二：實現(xiàn)排序

• 使用循環(huán)遍歷出數(shù)組的每一個元素，進行前后(i > i+1)比較
• 如果大小關(guān)系滿足需要，就應(yīng)該交換兩個數(shù)的值

let nums = []
for (let i = 0; i < 10; i++) {
    let num = parseInt(Math.random() * 101) + 10
    nums.push(num)
}
console.log(nums)
// 對數(shù)組進行排序操作

// 比較多輪
let count = 0
for (let j = 0; j < nums.length - 1; j++) {
    // 比較一輪，只能獲取一個最大值放到后面
    for (let i = 0; i < nums.length - 1 - j; i++) {
        count++
        if (nums[i] < nums[i + 1]) {
            // 交換兩個數(shù)的值
            let temp = nums[i]
            nums[i] = nums[i + 1]
            nums[i + 1] = temp
        }
    }
}
console.log(nums)

十六：統(tǒng)計字符出現(xiàn)次數(shù)

• 我們給用戶什么樣的結(jié)果比較合適？{'a':2,'b':3,'c':1,'e':3}
• 我們發(fā)現(xiàn)這個案例的實際需求就是：根據(jù)處理生成對象，添加對象的鍵值

統(tǒng)計字符串 'abcoefoxyozzopp' 中每個字符出現(xiàn)的次數(shù)

1.遍歷字符串，獲取里面的每一個字符 --- 字符串的本質(zhì)是字符數(shù)組

2.根據(jù)遍歷到字符

• 如果這個字符所對應(yīng)的鍵在對象中存在，就將數(shù)量+1
• 如果字符不存在，就添加一個新的鍵值，鍵就是這個字符，值就是1

// 統(tǒng)計字符串 'abcoefoxyozzopp' 中每個字符出現(xiàn)的次數(shù)(字符串可以隨意設(shè)置啊)
// 將功能封裝為函數(shù)
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

    // 判斷當前對象是否有這個值所對應(yīng)的鍵
    if (obj[s]) {
        obj[s] = obj[s] + 1
    } else {
        obj[s] = 1
    }
}
console.log(obj)

十七:駝峰命名轉(zhuǎn)換

一：轉(zhuǎn)換字符串大小寫的基本api

• 第一個單詞小寫：toLowerCase()
• 后面的每一個單詞的首字母大寫，其它字符小寫：toUpperCase()

二：獲取需要進行轉(zhuǎn)換的單詞

• 每個單詞是以-分隔：字符串.split('分隔符')：返回一個數(shù)組

三：遍歷數(shù)組，獲取每一個字符串單詞，對單詞進行如下操作：

• 第一個單詞轉(zhuǎn)換為小寫
• 后面的單詞
  • 先取出第一個字符，轉(zhuǎn)換為大寫:
    • 字符串.substr(起始索引，長度) ：獲取從起始索引開始指定長度的字符
    • 字符串.substr(起始索引) :獲取從起始索引位置開始的所有字符
  • 取出后面的所有字符，轉(zhuǎn)換為小寫
• 拼接為一個整體

// 封裝一個函數(shù)，實現(xiàn)功能：往函數(shù)傳參為該格式字符串：'get-elements-by-class-name'，得到駝峰命名法的返回值為‘getElementsByClassName’
function exchange(str) {
    let result = ''
    // 進行字符串的分隔，使用split方法，分割之后返回一個數(shù)組
    let arr = str.split('-') //  ['GET', 'elemenTs', 'bY', 'cLAss', 'nAMe']
    // 遍歷數(shù)組，去處理其中的每一個單詞
    arr.forEach(function(value,index) {
        if(index == 0){
            // 第一個單詞轉(zhuǎn)換為小寫
            result += value.toLowerCase()
        }else{
            // 后面的單詞：取出第一個字符轉(zhuǎn)大寫，其它的字符轉(zhuǎn)小寫，進行拼接
            result += value[0].toUpperCase() + value.substr(1).toLowerCase()
        }
    })

    return result
}

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

十八：參數(shù)字符串轉(zhuǎn)換為對象

• 這種參數(shù)格式的轉(zhuǎn)換是后期業(yè)務(wù)處理的一個環(huán)節(jié)

獲取查詢參數(shù)部分：以?做為分割---split('?')

再將字符串使用&符號進行分割---split('&')

遍歷數(shù)組，獲取每一個值，每一個值應(yīng)該對著一組 鍵值對

• 對遍歷到的值再次進行分割，根據(jù)=分割
• 獲取數(shù)據(jù)的第0個元素就是對象所需要添加的key,第一個元素就是key所對應(yīng)的值

function exchange(str) {
    let obj = {}
    // 瀏覽器地址欄中的地址稱為 url
    // 如果在url地址進行參數(shù)的拼接，那么拼接的參數(shù)稱為  查詢字符串
    // 這種參數(shù)有一個標識： ？，將 ？及?后面的統(tǒng)一稱為查詢參數(shù)
    // 有一個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
}

十九：對象轉(zhuǎn)換為參數(shù)字符串

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

一：遍歷對象 -- for ...in

• key就是對象的鍵
• obj[key]就是對象的鍵所對應(yīng)的值

二：拼接字符串

• 要拼接&符號
• 記得將多余的&清除

// {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)
      }

二十：回調(diào)函數(shù)

// 不止一個用戶調(diào)用這個方法獲取這個數(shù)據(jù)實現(xiàn)渲染
// 有一個模擬數(shù)據(jù)：只有這個方法可以獲取到數(shù)據(jù)
// 1.方法并不能決定數(shù)據(jù)如何渲染
// callback:回調(diào)函數(shù)
function getData(callback) {
    let arr = [123, 12, 3, 234, 34, 54, 64, 6]
    callback(arr)
}

// 0-----------------------------------
// 實現(xiàn)動態(tài)渲染
function render(arr) {
    let str = ''
    arr.forEach(function(value) {
        str += `<li>${value}</li>`
    })
    document.querySelector('ul').innerHTML = str
}
// 調(diào)用一個函數(shù)A，傳入一個函數(shù)B做為參數(shù)，函數(shù)B就稱為回調(diào)函數(shù)
// 1.回調(diào)函數(shù)是我們準備的
// 2.回調(diào)函數(shù)不是我們自己調(diào)用，而是在函數(shù)A中調(diào)用
function render2(arr) {
    console.log(arr)
    let str = ''
    arr.forEach(function(value) {
        str += `<p>${value}</p>`
    })
    document.querySelector('div').innerHTML = str
}

// 現(xiàn)在我們需要調(diào)用這個方法，實現(xiàn)數(shù)據(jù)的動態(tài)渲染
// 我調(diào)用這個方法獲取數(shù)據(jù)，我當前清楚數(shù)據(jù)應(yīng)該如何處理 --- 我有數(shù)據(jù)嗎？
// 當我調(diào)用方法獲取數(shù)據(jù)的時候，我將數(shù)據(jù)的處理方式傳遞給函數(shù)
getData(render)