지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > 프런트엔드 Q&A > 본문

es6에 인수가 있습니까?

青灯夜游
풀어 주다： 2022-10-24 19:08:29
원래의
1142명이 탐색했습니다.

es6에는 인수가 있지만 화살표 함수는 인수를 인식하지 못하므로 나머지(나머지 매개변수)를 사용하여 인수를 대체합니다. 나머지 매개변수는 배열에 직접 고정되며 인수는 배열과 유사하며(본질적으로 객체) 필요합니다. 변환됩니다. 나머지 매개변수 구문은 무한한 수의 매개변수를 배열로 표현하는 것을 허용하며, 매개변수 정의 방법은 가변적이다. 이 방법은 매개변수를 모르고 함수를 선언할 때 매우 편리하다.

es6에 인수가 있습니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

1. 인수 사용법

1. es6의 화살표 함수는 인수를 인식하지 못합니다. 따라서 인수 대신 휴식을 사용하십시오.

ES6 이후에는 인수가 나머지 매개변수로 대체됩니다. 나머지 매개변수는 배열에 직접 고정되는 반면 인수는 배열과 유사하며(본질적으로 객체) 변환이 필요합니다.

2. 인수에 대한 일반적인 연산

(1). 매개변수 길이를 가져옵니다

(2). 현재 위치에서 매개변수를 가져옵니다. 인수가 있습니다

코드 공유: 

{
  console.log("----------------1. arguments常用操作-------------------");
  function Test1() {
    // arguments长什么样？---本质是一个对象
    // {
    //     '0': 1,
    //     '1': 2,
    //     '2': 3,
    //     '3': 4,
    //     '4': 5,
    //     '5': 6,
    //     '6': 7,
    //     '7': 8
    //   }
    console.log(arguments);

    // 常见的对arguments的操作是三个
    // 1.获取参数的长度
    console.log(arguments.length);

    // 2.根据索引值获取某一个参数
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);

    // 3.callee获取当前arguments所在的函数
    console.log(arguments.callee);
  }

  //调用
  Test1(1, 2, 3, 4, 5, 6, 7, 8);
}
로그인 후 복사

3. 인수를 배열로 변환

{
  console.log("----------------2. 将arguments转换成数组-------------------");
  function Test2() {
    // 方案1-自己遍历
    {
      let newArray = [];
      for (let i = 0; i < arguments.length; i++) {
        newArray.push(arguments[i]);
      }
      console.log(newArray);
    }
    // 方案2-Array.prototype.slice将arguments转成array
    {
      let newArray2 = Array.prototype.slice.call(arguments);
      console.log(newArray2);
    }
    // 方案3-ES6语法 Array.From
    {
      console.log(Array.from(arguments));
    }
    // 方案4-ES6语法 剩余参数
    {
      console.log([...arguments]);
    }
  }

  //调用
  Test2(1, 2, 3, 4, 5, 6, 7, 8);
}
로그인 후 복사

4. ES6의 나머지 매개변수는 없습니다. 스프레드 연산자

1. Rest 매개변수

나머지 매개변수 구문을 사용하면 무한한 수의 매개변수를 배열로 표현할 수 있으며, 가변 매개변수 정의 방법은 매개변수를 알 수 없을 때 선언하는 것이 매우 편리합니다. .의 기능

코드 공유

{
  console.log("----------------3. 箭头函数中没有arguments-------------------");
  let Test3 = () => {
    console.log(arguments);
  };
  Test3(1, 2, 3, 4);
}
로그인 후 복사

2. 확산 연산자

고정 배열 콘텐츠를 해당 매개변수로 "나누습니다".

코드 공유: 

