江苏龙网

  1. 主页 > 生活百科 > >

懂这10道JS经典算法题，你就是前端大神

JS


懂这10道JS经典算法题，你就是前端大神

文章插图
 
 
一：Virtual DOM（二）在 Virtual DOM 的基础上给 VNode 类添加 render 方法 ， render 方法把一个虚拟的 DOM 节点渲染成真正的 DOM 节点 ， 例如：
const ul = h('ul', {id: 'list', style: 'color: red'}, [ h('li', {class: 'item'}, ['Item 1']), h('li', {class: 'item'}, ['Item 2']), h('li', {class: 'item'}, ['Item 3'])]const urlDom = ul.render() // 渲染 DOM 节点和它的子节点ulDom.getAttribute('id') === 'list' // trueulDom.querySelectorAll('li').length === 3 // true答案:
class VNode { constructor (tagName, props, children) { this.tagName = tagName this.props = props this.children = children } render () { // 根据 tagName 构建 DOM 节点 const el = document.createElement(this.tagName) // 设置 DOM 节点属性 Object.entries(this.props).forEach(([key, value]) => el.setAttribute(key, value)) var children = this.children || [] /* 渲染子节点 */ children.forEach((child) => { var childNode = (child instanceof VNode) ? child.render() // 如果子节点也是虚拟DOM ， 递归构建DOM节点 : document.createTextNode(child) // 如果字符串 ， 只构建文本节点 el.AppendChild(childNode) }) return el }}const h = (tagName, props, children) => { return new VNode(tagName, props, children)}二：Virtual DOM大家都知道 ， React、Vue 内部都采用了 Virtual DOM 的技术 。简而言之 ， 就是用普通的 JAVAScript 对象来表示 DOM 的结构和信息 。例如下面的 DOM 结构：
<ul id='list' style='color: red'> <li class='item'>Item 1</li> <li class='item'>Item 2</li> <li class='item'>Item 3</li></ul>可以用 JavaScript 的对象表示为：
const ul = { tagName: 'ul', // 节点标签名 props: { // DOM的属性 ， 用一个对象存储键值对 id: 'list', style: 'color: red' }, children: [ // 该节点的子节点 {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]}, {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]}, {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]}, ]}每个代表 DOM 节点的对象有三个属性：
tagName：代表 DOM 节点的标签名 。props：这个 DOM 节点的属性 ， 用一个对象表示 。children：这个 DOM 节点的子节点 ， 是一个数组；数组的元素可以是 字符串 或者 对象 。如果是字符串就表示这个子节点是文本节点 ， 否则就表示是另外一个 DOM 节点 。请你完成 h 函数 ， 可以通过 h 函数生成上面的结果 ， 例如：
const ul = h('ul', {id: 'list', style: 'color: red'}, [ h('li', {class: 'item'}, ['Item 1']), h('li', {class: 'item'}, ['Item 2']), h('li', {class: 'item'}, ['Item 3'])])ul.props.id === 'list' // => trueh 函数需要返回的实例是属于 VNode 这个类的：
ul instanceof VNode // => true 
请你完成 h 函数和 VNode 的实现 。
答案：
class VNode { constructor (tagName, props, children) { this.tagName = tagName this.props = props this.children = children } }const h = (tagName, props, children) => { return new VNode(tagName, props, children)}三：专业盗贼你是一个盗窃专家 ， 某一天晚上你要去盗窃某一条街道的一排房子 。这些房子都有相连的防盗系统 ， 如果你把相邻的两家都偷了那么就会触发报警器 。
用一个数组来表示这些房子的金钱数量 ， 请你完成 rob 函数 ， 计算出在不触发报警器的情况下最多能偷多少钱 。例如：
rob([1, 2, 3]) // => 4 
答案：
// const rob = (nums) => {// const cache = new Map()// const robIt = (i) => {// if (i >= nums.length) return 0// if (cache.has(i)) return cache.get(i);// const cur = i < 0 ? 0 : nums[i]// const max = cur + Math.max(// robIt(i + 2), // 隔一个房子偷// robIt(i + 3) // 或者隔两个房子偷// )// cache.set(i, max) /* 存储记忆化数据 */// return max// }// return robIt(-2) // -2 + 2 = 0 偷第一所房子, -2 + 3 = 1 不偷第一所房间// }const rob = (nums) => { let i = 0; let e = 0; for (let k = 0; k < nums.length; k++) { let tmp = i; i = nums[k] + e; e = Math.max(tmp, e); } return Math.max(i, e);}四：优先队列优先队列是一种元素带权重的队列 ， 你可以往队列中添加和删除元素 ， 但是删除元素的时候会把优先级最高的元素删除 。例如：


推荐阅读


上一篇：排序算法相关知识点

下一篇：34岁的杨幂为何不再婚 杨幂多大了