이 기사는 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
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))通俗的解释：就是在函数中最后一步调用函数
let fn = () => {
console.log(123)
return () => 5
}
console.log(fn()()) // 123 5let 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
