ES6语法学习（一）

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能有自动保存的草稿箱的功能，不然没保存退出，又不小心清除缓存，就惨了。。。）