JavaScript에서 배열을 함수 매개 변수로 전달


290

배열을 매개 변수로 사용하여 함수를 호출하고 싶습니다.

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()?

답변:


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

에 대한 MDN 문서를 참조하십시오 Function.prototype.apply().


환경이 ECMAScript 6을 지원하는 경우 스프레드 인수를 대신 사용할 수 있습니다 .

call_me(...args);

9
참고로 누군가가 대신 연관 배열 (키라고 함)을 전달하려면 객체를 사용하십시오. PHP에서 왔으며 (Google에서 항상이 스레드로 이끌었습니다) 이것은 알아내는 데 시간이 걸렸습니다. 그러면 전체 객체를 매개 변수로 전달할 수 있습니다. w3schools.com/js/js_objects.asp
timhc22

'확산'논쟁을 지적 해 주셔서 감사합니다! 그것에 대해 몰랐다.
토마스 안

@timhc-사이드 노트 주석은 흥미 롭지 만 구문 분석 할 수는 없습니다 (저는 자습서를 통해 작동하는 자바 스크립트 멍청한 사람입니다). JS에서 연관 배열 여러 자습서에 따라 객체입니다.
NateT

@ timhc22 및 기능 망가에 매개 변수가 잊지로 전달하는 JSON 개체를 사용하는 경우 매개 변수 파괴 가독성을위한
무하마드 오메르 빈 라덴

113

왜 전체 배열을 전달하고 함수 내에서 필요에 따라 처리하지 않습니까?

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

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

37
call_me ()을 수정할 수 없기 때문입니다. 다른 라이브러리에 정의되어 있으며 API를 망칠 수 없습니다.
Robert

62
+1은 원래 질문에 대한 답변이 아니더라도이 페이지를 본 100K 명 이상의 사람들이 찾던 것일 수 있습니다.
이시카와

누군가 "call_me (x)"라인이 무엇을하는지 설명 할 수 있습니까? 함수 키워드가없는 함수 이름 인 것 같습니다. 정확히 뭐하는거야?
수영

1
@swam call_me함수를 호출 합니다. 끝에 세미콜론이 부족합니다.
SantiBailors 2016

@ swam은 선언 된 call_me (params) 함수를 실행 중입니다.
Julio Rodriguez

43

call_me가 전역 함수라고 가정하면이 설정이 예상되지 않습니다.

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


7

@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'
}

4
이것은 나쁜 습관입니다 ... 함수가 필요한 것을 볼 수 없으며 함수를 보면 모든 매개 변수가 선택 사항입니다.
Robin

3

이것에 주목

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)">

이것은 분명히 대답의 일부입니다. 호출 후 배열을 다시 가져 오려면 "인수"가 필요합니다. 감사!
FlorianB

2

함수 인수는 배열 일 수도 있습니다.

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)


2

스프레드 연산자를 사용하는 동안 전달 된 마지막 또는 유일한 매개 변수 여야합니다. 그렇지 않으면 실패합니다.

function callMe(...arr){ //valid arguments
    alert(arr);
}

function callMe(name, ...arr){ //valid arguments
    alert(arr);
}

function callMe(...arr, name){ //invalid arguments
    alert(arr);
}

배열을 시작 인수로 전달해야 할 경우 다음을 수행 할 수 있습니다.

function callMe(arr, name){
    let newArr = [...arr];
    alert(newArr);
}

1

보다 기본적인 형태로 스프레드 연산자를 사용할 수 있습니다

[].concat(...array)

배열을 반환하지만 인수로 전달 될 것으로 예상되는 함수의 경우

예:

function expectArguments(...args){
  return [].concat(...args);
}

JSON.stringify(expectArguments(1,2,3)) === JSON.stringify(expectArguments([1,2,3]))

0

답은 이미 주어졌지만 케이크 한 조각 만주고 싶습니다. 달성하고자하는 것을method borrowing JS의 맥락에서 됩니다. 우리는 객체에서 메소드를 가져 와서 다른 객체의 컨텍스트에서 호출합니다. 배열 메소드를 사용하여 인수에 적용하는 것이 일반적입니다. 예를 들어 보겠습니다.

그래서 우리는 두 개의 숫자를 인자로 받아서 "super safe"해시 된 문자열을 반환하는 "super"해싱 함수를 가지고 있습니다 :

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

오. 불행히도, 그것은 작동하지 않습니다. 우리는 hash (arguments)를 호출하고 arguments 객체는 반복 가능하고 배열과 비슷하지만 실제 배열은 아닙니다. 아래 접근 방식은 어떻습니까?

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.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.