Hat es6 Argumente?-Front-End-Fragen und Antworten-php.cn

es6 hat Argumente, aber die Pfeilfunktion erkennt keine Argumente, daher werden Reste (verbleibende Parameter) verwendet, um Argumente zu ersetzen; die verbleibenden Parameter werden direkt im Array fixiert, und Argumente sind arrayartig (im Wesentlichen ein Objekt) und müssen verwendet werden umgestellt werden. Die verbleibende Parametersyntax ermöglicht die Darstellung einer unbegrenzten Anzahl von Parametern als Array, und die Parameterdefinitionsmethode ist variabel. Diese Methode ist sehr praktisch, um eine Funktion zu deklarieren, ohne die Parameter zu kennen.

Hat es6 Argumente?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

1. Verwendung von Argumenten

1 Beachten Sie, dass die Pfeilfunktion in es6 keine Argumente erkennt. Verwenden Sie also Rest anstelle von Argumenten.

Nach ES6 werden Argumente durch verbleibende Parameter ersetzt. Die verbleibenden Parameter werden direkt im Array fixiert, während Argumente arrayartig sind (im Wesentlichen ein Objekt) und konvertiert werden müssen.

2. Allgemeine Operationen für Argumente

(1). Parameter basierend auf dem Index abrufen

(3). Argumente werden lokalisiert

Codefreigabe:

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

Nach dem Login kopieren

3. Konvertieren Sie Argumente in Arrays

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

Nach dem Login kopieren

4. Es gibt keine Argumente in Pfeilfunktionen

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

Nach dem Login kopieren

2. ES6 verbleibende Parameter und Spread-Operatoren
1. Restparameter

Die Restparametersyntax ermöglicht es uns, eine unbegrenzte Anzahl von Parametern als Array auszudrücken, und die Definitionsmethode für variable Parameter ist sehr praktisch zu deklarieren, wenn die Parameter nicht bekannt sind . eine Funktion von.

Code-Sharing
{   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] }
Nach dem Login kopieren

2. Der Spread-Operator

„bricht“ den festen Array-Inhalt in die entsprechenden Parameter auf.

Code-Sharing:
{   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); }
Nach dem Login kopieren

Zusammenfassung:

1. Spread-Operator und Rest-Parameter sind Operatoren mit ähnlichem Aussehen, aber entgegengesetzter Bedeutung. Einfach ausgedrückt dient Rest-Parameter dazu, unsichere Parameter zu „konvergieren“. " zum Array, und der Spread-Operator „bricht“ den festen Array-Inhalt in die entsprechenden Parameter auf.

2. Rest-Parameter wird verwendet, um das Szenario zu lösen, in dem Funktionsparameter unsicher sind, und Spread-Operator wird verwendet, um das Problem der Anwendung eines bekannten Parametersatzes auf eine Funktion mit festen Parametern zu lösen

3. Zusammenfassung der Verwendung von apply/call/bind

1. Apply und call dienen beide dazu, den Zeiger davon in der aufgerufenen Funktion zu ändern und die Funktion sofort auszuführen
2. Bind dient auch dazu, den Zeiger von zu ändern dies in der Funktion, aber es muss eine Funktion zurückgegeben werden, um sie auszuführen
3. Der erste Parameter von apply und call wird übergeben und an das Objekt gebunden, das zum Ändern dieses Zeigers verwendet wird, aber

(1).
apply
ist der Parameter, der an die Funktion übergeben werden muss, wird in einem
Array
platziert und an der Position des zweiten Parameters
übergeben ). und die erforderlichen Parameter werden der Reihe nach von der 2., 3., 4.... Position übergeben, bind gibt eine Funktion zurück, die erneut aufgerufen werden muss.
Code-Sharing:
// 案例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"); }
Nach dem Login kopieren
Vier. Apply/call/bind wird mit js implementiert
1. apply (1). Dies zeigt auf die xxFn-Funktion (2). Wenn es notwendig ist, null oder undefiniert einzugeben und zu beenden, zeigt dies auf das Fenster

(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);
Nach dem Login kopieren
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);
Nach dem Login kopieren
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));
Nach dem Login kopieren
【相关推荐：javascript视频教程、编程视频】
Das obige ist der detaillierte Inhalt vonHat es6 Argumente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!