เป็นไปได้หรือไม่ที่จะเปลี่ยนค่าของอาเรย์เมื่อทำการ 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นั้นแสดงให้เห็นว่าตัวเองกำลังตั้งค่าเช่นเดียวกับthisในการโทรกลับหนึ่งอาจคิดว่าอาร์เรย์ที่เกี่ยวข้องในการ.forEach()โทรอาจเป็นค่าเริ่มต้นของthisแต่ด้วยเหตุผลใดก็ตามมันไม่ได้; thisจะเป็นundefinedถ้าไม่ได้ระบุอาร์กิวเมนต์ที่สองไว้

(หมายเหตุ: สิ่งข้างต้นเกี่ยวกับthisใช้ไม่ได้ถ้าโทรกลับเป็น=>ฟังก์ชั่นเพราะthisไม่เคยถูกผูกไว้กับสิ่งใดเมื่อฟังก์ชั่นดังกล่าวถูกเรียก)

นอกจากนี้สิ่งสำคัญที่ต้องจำไว้ก็คือมียูทิลิตี้ที่คล้ายคลึงกันทั้งหมดในตระกูล Array และมีคำถามมากมายที่ปรากฏใน Stackoverflow เกี่ยวกับฟังก์ชั่นหนึ่งหรืออีกอันที่ทางออกที่ดีที่สุดคือการเลือกเครื่องมือที่แตกต่างกัน คุณได้:

• forEach สำหรับการทำสิ่งที่มีหรือกับทุกรายการในอาร์เรย์
• filter สำหรับการสร้างอาร์เรย์ใหม่ที่มีเฉพาะรายการที่ผ่านการรับรอง
• map สำหรับการสร้างอาร์เรย์แบบหนึ่งต่อหนึ่งโดยการเปลี่ยนอาร์เรย์ที่มีอยู่
• some เพื่อตรวจสอบว่าอย่างน้อยหนึ่งองค์ประกอบในอาเรย์เหมาะกับคำอธิบายบางอย่าง;
• everyเพื่อตรวจสอบว่ารายการทั้งหมดในอาร์เรย์ตรงกับคำอธิบายหรือไม่
• find เพื่อค้นหาค่าในอาร์เรย์

และอื่น ๆ ลิงค์ MDN

Let 's ลองเพื่อให้มันง่ายและหารือเกี่ยวกับวิธีการที่จะทำงานจริง มันจะทำอย่างไรกับประเภทตัวแปรและพารามิเตอร์ฟังก์ชั่น

นี่คือรหัสของคุณที่เรากำลังพูดถึง:

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

Primitives (undefined, null, String, Boolean, Number) จัดเก็บค่าจริง

อดีต: var x = 5;

ประเภทการอ้างอิง (วัตถุที่กำหนดเอง) เก็บตำแหน่งหน่วยความจำของวัตถุ

อดีต: var xObj = { x : 5 };

และประการที่สามฟังก์ชันพารามิเตอร์ทำงานอย่างไร

ในฟังก์ชั่นพารามิเตอร์ที่มักจะผ่านค่า

เนื่องจากarrเป็นอาร์เรย์ของ Strings จึงเป็นอาร์เรย์ของวัตถุดั้งเดิมซึ่งหมายความว่าพวกเขาจะถูกเก็บไว้ตามค่า

ดังนั้นสำหรับรหัสของคุณข้างต้นนี้หมายถึงว่าแต่ละเวลา forEach () iterates, partมีค่าเท่ากับค่าเช่นเดียวกับarr[index], แต่ไม่วัตถุเดียวกัน

part = "four";จะเปลี่ยนpartตัวแปร แต่จะทิ้งไว้arrคนเดียว

รหัสต่อไปนี้จะเปลี่ยนค่าที่คุณต้องการ:

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

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

alert(arr);

ตอนนี้ถ้าอาเรย์arrเป็นอาเรย์ชนิดอ้างอิงรหัสต่อไปนี้จะทำงานได้เนื่องจากประเภทการอ้างอิงจะเก็บตำแหน่งหน่วยความจำของวัตถุแทนที่จะเป็นวัตถุจริง

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

Javascript นั้นผ่านไปมาตามตัวอักษรซึ่งหมายความว่าpartเป็นสำเนาของค่าในอาเรย์

หากต้องการเปลี่ยนค่าให้เข้าถึงอาร์เรย์ในลูปของคุณ

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 สามารถมีฟังก์ชันการโทรกลับ (แต่ละองค์ประกอบ elementIndex) ดังนั้นโดยทั่วไปสิ่งที่คุณต้องทำคือ:

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

หรือถ้าคุณต้องการเก็บอาร์เรย์ดั้งเดิมไว้คุณสามารถทำสำเนาของมันก่อนที่จะทำกระบวนการข้างต้น ในการทำสำเนาคุณสามารถใช้:

var copy = arr.slice();

ด้วยวิธีการของวัตถุแบบ Array คุณสามารถปรับเปลี่ยนเนื้อหาแบบ Array ได้ แต่เมื่อเปรียบเทียบกับแบบพื้นฐานสำหรับลูปวิธีการเหล่านี้ขาดฟังก์ชั่นที่สำคัญอย่างหนึ่ง คุณไม่สามารถแก้ไขดัชนีในการรันได้

