ホームページ > 記事 > ウェブフロントエンド > es6には引数がありますか?
es6 には引数がありますが、アロー関数は引数を認識しないため、残り (残りのパラメータ) が引数の置き換えに使用されます。残りのパラメータは配列に直接固定され、引数は配列のようなものです (本質的にはobject) を変換する必要があります。残りのパラメータ構文は、パラメータを無限に配列として表現でき、パラメータの定義方法は変数であり、パラメータを知らなくても関数を宣言する場合に非常に便利です。
このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。
1. 説明
アロー関数es6 引数は認識されません。したがって、引数の代わりに残りを使用してください。
ES6 以降、引数は残りのパラメータで置き換えられ、残りのパラメータは配列に直接固定されますが、引数は配列のようなもの (本質的にはオブジェクト) であるため、変換する必要があります。
2. 引数に対する一般的な操作
(1). パラメータの長さの取得
(2). インデックスに従ってパラメータを取得します
(3). 現在の引数が配置されている関数を取得します
## コード共有:
{ 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 1165948fa328fb0adf1a22d8a0b4b77c { console.log(arguments); }; Test3(1, 2, 3, 4); }
1. 残りパラメータ
残りのパラメータ構文では、無限のパラメータを配列として表現することができ、無限のパラメータ定義メソッドを使用できます。このメソッドは、何も知らずに関数を宣言するのに非常に便利です。パラメータ。
#コード共有{
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. スプレッド演算子
"固定配列の内容を対応するパラメータに分割します。コード共有:
{
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);
}
概要:
1. Spread Operator と Rest Parameter は、見た目は似ていますが意味が反対の演算子です。簡単に言うと、Rest Parameter は可変パラメータを配列に「収束」し、Spread Operator は固定配列の内容を対応するパラメータに「分割」します。
2. 関数パラメータが不確実なシナリオを解決するには、Rest Parameter を使用します。また、既知のパラメータ セットを関数に適用する問題を解決するには、Spread Operator を使用します。固定パラメータを持つ関数
3. apply/call/bind の使用法の概要2. Bind は関数内の this のポインタを変更するためにも使用されますが、返される関数は次のとおりです。実行する前に呼び出す必要があります
3. apply と call の最初のパラメータはオブジェクトに渡され、オブジェクトにバインドされます。これは、この点を変更するために使用されますが、
(1).
apply は、関数に渡す必要があるパラメータを に入れることです。 array を取得し、2 番目のパラメータの位置に渡します
(2). 呼び出しでは、2 番目、3 番目の順に必要なパラメータを渡します。 , 4th.... 位置4.
bind 後続の受信パラメータの形式は と同じですcall を実行すると、必要なパラメータが 2 番目、3 番目、4 番目... から順に渡されます。 bind は関数を返すため、再度 を呼び出す必要があります。 。 # コード共有:
// 案例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"); }4. 適用/呼び出し/バインドは js
(1). xxFn.ypfapply()、ypfapply では、これは xxFn 関数
を指します。 (2). null または未定義を入力および終了する必要がある場合、これは 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 中国語 Web サイトの他の関連記事を参照してください。