您可能未使用過的JavaScript功能
JavaScript具有許多經常使用的功能。 但是,有些功能可能我們大多數人都沒有使用過。
在本文中,我們將介紹其中一些功能以及可能的用例。
標記模板文字
帶有標簽的模板文字是處理模板字符串的函數。
它們經常在React庫中使用,例如樣式組件庫。 此功能實際上很有用。
它使我們可以輕松地解析模板字符串文字。 它使我們可以使用函數來解析模板文字。
例如,我們可以按以下方式使用它:
- const tag = (strings, ...vals) => { console.log(strings); console.log(vals);}const name = 'foo';tag `Hi ${name}`;
在上面的代碼中,我們有he標記函數和vals數組,該函數具有包含字符串的各個部分的字符串函數,該函數具有插值到字符串中的值。
在上面的示例中,我們有一個數組,其中'Hi'和''作為string的值。
在vals數組中,我們有'foo'。
我們可以使用它來返回要返回的對象。 例如,我們可以如下重寫標記函數:
- const tag = (strings, ...vals) => { return `${strings[0]}! ${vals[0]}`}
在上面的代碼中,我們從string和vals中獲取字符串的各個部分,并放入!。 在兩個表達式之間。
然后我們得到嗨! 返回值的foo。
逗號運算符
逗號運算符始終返回由逗號運算符分隔的項目列表中的最后一項。
例如,我們可以按以下方式使用它:
- const foo = (1, 2, 3);
然后我們得到3。
它可以使用任何表達式,并且始終返回最后一個求值的表達式。
With
with運算符絕對是我們不應該使用的運算符。 在嚴格模式下禁止使用。
該運算符在語言中增加了一些性能和安全性問題。 它用于擴展語句的作用域鏈。
它的用法如下:
- with(expression) statement
要么:
- with(expression) { statement statement ...}
在上面的代碼中,我們圍繞expression創建了一個新范圍。
塊中的所有語句都將表達式作為父范圍。
例如,我們可以按以下方式使用它:
- const obj = { a: 1, b: 2, c: 3}
- with(obj) {
- console.log(a, b, c);
- }
在上面的代碼中,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);
如果嘗試在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();
然后,如果我們記錄以下表達式的返回值:
- console.log('a' in bar);
- console.log('b' in bar);
- console.log('c' in bar);
我們認為所有日志都是正確的。
這是因為bar以Foo實例作為其原型,并且in運算符檢查對象本身及其原型的屬性。
因此,in bar也是如此。 如果我們只想檢查該屬性是否為非繼承屬性,則必須使用obj.hasOwnProperty方法,其中obj是沒有null原型的任何JavaScript對象。
結論
標記的模板文字可用于將模板字符串轉換為所需的值。
逗號運算符始終返回逗號分隔列表中的最后一項。
in運算符檢查屬性是否在對象或其原型中。
是您的JavaScript代碼中不應該包含的內容。