一道测试题

阿里的一道测试题（群里的小伙伴提供的），大概就是让写个简单的模板解析器，尝试了好多种解构的方法都没成功...，能怪ES7么..

先思考先思考先思考！没路了看答案！

问题代码：

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

复制代码

解决方案一（绝大多数的解决方案-正则）：

1. 
   
2. //正则略...
   
3. // 你可以趁机想想还有没有其他解法，时间充裕，带脑子来见

复制代码

解决方案二（字符串模板）：

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

复制代码

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

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

复制代码

对JS又爱出了新高度

一道测试题

阿里的一道测试题（群里的小伙伴提供的），大概就是让写个简单的模板解析器，尝试了好多种解构的方法都没成功...，能怪ES7么..

先思考先思考先思考！没路了看答案！

问题代码：

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

复制代码

解决方案一（绝大多数的解决方案-正则）：

1. 
   
2. //正则略...
   
3. // 你可以趁机想想还有没有其他解法，时间充裕，带脑子来见

复制代码

解决方案二（字符串模板）：

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

复制代码

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

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

复制代码

对JS又爱出了新高度