rp

一道有趣的 Javascript 面试题

阿里的一道测试题(群里的小伙伴提供的),题目大概这样:

https://hooyim.oss-accelerate.aliyuncs.com/uploads%2F2020%2F07%2F24%2F0oXwHv0L2jtYfNFr

大概就是让写个简单的模板解析器,尝试了好多种解构的方法都没成功...

思考,下面就是答案了!

问题代码:

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
var greeting = 'My name is ${name}, age ${age}, I am a ${job.jobName}'; var employee = { name: 'XiaoMing', age: 11, job: { jobName: 'designer', jobLevel: 'senior' } }; var result = greeting.render(employee); console.log(result);

解决方案一(绝大多数的解决方案-正则):

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
// 你可以趁机想想还有没有其他解法,时间充裕 // 代码参考自 @剪影boy + @Zhongsheng String.prototype.render = function(obj) { return this.replace(/\$\{(\w+|\w+\.\w+)\}/g, match => { var keys = match.replace('${', '').replace('}', '').split('.') return keys.reduce((acc, cv) => acc[cv], obj) }) }

解决方案二(字符串模板):

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
// 这办法是我自己想到的,有点笨 // 这办法是我自己想到的,有点笨 String.prototype.render = function(obj) { // 利用了ES6的解构、对象keys新方法,在函数内部解构并自动展开变量 eval(`var {${Object.keys(obj).join(',')}} = obj`) // 利用eval使字符串直接作为ES6解析 return eval('`' + this + '`') }

方案二是后来不断尝试得到的

拿键声明变量 => 拒绝循环所以用keys => 数组转成字符串再组合对象字符 => eval去构造解构 => OK!

JS又爱出了新高度😂 six six six!

解决方案三(With函数):

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
// 代码由 掘金@一口怪兽一口烟 提供 String.prototype.render = function (obj) { with(obj) { return eval('`' + this + '`') } }

莫非是史上最优解?😂double click six six six!

期待更多的解法

字符串模板支持函数变量表达式,纯天然的模板解析器,如果是Mustache范儿,解析前replace下就行了

不再补充明细


去控制台跑下试试吧

随时欢迎补充!

相关学习资料:

Article created at   2020/7/24 PM  in category  code ,   208  Views

Related tags: js

Article Address: https://www.hooyim.com/article/3