04_快速排序 本题考点：快速排序 根据题目要求，通过快速排序实现数组参数中数字从小到大排序。快速排序的基本思想是通过分治来使一部分均比另一部分小（大）再使两部分重复该步骤而实现有序的排列。核心步骤有：  选择一个基准值（pivot） 以基准值将数组分割为两部分 递归分割之后的数组直到数组为空或只有一个元素为止  参考答案： const _quickSort = array => { if(array.length <= 1) return array var pivotIndex = Math.floor(array.length / 2) var pivot = array.s...

03_合法的URL 本题考点：正则表达式 根据题目要求判断参数URL是否合法。首先URL结构一般包括协议、主机名、主机端口、路径、请求信息、哈希，而本题协议已给出为HTTP(S)，使用正则匹配URL，核心步骤有：  首先必须是以http(s)开头并且可以不包含协议头部信息 主机名可以使用"-"符号，所以两种情况都要判断，包含"-"或不包含"-" 顶级域名很多，直接判断"."之后是否为字母即可 最后判断端口、路径和哈希，这些参数可有可无  参考答案： const _isUrl = url => { return /^((http|https):\/\/)?(([A-Za-z0-9]+-[A...

02_数组去重 本题考点：去除数组重复项 根据题目要求，去除数组中的重复项。数组去重的方式有多种，如ES6的Set对象等可实现快速去重。该处使用循环判断完成数组的去重，核心步骤有：  进入参数数组长度的循环体中 取“i”位数值再截取“i”位之后的数组 判断截取的数组中是否有某一位和第“i”位相同 如果有，则将数组最后一位和第“i”位进行替换并且数组长度减1 如果没有，则进入下一次循环  参考答案： const _deleteRepeat = array => { for(let i=0 ; i<array.length ; i++) { const sign = array[i] ...

01_事件委托 本题考点：点击事件、事件捕获、事件冒泡 根据题目要求，需要在“ul”标签上添加事件代理，即添加点击事件。当“li”被点击时，事件捕获到该标签并且向上冒泡直到找到拥有点击事件的标签，核心步骤有：  给“ul”添加点击事件 在点击事件函数中获取到点击事件“event” 判断触发该点击事件的“event”目标是否为“li”标签 如果是“li”标签，则修改该标签的内容  参考答案： document.querySelector('ul').onclick = event => { event = event || window.event if(event.target.node...

40_虚拟DOM 本题考点：createElement、setAttribute、appendChild、createTextNode、遍历 根据题目要求，将虚拟DOM转换为真实DOM结构并返回，核心步骤有：  析构对象参数中的tag、props、children、text值 当tag的数据类型为”string“时，通过tag标签创建新节点并且挂载在vnode对象参数的el属性上 再通过setAttribute函数给vnode.el节点设置属性 然后通过appendChild、createTextNode将当前节点对象的text内容插入vnode.el节点上 最后通过createElm函数递归...

39_字体高亮 本题考点：indexOf、正则表达式、模板字符串 根据题目要求，实现搜索内容高亮的效果，核心步骤有：  首先通过indexOf判断搜索内容是否存在，如果存在，则通过正则全局搜索到目标内容并且替换为使用b标签加粗、样式设置之后的内容，这个步骤需要通过模板字符串和innerHTML来设置 当搜索内容不存在时，获取到所有b标签并且重置b标签的样式  参考答案： btn.onclick = () => { if (text.innerText.indexOf(search.value) != -1) { text.innerHTML = text.innerText.replac...

38_高频数据类型 本题考点：类型判断、遍历 根据题目要求，找到参数数组中出现频次最高的数据类型，并且计算出出现的次数，核心步骤有：  声明一个临时对象，用于存储数据类型和该数据类型出现的频次 声明一个数组，用于返回结果 声明一个数字，用于保存出现最高频的数据类型次数 通过遍历数组，更新临时对象的内容并且修改数字 最后通过遍历对象，判断是否存在某个数据类型出现的频次和当前最高频次的数据类型出现次数相等并进行拼接  参考答案： const _findMostType = array => { let tem = {} let arr = [] let num = 0 for(key of ...

37_双向绑定 本题考点：Object.defineProperty、set、输入事件 根据题目要求，对”person“对象数据进行拦截，在拦截中操作页面的渲染，并且当输入框内容被修改时，也能触发视图的更新，核心步骤有：  创建”Observe“函数，接收一个对象参数，首先判断该对象参数是否合法，之后通过遍历对象的所有属性进行拦截操作。尽管可以直接使用Object.defineProperty函数对”person“对象进行拦截，但是可以通过创建”Observe“函数来封装对某个对象的属性劫持功能，之后可以复用此函数。 创建“defineReactive”函数，接收三个参数分别为该对象、对象属性...

36_切换Tab栏目 本题考点：点击事件、遍历、自定义属性 根据题目要求，当点击Tab栏目时切换该Tab栏目的背景色并更改下方"li"元素，核心步骤有：  给”option“元素添加点击事件 当点击事件被触发的时候，对数组”optionItems“进行遍历初始化设置所有的Tab栏目背景色为”#fff“，在单独设置当前触发事件的元素背景色为”#25bb9b“ 然后对数组“items”进行遍历设置所有“li“元素的”display“属性为”none“，最后通过获取自定义属性设置对应索引值的”li“元素”display”属性为“block”  参考答案： options.onclick = func...

35_接口 本题考点：split、接口判断 根据题目要求，完成一个虚拟的接口功能，核心步骤有：  首先通过”?“拆解字符串参数，获取到方法 如果api请求为”get“，则返回data 如果api请求为”update“，则需要继续拆解参数信息 拆解请求参数信息之后根据内容修改data数据  参考答案： const _api = string => { let method = string.split('?')[0] switch(method) { case 'get': { return data break } case 'update': { let query = string....

34_购物面板 本题考点：元素获取、点击事件 根据题目要求，完成购物面板的数据计算，核心步骤有：  获取所有具有“id”属性的元素 创建重渲染函数 给四个按钮分别添加“onclick”事件，其中触发重渲染函数  参考答案： let total_zjsl = 0 let total_klsl = 0 let dom_zjtaiduola = document.querySelector('#zjtaiduola') let dom_zjsl = document.querySelector('#zjsl') let dom_zjtaishaola = document.querySelector...

33_监听对象 本题考点：Object.defineProperty、get、set 根据题目要求，对”person“对象数据进行拦截，在拦截中操作页面的渲染，核心步骤有：  创建”Observe“函数，接收一个对象参数，首先判断该对象参数是否合法，之后通过遍历对象的所有属性进行拦截操作。尽管可以直接使用Object.defineProperty函数对”person“对象进行拦截，但是可以通过创建”Observe“函数来封装对某个对象的属性劫持功能，之后可以复用此函数。 创建“defineReactive”函数，接收三个参数分别为该对象、对象属性、对象属性值。该函数内部使用Object.def...

32_Proxy拦截器 本题考点：Proxy、ES6[...]扩展字符、arguments 根据题目要求，给对象参数的某些属性设置禁止拦截器功能，核心步骤有：  通过[...prototypes]获取从第二个参数开始往后的所有参数 创建一个Proxy实例并且返回，该构造函数接收两个参数，第一个参数是被代理的对象，第二个参数是处理方法 在处理方法中设置“get”计算方法，该方法接收两个参数，第一个参数是被代理的对象，第二个参数是当前“get”读取的属性 当获取某个实例属性时，如果这个属性在[...prototypes]数组中，则返回”noright“  参考答案： const _proxy = ...

31_Proxy计数器 本题考点：Proxy 根据题目要求，用Proxy代理一个对象，每当通过代理访问该对象拥有的属性时，“count”加1，当访问该对象没有的属性时，“count”减1，核心步骤有：  创建一个Proxy实例，该构造函数接收两个参数，第一个参数是被代理的对象，第二个参数是处理方法 在处理方法中设置“get”计算方法，该方法接收两个参数，第一个参数是被代理的对象，第二个参数是当前“get”读取的属性 当第二个参数在第一个参数中时，“count“加1，否则减1  参考答案： let count = 0 const _proxy = object => { let proxy...