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

藏宝库编辑 · 2024-9-16 12:06:03

十六：统计字符出现次数

我们给用户什么样的结果比力符合？{'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 let s = str // a // 判定当前对象是否有这个值所对应的键 if (obj) {       obj = obj + 1 } else {       obj = 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)

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

所属分类: 问答交流

新帖推荐: 30日

推荐作品