es6 함수에 대한 확장된 소개(코드 예)

이 기사는 es6 함수(코드 예제)에 대한 자세한 소개를 제공합니다. 필요한 참고 자료가 있으면 도움이 될 것입니다.

함수 매개변수의 기본값

함수 선언으로 형식 매개변수를 설정할 수 있다는 것은 모두 알고 있지만, 형식 매개변수로 기본값을 직접 설정할 수도 있다는 생각을 해본 적이 있나요?

code

function f(x,y=2) {
    return x+y
}
console.log(f(2)) // 4

위의 작은 예에서는 y에 대한 기본값을 2로 설정했습니다. 그러면 이 함수를 사용할 때 x의 매개변수 2만 전달하므로 4를 얻게 됩니다. 매개변수 1을 y에 전달하면 어떻게 될까요? ? 어떤 종류의 결과를 얻게 될까요? 아래 예를 계속 살펴보세요.

function f(x,y=2) {
    return x+y
}
console.log(f(2，1)) // 3

실제 매개변수를 전달하면 기본값이 대체되므로 모두가 직접 실험해야 하기 때문에 3개를 얻게 됩니다. ! !

function f(x，x,y=2) {
    return x+y
}
console.log(f(2，2, 1)) // 报错

위의 예는 동일한 매개변수를 설정할 수 없기 때문에 오류를 보고합니다.

let x = 3
function f(x,y=x) {
    return x+y
}
console.log(f(2))

var x = 3
function f(x,y=x) {
    return x+y
}
console.log(f(2))

function f(x,y=x) {
    console.log(x,y) // 2 2
    var x = 3
    console.log(x,y) // 3 2
    return x+y
}
console.log(f(2)) // 5

위의 세 가지 예는 함수 매개변수 범위의 예입니다. 첫 번째와 두 번째 예를 살펴보겠습니다. self 별도의 범위이므로 수정된 x를 외부에 선언하면 작동하지 않습니다. 그러나 세 번째 예에서는 x를 함수 내부에서 수정하기 전에 x를 볼 수 있습니다. , y는 모두 2이고 여기에는 변수 승격이 없습니다. 다음 명령문 x는 3이 되고 y는 변경되지 않으므로 5

나머지 매개변수

官方注解：ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中

code

function f(...x) {
    console.log(x) // [1,2,3]
}
f(1,2,3)

를 얻습니다. 위의 예에서는 배열을 얻습니다. , 이는 정의된 대로 중복 변수를 배열로 함께 배치합니다

function f(arr,y,...x) {
    console.log(x)
}

function f(arr,...x，y) {
}

위의 두 예제 중 첫 번째는 실행되어 원하는 결과를 얻을 수 있지만 두 번째는 오류를 보고합니다. Rest 매개변수만 마지막 매개변수 위치에서만 사용 가능

Strict 모드에서 Rest를 어떻게 사용하나요?

从Es5开始函数内已经可以定义严格模式了，但Es6规定函数参数默认值定义严格模式会报错，但也要看严格模式定义在局部还是全局

Strict 모드를 이해하지 못한다면
strict 모드

Code

 function fn(a=5) {
   'use strict';
   console.log(a)
   }
   fn()

를 살펴보시면 됩니다.

위 예에서는 Strict 모드가 선택되어 함수 내에서 설정했지만 예상대로 결과를 반환하지 않고 오류를 보고했습니다. 공식 설명을 살펴보겠습니다. 함수 내부의 엄격한 모드는 함수 본문과 함수 매개변수 모두에 적용됩니다. 그러나 함수가 실행되면 함수 매개변수가 먼저 실행되고 함수 본문이 실행됩니다. 즉, 함수 내부에 strict 모드가 정의되어 있으면 함수 본문 다음에 함수 매개변수가 먼저 실행되므로(엄격 모드가 정의되어 있지 않으면 함수 매개변수가 먼저 실행됨), 매개변수는 함수 본문에서 엄격 모드에 있습니다

