Explication détaillée de la façon dont les fonctions JavaScript implémentent les paramètres variables ? (Partage du résumé)

JS est un langage faiblement typé et ne peut pas utiliser le mot-clé param pour déclarer que le paramètre formel est un paramètre variable comme C#. Alors comment implémenter ce paramètre variable en js ? L'article suivant parlera de la méthode d'implémentation des paramètres des variables de fonction JavaScript. J'espère qu'il sera utile à tout le monde !

Implémentation des paramètres des variables JS 1 : arguments

Que sont les arguments ? Comment implémenter des paramètres variables ?

arguments est un objet de type tableau correspondant aux arguments passés à la fonction.

Dans ES5, vous pouvez utiliser l'objet arguments pour implémenter des paramètres variables.

La longueur de l'objet arguments est déterminée par le nombre de paramètres réels plutôt que par le nombre de paramètres formels. Les paramètres formels sont des variables qui sont rouvertes dans l'espace mémoire de la fonction, mais elles ne chevauchent pas l'espace mémoire de l'objet arguments. Lorsque les arguments et les valeurs existent, les deux valeurs sont synchronisées, mais lorsque l'une d'elles n'a aucune valeur, la valeur ne sera pas synchronisée pour ce cas sans valeur.

<script>
function dynamicArgs() {
	var info = "今日签到的学生有：";
	for (let i = 0; i < arguments.length ; i ++) {
		if (i > 0) {
			info += ",";
		}
		info += arguments[i];
	}
	
	console.log(info);
}

dynamicArgs("张三", "李四");
dynamicArgs("张三", "李四", "王五", "马六");
dynamicArgs(["张三", "李四", "王五", "马六", "jack", "rose"]);
</script>

<ul style="list-style-type: disc;"><li>

Les paramètres ne sont pas sûrs, alors ne les notez pas.

Vous pouvez écrire N plusieurs paramètres lors de l'appel, ou vous pouvez transmettre directement un tableau.

Effet d'exécution :

Résumé :

1 Comme le montre la définition de la fonction, si des arguments de paramètres variables sont utilisés dans la fonction, il n'est pas nécessaire d'écrire des paramètres formels

2. Lors de l'appel de la fonction, plusieurs paramètres réels peuvent être transmis directement à la fonction

les objets arguments sont des variables locales disponibles dans toutes les fonctions (non fléchées). Vous pouvez utiliser l'objet arguments pour référencer les paramètres d'une fonction dans une fonction. Cet objet contient chaque paramètre passé à la fonction, avec le premier paramètre à l'index 0. Par exemple, si une fonction reçoit trois arguments, vous pouvez les référencer comme ceci :

arguments[0]
arguments[1]
arguments[2]

Les paramètres peuvent également être définis :

arguments[0] = 'value';

argumentsarguments 是一个对象，不是一个 Array 。它类似于Array ，但除了length属性和索引元素之外没有任何Array 属性。例如，它没有 pop 方法。但是它可以被转换为一个真正的Array ：

所以经常能看到这样的代码：

// 由于arguments不是 Array，所以无法使用 Array 的方法，所以通过这种方法转换为数组
 
var args = [].slice.call(arguments);  // 方式一
var args = Array.prototype.slice.call(arguments); // 方式二
 
// 下面是 es6 提供的语法
let args = Array.from(arguments)   // 方式一
let args = [...arguments]; // 方式二

arguments<span style="font-size: 16px;">上的属性</span>

• arguments.callee：指向当前执行的函数（在 严格模式 下，第5版 ECMAScript (ES5) 禁止使用 a<strong>rguments.callee()</strong>）
• argunments.length：指向传递给当前函数的参数数量
• arguments.caller：已移除

arguments与剩余参数、默认参数和解构赋值参数的结合使用

1）在严格模式下，剩余参数、默认参数和解构赋值参数的存在不会改变 arguments对象的行为，但是在非严格模式下就有所不同了

function func(a) { 
  arguments[0] = 99;   // 更新了arguments[0] 同样更新了a
  console.log(a);
}
func(10); // 99

// 并且

function func(a) { 
  a = 99;              // 更新了a 同样更新了arguments[0] 
  console.log(arguments[0]);
}
func(10); // 99

2）当非严格模式中的函数没有包含剩余参数、默认参数和解构赋值，那么arguments对象中的值会跟踪参数的值（反之亦然）。看下面的代码：

function func(a = 55) { 
  arguments[0] = 99; // updating arguments[0] does not also update a
  console.log(a);
}
func(10); // 10

//

function func(a = 55) { 
  a = 99; // updating a does not also update arguments[0]
  console.log(arguments[0]);
}
func(10); // 10


function func(a = 55) { 
  console.log(arguments[0]);
}
func(); // undefined

JS可变参数的实现二：rest 参数（...）

在ES6标准中引入了 rest 参数（形式为…变量名 est un objet,</code > code> n'est pas un <code>Array. Il est similaire à Array, mais n'a aucune propriété Array à l'exception de l'attribut length et de l'élément index. Par exemple, il n’a pas de méthode pop. Mais il peut être converti en un véritable Array :

Vous pouvez donc souvent voir du code comme celui-ci :

function f(a, b, ...theArgs) {
  // ...
}

arguments

Attributs sur <ul style="list-style-type: disc;"><li>

