잘 알려지지 않은 JavaScript의 숨겨진 구문이나 기술을 공유하세요.

javaScript는 종종 시작하기 가장 쉽고 마스터하기 가장 어려운 언어로 간주되며, 저는 더 이상 동의할 수 없습니다. 이는 JavaScript가 난해한 구문과 오래된 기능을 갖춘 매우 오래되고 매우 유연한 언어이기 때문입니다.

저는 수년 동안 JavaScript를 사용해 왔으며 지금까지 가끔 이전에 알지 못했던 숨겨진 구문이나 트릭을 발견합니다. 이러한 속성은 잘 알려지지 않았지만 여전히 잘 알려져 있습니다.

참고: 변수 승격, 클로저, 프록시, 프로토타입 상속, 비동기 대기, 생성기 등은 여기에 포함되지 않습니다.

void 연산자

JavaScript에는 단항 void 연산자가 있습니다. void(0) 또는 void 0으로 사용되는 것을 보셨을 것입니다. void의 기능은 unundefined를 반환하는 것입니다. 오른쪽의 피연산자는 정상적으로 계산되지만 결과가 무엇이든 void는 unundefined를 반환합니다. "0"을 사용하는 것은 단지 관례일 뿐입니다. '0'을 사용할 필요는 없습니다. void 과 같은 유효한 표현식이면 여전히 정의되지 않은 상태를 반환합니다.

// void operator
void 0                  // returns undefined
void (0)                // returns undefined
void 'abc'              // returns undefined
void {}                 // returns undefined
void (1 === 1)          // returns undefined
void (1 !== 1)          // returns undefined
void anyfunction()      // returns undefined

그냥 unundefined를 반환하는 대신 undefound를 반환하는 특수 키워드를 만드는 이유가 조금 중복되는 것 같지 않나요?

재밌는 사실

사실 ES5 이전에는 대부분의 브라우저에서 원래 정의되지 않음 = "abc"에 새 값을 할당할 수 있습니다. 따라서 그 당시에는 void를 사용하는 것이 undef의 원래 값이 항상 반환되도록 하는 방법이었습니다.

생성자 괄호는 선택 사항입니다.

예, 생성자를 호출할 때 클래스 이름 뒤에 추가하는 괄호는 완전히 선택 사항입니다. (매개 변수가 생성자에 전달될 필요가 없는 한)

아래 두 코딩 스타일 모두 유효한 것으로 간주됩니다. JS 구문과 결과는 동일합니다!

// Constructor with brackets
const date = new Date()
const month = new Date().getMonth()
const myInstance = new MyClass()

// Constructor without brackets
const date = new Date
const month = (new Date).getMonth()
const myInstance = new MyClass

IIFE(즉시 실행 함수)의 괄호는 생략할 수 있습니다.

IIFE(즉시 호출 함수 표현식) 구문은 저에게 적합합니다. 항상 좀 이상해요. 괄호가 많죠?

실제로 이러한 추가 괄호는 구문 분석할 코드가 함수가 아니라 함수 표현식임을 JavaScript 파서에 알리기 위한 것입니다. 이를 알면 추가 괄호를 생략하고 IIFE에서 효율적으로 작업할 수 있는 방법이 많다는 것을 상상할 수 있습니다.

// IIFE

(function () {
  console.log('正常形式的 IIFE 调用')
})()

// 清爽的 IIEF 
void function() {
  console.log('酷酷的 IIFE 调用')
}()

void 操作符告诉解析器代码是函数表达式。因此，我们可以跳过函数定义周围的括号。你猜怎么着? 我们可以使用任何一元运算符(void， +， !， -等等), 이것은 여전히 ​​작동합니다!

이것이 원래 작성 방식보다 더 간단하고 B-제곱에 가깝습니까?

하지만 예리한 관찰자라면 단항 연산자가 IIFE가 반환한 결과에 영향을 미치지 않을까?라고 생각할 수도 있습니다.

결과에 영향을 미칩니다. 그러나 좋은 소식은 결과를 반환하고 이를 일부 변수에 저장하면 추가 괄호가 필요하지 않다는 것입니다.

withdeclaration

JavaScript에는 with 문 블록이 있고 with는 실제로 JS의 키워드입니다. with 블록의 구문은 다음과 같습니다.

with 문은 특정 개체에 이미 존재하는 속성을 참조하는 데 편리하게 사용할 수 있지만 개체에 속성을 추가하는 데는 사용할 수 없습니다. 개체에 대한 새 속성을 만들려면 해당 개체를 명시적으로 참조해야 합니다.

재밌는 사실

블록이 있으면 멋있어 보이잖아요. 물체를 파괴하는 것보다 훨씬 낫죠. 글쎄요, 그렇지 않아요.

with 문은 더 이상 사용되지 않으며 엄격 모드에서는 완전히 금지되므로 일반적으로 사용하지 않는 것이 좋습니다. with 블록을 사용하면 언어의 일부 성능 및 보안 문제가 증가하는 것으로 나타났습니다.

Function constructor

Function 문은 새로운 함수를 정의하는 유일한 방법은 아닙니다. function() 생성자와 new 연산자를 사용하여 함수를 동적으로 정의할 수 있습니다.

흥미로운 사실 ​​

함수 생성자는 JavaScript의 모든 생성자의 어머니입니다. Object의 생성자도 Function 생성자입니다. 그리고 Function 자체의 생성자도 Function 자체입니다.

