[javascript] javascript에서 foreach를 수행 할 때 배열의 값을 변경할 수 있습니까?

JAVASCRIPT / 글쓴이

예:

var arr = ["one","two","three"];

arr.forEach(function(part){
  part = "four";
  return "four";
})

alert(arr);

배열은 여전히 ​​원래 값을 가지고 있습니다. 반복 함수에서 배열의 요소에 액세스 할 수있는 방법이 있습니까?

답변

콜백에는 요소, 인덱스 및 배열 자체가 전달됩니다.

arr.forEach(function(part, index, theArray) {
  theArray[index] = "hello world";
});

편집 -주석에서 언급했듯이 .forEach()함수는 두 번째 인수를 취할 수 this있으며 콜백에 대한 각 호출 의 값으로 사용됩니다 .

arr.forEach(function(part, index) {
  this[index] = "hello world";
}, arr); // use arr as this

그 두 번째 예제 프로그램 arr자체로 설정되고 thiscallback.One에서은에 포함 된 배열을 생각할 수 있습니다 .forEach()통화가 될 수있는 기본 값 this이지만 그렇지 않은 어떤 이유로,; this될 것입니다 undefined그 두 번째 인수가 제공되지 않은 경우.

(참고 : this콜백이 =>함수 인 경우 위의 내용은 적용되지 않습니다 . 왜냐하면 this그러한 함수가 호출 될 때 아무것도 바인딩되지 않기 때문 입니다.)

또한 Array 프로토 타입에 제공되는 유사한 유틸리티가 모두 있다는 점을 기억하는 것이 중요하며, 최상의 솔루션으로 다른 툴을 선택하는 것이 가장 좋습니다. 당신이있어:

  • forEach 배열의 모든 항목에 대해 또는 모든 항목에 대해 수행
  • filter 적격 항목 만 포함하는 새 배열을 생성하기 위해;
  • map 기존 배열을 변환하여 일대일 새로운 배열을 만들기 위해;
  • some 배열의 적어도 하나의 요소가 어떤 설명에 맞는지 확인하기 위해;
  • every배열의 모든 항목이 설명과 일치 하는지 확인합니다 .
  • find 배열에서 값을 찾기 위해

등등. MDN 링크

답변

의합시다 시도 간단하게하고 실제로 작동하는 방법을 논의하기 위해. 변수 유형 및 함수 매개 변수와 관련이 있습니다.

우리가 이야기하는 코드는 다음과 같습니다.

var arr = ["one","two","three"];

arr.forEach(function(part) {
  part = "four";
  return "four";
})

alert(arr);

먼저 Array.prototype.forEach ()에 대해 읽어야합니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

둘째, JavaScript의 값 유형에 대해 간단히 이야기하겠습니다.

프리미티브 (정의되지 않은, null, 문자열, 부울, 숫자)는 실제 값을 저장합니다.

전의: var x = 5;

참조 유형 (사용자 정의 객체)은 객체의 메모리 위치를 저장합니다.

전의: var xObj = { x : 5 };

셋째, 함수 매개 변수 작동 방식

함수에서 매개 변수는 항상 값으로 전달됩니다.

하므로 arr문자열의 배열이고, 그 배열의 프리미티브 들이 값에 의해 저장되는 수단 개체.

따라서 위의 코드 foreach는 ()가 반복마다 있음이 수단 part과 동일한 값과 같은 arr[index], 하지만 동일한 개체 .

part = "four";part변수 가 변경 되지만 arr홀로 남겨 집니다.

다음 코드는 원하는 값을 변경합니다.

var arr = ["one","two","three"];

arr.forEach(function(part, index) {
  arr[index] = "four";
});

alert(arr);

이제 arrarray가 참조 유형 의 배열 인 경우 참조 유형 은 실제 객체 대신 객체의 메모리 위치를 저장하므로 다음 코드가 작동합니다.

var arr = [{ num : "one" }, { num : "two"}, { num : "three"}];

arr.forEach(function(part, index) {
  // part and arr[index] point to the same object
  // so changing the object that part points to changes the object that arr[index] points to

  part.num = "four";
});

alert(arr[0].num);
alert(arr[1].num);
alert(arr[2].num);

다음 part은 객체를 arr단독으로 저장 한 채로 새 객체를 가리 키도록 변경할 수 있음을 보여줍니다 .

var arr = [{ num : "one" }, { num : "two"}, { num : "three"}];

arr.forEach(function(part, index) {
  // the following will not change the object that arr[index] points to because part now points at a new object
  part = 5;
});

alert(arr[0].num);
alert(arr[1].num);
alert(arr[2].num);

답변

배열 : [1, 2, 3, 4]
결과 :["foo1", "foo2", "foo3", "foo4"]

Array.prototype.map() 원래 배열 유지

const originalArr = ["Iron", "Super", "Ant", "Aqua"];
const modifiedArr = originalArr.map(name => `${name}man`);

console.log( "Original: %s", originalArr );
console.log( "Modified: %s", modifiedArr );

스 니펫 확장

Array.prototype.forEach() 원래 배열 재정의

const originalArr = ["Iron", "Super", "Ant", "Aqua"];
originalArr.forEach((name, index) => originalArr[index] = `${name}man`);

console.log( "Overridden: %s", originalArr );

스 니펫 확장

답변

자바 스크립트 값으로 전달하며, 이는 본질적으로 의미하는 것은 partA는 복사 배열의 값.

값을 변경하려면 루프에서 배열 자체에 액세스하십시오.

arr[index] = 'new value';

답변

배열의 인덱스로 바꾸십시오.

array[index] = new_value;

답변

=>스타일 함수 를 사용하는 비슷한 답변이 있습니다.

var data = [1,2,3,4];
data.forEach( (item, i, self) => self[i] = item + 10 );

결과를 제공합니다.

[11,12,13,14]

self매개 변수 때문에, 화살표 스타일의 기능이 꼭 필요한 것은

data.forEach( (item,i) => data[i] = item + 10);

작동합니다.

답변

.forEach 함수는 콜백 함수 (eachelement, elementIndex)를 가질 수 있습니다. 따라서 기본적으로해야 할 일은 다음과 같습니다.

arr.forEach(function(element,index){
    arr[index] = "four";   //set the value  
});
console.log(arr); //the array has been overwritten.

또는 원래 배열을 유지하려면 위의 프로세스를 수행하기 전에 사본을 만들 수 있습니다. 복사하려면 다음을 사용하십시오.

var copy = arr.slice();