arguments.callee : pointe vers la fonction en cours d'exécution (en mode strict, la version 5 d'ECMAScript (

ES5

) interdit l'utilisation de a<span style="color: rgb(255, 0, 0);">rguments.callee()</span>)arguments. length : Indique le nombre d'arguments passés à la fonction actuelle

arguments.caller : Supprimé

arguments combinés avec les paramètres restants, les paramètres par défaut et les paramètres d'affectation détruits

• 1) En mode strict, restant L'existence des paramètres, des paramètres par défaut et des paramètres d'affectation détruits ne modifieront pas le comportement des objets arguments, mais il sera différent en mode non strict

  function f(arg1, ...rest, arg2) { // arg2 after ...rest ?!
    // error
  }

2) Lorsque les fonctions sont en mode non strict
• Non

  Contient les paramètres restants, les paramètres par défaut et les affectations détruites, puis la valeur

  dans l'objet arguments
suivra la valeur du paramètre (et vice versa). Regardez le code ci-dessous :

• //以前函数
  function f(a, b) {
    var args = Array.prototype.slice.call(arguments, f.length);
   
    // …
  }
   
  // 等效于现在
   
  function f(a, b, ...args) {
    
  }

  Implémentation 2 des paramètres variables JS : paramètre rest (...)🎜
  🎜🎜Le paramètre rest a été introduit dans le standard ES6 (sous la forme de .. .nom de la variable), utilisé pour obtenir les paramètres supplémentaires de la fonction. La variable correspondant au paramètre rest est un tableau, qui place les paramètres supplémentaires dans le tableau. Très approprié pour traiter des paramètres de longueur variable. 🎜🎜Rest consiste à résoudre le problème de l'incohérence dans le nombre de paramètres transmis. Cela signifie accepter les paramètres supplémentaires et les mettre dans un tableau ; les paramètres Rest eux-mêmes sont des tableaux, et toutes les méthodes liées aux tableaux peuvent être utilisées. 🎜🎜🎜 Syntaxe d'implémentation des paramètres des variables : 🎜🎜

  function f(...[a, b, c]) {
    return a + b + c;
  }
   
  f(1)          //NaN 因为只传递一个值，其实需要三个值
  f(1, 2, 3)    // 6
  f(1, 2, 3, 4) // 6 (第四值没有与之对应的变量名)

  🎜🎜🎜theArgs commence par "...", c'est un tableau, sa valeur provient de l'appelant réel passant dans [0,theArgs.length) (Plage indexée : 0 to theArgs.length-1)🎜🎜🎜🎜🎜Remarque🎜🎜 : ​​​​Il ne peut y avoir aucun autre paramètre après le paramètre 🎜rest (c'est-à-dire qu'il ne peut s'agir que du dernier paramètre), sinon une erreur sera signalée. 🎜

  function sumAll(...args) { // args 是数组的名称
    let sum = 0;
   
    for (let arg of args) sum += arg;
   
    return sum;
  }
   
  console.log( sumAll(1) ); // 1
  console.log( sumAll(1, 2) ); // 3
  console.log( sumAll(1, 2, 3) ); // 6

  🎜🎜🎜🎜🎜 Distinguer les paramètres de repos et les objets paramètre (arguments) 🎜🎜🎜🎜🎜Les paramètres de repos ne donnent pas de nom distinct à chaque variable, l'objet paramètre contient tous les paramètres passés à la fonction 🎜🎜🎜🎜Le L'objet paramètre n'est pas un vrai tableau, le paramètre rest est une véritable instance de tableau. Par exemple, les méthodes de tri de tableau, map, forEach et pop peuvent être utilisées directement🎜🎜🎜🎜L'objet paramètre a ses propres fonctionnalités supplémentaires (telles que l'attribut d'appelé)🎜

Rest参数的引入减少样式代码

//以前函数
function f(a, b) {
  var args = Array.prototype.slice.call(arguments, f.length);
 
  // …
}
 
// 等效于现在
 
function f(a, b, ...args) {
  
}

Rest参数可以被解构（通俗一点，将rest参数的数据解析后一一对应）不要忘记参数用[] 括起来，因为它数组嘛

function f(...[a, b, c]) {
  return a + b + c;
}
 
f(1)          //NaN 因为只传递一个值，其实需要三个值
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (第四值没有与之对应的变量名)

示例

1、计算参数和

function sumAll(...args) { // args 是数组的名称
  let sum = 0;
 
  for (let arg of args) sum += arg;
 
  return sum;
}
 
console.log( sumAll(1) ); // 1
console.log( sumAll(1, 2) ); // 3
console.log( sumAll(1, 2, 3) ); // 6

2、每个参数乘以2

function multiply(multiplier, ...theArgs) {
  return theArgs.map(function(element) {
    return multiplier * element;
  });
}
 
var arr = multiply(2, 1, 2, 3); 
console.log(arr); // [2, 4, 6]

3、排序

function sortRestArgs(...theArgs) {
  var sortedArgs = theArgs.sort();
  return sortedArgs;
}
//好像一位和两位混合不能进行排序，这需要看一下为甚？主要第一个为主
console.log(sortRestArgs(5, 3, 7, 1)); // shows 1, 3, 5, 7

对比：参数对象arguments不能排序

function sortArguments() {
  //arguments是参数对象不能直接使用sort()方法，因为不是数组实例，需要转换
  var sortedArgs = arguments.sort(); 
  return sortedArgs; // this will never happen
}
 
// 会抛出类型异常，arguments.sort不是函数
console.log(sortArguments(5, 3, 7, 1));

【相关推荐：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!