그렇다면 이러한 실수를 어떻게 피할 수 있을까요?
코드

   'use strict';
   function fn2(a=5) {
       console.log(a)
   }
   fn2()
   
    function fn() {
   'use strict';
       return function (a=5) {
           console.log(5)
       }
   }
   fn()() // 5

엄격 모드를 전역적으로 정의하거나 함수 내에서 정의하고 매개변수가 있는 함수를 반환할 수 있으므로 실행 함수 매개변수를 우회할 수 있으며 함수 본문

name 속성을 실행할 때 오류가 보고되지 않습니다.

 官方注解： 函数的name属性，返回该函数的函数名  使用方式   函数名.name

Code

function a() {
}
console.log(a.name) // a

function b() {
}
console.log(b.name) // a

위의 두 예에서는 name 속성을 사용하여 함수 이름을 가져옵니다. 물론 Es5 환경에서도 테스트해 볼 수 있습니다.

화살표 함수

  let fn = a => a
  console.log(fn(10)) // 10
  
  // 对比
  
  let fn1 = function (a) {
      return a
  }
  console.log(fn1(10)) //10
  
  let fn2 =  (a,b) => a+b
  console.log(fn2(1,2))
  
  // 对比
  
  let fn21 = function (a,b) {
      return a+b
  }
  console.log(fn2(1,2))

위의 화살표 함수와 우리가 Es5에서 흔히 쓰는 함수의 차이점을 보면, 영문자 쓰기가 대폭 줄어들고 좀 더 간결해진다는 점입니다. 사실 화살표 함수와 일반 함수는 비슷한 기능을 가지고 있습니다. , 간단하고 이해하기 쉬우며 서로 중첩될 수 있습니다. 이는 여러분의 코드를 깔끔하게 만드는 데 매우 도움이 됩니다. 화살표 함수에 대해 주의해야 할 몇 가지 사항이 있습니다. 기억하세요. 함수 본문의 this 개체는 사용될 때가 아니라 정의된 개체입니다. 개체(이것은 고정 소수점을 가리킵니다)

는 생성자로 사용할 수 없습니다. 즉, 새 명령을 사용할 수 없습니다. 그렇지 않으면 오류가 발생합니다

1. 인수 개체를 사용할 수 없으며 개체가 함수 본문에 존재하지 않습니다. 사용하고 싶다면 대신 나머지 매개변수를 사용하면 됩니다
2. yield 명령을 사용할 수 없으므로 화살표 함수를 제너레이터 함수로 사용할 수 없습니다. (이 함수는 마지막에 언급하겠습니다)
3. Tail call

4.  通俗的解释：就是在函数中最后一步调用函数

Code

  let fn = () => {
  console.log(123)
  return () => 5
  }
  console.log(fn()()) // 123     5

Tail recursion

let fn = (a,b) => {
  if(a===b) return b
  console.log(1)
  return fn(a+1, b)
  }
  console.log(fn(1,5))

재귀 효과를 얻으려면 함수 내부 마지막 단계에서 재귀 호출 자체를 하세요

함수 매개 변수의 후행 쉼표

Es7中允许函数形参最后一个带有逗号，以前都是不允许带有逗号的
  let fn = (a,) => {
      console.log(a)
  }
  fn(1)

위 예에서는 뒤에 쉼표를 추가했습니다. 실행 결과 정상적으로 작동하는 것을 확인했습니다. 실행은 되지만 es6 환경에서는 오류가 발생하지 않습니다. 함수는 여기서 끝납니다. 우리가 배워야 할 가장 중요한 것은 화살표 함수와 나머지 매개변수입니다. 값 전달과 엄격 모드에서의 함수 작동

이 기사는 더 많은 흥미로운 내용을 담고 있습니다. PHP 중국어 웹사이트의

JavaScript Tutorial Video

칼럼을 주목해주세요!

위 내용은 es6 함수에 대한 확장된 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!