Es6 a-t-il des arguments ?

es6 a des arguments, mais la fonction flèche ne reconnaît pas les arguments, donc le reste (paramètres restants) est utilisé pour remplacer les arguments ; les paramètres restants sont directement fixés dans le tableau, et les arguments ressemblent à un tableau (essentiellement un objet) et ont besoin à convertir. La syntaxe des paramètres restants permet d'exprimer un nombre indéfini de paramètres sous forme de tableau, et la méthode de définition des paramètres est variable. Cette méthode est très pratique pour déclarer une fonction sans connaître les paramètres.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

1. Utilisation des arguments

1 Notez que la fonction flèche dans es6 ne reconnaît pas les arguments. Utilisez donc le repos au lieu des arguments.

Après ES6, les arguments sont remplacés par les paramètres restants. Les paramètres restants sont directement fixés dans le tableau, tandis que les arguments ressemblent à un tableau (essentiellement un objet) et doivent être convertis.

2. Opérations courantes sur les arguments

(1). Obtenir la longueur du paramètre

(2). les arguments sont localisés

Partage de code :

{
  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. Convertir les arguments en tableaux

{
  console.log("----------------2. 将arguments转换成数组-------------------");
  function Test2() {
    // 方案1-自己遍历
    {
      let newArray = [];
      for (let i = 0; i 3fd334d5f7f24981d9b3b57e19c7ee72 {
    console.log(arguments);
  };
  Test3(1, 2, 3, 4);
}

2. paramètres et opérateurs de propagation

1. Rest Parameter

La syntaxe des paramètres rest nous permet d'exprimer un nombre indéfini de paramètres sous forme de tableau, et la méthode de définition des paramètres variables est très pratique à déclarer lorsque les paramètres ne sont pas connus. .une fonction de.

Partage de code

{
  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]
}

2. Spread Operator

"divise" le contenu du tableau fixe en paramètres correspondants.

Partage de code :

{
  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);
}

Résumé :

1. L'opérateur de propagation et le paramètre de repos sont des opérateurs avec une apparence similaire mais des significations opposées. " au tableau, et l'opérateur Spread " divise " le contenu fixe du tableau en paramètres correspondants.

2. Le paramètre Rest est utilisé pour résoudre le scénario dans lequel les paramètres de fonction sont incertains, et l'opérateur Spread est utilisé pour résoudre le problème de l'application d'un jeu de paramètres connu à une fonction avec des paramètres fixes

3. Résumé de l'utilisation de apply/call/bind

1. Apply et call servent tous deux à changer le pointeur de this dans la fonction appelée et à exécuter la fonction immédiatement

2. Bind consiste également à changer le pointeur de ceci dans la fonction, mais il renvoie une fonction. Il doit être appelé pour exécuter

3. Le premier paramètre de apply et call est transmis et lié à l'objet, qui est utilisé pour changer ce pointeur, mais

(1). apply

est le Les paramètres qui doivent être transmis à la fonction sont placés dans un array

et transmis à la position du deuxième paramètre (2). ). L'appel est passé dans l'ordre à partir de la 2ème, 3ème, 4ème... position. Entrez les paramètres requis 4. bind

La forme des paramètres suivants passés est la même que celle de call

. , et les paramètres requis sont transmis à partir de la 2ème, 3ème, 4ème... position, bind renvoie une fonction qui doit être appelée à nouveau. Partage de code :

// 案例1--隐式绑定
{
  console.log("----------------案例1--------------------");
  let name = "ypf1";
  let age = 18;
  let obj = {
    name: "ypf2",
    myAge: this.age,
    getMsg: function () {
      console.log(this.name, this.age);
    },
  };
  // 调用
  console.log(obj.myAge); //undefined （隐式绑定，this指向obj）
  obj.getMsg(); //ypf2,undefined  （隐式绑定，this指向obj）
}

//案例2--只绑定，不传参
/* 
    注意1个细节，bind后面多了个(),bind返回的是一个新函数，必须调用才能执行
*/
{
  console.log("----------------案例2--------------------");
  let name = "ypf1";
  let age = 18;
  let obj = {
    name: "ypf2",
    myAge: this.age,
    getMsg: function () {
      console.log(this.name, this.age);
    },
  };
  let obj2 = { name: "ypf3", age: 35 };
  // 调用
  obj.getMsg.apply(obj2); //ypf 35 (apply显式绑定优先级高于隐式绑定，this指向obj2)
  obj.getMsg.call(obj2); //ypf 35 (call显式绑定优先级高于隐式绑定，this指向obj2)
  obj.getMsg.bind(obj2)(); //ypf 35 (bind显式绑定优先级高于隐式绑定，this指向obj2)
}

// 案例3--传递参数
/* 
    apply传递数组
    call和bind都是依次写参数
    特别注意:bind可以多次传递参数
*/
{
  console.log("----------------案例3--------------------");
  let name = "ypf1";
  let age = 18;
  let obj = {
    name: "ypf2",
    myAge: this.age,
    getMsg: function (msg1, msg2) {
      console.log(this.name, this.age, msg1, msg2);
    },
  };
  let obj2 = { name: "ypf3", age: 35 };
  //调用
  obj.getMsg.apply(obj2, ["消息1", "消息2"]);
  obj.getMsg.call(obj2, "消息1", "消息2");
  //bind用法1
  obj.getMsg.bind(obj2, "消息1", "消息2")();
  //bind用法2--多次传参
  let fn1 = obj.getMsg.bind(obj2, "消息1");
  fn1("消息2");
}

Quatre Apply/call/bind est implémenté avec js

1, dans apply

(1). this pointe vers la fonction xxFn

(2) Lorsqu'il est nécessaire d'entrer et de sortir de null ou undefined, cela pointe vers la fenêtre.

    (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视频教程、编程视频】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!