阅读 3817

【译】五个ES6功能,让你编写代码更容易

原文地址: Five ES6 features to make your life easie

原文作者: Scott Domes

译者: vonmo

众所周知,学习新语法是一件很怪异的事情。我们大多数人都选择我们需要提高工作效率的最低限度,然后偶尔在观看朋友/同事/导师代码时,我们偶尔也发现了一些让我们想知道的事情. 如果没有他们、我们自己该如何生存的新技巧。

下面罗列了5个这样的小快捷方式,可以让您编码生活更快一些。

一如既往,如果这篇文章对您有用的话,请推荐并分享!

标记的模板文字

模板文字!确实很棒。我们不再会这样做….

const concatenatedString = "I am the " + number + "person to recommend this article."
复制代码

然而,当我们使用下面这种方式做的话:

const concatenatedString = `I am the ${number} person to recommend this article.`
复制代码

是不是很棒!

标记的模板文字允许我们向前迈出一步 - 并使用字符串调用函数。

我们再来看下面这个例子⬇:

const consoleLogAstring = (string) => {
    console.log(string)
}
consoleLogAstring`I am the string to be logged!`
// I am the string to be logged!
复制代码

换种方式, 看这个⬇:

consoleLogAstring('Here is the string!')
// Here is the string!
复制代码

…与此相同的还有下面这种写法⬇:

consoleLogAstring`Here is the string!`
复制代码

标记模板文字还有一个额外的好处;向目标函数传递一个从字符串生成的参数数组。这些参数的排列方式如下:首先,一个字符串数组包围内插值,然后是每个内插值。

我们来看一个例子:

function logOutValues(strings, value1, value2) {
  console.log(strings, value1, value2)
}
logOutValues`Here is one value: ${1} and two: ${2}. Wow!`
// ["Here is one value: ", " and two: ", ". Wow!"] 1 2
复制代码

您可以根据需要为尽可能多的内插值执行此操作,甚至可以像这样操作字符串⬇:

const person = {
    name: "Scott",
    age: 25
}
function experience(strings, name, age) {
  const str0 = strings[0]; // "that "
  const str1 = strings[1]; // " is a "
  let ageStr = 'youngster'; 
  if (age > 99){
    ageStr = 'centenarian';
  }
  return str0 + name + str1 + ageStr;
}
const output = experience`that ${ person.name } is a ${ person.age }`;
console.log(output);
// that Scott is a youngster
复制代码

(感谢 Domenico Matteo对本节的澄清。) 此功能还允许您使用转义序列嵌入DSL(此处更多内容

这有用吗? 使用字符串调用函数是一种更简洁的方法。它可以更容易地进行插值,并根据插值字符串创建新的字符串。 有关此方面的示例,请查看React的样式化组件库styled-components

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

<Title>Hello World, this is my first styled component!</Title>
复制代码

隐式的return语句

你写了多少次返回值的函数?

const addOne = (num) => {
  return num + 1
}
console.log(addOne(1))
// 2
复制代码

答:几乎每一次的编写都是这样操作,浪费了那么多时间.

将那些大括号替换为普通的小括号,并利用隐式返回:

const addOne = (num) => (
    num + 1
)
console.log(addOne(1)) 
// 2
复制代码

接下来, 我们进一步进行操作!

const addOne = num => num + 1
console.log(addOne(1)) 
// 2
复制代码

这有用吗?

更少的代码, 更好的可读性。 甚至可以鼓励您编写更小的函数,这样您就可以避免写多行代码了,代码给人的感觉也更干净清晰和整洁了。

对默认参数进行参数解构

const person = { name: 'Scott', attractiveness: 8.5 }
const consoleLogAttributes = ({ name, attractiveness }) => {
  console.log(name, attractiveness)
}
consoleLogAttributes(person)
// 'Scott', 8.5
复制代码

是不是太有用了,但是如果我们在没有参数的情况下调用上面的函数呢?

consoleLogAttributes()
// TypeError: Cannot match against 'undefined' or 'null'.
复制代码

让我们通过设置空对象的默认参数来保存此错误:

const consoleLogAttributes = ({ name, attractiveness } = {}) => {
  console.log(name, attractiveness)
}
复制代码

现在我们再来执行一下上面的程序:

consoleLogAttributes()
// undefined undefined
复制代码

如果不使用任何参数调用consoleLogAttributes,就不会再出现错误!我们何不更进一步进行操作呢,看下面这段代码:

const consoleLogAttributes = ({ 
  name = 'Default name', 
  attractiveness = '10' 
} = {}) => {
  console.log(name, attractiveness)
}
复制代码

到处都是默认值, 这意味着以下两种方法将产生相同的结果:

consoleLogAttributes()
// 'Default name', 10
consoleLogAttributes({})
// 'Default name', 10
复制代码

这有用吗?

您的函数将更具弹性,因为它们可以适应未被定义的参数传递。

缺点是上面函数声明中的视觉混乱,但大多数情况下,这是一个小代价用来支持更优雅的回退。

属性值简写(包括函数)

让我们回到上面那个person对象。这是一个常见模式: 您有一个变量(例如,name),并且您希望将名为namekey设置为name的值。

const name = "Scott"
const person = { name: name }
// { name: "Scott" }
复制代码

感谢ES6,您可以这样做:

const name = "Scott"
const person = { name }
// { name: "Scott" } 
复制代码

当使用多个值执行操作时⬇:

const name = "Scott"
const programmingAbility = "poor"
const person = { name, programmingAbility }
// { name: "Scott", programmingAbility: "poor" }
复制代码

甚至可以用函数操作⬇:

const name = "Scott"
const sayName = function() { console.log(this.name) }
const person = { name, sayName }
// { name: “Scott”, sayName: function() { console.log(this.name) }  }
复制代码

并且在对象声明中执行函数声明:

const name = "Scott"
const person = { name, sayName() { console.log(this.name) } }
// { name: “Scott”, sayName: function() { console.log(this.name) }  }
复制代码

这有用吗?

编写更少的代码,编写更清晰的代码。

看到这里,ES6 的解读就结束了。感谢您抽时间阅读这篇文章,希望对您有所帮助 ~

关注下面的标签,发现更多相似文章
评论