그러므로 object.constructor.constructor...를 충분히 호출하면 결국 JavaScript의 모든 객체에 대한 Function 생성자가 반환됩니다.

函数属性

我们都知道函数是JavaScript中的第一类对象。因此，没有人阻止我们向函数添加自定义属性。在 JS 中这样做是有效的，然而，它很少被使用。

那么我们什么时候要这样做?

这里有一些很好的用例。例如,

可配置函数

假设我们有一个函数叫做 greet。我们希望函数根据不同的地区打印不同的问候消息，这个区域设置也应该是可配置的。我们可以在某个地方维护全局 locale 变量，也可以使用如下所示的函数属性实现该函数

function greet () {
  if (greet.locale === 'ch') {
    console.log('中国，你好')
  } else if (greet.locale === 'jp') {
    console.log('扣你机哇!')
  } else {
    console.log('Hello World')
  }
}

greet() // Hello World
greet.locale = 'ch';
greet() // 中国，你好

具有静态变量的函数

另一个类似的例子。比方说，希望实现一个生成有序数字序列的数字生成器。通常您将使用带有静态计数器变量的 Class 或 IIFE 来跟踪最后一个值。这样我们就限制了对计数器的访问，同时也避免了使用额外的变量污染全局空间。

但是，如果我们希望能够灵活地读取甚至修改计数器，而又不污染全局空间，该怎么办呢?

我们仍然可以创建一个类，有一个计数器变量和一些额外的方法来读取它;或者我们可以偷懒，使用函数自定义的属性。

Arguments 的属性

我相信你们大多数人都知道函数中的arguments对象。它是一个类似数组的对象，可以在所有函数中使用。它具有在调用函数时传递给函数的参数列表。但它也有一些其他有趣的性质：

• arguments.callee： 当前调用的函数

• arguments.callee.caller：调用当前函数的函数

注意:虽然ES5禁止在严格模式下使用callee & caller，但在许多编译后的库中仍然很常见。所以，学习它们是值得的。

标记模板字符串

模板字符串文字是ES6中许多很酷的附加内容之一，但是，知道标记模板字符串是比较少的?

标记模板字符串允许你通过向模板字符串添加自定义标记来更好地将模板文字解析为字符串。Tag只是一个解析器函数，它获取字符串模板解释的所有字符串和值的数组，标记函数应返回最终字符串。

在下面的例子中，我们的自定义标记 —— 高亮显示，解释模板文本的值，并将解释后的值包装在结果字符串中，使用元素进行高亮显示。

Getters & Setters

在大多数情况下，JavaScript对象是简单的。假设我们有一个 user 对象，我们试图使用user访问它的age属性。使用 user.age 得到年龄属性的值，如果没有定义，我们得到未定义的值。

但是，并不一定要这么简单。JavaScript 对象具有 getter 和 setter 的概念。我们可以编写自定义Getter函数来返回我们想要的任何东西，而不是直接返回对象上的值，设置一个值也是一样。

这使我们可以在获取或设置字段时拥有强大的能力，如 virtual fields，field validations，side-effects。

逗号操作符

JavaScript有一个逗号操作符。它允许我们在一行中用逗号分隔多个表达式，并返回上一个表达式的结果。

在这里，所有表达式都将被求值，结果变量将被赋值给expressionN返回的值。

我们经常在for循环中使用了逗号操作符

for (var a = 0, b = 10; a <= 10; a++, b--)

有时在一行中编写多个语句

function getNextValue() {    return counter++, console.log(counter), counter
}

或者

const getSquare = x => (console.log (x), x * x)

+ 加号操作符号

想要快速地将字符串转换为数字吗?

只需在字符串前面加上+运算符。加号运算符也适用于负数、八进制、十六进制、指数值。更重要的是，它甚至可以转换 Date 或者 Moment.js对象的时间戳!

!! 연산자

기술적으로는 별도의 자바스크립트 연산자가 아닙니다. 두 번 사용된 JavaScript 역연산자일 뿐입니다.

표현식이 true이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

~ NON-OPERATORS

현실을 직시하자 – 아무도 비트 연산자에 관심이 없습니다. 언제 사용할 수 있나요?

여기 물결표 또는 비트 NOT 연산자에 대한 일상적인 사용 사례가 있습니다.

숫자와 함께 사용할 때 NOT 연산자가 작동하는 것으로 나타났습니다. ~N => -(N+1) 이 표현식은 N이 -1인 경우에만 "0"으로 평가됩니다.

indexOf(…) 함수 앞에 ~를 추가하여 항목이 문자열이나 배열에 존재하는지 부울 검사를 수행함으로써 이를 활용할 수 있습니다.

참고: ES6과 ES7은 각각 문자열과 배열에 새로운 .include() 메서드를 추가했습니다. 물론 이는 물결표 연산자보다 배열이나 문자열에 항목이 있는지 확인하는 더 깔끔한 방법입니다.

태그

break 및 continue 문을 lebel 문과 함께 사용하여 코드의 특정 위치로 돌아갈 수 있습니다. 루프 수를 줄이기 위해 중첩 루프에 사용됩니다.

추천 튜토리얼: "JavaScript 비디오 튜토리얼"

위 내용은 잘 알려지지 않은 JavaScript의 숨겨진 구문이나 기술을 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!