Передача массива в качестве параметра функции в JavaScript

Я хочу, чтобы вызвать функцию, используя массив в качестве параметра:

const x = ['p0', 'p1', 'p2'];
call_me(x[0], x[1], x[2]); // I don't like it

function call_me (param0, param1, param2 ) {
  // ...
}

есть ли лучший способ передачи содержания x на call_me()?

233
arrays call function javascript

9 ответов

const args = ['p0', 'p1', 'p2'];
call_me.apply(this, args);

см. MDN docs для Function.prototype.apply().

Если среда поддерживает ECMAScript 6, Вы можете использовать распространение аргумент вместо:

call_me(...args);
335

почему бы вам не пройти весь массив и обработать его по мере необходимости внутри функции?

var x = [ 'p0', 'p1', 'p2' ]; 
call_me(x);

function call_me(params) {
  for (i=0; i<params.length; i++) {
    alert(params[i])
  }
}
76

предполагая, что call_me является глобальной функцией, поэтому вы не ожидаете, что это будет установлено.

var x = ['p0', 'p1', 'p2'];
call_me.apply(null, x);
41

в стандарте ES6 есть новый распространение оператор ... что делает именно это.

call_me(...x)

он поддерживается всеми основными браузерами, кроме IE.

оператор распространения может делать много других полезных вещей, и связанная документация действительно хорошо показывает это.

33

как ответил @KaptajnKold

var x = [ 'p0', 'p1', 'p2' ];
call_me.apply(this, x);

и вам не нужно определять все параметры для функции call_me. Вы можете просто использовать arguments

function call_me () {
    // arguments is a array consisting of params.
    // arguments[0] == 'p0',
    // arguments[1] == 'p1',
    // arguments[2] == 'p2'
}
5

Примечание этот

function FollowMouse() {
    for(var i=0; i< arguments.length; i++) {
        arguments[i].style.top = event.clientY+"px";
        arguments[i].style.left = event.clientX+"px";
    }

};

//---------------------------

html страница

<body onmousemove="FollowMouse(d1,d2,d3)">

<p><div id="d1" style="position: absolute;">Follow1</div></p>
<div id="d2" style="position: absolute;"><p>Follow2</p></div>
<div id="d3" style="position: absolute;"><p>Follow3</p></div>


</body>

может вызывать функцию с любыми Args

<body onmousemove="FollowMouse(d1,d2)">

или

<body onmousemove="FollowMouse(d1)">
3

аргументы функции также могут быть массивы:

function foo([a,b,c], d){
  console.log(a,b,c,d);
}

foo([1,2,3], 4)

-конечно, можно также использовать распространение:

function foo(a, b, c, d){
  console.log(a, b, c, d);
}

foo(...[1, 2, 3], 4)
1

ответ уже был дан, но я просто хочу, чтобы дать свой кусок пирога. То, чего вы хотите достичь, называется method borrowing в контексте JS, когда мы берем метод из объекта и вызываем его в контексте другого объекта. Довольно часто берут методы массива и применяют их к аргументам. Позвольте привести пример.

таким образом, у нас есть" супер "функция хэширования, которая принимает два числа в качестве аргумента и возвращает" супер безопасный " хэш строка:

function hash() {
  return arguments[0]+','+arguments[1];
}

hash(1,2); // "1,2" whoaa

пока все хорошо, но у нас мало проблем с вышеуказанным подходом, он ограничен, работает только с двумя числами, что не является динамическим, давайте заставим его работать с любым числом и плюс вам не нужно передавать массив (вы можете, если вы все еще настаиваете). Ладно, хватит болтать, давайте драться!

естественным решением было бы использовать arr.join способ:

function hash() {
  return arguments.join();
}

hash(1,2,4,..); //  Error: arguments.join is not a function

О, боже. К сожалению, это не сработает. Потому что мы вызываем хэш (Аргументы) и объект arguments как Iterable и массив, но не реальный массив. Как насчет подхода ниже?

function hash() {
  return [].join.call(arguments);
}

hash(1,2,3,4); // "1,2,3,4" whoaa

трюк называется method borrowing.

одолжите join метод из регулярного массива [].join. и использовать [].join.call в контексте arguments.

почему это работает?

это потому, что внутренний алгоритм собственного метода arr.join(glue) очень удобно.

взято из спецификации почти "как есть":

Let glue be the first argument or, if no arguments, then a comma ",".
Let result be an empty string.
Append this[0] to result.
Append glue and this[1].
Append glue and this[2].
…Do so until this.length items are glued.
Return result.

Итак, технически он берет это и соединяет это[0], это[1] ...и т. д. Вместе. Он намеренно написан таким образом, что позволяет использовать любой массив (не совпадение, многие методы следуют этой практике). Вот почему он также работает с this=arguments.

0

1 - Вы можете объединить массив в строку
2-передайте его в функцию
3-вызов split

var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(name)
{
    var nameArray = name.split(',');
.
.
.
}

вызов метода:

myFunction(fruits.join(','));

или даже

myFunction("orange,Apple,fruits");
-6