ตัวดำเนินการสามจุดใน JS/React JS คืออะไร

ตัวดำเนินการสามจุดใน JavaScript เป็นหนึ่งในการอัปเดตที่สำคัญที่มาพร้อมกับ ES6

โอเปอเรเตอร์นี้ (...) ช่วยให้คุณบรรลุผลหลายอย่างที่ก่อนหน้านี้ต้องใช้โค้ดหลายบรรทัด ไวยากรณ์ที่ไม่คุ้นเคย และอื่นๆ อีกมากมาย

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

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

วิธีใช้ตัวดำเนินการ Spread ใน JavaScript

ใน JavaScript คุณใช้ตัวดำเนินการแพร่กระจายเพื่อขยายการวนซ้ำภายในตัวรับที่ระบุตามชื่อของมัน

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

ไวยากรณ์ตัวดำเนินการกระจาย:

const newArray = ['firstItem', ...oldArray];

ตอนนี้เรามาดูกรณีต่างๆ ที่เราสามารถใช้ตัวดำเนินการสเปรดได้

วิธีคัดลอกอาร์เรย์ด้วยตัวดำเนินการ Spread

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

นี่คือตัวอย่าง:

let studentNames = ["Daniel", "Jane", "Joe"];
let names = [...studentNames];
console.log(names); // ["Daniel","Jane","Joe"]

สิ่งนี้ช่วยเราประหยัดเวลาที่เราจะใช้ในการเขียนคำสั่งแบบวนซ้ำ:

let studentNames = ["Daniel", "Jane", "Joe"];
let names = [];
studentNames.map((name) => {
    names.push(name);
});
console.log(names); // ["Daniel","Jane","Joe"]

วิธีคัดลอกออบเจ็กต์ด้วยตัวดำเนินการ Spread

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

let user = { name: "John Doe", age: 10 };
let copiedUser = { ...user };
console.log(copiedUser); // { name: "John Doe", age: 10 }

ในขณะที่วิธีเก่าในการทำเช่นนี้คือการใช้วิธี Object.assign() ด้วยวิธีนี้:

let user = { name: "John Doe", age: 10 };
let copiedUser = Object.assign({}, user);
console.log(copiedUser); // { name: "John Doe", age: 10 }

วิธีการต่อหรือรวมอาร์เรย์เข้ากับตัวดำเนินการ Spread

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

let femaleNames = ["Daniel", "Peter", "Joe"];
let maleNames = ["Sandra", "Lucy", "Jane"];
let allNames = [...femaleNames, ...maleNames];
console.log(allNames); // ["Daniel","Peter","Joe","Sandra","Lucy","Jane"]

สิ่งสำคัญคือต้องรู้ว่าเราสามารถใช้วิธีการเดียวกันกับอาร์เรย์ได้มากเท่าที่เรามี นอกจากนี้เรายังสามารถเพิ่มแต่ละองค์ประกอบภายในอาร์เรย์ได้:

let femaleNames = ["Daniel", "Peter", "Joe"];
let maleNames = ["Sandra", "Lucy", "Jane"];
let otherNames = ["Bill", "Jill"];
let moreNames = [...otherNames, ...femaleNames, ...maleNames];
let names = [...moreNames, "Ben", "Fred"];

ซึ่งช่วยลดความเครียดในการใช้ไวยากรณ์ที่ซับซ้อนเช่นเมธอด concat():

let femaleNames = ["Daniel", "Peter", "Joe"];
let maleNames = ["Sandra", "Lucy", "Jane"];
let otherNames = ["Bill", "Jill"];
let allNames = femaleNames.concat(maleNames);
let moreNames = femaleNames.concat(maleNames, otherNames);

วิธีเชื่อมต่อหรือรวมวัตถุเข้ากับตัวดำเนินการ Spread

นอกจากนี้เรายังสามารถเชื่อมวัตถุเข้าด้วยกันได้คล้ายกับวิธีที่เราทำอาร์เรย์กับตัวดำเนินการสเปรด:

let userName = { name: "John Doe" };
let userSex = { sex: "Female" };
let user = { ...userName, ...userSex };
console.log(user); // { name: "John Doe", age: 10 }

หมายเหตุ: ในสถานการณ์ที่คีย์หนึ่งมีคุณสมบัติอื่น คุณสมบัติสุดท้ายจะแทนที่อินสแตนซ์แรก:

let userName = { name: "John Doe" };
let userSex = { sex: "Female", name: "Jane Doe" };
let user = { ...userName, ...userSex }; // { name: "Jane Doe", age: 10 }

วิธีดึงข้อมูลองค์ประกอบที่ไม่ซ้ำด้วยวิธี Set

