เคล็ดลับอาร์เรย์ JavaScript 13 ข้อที่คุณควรรู้

Nov 26 2022

อาร์เรย์เป็นหนึ่งในแนวคิดทั่วไปของ Javascript ซึ่งทำให้เรามีโอกาสมากมายในการทำงานกับข้อมูลที่เก็บไว้ภายใน เมื่อพิจารณาว่าอาร์เรย์เป็นหนึ่งในหัวข้อพื้นฐานที่สุดใน Javascript ซึ่งคุณเรียนรู้เกี่ยวกับจุดเริ่มต้นของเส้นทางการเขียนโปรแกรมของคุณ ในบทความนี้ ผมอยากจะแสดงให้คุณเห็นเทคนิคเล็กๆ น้อยๆ ที่คุณอาจไม่รู้และอาจมีประโยชน์มาก มีประโยชน์ในการเข้ารหัส! มาเริ่มกันเลย.

1. ลบรายการที่ซ้ำกันออกจากอาร์เรย์

เป็นคำถามสัมภาษณ์ยอดนิยมเกี่ยวกับอาร์เรย์ Javascript วิธีแยกค่าเฉพาะจากอาร์เรย์ Javascript นี่คือวิธีแก้ปัญหาที่ง่ายและรวดเร็วสำหรับปัญหานี้ คุณสามารถใช้ New Set() เพื่อจุดประสงค์นี้ได้ และฉันอยากจะแสดงให้คุณเห็นสองวิธีที่เป็นไปได้ วิธีแรกคือวิธี .from() และวิธีที่สองด้วยตัวดำเนินการสเปรด (…)

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

// First method
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // returns ["banana", "apple", "orange", "watermelon", "grape"]
// Second method
var uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2); // returns ["banana", "apple", "orange", "watermelon", "grape"]

บางครั้งจำเป็นต้องแทนที่ค่าเฉพาะในอาร์เรย์ในขณะที่สร้างโค้ด และยังมีวิธีการสั้นๆ ที่ดีในการทำเช่นนั้นซึ่งคุณอาจยังไม่รู้ สำหรับสิ่งนี้ เราอาจใช้ .splice(start, value to remove, valueToAdd) และส่งพารามิเตอร์ทั้งสามไปที่นั่นเพื่อระบุตำแหน่งที่เราต้องการเริ่มแก้ไข จำนวนค่าที่เราต้องการเปลี่ยน และค่าใหม่

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]

ทุกคนคงรู้จัก .map() วิธีการของอาร์เรย์ แต่มีวิธีแก้ปัญหาอื่นที่อาจใช้เพื่อให้ได้เอฟเฟกต์ที่คล้ายกันและโค้ดที่สะอาดมากเช่นกัน เราสามารถใช้เมธอด .from() เพื่อจุดประสงค์นี้

var friends = [
    { name: ‘John’, age: 22 },
    { name: ‘Peter’, age: 23 },
    { name: ‘Mark’, age: 24 },
    { name: ‘Maria’, age: 22 },
    { name: ‘Monica’, age: 21 },
    { name: ‘Martha’, age: 19 },
]

var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns ["John", "Peter", "Mark", "Maria", "Monica", "Martha"]

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

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

fruits.length = 0;
console.log(fruits); // returns []

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

var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

มีบางสถานการณ์เมื่อเราสร้างอาร์เรย์ และเราต้องการเติมข้อมูลบางส่วน หรือเราต้องการอาร์เรย์ที่มีค่าเท่ากัน และในกรณีนี้ เมธอด .fill() มาพร้อมกับวิธีแก้ปัญหาที่ง่ายและสะอาด

var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

คุณรู้วิธีผสานอาร์เรย์เป็นอาร์เรย์เดียวโดยไม่ใช้ .concat() เมธอดหรือไม่? มีวิธีง่ายๆ ในการรวมอาร์เรย์จำนวนเท่าใดก็ได้ให้เป็นหนึ่งเดียวในโค้ดบรรทัดเดียว ดังที่คุณอาจทราบอยู่แล้วว่าตัวดำเนินการสเปรด (…) ค่อนข้างมีประโยชน์ในขณะที่ทำงานกับอาร์เรย์ และในกรณีนี้ก็เช่นเดียวกัน

var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]

นอกจากนี้ยังเป็นหนึ่งในความท้าทายที่ได้รับความนิยมมากที่สุดซึ่งคุณสามารถเผชิญได้ในการสัมภาษณ์ Javascript เพราะมันแสดงให้เห็นว่าคุณสามารถใช้วิธีการแบบอาร์เรย์ได้หรือไม่ และอะไรคือตรรกะของคุณ ในการหาจุดตัดของสองอาร์เรย์ เราจะใช้วิธีใดวิธีหนึ่งที่แสดงก่อนหน้านี้ในบทความนี้ เพื่อให้แน่ใจว่าค่าในอาร์เรย์ที่เรากำลังตรวจสอบนั้นไม่ซ้ำกัน และเราจะใช้เมธอด .filter และ .includes ผลลัพธ์คือเราจะได้อาร์เรย์ที่มีค่าที่แสดงอยู่ในอาร์เรย์ทั้งสอง ตรวจสอบรหัส:

var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]

ก่อนอื่นมากำหนดค่าเท็จ ใน Javascript ค่าเท็จคือ เท็จ, 0, „”, null, NaN, ไม่ได้กำหนด ตอนนี้เราสามารถหาวิธีลบค่าเหล่านี้ออกจากอาร์เรย์ของเรา เพื่อให้บรรลุเป้าหมายนี้ เราจะใช้เมธอด .filter()

var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]

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

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]

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

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse();
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]

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

var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9

ความท้าทายอีกอย่างหนึ่งที่เกิดขึ้นบ่อยมากระหว่างการสัมภาษณ์ Javascript Engineer ไม่มีอะไรน่ากลัวมาที่นี่ สามารถแก้ไขได้โดยใช้วิธี .reduce ในโค้ดหนึ่งบรรทัด ลองตรวจสอบรหัส:

var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14

เพิ่มระดับการเข้ารหัส

ขอบคุณที่เป็นส่วนหนึ่งของชุมชนของเรา! ก่อนที่คุณจะไป: