ES6语法学习
博主最近在看ES6语法,这里写一些日常碰到的疑惑和自己的想法。
(1)字符串扩展 “(反引号)
详细内容可见阮一峰的博客,里面说的很透彻。
这里写一个关于模板字符串的问题。
模板字符串紧跟函数后面时,此字符串将被当作参数传入函数中,举个栗子~
在阮一峰的博客里面
var a = 5;
var b = 10;
tag`Hello ${ a + b } world ${ a * b }`;
//等同于
tag(['Hello ',' world ',''],15,50);
那么在这个代码里面,tag的参数实际值也就是这样
- 第一个参数: [‘Hello ‘, ’ world ‘, ”]
- 第二个参数: 15
- 第三个参数: 50
也就是说所有所有连续的字符串作为一个参数存入一个数组,而这个数组是所有连续字符串的集合,
其实 tag的参数可以这么来理解.
Hello 变量1 world 变量2;
那么tag的第一个参数按照我们上面的理解,也就是 [‘Hello ‘,’ world ‘,”] 注意这里最后有个空字符串,第二个参数也就是 ‘变量1’ 第三个参数则是 ‘变量2’
那么传入 tag 的所有参数也就转化为上面的 tag(['Hello ',' world ',''],15,50);
接下来我们分析一个更加复杂一点的例子
var total = 30;
var msg = passthru`The total is ${total} (${total*1.05} with tax)`;
function passthru(literals){
var result = '';
var i = 0;
while (i < literals.length){
result += literals[i++];
if (i < arguments.length){
result += arguments[i];
}
}
return result;
}
console.log(msg)
按照我们刚刚分析的,一点一点来,首先 passthru 显式的接受了一个参数 literals 但是传给 passthru 的参数却不止一个,还包括了2个变量(还记得我们上面分析的吗?),那么这串代码里面,直接用了 arguments 这个类数组对象来承载,而没有显式的接受这些参数,于是 passthru 很好的完成了变量的代入,其实我们也可以显式的接受参数,如下:
function passthru(literals, ...values){
var output = "";
for (var index = 0; index < values.length; index++){
output += literals[index] + values[index];
}
output += literals[index];
return output;
}
这里由于是显式传参,所以代码比上述的 arguments 要简化不少,不过也受制于参数的数量了,在JS权威指南里面,作者为我们提供了一种好办法来解决这个问题,同时参见我在 segmentFault 上面的提问
https://segmentfault.com/q/1010000010109360?_ea=2174237
我们可以使用this.passthru.apply(this,arguments)
的这种方式来传参,注意了,这里代码this.*1.apply(this,*2)
*号1表示需要调用的函数,*号2表示需要传入的参数。其本质也就是解开一层数组,其实直接使用 this.*1(*2) 也可以在完成这样的任务,只是在函数内部需要处理数组。如果参数有变,我们可能需要进入函数内部修改函数具体实现才能很好的参数函数,但是使用 apply 我们可以很好的做到解耦,也就是说,参数变化,我们不需要进入函数内部去修改代码,只需要处理好参数就OK了。
(PS. 之前退出浏览器忘记保存,还好有线上保存的功能,不过希望CSDN能有自动保存的草稿箱的功能,不然没保存退出,又不小心清除缓存,就惨了。。。)