题目难度：★★★☆
①接环Tab栏目
描述
请补全JavaScript代码，实现效果如下：
1.当点击某个栏目（题库、面试、学习、求职）时，该栏目背景色变为’#25bb9b’，其它栏目背景色位’#fff’。
2.当选中某个栏目时，下方内容就展示索引值相同的类名为".items"的"li"元素
注意：
3.必须使用DOM0级标准事件（onclick）
4.已使用自定义属性存储了栏目的索引值。点击栏目获取索引值，使用索引值控制类名为"items"下的"li"元素
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><style>ul { padding: 0; margin: 0; list-style: none; } .optionsli { float: left; width: 100px; height: 40px; line-height: 40px; text-align: center; border: solid1px#ddd; } .itemsli { width: 405px; height: 405px; display: none; border: solid1px#ddd; } </style></head><body><ulclass='options'><lidata-type="0"style='background-color: #25bb9b;'>题库</li><lidata-type="1">面试</li><lidata-type="2">学习</li><lidata-type="3">求职</li></ul><ulclass='items'><listyle="display: block;">牛客题库，包含编程题、选择题等</li><li>为你的面试提供一站式服务</li><li>校招学习来牛客</li><li>求职中有什么难题，可以联系我们</li></ul><script>letoptions=document.querySelector('.options'); // ★★★ [].slice === Array.prototype.slice 👉 true// Array.prototype.slice是定义的方法,可以被重写// [].silce是使用定义的方法letoptionItems=Array.prototype.slice.call(document.querySelectorAll('.options li')); letitems=Array.prototype.slice.call(document.querySelectorAll('.items li')); // 补全代码options.onclick=function(event) { for (letiinoptionItems) { if (event.target===optionItems[i]) { optionItems[i].style.backgroundColor='#25bb9b'items[i].style.display='block' } else { optionItems[i].style.backgroundColor='#fff'items[i].style.display='none' } } } </script></body></html>
②双向绑定描述
描述
请补全JavaScript代码，要求如下：
1.监听对象属性的变化
2.当"person"对象属性发生变化时，页面中与该属性相关的数据同步更新
3.将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时，页面中与该属性相关的数据同步更新
注意：
4.必须使用Object.defineProperty实现且触发set方法时更新视图
5.必须使用DOM0级标准事件（oninput）
6.可以使用预设代码"_render"函数
📰代码演示：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"></head><body><style>ul { list-style: none; } </style><inputtype="text"><ul></ul><script>varul=document.querySelector('ul'); varperson= { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 }; varinp=document.querySelector('input'); inp.value=person.weight; const_render= () => { varstr=`<li>姓名：<span>${person.name}</span></li><li>性别：<span>${person.sex}</span></li><li>年龄：<span>${person.age}</span></li><li>身高：<span>${person.height}</span></li><li>体重：<span>${person.weight}</span></li>`ul.innerHTML=str; inp.value=person.weight; } _render(); // 补全代码//用户输入时触发oninput事件inp.oninput=function(e) { person.weight=this.value; } console.log(Object.keys(person)) // ['sex', 'age', 'name', 'height', 'weight']// Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。Object.keys(person).forEach(key=> { letvalue=person[key]; Object.defineProperty(person, key, { set(newValue) { if (newValue!=value) { value=newValue_render(); } }, get() { returnvalue } }) }) </script></body></html>
③高频数据类型
描述
请补全JavaScript代码，要求找到参数数组中出现频次最高的数据类型，并且计算出出现的次数，要求以数组的形式返回。
注意：
1.基本数据类型之外的任何引用数据类型皆为"object"
2.当多种数据类型出现频次相同时将结果拼接在返回数组中，出现次数必须在数组的最后
示例1
输入：__findMostType([0,0,’’,’’])
输出：[‘number’,‘string’,2]或[‘string’,‘number’,2]
📰代码演示：
<!DOCTYPEhtml><html><head><metacharset=utf-8></head><body><!--描述--><!--请补全JavaScript代码，要求找到参数数组中出现频次最高的数据类型，并且计算出出现的次数，要求以数组的形式返回。--><!--注意：--><!--1.基本数据类型之外的任何引用数据类型皆为"object"--><!--2.当多种数据类型出现频次相同时将结果拼接在返回数组中，出现次数必须在数组的最后--><!--示例1--><!--输入：--><!--__findMostType([0,0,'',''])--><!--输出：--><!--['number','string',2]或['string','number',2]--><scripttype="text/javascript">const_findMostType=array=> { // 补全代码letindex= {} letmaxNum=0letarr= [] array.forEach(item=> { //三元判断类型是否相等lettype= (typeofitem) ? (typeofitem) : 'object'//相等就+1 否者等于1index[type] =index[type] ?index[type] +1 : 1// 该类型出现的最大次数maxNum=maxNum>index[type] ?maxNum : index[type] }) // 将出现次数相同的添加的数组里Object.keys(index).forEach(key=> { if (index[key] ==maxNum) { arr.push(key) } }) // 把出现最多次数的类型次数push到数末尾arr.push(maxNum) returnarr } console.log(_findMostType([0, 0, '', ''])) </script></body></html>
④字体高亮
描述
请补全JavaScript代码，实现一个搜索字体高亮的效果。要求如下：
1.在input框中输入要搜索的内容，当点击查询按钮时，被搜索的字体样式变为加粗，背景色变为’yellow’
2.重新输入搜索文字，点击查询按钮时，去掉上一次的搜索效果，高亮显示效果只加在本次搜索文字上
3.如果搜索不到相关内容，清除之前的效果
注意：
4.需要加粗的文字请使用b标签包裹
5.必须使用DOM0级标准事件（onclick）
📰代码演示
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"></head><body><inputtype="text"><buttonstyle="margin-right: 80px">查询</button><divclass="text"style="margin-top: 70px">牛客网隶属于北京牛客科技有限公司，牛客网成立于2014年9月，是以科技和创新驱动的教育科技公司。牛客网坚持以前沿技术服务于技术、以人工智能和大数据提升学习效率，专注探索在线教育创新模式，致力于为技术求职者提供能力提升解决方案，同时为企业级用户提供更高效的招聘解决方案，并为二者搭建桥梁，构建从学习到职业的良性生态圈。发展至今，牛客网在技术类求职备考、社群交流、企业招聘服务等多个垂直领域影响力均在行业中遥遥领先，产品矩阵包括IT题库、在线编程练习、线上课程、交流社区、竞赛平台、笔面试服务、ATS系统等，用户覆盖全国高校百万IT学习者并在高速增长中，同时也为京东、百度、腾讯、滴滴、今日头条、华为等200多家企业提供校园招聘、编程竞赛等线上服务，并收获良好口碑。</div><!--描述--><!--请补全JavaScript代码，实现一个搜索字体高亮的效果。要求如下：--><!--1.在input框中输入要搜索的内容，当点击查询按钮时，被搜索的字体样式变为加粗，背景色变为'yellow'--><!--2.重新输入搜索文字，点击查询按钮时，去掉上一次的搜索效果，高亮显示效果只加在本次搜索文字上--><!--3.如果搜索不到相关内容，清除之前的效果--><!--注意：--><!--1.需要加粗的文字请使用b标签包裹--><!--2.必须使用DOM0级标准事件（onclick）--><script>vartext=document.querySelector(".text"); varsearch=document.querySelector("input"); constbtn=document.querySelector("button"); btn.onclick= () => { // 补全代码// 当第一个 "Microsoft" 被找到，它就被替换为 "Runoob"：letinput=search.valueletnewText=text.innerTextconsole.log(input) if (input) { newText=text.innerText.replace( // 使用正则// 在 JScript 表达式中，正则表达式后面的全局标志 ('g') 表示该表达式将用来在输入字符串中查找尽可能多的匹配。newRegExp(input, 'g'), `<b style="background-color:yellow;">${input}</b>` ) } text.innerHTML=newText } </script></body></html>
⑤虚拟DOM
描述
请补全JavaScript代码，要求将对象参数转换为真实的DOM结构并返回。
注意：
1.tag为标签名称、props为属性、children为子元素、text为标签内容
📰代码演示：
……
最后
下篇文章再见ヾ(￣▽￣)ByeBye
