数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在JavaScript中将arguments对象转换为数组？
本教程将教你如何将JavaScript中的arguments对象转换为数组。在开始教程之前，让我们先了解一下arguments对象。在JavaScript中，每个函数都包含一个'arguments'对象。它包含调用或执行函数时传递的所有参数的值。
它与数组非常相似，但它并非真正的数组。
‘arguments’对象具有一个length属性，我们可以用它来了解在函数调用期间传递了多少个参数。
我们可以像访问数组索引属性一样访问‘arguments’对象的所有值。例如，arguments[0]给出对象的第一个值，依此类推。
我们可以对arguments对象使用数组方法，例如slice()、forEach()、map()、filter()等。
因此，要对arguments对象使用所有数组方法，我们需要将其转换为JavaScript数组。
这里，我们有几种不同的方法可以将arguments对象转换为JavaScript数组。
使用Array.from()方法
我们将在此方法中使用Array.from()方法。它将JavaScript中的可迭代对象或类似数组的对象转换为数组。它创建对象的副本并将它们转换为数组。我们可以直接访问转换后的数组，也可以将其存储到另一个变量中。
语法
用户可以按照以下语法将arguments对象转换为数组。
Array.from( arguments );
参数
arguments − 要转换为数组的arguments对象。
返回值 − Array.form()方法从arguments对象返回一个数组。
示例1
下面的示例演示了使用Array.from()方法将arguments对象转换为数组。
<html>
<head>
<title> Converting arguments Object to an array. </title>
</head>
<body>
<h2>The Array.from() Method</h2>
<p> The Array.from() method returns an array.</p>
<p> Array created from arguments Object:</p>
<p id="output"></p>
<script >
let outputDiv = document.getElementById("output");
function convertToArray() {
// store the array of arguments object to resultantArray
const resultantArray = Array.from(arguments);
const mapArray = resultantArray.map((arg) => {
return arg
});
outputDiv.innerHTML = mapArray;
}
// call function by passing arguments
convertToArray(10,20,30);
</script>
</body>
</html>在上面的代码中，用户可以看到我们传递了10、20和30作为函数的参数。在函数中，我们将arguments对象转换为数组，并使用转换后的数组和map函数来确保它被正确转换。
使用剩余参数
剩余参数是JavaScript中在ES6中引入的语法。我们可以使用剩余参数以数组形式指定未知数量的参数。用户只需要在最后一个参数使用扩展运算符(...)。
在我们的例子中，我们需要在第一个参数使用扩展运算符来获取所有参数的数组。
语法
用户可以按照以下语法操作。
function demo( ...args ) {
// function body
}
demo(1,3,5);参数
args − 用户可以使用任何变量名代替args，但是要访问数组中的参数，用户需要在函数内部使用相同的数组名。
返回值 − 它将返回一个数组。当我们将剩余参数传递给函数时，它会自动将参数对象转换为数组。
示例2
下面的示例演示了使用扩展运算符将arguments对象转换为数组。
<html>
<head>
<title> Converting arguments Object to an array. </title>
</head>
<body>
<h2>Rest Arguments: Converting arguments Object to an array.</h2>
<p> A fucntion with rest paramters treats the arguments object as an array.</p>
<p> Array created from arguments Object: </p>
<p id="output"></p>
<script>
function convertToArray(...args) {
document.getElementById("output").innerHTML = args;
}
// call function by passing arguments
convertToArray("tutorials", "point", "simply", "easy", "learning");
</script>
</body>
</html>用户可以看到我们使用扩展运算符(...)将arguments对象转换成了数组。
通过创建一个新数组
在此方法中，我们将创建一个新数组并将arguments对象的 value 赋值给新数组。正如用户所知，我们可以通过索引访问arguments对象的value，这将帮助我们将value添加到新数组中。
语法
用户可以按照以下语法操作。
newArray[i] = arguments[i]
算法
- 步骤1 − 创建一个新的空数组。
- 步骤2 − 遍历对象并逐个访问对象的value，并将它们添加到数组中。
- 步骤3 − 我们已经将arguments对象转换为了数组，用户可以使用新创建的数组的所有数组方法。
示例3
下面的示例演示了如何在不使用JavaScript内置方法的情况下将arguments对象转换为数组。
<html>
<body>
<h2>Converting arguments Object to an array.</h2>
<p> Newly created array after applying the sort() method: </p>
<p id="result"> </p>
<script>
let resultDiv = document.getElementById("result");
function convertToArray() {
// assign arguments values to the newArray
const newArray = [];
for (var i = 0; i < arguments.length; i++) {
newArray[i] = arguments[i];
}
// sort the newArray
const sortedArray = newArray.sort((a, b) => a - b);
resultDiv.innerHTML = sortedArray;
}
// call function by passing arguments
convertToArray(1, 354, 23, 132, 64, 2, 7, 3, 8, 10);
</script>
</body>
</html>用户可以看到我们手动将arguments对象转换为了数组并对新创建的数组进行了排序，从而打印出上述输出。
结论
在本教程中，我们介绍了三种将arguments对象转换为数组的方法。前两种方法使用内置方法将对象转换为数组。在第三种方法中，我们手动将arguments对象转换为数组。对于用户来说，最好的方法是使用剩余参数来执行上述操作。
899 次浏览
