深圳幻海软件技术有限公司 欢迎您!

您可能未使用过的JavaScript功能

2023-02-27

JavaScript具有许多经常使用的功能。但是,有些功能可能我们大多数人都没有使用过。在本文中,我们将介绍其中一些功能以及可能的用例。标记模板文字带有标签的模板文字是处理模板字符串的函数。它们经常在React库中使用,例如样式组件库。此功能实际上很有用。它使我们可以轻松地解析模板字符串文字。它使我

JavaScript具有许多经常使用的功能。 但是,有些功能可能我们大多数人都没有使用过。

在本文中,我们将介绍其中一些功能以及可能的用例。

标记模板文字

带有标签的模板文字是处理模板字符串的函数。

它们经常在React库中使用,例如样式组件库。 此功能实际上很有用。

它使我们可以轻松地解析模板字符串文字。 它使我们可以使用函数来解析模板文字。

例如,我们可以按以下方式使用它:

const tag = (strings, ...vals) => { console.log(strings); console.log(vals);}const name = 'foo';tag `Hi ${name}`; 
  • 1.

在上面的代码中,我们有he标记函数和vals数组,该函数具有包含字符串的各个部分的字符串函数,该函数具有插值到字符串中的值。

在上面的示例中,我们有一个数组,其中'Hi'和''作为string的值。

在vals数组中,我们有'foo'。

我们可以使用它来返回要返回的对象。 例如,我们可以如下重写标记函数:

const tag = (strings, ...vals) => { return `${strings[0]}! ${vals[0]}`} 
  • 1.

在上面的代码中,我们从string和vals中获取字符串的各个部分,并放入!。 在两个表达式之间。

然后我们得到嗨! 返回值的foo。

逗号运算符

逗号运算符始终返回由逗号运算符分隔的项目列表中的最后一项。

例如,我们可以按以下方式使用它:

const foo = (1, 2, 3); 
  • 1.

然后我们得到3。

它可以使用任何表达式,并且始终返回最后一个求值的表达式。

With

with运算符绝对是我们不应该使用的运算符。 在严格模式下禁止使用。

该运算符在语言中增加了一些性能和安全性问题。 它用于扩展语句的作用域链。

它的用法如下:

with(expression) statement 
  • 1.

要么:

with(expression) { statement statement ...} 
  • 1.

在上面的代码中,我们围绕expression创建了一个新范围。

块中的所有语句都将表达式作为父范围。

例如,我们可以按以下方式使用它:

const obj = { a: 1, b: 2, c: 3}  
with(obj) {  
console.log(a, b, c);  

  • 1.
  • 2.
  • 3.
  • 4.

在上面的代码中,with块内的表达式都将相对于obj对象进行范围限定。

因此,a,b和c实际上是obj.a,obj.b和obj.c。

与with一样,块范围变量在with块之外不可用。

例如,如果我们有:

const obj = { a: 1, b: 2, c: 3}  
with(obj) {  
console.log(a, b, c);  
let x = 1 
 
console.log(x); 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

如果尝试在x上调用console.log,则在with块之外引用x时,会出现错误。

In

in运算符对于检查属性是对象的一部分还是原型链中的任何原型非常有用。

如果该属性在对象中或原型链中的任何属性中,则返回true,否则返回false。

例如,如果我们具有以下类结构和对象:

class Foo { constructor() { this.a = 1; }}  
class Bar extends Foo {  
constructor() {  
super();  
this.b = 2 
this.c = 3; }  
 
const bar = new Bar(); 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

然后,如果我们记录以下表达式的返回值:

console.log('a' in bar);  
console.log('b' in bar);  
console.log('c' in bar); 
  • 1.
  • 2.
  • 3.

我们认为所有日志都是正确的。

这是因为bar以Foo实例作为其原型,并且in运算符检查对象本身及其原型的属性。

因此,in bar也是如此。 如果我们只想检查该属性是否为非继承属性,则必须使用obj.hasOwnProperty方法,其中obj是没有null原型的任何JavaScript对象。

结论

标记的模板文字可用于将模板字符串转换为所需的值。

逗号运算符始终返回逗号分隔列表中的最后一项。

in运算符检查属性是否在对象或其原型中。

是您的JavaScript代码中不应该包含的内容。