十六：统计字符出现次数
- 我们给用户什么样的结果比较合适？{'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)
