发表新帖
发表新帖

Unlimited arguments in a JavaScript function

前端 未结
关注
9 1833
不要未来只要你来
不要未来只要你来 2020-12-07 17:59

Can a JavaScript function take unlimited arguments? Something like this:

testArray(1, 2, 3, 4, 5...);

I am trying:

var arr
相关标签:
9条回答
  • 闹比i
    2020-12-07 18:05

    There's a weird "magic" variable you can reference called "arguments":

    function manyArgs() {
  for (var i = 0; i < arguments.length; ++i)
    alert(arguments[i]);
}

    It's like an array, but it's not an array. In fact it's so weird that you really shouldn't use it much at all. A common practice is to get the values of it into a real array:

    function foo() {
  var args = Array.prototype.slice.call(arguments, 0);
  // ...

    In that example, "args" would be a normal array, without any of the weirdness. There are all sorts of nasty problems with "arguments", and in ECMAScript 5 its functionality will be curtailed.

    edit — though using the .slice() function sure is convenient, it turns out that passing the arguments object out of a function causes headaches for optimization, so much so that functions that do it may not get optimized at all. The simple, straightforward way to turn arguments into an array is therefore

    function foo() {
  var args = [];
  for (var i = 0; i < arguments.length; ++i) args[i] = arguments[i];
  // ...
}

    More about arguments and optimization.

    0 讨论(0)
  • 忘了有多久
    2020-12-07 18:11

    As of ECMAScript 2015 (or ES6) we also have access to rest parameters that give us a slightly cleaner way to manage arguments:

    function foo(a, b, ...others) {
    console.log("a and b are ", a, b);

    for (let val of others) {
        console.log(val);
    }
}

foo(1, 2, 3, 4, 5);

    At the time of this writing, this is supported by Chrome 47+, Firefox 15+, and Edge. The feature is also available via both Babel and TypeScript transpiling down to ES5.

    0 讨论(0)
  • 情深已故
    2020-12-07 18:17 

    const outputDiv=document.querySelector('.output');
const output=(...x)=>{
    return outputDiv.innerHTML=x;
}

output(1,2,3,4,['hello',5,6],true,null);
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript Practice</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,800;1,900&display=swap" rel="stylesheet">


    <style>
        body{font-family: 'Raleway', sans-serif; background-color: #060606;}
        .center{height:100vh; width: 100%; display: grid;align-items:center;justify-content: center;}
        .output{font-size: 15px;color: rgb(59, 59, 255);font-weight: 200;}
    </style>
    
</head>
<body>
    <div class="center">
        <div class='output'></div>
    </div>

    <script src="js.js"></script>
</body>
</html>

    0 讨论(0)
  • 情书的邮戳
    2020-12-07 18:18

    With ECMAScript 6, you can use rest of arguments syntax: 

    const testArray = (...args) => {
    console.log(args);
};

testArray(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
    0 讨论(0)
  • 再見小時候
    2020-12-07 18:21

    You can also just "cast" it, saving you the ugly loop:

    var getArguments = function() {
    return arguments;
};

var foo = getArguments(1,2,3,4);

// console.log(foo.slice()); => TypeError: foo.slice is not a function

var foo = Object.values(foo); 

console.log(foo); // => [ 1, 2, 3, 4 ]

foo.push(5);

console.log(foo); // => [ 1, 2, 3, 4, 5 ]
    0 讨论(0)
  • 半阙折子戏
    2020-12-07 18:21

    Javascript ES5

    function testArray(){
    for(index = 0; index < arguments.length; i++) {
        alert(arguments[index])
    }
}

    Javascript ES6

    const testArray = (...arg) => console.log(arg)
    0 讨论(0)
 看不清?
提交回复
热议问题