สถานการณ์สำคัญอย่างหนึ่งเมื่อคุณจะใช้ตัวดำเนินการสเปรดคือเมื่อคุณพยายามดึงองค์ประกอบเฉพาะจากอาร์เรย์หนึ่งไปยังอีกอาร์เรย์หนึ่ง

ตัวอย่างเช่น สมมติว่าเรามีผลไม้หลายชนิดที่เราทำซ้ำผลไม้บางอย่าง และเราต้องการดึงผลไม้เหล่านี้มาไว้ในลำดับใหม่และหลีกเลี่ยงการทำซ้ำ เราสามารถใช้เมธอด set() ควบคู่ไปกับตัวดำเนินการสเปรดเพื่อแสดงรายการไว้ในอาร์เรย์ใหม่:

let fruits = ["Mango", "Apple", "Mango", "Banana", "Mango"];
let uniqueFruits = [...new Set(fruits)];
console.log(uniqueFruits); // ["Mango","Apple","Banana"]

วิธีการส่งผ่านองค์ประกอบอาร์เรย์ในการเรียกใช้ฟังก์ชันด้วยตัวดำเนินการ Spread

เมื่อคุณมีฟังก์ชันที่รับตัวเลขและคุณมีตัวเลขเหล่านี้เป็นองค์ประกอบของอาร์เรย์:

let scores = [12, 33, 6]
const addAll = (a, b, c) => {
    console.log(a + b + c);
};

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

let scores = [12, 33, 6]
const addAll = (a, b, c) => {
    console.log(a + b + c);
};
addAll(...scores); // 51

วิธีการเก่าในการทำเช่นนี้คือการใช้วิธี apply():

let scores = [12, 33, 6]
const addAll = (a, b, c) => {
    console.log(a + b + c);
};
addAll.apply(null, scores); // 51

วิธีแยกสตริงเป็นอักขระโดยใช้ตัวดำเนินการ Spread

สมมติว่าเรามีสตริง เราสามารถใช้ตัวดำเนินการแพร่กระจายเพื่อแยกออกเป็นอักขระได้:

let myString = "freeCodeCamp";
const splitString = [...myString];
console.log(splitString); // ["f","r","e","e","C","o","d","e","C","a","m","p"]

ซึ่งคล้ายกับวิธี split():

let myString = "freeCodeCamp";
const splitString = myString.split('');
console.log(splitString); // ["f","r","e","e","C","o","d","e","C","a","m","p"]

วิธีใช้ตัวดำเนินการส่วนที่เหลือใน JavaScript

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

ไวยากรณ์ของตัวดำเนินการส่วนที่เหลือ

const func = (first, ...rest) => {};

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

const multiplyArgs = (multiplier, ...otherArgs) => {
    return otherArgs.map((number) => {
    return number * multiplier;
    });
};
let multipiedArray = multiplyArgs(6, 5, 7, 9);
console.log(multipiedArray); // [30,42,54]

นี่คือการแสดงที่ดีของตัวดำเนินการส่วนที่เหลือและมูลค่าของมัน:

const multiplyArgs = (multiplier, ...otherArgs) => {
    console.log(multiplier); // 6
    console.log(otherArgs); // [5,7,9]
};
multiplyArgs(6, 5, 7, 9);

หมายเหตุ: พารามิเตอร์ Rest ต้องเป็นพารามิเตอร์ที่เป็นทางการตัวสุดท้าย

const multiplyArgs = (multiplier, ...otherArgs, lastNumber) => {
    console.log(lastNumber); // Uncaught SyntaxError: Rest parameter must be last formal parameter
};
multiplyArgs(6, 5, 7, 9);

ความแตกต่างระหว่างตัวดำเนินการ Spread และ Rest ใน JavaScript

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

เราใช้ตัวดำเนินการแพร่กระจายเพื่อกระจายค่าอาร์เรย์หรือ iterables ลงในอาร์เรย์หรือวัตถุ

ขณะที่เราใช้ตัวดำเนินการ Rest เพื่อรวบรวมองค์ประกอบที่เหลือที่ส่งผ่านไปยังฟังก์ชันเป็นอาร์เรย์

const myFunction = (name1, ...rest) => { // used rest operator here
    console.log(name1);
    console.log(rest);
};
let names = ["John", "Jane", "John", "Joe", "Joel"];
myFunction(...names); // used spread operator here

ขอบคุณสำหรับการอ่านและแสดงความคิดเห็นด้านล่างหากคุณพบปัญหาใด ๆ หรือต้องการแนะนำวิธีที่ดีกว่า