เคล็ดลับ JavaScript — เติมค่าอาร์เรย์ การตรวจสอบการมีอยู่ และอื่นๆ

เช่นเดียวกับแอปทุกประเภท มีปัญหาที่ยากในการแก้ไขเมื่อเราเขียนแอปสำหรับ JavaScript ในบทความนี้ เราจะดูวิธีแก้ไขปัญหาทั่วไปของ JavaScript

วิธีที่มีประสิทธิภาพที่สุดในการเพิ่มค่าให้กับอาร์เรย์

เราสามารถเพิ่มค่าให้กับอาร์เรย์ได้โดยใช้เมธอด unshift

ตัวอย่างเช่น เราสามารถเขียนได้ว่า:

const a = ['foo', 'bar', 'baz'];
a.unshift('qux');

จากนั้น a ก็คือ [“qux”, “foo”, “bar”, “baz”]

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

ตัวอย่างเช่น เราสามารถเขียนได้ว่า:

const a = ['foo', 'bar', 'baz'];
const b = ['qux', ...a];

จากนั้น b คือ [“qux”, “foo”, “bar”, “baz”]

ฉันจะตรวจสอบได้อย่างไรว่าอาร์เรย์มีสตริงหรือไม่

เราสามารถตรวจสอบได้ว่าอาร์เรย์มีสตริงที่มีเมธอด includes หรือ indexOf หรือไม่

ตัวอย่างเช่น เราสามารถเขียนได้ว่า:

arr.indexOf('foo') > -1

or:

arr.includes('foo')

เพื่อตรวจสอบว่า arr มีสตริง 'foo' หรือไม่

indexOf ส่งคืน -1 หากองค์ประกอบไม่อยู่ในอาร์เรย์และดัชนีเป็นอย่างอื่น

includes ส่งคืน true หากองค์ประกอบอยู่ในอาร์เรย์และ false มิฉะนั้น

หากเรามีอาร์เรย์ของวัตถุ เราก็สามารถใช้ find , some หรือ filter

ตัวอย่างเช่น หากเรามี:

const arr = [{ name: 'foo' }, { name : 'bar' }, { name: 'baz' }];

จากนั้นเราก็สามารถเขียนได้ว่า:

arr.find(a => a.name === 'bar')

เพื่อค้นหาองค์ประกอบแรกใน arr ที่มีคุณสมบัติ name เท่ากับ 'bar'

มันจะส่งคืนองค์ประกอบหากมีอยู่และ undefined มิฉะนั้น

นอกจากนี้ เราสามารถโทร some เพื่อตรวจสอบแบบเดียวกันได้:

arr.some(a => a.name === 'bar')

some ส่งคืน true หากตรงตามเงื่อนไข และ false มิฉะนั้น

เรายังสามารถใช้ filter :

arr.filter(a => a.name === 'bar')

มันจะส่งคืนอาร์เรย์พร้อมกับรายการที่ตรงตามเงื่อนไขหากมีองค์ประกอบเหล่านั้นอยู่และอาร์เรย์ว่างมิฉะนั้น

แสดง “คุณแน่ใจหรือไม่ว่าต้องการออกจากหน้านี้” ข้อความเมื่อมีการเปลี่ยนแปลงเกิดขึ้น

หากต้องการแสดงข้อความก่อนที่ผู้ใช้จะออกจากเพจ เราสามารถฟังเหตุการณ์ beforeunload ได้

ตัวอย่างเช่น เราสามารถเขียนได้ว่า:

window.onbeforeunload = () => {
  return true;
}

จากนั้นเราควรเห็นกล่องยืนยันที่ถามผู้ใช้ว่าต้องการออกจากหน้าหรือไม่

เราส่งคืน true เนื่องจากข้อความที่กำหนดเองใดๆ จะถูกละเว้นและข้อความของเบราว์เซอร์เองจะปรากฏขึ้น

ตัวอย่างเช่นใน Chrome จะแสดงข้อความ "การเปลี่ยนแปลงที่คุณทำอาจไม่ได้รับการบันทึก"

ค้นหาความกว้างของ div โดยใช้ Vanilla JavaScript

หากต้องการค้นหาความกว้างของ div โดยใช้ JavaScript ธรรมดา เราสามารถใช้คุณสมบัติ offsetWidth เพื่อทำสิ่งนั้น

ตัวอย่างเช่น เราสามารถเขียนได้ว่า:

document.getElementById("div").offsetWidth

ความกว้างรวมถึงเส้นขอบด้วย

หากเราไม่ต้องการรวมความกว้างของเส้นขอบ เราสามารถเขียนได้:

document.getElementById("div").clientWidth;

และเราจะได้รับความกว้างที่กำหนดด้วย:

getComputedStyle(document.getElementById("div")).width;

แสดงกล่องโต้ตอบการยืนยันเมื่อคลิกที่ลิงก์ ‹a›

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

ตัวอย่างเช่น กำหนดโค้ด HTML ต่อไปนี้:

<a class="confirmation">Link</a>

จากนั้นเราก็สามารถเขียนได้ว่า:

const confirmation = document.querySelector('.confirmation');
const onClick = (e) => {
  if (!confirm('Are you sure?')){
    e.preventDefault();
  }
};
confirmation.addEventListener('click', onClick, false);

เราเรียก addEventListener เพื่อแนบ Listener onClick เข้ากับองค์ประกอบจุดยึดของเรา

ในฟังก์ชัน Listener เราจะแสดงกล่องโต้ตอบยืนยันด้วย confirm

จากนั้นผู้ใช้คลิกยกเลิก จากนั้นเราจะเรียก preventDefault() เพื่อหยุดการกระทำที่เป็นค่าเริ่มต้น

ตรวจสอบว่า Type เป็น Boolean หรือไม่

เราสามารถตรวจสอบได้ว่าตัวแปรเป็นบูลีนด้วยตัวดำเนินการ typeof หรือไม่

ตัวอย่างเช่น เราสามารถเขียนได้ว่า:

typeof variable === "boolean"

ตอนนี้เราตรวจสอบว่า variable เป็นบูลีนด้วยหรือไม่

ปิดการใช้งานการคลิกบนแท็ก

หากต้องการปิดใช้งานการคลิกบนแท็กด้วย JavaScript เราสามารถตั้งค่า href ด้วยโค้ด JavaScript เพื่อปิดใช้งานการคลิก

ตัวอย่างเช่น เราสามารถเขียนได้ว่า:

<a href="javascript:() => { return false; }">disabled link</a>

or:

<a href="/" onclick="return false;">disabled link</a>

or:

<a href="javascript:void(0)">disabled link</a>

void ส่งคืน undefined เสมอ

โค้ดทั้ง 3 ชิ้นทำสิ่งเดียวกัน

บทสรุป

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