ปัญหา reference value ตัวแปร Array ใน JavaScript ES6 ,TypeScript


🕑 29 ก.ค. 2562
ปัญหา reference value ตัวแปร Array ใน JavaScript ES6 ,TypeScript

JS Developer มือใหม่ที่เริ่มเขียน JavaScript ES6 ,TypeScript คงเคยเจอปัญหา reference value ของตัวแปร Array ใครยังไม่รู้วิธีแก้ห้ามพลาดบทความนี้น่ะจ๊ะ

ปัญหา reference value ตัวแปร Array ใน JavaScript เกิดจากการ Copy Array โดยใช้ = ตัวแปร Array
เมื่อ Copy Array ใน JS โดยใช้ = มันจะ Copy ค่าและอ้างอิงไปยัง Array ตัวเดิมด้วยคือเมื่อตัวแปรนึงถูกเปลี่ยนค่าตัวแปรอีกตัวนึงจะถูกเปลี่ยนค่าไปด้วย เช่น

const B = [1, 2, 3, 4];
const C = B;
console.log(C === B);
// true

ตัวอย่าง Code

var A = ['A1', 'A2'];
var B = A;
B.push('B1');

console.log(B);
//["A1", "A2", "B1"]

//😱 เราเพิ่มค่าให้ตัวแปร B แต่ A ก็ถูกเปลี่ยนค่าตาม B
console.log(A);
//["A1", "A2", "B1"]

 

วิธีแก้ปัญหาการ reference value ตัวแปร Array

**สามารถใช้ได้ทั้ง JavaScript ,JavaScript ES6 ,TypeScript**

1Copy Array โดยใช้คำสั่ง Array.from(ตัวแปร Array)

ดังนั้นถ้าเราต้องการ Copy ค่า Array A ให้กับ Array B โดยที่ต้องการให้ B กับ A แยกจากกันเลยต้องใช้ Array.from(ตัวแปร Array)

var A = [1, 2, 3, 4];

var B = Array.from(A);

console.log(A === B);
// false

ตัวอย่าง Code

var A = ['A1', 'A2'];

var B = Array.from(A);

B.push('B1');

console.log(B);
//["A1", "A2", "B1"]

//✅เพิ่มค่าให B ก็จะไม่ส่งผลต่อ A เพราะกรณีนี้ถือว่า A กับ B เป็น Array คนล่ะตัวกัน
console.log(A);
//["A1", "A2"]

2Copy Array โดยใช้คำสั่ง Object.assign([], ตัวแปร Array)

ผลลัพธ์ที่ได้จะเหมือนกับการใช้คำสั่ง Array.from(ตัวแปร Array) คือ ตัวแปร Array B กับ A จะเป็น Array คนล่ะตัวกัน

ตัวอย่าง Code

var A = ['A1', 'A2'];

var B = Object.assign([], A);

B.push('B1');

console.log(B);
//["A1", "A2", "B1"]

//✅เพิ่มค่าให B ก็จะไม่ส่งผลต่อ A เพราะกรณี้ถือว่า A กับ B เป็น Array คนล่ะตัวกัน
console.log(A);
//["A1", "A2"]

3Copy Array โดยใช้คำสั่ง slice(start,end) คือคำสั่งตัด Array

พารามิเตอร์ คำอธิบาย
start ตำแหน่งเริ่มต้น ค่า default คือ 0
end ตำแหน่งสุดท้าย ค่า default คือ ทั้งหมด

ตัวอย่าง Code

const wordArray = ['A', 'B', 'C','D'];
const cloneWordArray = wordArray.slice();

wordArray.push('F');
console.log(wordArray);
//output >> ["A", "B", "C", "D", "F"]

console.log(cloneWordArray);
//output >> ["A", "B", "C", "D"]

 

ดังนั้นหากเราใช้คำสั่ง Array.from(), Object.assign() หรือ slice() คำสั่งใดคำสั่งนึงแอดมินรับรองว่าคุณจะไม่พบปัญหา reference value ตัวแปร Array ใน JavaScript อีกต่อไป 👍

 


 

ใครชื่นชอบบทความ "ปัญหา reference value ตัวแปร Array ใน JavaScript ES6 ,TypeScript" ขอฝากกด Like แฟนเพจเทพควิชให้ด้วยน่ะค่ะอิๆ บ๊ายบายเจอกันใหม่ในบทความหน้า 😜 

เทพควิช-lnwquiz