ตัวอย่างเช่นถ้าคุณจะลบองค์ประกอบปัจจุบันและวางไปยังตำแหน่งดัชนีอื่นภายในอาร์เรย์เดียวกันคุณสามารถทำได้ หากคุณย้ายองค์ประกอบปัจจุบันไปยังตำแหน่งก่อนหน้าไม่มีปัญหาในการทำซ้ำครั้งถัดไปคุณจะได้รับรายการถัดไปเหมือนว่าคุณไม่ได้ทำอะไรเลย

พิจารณารหัสนี้ที่เราย้ายรายการที่ตำแหน่งดัชนี 5 ไปยังตำแหน่งดัชนี 2 เมื่อดัชนีนับได้ถึง 5

var ar = [0,1,2,3,4,5,6,7,8,9];
ar.forEach((e,i,a) => {
i == 5 && a.splice(2,0,a.splice(i,1)[0])
console.log(i,e);
}); // 0 0 - 1 1 - 2 2 - 3 3 - 4 4 - 5 5 - 6 6 - 7 7 - 8 8 - 9 9

อย่างไรก็ตามถ้าเราย้ายองค์ประกอบปัจจุบันไปที่อื่นนอกเหนือจากตำแหน่งดัชนีปัจจุบันสิ่งที่ได้รับยุ่งเล็กน้อย จากนั้นรายการถัดไปจะเปลี่ยนเป็นรายการที่ถูกย้ายและในการทำซ้ำครั้งถัดไปเราจะไม่สามารถมองเห็นหรือประเมินผลได้

พิจารณารหัสนี้ที่เราย้ายรายการที่ตำแหน่งดัชนี 5 ไปยังตำแหน่งดัชนี 7 เมื่อดัชนีนับได้ถึง 5

var a = [0,1,2,3,4,5,6,7,8,9];
a.forEach((e,i,a) => {
i == 5 && a.splice(7,0,a.splice(i,1)[0])
console.log(i,e);
}); // 0 0 - 1 1 - 2 2 - 3 3 - 4 4 - 5 5 - 6 7 - 7 5 - 8 8 - 9 9

ดังนั้นเราไม่เคยเจอกัน 6 ครั้งในวงวน โดยปกติในลูปสำหรับคุณคาดว่าจะลดค่าดัชนีเมื่อคุณย้ายไอเท็มอาร์เรย์ไปข้างหน้าเพื่อให้ดัชนีของคุณยังคงอยู่ที่ตำแหน่งเดิมในการทำงานครั้งถัดไปและคุณยังสามารถประเมินรายการที่ถูกย้ายไปยังตำแหน่งของรายการ สิ่งนี้ไม่สามารถทำได้ด้วยเมธอดอาร์เรย์ คุณไม่สามารถแก้ไขดัชนี ตรวจสอบรหัสต่อไปนี้

var a = [0,1,2,3,4,5,6,7,8,9];
a.forEach((e,i,a) => {
i == 5 && (a.splice(7,0,a.splice(i,1)[0]), i--);
console.log(i,e);
}); // 0 0 - 1 1 - 2 2 - 3 3 - 4 4 - 4 5 - 6 7 - 7 5 - 8 8 - 9 9

อย่างที่คุณเห็นเมื่อเราลดiมันจะไม่ดำเนินต่อจาก 5 แต่ 6 จากที่มันถูกทิ้ง

ดังนั้นจงเก็บเรื่องนี้ไว้ในใจ

ในการเพิ่มหรือลบองค์ประกอบทั้งหมดซึ่งจะเปลี่ยนแปลงดัชนีโดยการขยายคำแนะนำของ zhujy_8833 ของ slice () เพื่อทำซ้ำมากกว่าการคัดลอกเพียงแค่นับจำนวนองค์ประกอบที่คุณได้ลบหรือเพิ่มและแก้ไขดัชนีตามนั้น ตัวอย่างเช่นในการลบองค์ประกอบ:

let values = ["A0", "A1", "A2", "A3", "A4", "A5", "A6", "A7", "A8"];
let count = 0;
values.slice().forEach((value, index) => {
    if (value === "A2" || value === "A5") {
        values.splice(index - count++, 1);
    };
});
console.log(values);

// Expected: [ 'A0', 'A1', 'A3', 'A4', 'A6', 'A7', 'A8' ]

ในการแทรกองค์ประกอบก่อน:

if (value === "A0" || value === "A6" || value === "A8") {
    values.splice(index - count--, 0, 'newVal');
};

// Expected: ['newVal', A0, 'A1', 'A2', 'A3', 'A4', 'A5', 'newVal', 'A6', 'A7', 'newVal', 'A8' ]

ในการแทรกองค์ประกอบหลังจาก:

if (value === "A0" || value === "A6" || value === "A8") {
    values.splice(index - --count, 0, 'newVal');
};

// Expected: ['A0', 'newVal', 'A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'newVal', 'A7', 'A8', 'newVal']

ในการแทนที่องค์ประกอบ:

if (value === "A3" || value === "A4" || value === "A7") {
    values.splice(index, 1, 'newVal');
};

// Expected: [ 'A0', 'A1', 'A2', 'newVal', 'newVal', 'A5', 'A6', 'newVal', 'A8' ]

หมายเหตุ: หากการติดตั้งทั้งก่อนและหลังการแทรกโค้ดควรจัดการก่อนที่จะแทรกก่อนอื่นวิธีรอบจะไม่เป็นไปตามที่คาดไว้

คุณสามารถลองสิ่งนี้หากคุณต้องการแทนที่

var newArray= [444,555,666];
var oldArray =[11,22,33];
oldArray.forEach((name, index) => oldArray [index] = newArray[index]);
console.log(newArray);