Javascript Array และ Object Methods ที่มีประโยชน์

ฉันฟัง "พอดแคสต์ Syntax FM" ที่ยอดเยี่ยมซึ่งสรุปอาร์เรย์ JavaScript และวิธีการอ็อบเจ็กต์ที่เป็นประโยชน์ วิธีการเหล่านี้ช่วยให้นักพัฒนาเขียนโค้ดที่ชัดเจนและอ่านง่าย วิธีการเหล่านี้จำนวนมากช่วยลดความจำเป็นในการเข้าถึงไลบรารียูทิลิตี้เช่น Lodash

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

.filter()

สร้างอาร์เรย์ใหม่โดยพิจารณาว่ารายการในอาร์เรย์ผ่านเงื่อนไขที่กำหนดหรือไม่

ตัวอย่าง

สร้างอาร์เรย์อายุของนักเรียนที่ตรงกับอายุที่ดื่มสุราตามกฎหมาย

const studentsAge = [17, 16, 18, 19, 21, 17];
const ableToDrink = studentsAge.filter( age => age > 18 );
// ableToDrink will be equal to [19, 21]

.map()

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

ตัวอย่าง

สร้างอาร์เรย์ที่เพิ่ม $ ที่จุดเริ่มต้นของตัวเลขแต่ละตัว

const numbers = [2, 3, 4, 5];
const dollars = numbers.map( number => '$' + number);
// dollars will be equal to ['$2', '$3', '$4', '$5']

.reduce()

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

ตัวอย่าง

เพิ่มจำนวนเต็มในอาร์เรย์

const numbers = [5, 10, 15];
const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue);
// total will be equal to 30

มีกรณีการใช้งานที่ยอดเยี่ยมสำหรับ .reduce() ที่ระบุไว้ในเอกสาร MDN ที่ให้ตัวอย่างเกี่ยวกับวิธีการทำสิ่งต่างๆ เช่น การทำให้อาร์เรย์ของอาร์เรย์เรียบขึ้น การจัดกลุ่มวัตถุตามคุณสมบัติ และการลบรายการที่ซ้ำกันในอาร์เรย์

.forEach()

ใช้ฟังก์ชันกับแต่ละรายการในอาร์เรย์

ตัวอย่าง

บันทึกแต่ละรายการอาร์เรย์ไปยังคอนโซล

const emotions = ['happy', 'sad', 'angry'];
emotions.forEach( emotion => console.log(emotion) );
// Will log the following:
// 'happy'
// 'sad'
// 'angry'

.some()

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

ตัวอย่าง

ตรวจสอบว่ามี 'admin' อย่างน้อยหนึ่งตัวในอาร์เรย์หรือไม่

const userPrivileges = ['user', 'user', 'user', 'admin'];
const containsAdmin = userPrivileges.some( element => element === 'admin');
// containsAdmin will be equal to true

.every()

คล้ายกับ .some() แต่ตรวจสอบว่ารายการทั้งหมดในอาร์เรย์ผ่านเงื่อนไขหรือไม่

ตัวอย่าง

ตรวจสอบว่าการให้คะแนนทั้งหมดเท่ากับหรือมากกว่า 3 ดาวหรือไม่

const ratings = [3, 5, 4, 3, 5];
const goodOverallRating = ratings.every( rating => rating >= 3 );
// goodOverallRating will be equal to true

.includes()

ตรวจสอบว่าอาร์เรย์มีค่าที่แน่นอนหรือไม่ คล้ายกับ .some() แต่แทนที่จะค้นหาเงื่อนไขที่จะผ่าน จะดูว่าอาร์เรย์มีค่าเฉพาะหรือไม่

ตัวอย่าง

ตรวจสอบว่าอาร์เรย์มีรายการที่มีสตริง ‘waldo’ หรือไม่

const names = ['sophie', 'george', 'waldo', 'stephen', 'henry'];
const includesWaldo = names.includes('waldo');
// includesWaldo will be equal to true

Array.from()

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

ตัวอย่าง

สร้างอาร์เรย์จากสตริง

const newArray = Array.from('hello');
// newArray will be equal to ['h', 'e', 'l', 'l', 'o']

สร้างอาร์เรย์ที่มีค่าสองเท่าสำหรับแต่ละรายการในอาร์เรย์อื่น

