ES6新语法之---对象字面量扩展、模板字符串(5)
这节课学习ES6中对象字面量扩展和新增模板字符串
第一部分：对象字面量扩展
1.简洁写法
ES6对于对象字面量属性提供了简写方式。
1.1：属性简写
//传统写法 var x = 2, y = 3, o = { x: x, y: y }; //ES6简洁写法 var x = 2, y = 3, o = { x, //属性名和赋值变量名相同时，可简写 y };
1.2：方法简写
//传统写法 var o = { x: function() { //... }, y: function() { //... } } //ES6简洁写法 var o = { x() { //... }, y() { //... } }
1.3简洁方法的局限
分析下面代码是否可以通过简洁方法重构：
function runSomething(o) { var x = Math.random(), y = Math.random(); return o.something(x, y); //通过o调用属性方法 } runSomething({ something: function something(x, y) { if (x > y) { return something(y, x) // 当不符合条件时，递归调用something()方法 } return y - x; } });
这里的'something：'属性和function something()各有用途，属性something可以通过o对象调用，而function something()在自身内部调用用于递归实现。
分析1：在obj对象内部通过obj.something()实现递归。
function runSomething(o) { var x = Math.random(), y = Math.random(); return o.something(x, y); //通过o调用属性方法 } var obj = { something: function(x, y) { if (x > y) { return obj.something(y, x) // 这里我们使用obj调用functiong } return y - x; } }; runSomething(obj);
如果obj对象的引用指向不发生改变的话，那么这是一个很好的办法。但obj的指向我们并不能控制。
分析2：使用this调用obj中的something()方法
var obj = { something: function(x, y) { if (x > y) { return this.something(y, x) // 这里使用this调用 } return y - x; } };
这里的this和分析1中的问题一样，我们无法保证something()方法始终是obj调用的，这样就会存在this的绑定陷阱，可能this表示的并不是obj本身。
例如：btn.addEventListener("click"， obj.something, false);此时的this就不再是obj对象本身了，可能有人说可以使用obj.something.bind(obj)再绑定回去，这么麻烦就没必要了。
再回头看我们最初1.3中的问题：
runSomething({ something: function something(x, y) { if (x > y) { return something(y, x) } return y -x; } })
这里面function something()中的something总是指向这个something()这个函数本身，为我们提供了一个用于递归/事件绑定/解绑的引用，不会和this纠缠也不需要不可靠的对象引用。
使用ES6的语法简化：
runSomething({ something(x, y) { if (x > y) { return something(y, x) // Uncaught ReferenceError: something is not defined } return y -x; } })
可以看到代码报错，因为其中something(x, y)会被解释为：something:function(x, y){...}，这样return中的something方法就是未定义的。
总结：简洁方法很方便，但是应该只在不需要他们执行递归/事件绑定/解绑时候使用。否则我们还是应该使用 something: function something(){...}这种传统的方式。
1.4计算属性名
计算属性名：对象中一个或多个属性名是通过某个表达式计算得来的。
var prefix = "user_"; var o = { baz: function () { //... } }; o[prefix + 'foo'] = function () { //[]中可以放任意合法表达式 // ... } o[prefix + 'bar'] = function () { // ... }
计算属性名也可以作为简洁方法的名称出现：
var o = { ["f" + "oo"]() { // 作为简洁方法的名称出现 //... } }
第二部分：模板字符串
1.ES6引入了一个新的字符串字面量，使用`作为界定符，这样的字符串字面值支持嵌入基本的字符串插入表达式，会被自动解析和求值。
1.1传统拼接字符串方式：
var name = "Kyle"; var greeting = "Hello " + name + "!"; //使用传统的'+'拼接字符串 console.log(greeting); console.log(typeof greeting);
1.2ES6模板字符串拼接：
var name = "Kyle"; var greeting = `Hello${name}!`; //使用模板字符串,${}可以对变量取值。 console.log(greeting); console.log(typeof greeting);
字符使用``包裹，会被解释为一个字符串字面量，其中${}形式的表达式会被立即在线解析求值。
1.3字符串字面量的一个优点，字符串可以分散在多行：
// text中的空格和换行会被保存 var text = ` Now is the time for all good men to come to the aid of their country! `; console.log(text);
2.插入表达式${}
2.1插入表达式中可以出现任何合法的表达式，包括函数调用、在线函数表达式调用，甚至其他插入字符串字面量！
function upper(s) { return s.toUpperCase(); } var who = "reader"; var text = ` A very ${upper("warm")} welcome to all of you ${upper(`${who}s`)} `; console.log(text);
2.2插入表达式作用域
function foo(str){ var name = "foo"; console.log(str); } function bar(){ var name = "bar"; foo(`Hello from ${name}!`); //这里的name使用的是${name}所出现的作用域中的name } var name = "global"; bar(); // Hello from bar
插入字符串字面量在它出现的词法作用域内，没有任何形式的动态作用域。
2.3标签模板字面量
这个新功能不好解释，直接上代码比较直观：
function foo(strings, ...values){ console.log(strings); //输出结果是数组，['Everything is', '!'] console.log(values); //输出结果是数组，['awesome'] } var desc = 'awesome'; foo `Everything is ${desc}!`;
上例中foo`Everything...`是什么？其实这是一类不需要(...)的特殊函数调用，标签也就是foo部分是一个要调用的函数值。可以是任意结果为函数的表达式。
function bar() { return function foo(strings, ...values){ console.log(strings); //['Everything is', '!'] console.log(values); // ['awesome'] } } var desc = "awesome"; bar()`Everything is ${desc}`; //bar()的结果是一个函数
分析：第一个参数strings为所有由普通字符串组成的数组。
第二个参数values接收的是由插入表达式${}计算的结果值。
应用：数字格式化为美元表示法
function bar(strings, ...values) { return strings.reduce(function(s, v, idx){ //s表示上一次调用返回值，v表示当前元素之 if(idx > 0){ if(typeof values[idx - 1] == 'number'){ s += `$${values[idx - 1].toFixed(2)}`; //如果是数字，给其拼接上'$'符号。 } else { s += values[idx - 1] } } return s + v; }, ""); //""作为reduce第一次调用的第一个参数的值 } var amt1 = 11.99; amt2 = amt1 * 1.08, name = "Kyle"; var result = bar` Thanks for your purchase, ${amt1}! Your product cost was ${amt1}, which with tax comes out to ${amt2}. `; console.log(result)
如果values中遇到number值，就在其前拼接'$'，然后使用toFixed(2)保留两位小数位。
2.4原始字符串
ES6提供了一个内建函数可以用作字符串字面量标签：String.raw(...)。得到字符串原始值。
//结果我为'Hello //World' console.log('Hello\nWorld!'); console.log(String.raw`Hello\nWorld!`); //结果为'Hello\nWorld'