{
  console.log("-----------------1. 剩余参数---------------------");
  function sum1(...nums) {
    console.log(nums);
    console.log(
      nums.reduce((preValue, currentValue) => preValue + currentValue, 0)
    ); //求和
  }
  //调用
  sum1(1, 2); //[1,2]
  sum1(1, 2, 3); //[1,2,3]
  sum1(1, 2, 3, 4); //[1,2,3,4]

  function sum2(num1, num2, ...nums) {
    console.log(nums);
    console.log(
      nums.reduce(
        (preValue, currentValue) => preValue + currentValue,
        num1 + num2
      )
    ); //求和
  }
  //调用
  sum2(1, 2); //[]
  sum2(1, 2, 3); //[3]
  sum2(1, 2, 3, 4); //[3,4]
}
로그인 후 복사

요약:

1. Spread Operator와 Rest Parameter는 모양은 비슷하지만 의미는 반대인 연산자입니다. 간단히 말해서 Rest Parameter는 불확실한 매개변수를 "수렴"하는 것입니다. "를 배열로 변환하고 Spread Operator는 고정된 배열 내용을 해당 매개변수로 "분할"합니다.

2. Rest Parameter는 함수의 매개변수가 불확실한 시나리오를 해결하는 데 사용되며, Spread Operator는 알려진 매개변수 집합을 고정된 매개변수가 있는 함수에 적용하는 문제를 해결하는 데 사용됩니다

3. Apply/Call/bind 사용법 요약

1. Apply와 call은 모두 호출된 함수에서 this의 포인터를 변경하고, 함수를 즉시 실행하는 것입니다.

2. Bind는 또한 this의 포인터를 변경하는 것입니다.

3. Apply 및 call의 첫 번째 매개변수가 전달되어 이 포인터를 변경하는 데 사용되는 객체에 바인딩되지만

(1)

apply

은 함수에 전달해야 하는 매개변수가

array

에 배치되고 두 번째 매개변수

의 위치에 전달됩니다. ) 2번째, 3번째, 4번째... 위치부터 순차적으로 호출이 전달됩니다. 필수 매개변수를 입력하세요

4. bind 전달되는 매개변수의 형식은 call

과 같습니다. , 필수 매개변수는 2번째, 3번째, 4번째... 위치에서 전달됩니다.

bind는 다시 호출해야 하는 함수를 반환합니다

.

코드 공유: 

{
  console.log("-----------------2. 展开运算符---------------------");
  function sum1(num1, num2) {
    console.log(num1 + num2);
  }
  // 调用
  let arry1 = [10, 20];
  sum1(...arry1);

  function sum2(num1, num2, num3) {
    console.log(num1 + num2 + num3);
  }
  //调用
  let arry2 = [10, 20, 30];
  sum2(...arry2);
}
로그인 후 복사
4. Apply/call/bind는 js로 구현됩니다. 1. apply

(1), ypfapply에서 this는 xxFn 함수

를 가리킵니다(2). null 또는 undefed를 입력하고 종료해야 하는 경우 this는 window

를 가리킵니다.

    (3). 使用 delete 可以删除对象的某个属性

    (4). 通过Function.prototype原型添加

    (5). || 用法

      argArray = argArray?argArray:[]  等价于

      argArray = argArray || []

代码分享：

/**
 * 利用js手写call函数
 * @param {Object|null|undefined} thisArg 待绑定的对象
 * @param  {Array} argArray 调用函数的数组参数
 */
Function.prototype.ypfapply = function (thisArg, argArray) {
  // 1. this指向调用函数
  let fn = this;

  // 2. 获取传递参数
  thisArg = thisArg != null && thisArg != undefined ? Object(thisArg) : window;

  //3. 赋值函数并调用
  thisArg.fn1 = fn;
  argArray = argArray || [];
  let result = thisArg.fn1(...argArray);

  //4. 删除thisArg绑定的属性
  delete thisArg.fn1;

  //5.返回结果
  return result;
};

// 测试
function test1() {
  console.log(this);
}
function sum(num1, num2) {
  console.log(this, num1, num2);
  return num1 + num2;
}

// 1. 利用系统自带的apply测试
console.log("----------1.利用系统自带的call测试---------------");
test1.apply(null);
let result1 = sum.apply("ypf1", [10, 20]);
console.log(result1);

