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()?
const args = ['p0', 'p1', 'p2'];
call_me.apply(this, args);
에 대한 MDN 문서를 참조하십시오 Function.prototype.apply().
환경이 ECMAScript 6을 지원하는 경우 스프레드 인수를 대신 사용할 수 있습니다 .
call_me(...args);
왜 전체 배열을 전달하고 함수 내에서 필요에 따라 처리하지 않습니까?
var x = [ 'p0', 'p1', 'p2' ];
call_me(x);
function call_me(params) {
for (i=0; i<params.length; i++) {
alert(params[i])
}
}
call_me가 전역 함수라고 가정하면이 설정이 예상되지 않습니다.
var x = ['p0', 'p1', 'p2'];
call_me.apply(null, x);
ES6 표준에는 정확하게이를 수행 하는 새로운 스프레드 연산자 ... 가 있습니다.
call_me(...x)
IE를 제외한 모든 주요 브라우저에서 지원됩니다.
스프레드 연산자는 다른 많은 유용한 작업을 수행 할 수 있으며 링크 된 문서는이를 잘 보여줍니다.
@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'
}
이것에 주목
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)">
함수 인수는 배열 일 수도 있습니다.
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)스프레드 연산자를 사용하는 동안 전달 된 마지막 또는 유일한 매개 변수 여야합니다. 그렇지 않으면 실패합니다.
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);
}
답은 이미 주어졌지만 케이크 한 조각 만주고 싶습니다. 당신이 달성하고자하는 것은 method borrowingJS의 맥락에서 호출 됩니다. 우리는 객체에서 메소드를 가져 와서 다른 객체의 컨텍스트에서 호출합니다. 배열 메소드를 사용하여 인수에 적용하는 것이 일반적입니다. 예를 들어 보겠습니다.
그래서 우리는 두 개의 숫자를 인자로 받아서 "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.
보다 기본적인 형태로 스프레드 연산자를 사용할 수 있습니다
[].concat(...array)
배열을 반환하지만 인수로 전달 될 것으로 예상되는 함수의 경우
예:
function expectArguments(...args){
return [].concat(...args);
}
JSON.stringify(expectArguments(1,2,3)) === JSON.stringify(expectArguments([1,2,3]))
1-만약 문자열로 배열 참여할 수
함수로 2 패스
3 호 분할
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(name)
{
var nameArray = name.split(',');
.
.
.
}
전화 방법 :
myFunction(fruits.join(','));
또는
myFunction("orange,Apple,fruits");
참고 URL : https://stackoverflow.com/questions/2856059/passing-an-array-as-a-function-parameter-in-javascript
'Programing' 카테고리의 다른 글
| 변수 값에서 팬더 DataFrame을 생성하면 "ValueError : 모든 스칼라 값을 사용하는 경우 인덱스를 전달해야합니다"가 발생합니다. (0) | 2020.03.26 |
|---|---|
| CSS를 포함하는 가장 좋은 방법은? (0) | 2020.03.26 |
| Express를 사용하여 NodeJS 서버에서 파일 다운로드 (0) | 2020.03.26 |
| bower (및 npm) 버전 구문은 무엇입니까? (0) | 2020.03.26 |
| 루팅 된 기기에서 실행 중인지 확인 (0) | 2020.03.26 |