コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

es6には引数がありますか?

青灯夜游
リリース： 2022-10-24 19:08:29
オリジナル
1125 人が閲覧しました

es6 には引数がありますが、アロー関数は引数を認識しないため、残り (残りのパラメータ) が引数の置き換えに使用されます。残りのパラメータは配列に直接固定され、引数は配列のようなものです (本質的にはobject) を変換する必要があります。残りのパラメータ構文は、パラメータを無限に配列として表現でき、パラメータの定義方法は変数であり、パラメータを知らなくても関数を宣言する場合に非常に便利です。

es6には引数がありますか?

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

1. 引数の使用法

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 < 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 . アロー関数には引数はありません

{
  console.log("----------------3. 箭头函数中没有arguments-------------------");
  let Test3 = () => {
    console.log(arguments);
  };
  Test3(1, 2, 3, 4);
}
ログイン後にコピー

2. ES6 の残りのパラメータと展開演算子

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 の使用法の概要

1. apply と call の両方が使用されます呼び出された関数の this のポインタを変更し、すぐに関数を実行します。

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. apply

(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 サイトの他の関連記事を参照してください。

関連ラベル：
javascript es6
ソース：php.cn
前の記事：es6 の分割は文字列をサポートしていますか? 次の記事：リアクションはスパですか？
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 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',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート