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 중국어 웹사이트의 기타 관련 기사를 참조하세요!