const doubledValues = Array.from([2, 4, 6], number => number * 2);
// doubleValues will be equal to [4, 8, 12]

Object.values()

ส่งกลับอาร์เรย์ของค่าของวัตถุ

ตัวอย่าง

const icecreamColors = {
    chocolate: 'brown',
    vanilla: 'white',
    strawberry: 'red',
}

const colors = Object.values(icecreamColors);
// colors will be equal to ["brown", "white", "red"]

Object.keys()

ส่งกลับอาร์เรย์ของคีย์ของวัตถุ

ตัวอย่าง

const icecreamColors = {
  chocolate: 'brown',
  vanilla: 'white',
  strawberry: 'red',
}

const types = Object.keys(icecreamColors);
// types will be equal to ["chocolate", "vanilla", "strawberry"]

Object.entries()

สร้างอาร์เรย์ซึ่งประกอบด้วยอาร์เรย์ของคู่คีย์/ค่าของออบเจ็กต์

ตัวอย่าง

const weather = {
  rain: 0,
  temperature: 24,
  humidity: 33,
}

const entries = Object.entries(weather);
// entries will be equal to
// [['rain', 0], ['temperature', 24], ['humidity', 33]]

การแพร่กระจายอาร์เรย์

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

ตัวอย่าง

รวมสองอาร์เรย์เข้าด้วยกัน

const spreadableOne = [1, 2, 3, 4];
const spreadableTwo = [5, 6, 7, 8];

const combined = [...spreadableOne, ...spreadableTwo];
// combined will be equal to [1, 2, 3, 4, 5, 6, 7, 8]

ลบองค์ประกอบอาร์เรย์โดยไม่ต้องเปลี่ยนอาร์เรย์เดิม

const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat'];
const mammals = [...animals.slice(0,3), ...animals.slice(4)];
// mammals will be equal to ['squirrel', 'bear', 'deer', 'rat']

การแพร่กระจายของวัตถุ

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

ตัวอย่าง

เพิ่มคุณสมบัติและค่าของวัตถุใหม่โดยไม่ต้องเปลี่ยนวัตถุต้นฉบับ

const spreadableObject = {
  name: 'Robert',
  phone: 'iPhone'
};

const newObject = {
  ...spreadableObject,
  carModel: 'Volkswagen'
}
// newObject will be equal to
// { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' }

ฟังก์ชั่นที่เหลือ

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

ตัวอย่าง

แสดงอาร์เรย์ของอาร์กิวเมนต์ที่ส่งผ่าน

function displayArgumentsArray(...theArguments) {
  console.log(theArguments);
}

displayArgumentsArray('hi', 'there', 'bud');
// Will print ['hi', 'there', 'bud']

Object.freeze()

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

ตัวอย่าง

ตรึงวัตถุเพื่อป้องกันไม่ให้คุณสมบัติ name มีการเปลี่ยนแปลง

const frozenObject = {
  name: 'Robert'
}

Object.freeze(frozenObject);

frozenObject.name = 'Henry';
// frozenObject will be equal to { name: 'Robert' }

Object.seal()

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

ตัวอย่าง

ปิดผนึกวัตถุเพื่อป้องกันไม่ให้มีการเพิ่มคุณสมบัติ wearsWatch

const sealedObject = {
  name: 'Robert'
}

Object.seal(sealedObject);

sealedObject.name = 'Bob';
sealedObject.wearsWatch = true;
// sealedObject will be equal to { name: 'Bob' }

Object.assign()

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

ตัวอย่าง

รวมสองวัตถุเป็นหนึ่งเดียว

const firstObject = {
  firstName: 'Robert'
}

const secondObject = {
  lastName: 'Cooper'
}

const combinedObject = Object.assign(firstObject, secondObject);
// combinedObject will be equal to { firstName: 'Robert', lastName: 'Cooper' }

หากคุณพบว่าบทความนี้น่าสนใจและการพัฒนาส่วนหน้าสนใจ ลองติดตามฉันที่ Twitter, Github หรือ LinkedIn .

✉️ สมัครสมาชิกCodeBurst'sสัปดาห์ละครั้ง Email Blast,🐦 ติดตามCodeBurstบน Twitter ดู🗺️ แผนงานนักพัฒนาเว็บปี 2018 และ🕸️ เรียนรู้การพัฒนาเว็บแบบ Full Stack .