// 2. 利用自己写的测试
console.log("----------2.利用自己写的测试---------------");
test1.ypfapply(null);
let result2 = sum.ypfapply("ypf1", [10, 20]);
console.log(result2);
로그인 후 복사

2. call

(1). xxFn.ypfcall()， 在ypfcall中，this指向xxFn函数

(2). 需要实现出入 null 或 undefined的时候，this指向window

(3). 使用 delete 可以删除对象的某个属性

(4). 通过Function.prototype原型添加

代码分享：

/**
 * 利用js手写call函数
 * @param {Object|null|undefined} thisArg 待绑定的对象
 * @param  {...any} args 调用函数的参数
 */
Function.prototype.ypfcall = function (thisArg, ...args) {
  // 1. 指向待调用的函数
  let fn = this;

  //2. 获取绑定对象
  thisArg = thisArg != null && thisArg != undefined ? Object(thisArg) : window;

  //3.调用函数
  thisArg.fn1 = fn;
  let result = thisArg.fn1(...args);

  //4. 删除多余的属性
  delete thisArg.fn1;

  //5. 最终返回
  return result;
};

// 测试
function test1() {
  console.log(this);
}
function sum(num1, num2) {
  console.log(this, num1, num2);
  return num1 + num2;
}

// 1. 利用系统自带的call测试
console.log("----------1.利用系统自带的call测试---------------");
test1.call(undefined);
let result1 = sum.call("ypf1", 10, 20);
console.log(result1);

// 2. 利用自己写的测试
console.log("----------2.利用自己写的测试---------------");
test1.ypfcall(undefined);
let result2 = sum.ypfcall("ypf1", 10, 20);
console.log(result2);
로그인 후 복사

3. bind

(1). bind和call相同，接收到参数是依次传递，另外bind返回的是函数！！

(2). xxFn.ypfbind()， 在ypfbind中，this指向xxFn函数

(3). 需要实现出入 null 或 undefined的时候，this指向window

(4). 使用 delete 可以删除对象的某个属性

(5). 由于bind返回的是函数，所以需要声明1个函数, 并返回这个函数

函数内部核心点：由于bind可以一次性传递参数，也可以多次传递参数，所以需要对两个参数进行一下合并

代码分享：

Function.prototype.ypfbind = function (thisArg, ...argArray) {
  // 1. this指向调用的函数
  let fn = this;

  // 2. 处理绑定参数
  thisArg = thisArg != null && thisArg != undefined ? Object(thisArg) : window;

  // 3. 声明一个函数
  function DyFun(...argArray2) {
    // 绑定函数
    thisArg.fn1 = fn;
    // 合并参数
    let finalArgArray = [...argArray, ...argArray2];
    // 调用函数
    let result = thisArg.fn1(...finalArgArray);
    // 删除用完的属性
    delete thisArg.fn1;
    // 返回结果
    return result;
  }

  //4. 返回一个函数
  return DyFun;
};

// 测试
function test1() {
  console.log(this);
}
function sum(num1, num2) {
  console.log(this, num1, num2);
  return num1 + num2;
}
// 1. 利用系统自带的bind测试
console.log("----------1. 利用系统自带的bind测试---------------");
test1.bind(undefined)();
let result1 = sum.bind("ypf1", 10, 20);
console.log(result1());
let result2 = sum.bind("ypf2", 10);
console.log(result2(30));

// 2. 利用自己写的测试
console.log("----------2.利用自己写的测试---------------");
test1.bind(undefined)();
let result3 = sum.bind("ypf1", 10, 20);
console.log(result3());
let result4 = sum.bind("ypf2", 10);
console.log(result4(30));
로그인 후 복사

【相关推荐：javascript视频教程、编程视频】

위 내용은 es6에 인수가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript es6
원천：php.cn
이전 기사：es6 구조 분해는 문자열을 지원합니까? 다음 기사：리액트는 스파인가요?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