let myKey = 'variableKey'; let obj = { key1: 'One', key2: 'Two', [myKey]: 'Three' /* 棒呆! */ };
给变量键加上一层 []
,程序员们就可以在一条对象字面量声明里完成全部事情。
let ages = [12, 19, 6, 4]; let firstAdult = ages.find(age => age >= 18); // 19 let firstAdultIndex = ages.findIndex(age => age >= 18); // 1
find
和 findIndex
允许基于计算值查找,这种方式还防止了一些不必要的副作用和循环产生的不确定值。
// 传参给需要多个独立参数的函数 arguments // 很像 Function.prototype.apply() let numbers = [9, 4, 7, 1]; Math.min(...numbers); // 1 // 将节点列表转换成数组 let divsArray = [...document.querySelectorAll('div')]; // 将参数转换成数组 let argsArray = [...arguments];
这个神奇的运算符还有附加的好处:它能把可迭代对象(NodeList
, arguments
等等)转化为真正的数组,而之前我们只能用 Array.from
或其它的 hack 方法。
// 多行字符串 let myString = `Hello I'm a new line`; // 这么写完全没问题! // 基础的插值操作 let obj = { x: 1, y: 2 }; console.log(`Your total is: ${obj.x + obj.y}`); // Your total is: 3
当然,除了多行字符串,模板字符串还有其它的能力,比如说简单或者高级的插值。不过,仅仅是优雅的写多行字符串这件事情,已经让我十分欣慰了。
// 基础用法 function greet(name = 'Anon') { console.log(`Hello ${name}!`); } greet(); // Hello Anon! // 还可以是函数! function greet(name = 'Anon', callback = function(){}) { console.log(`Hello ${name}!`); // 不再需要“callback && callback()”啦 (不需要条件判断) callback(); } // 只给其中一个参数默认值 function greet(name, callback = function(){}) {}
如果在调用的时候不传无默认值的参数,其它的语言可能会发出警告,但是 JavaScript 会默认将它们设为 undefined
。