ข้อมูลโค้ด JavaScript สำหรับปัญหาทั่วไป

แก้ไขล่าสุดเมื่อ 27 กรกฎาคม 2021

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

มีบางครั้งที่โปรแกรมเมอร์และผู้เขียนโค้ดมีปัญหาซ้ำซากจำเจซึ่งเราต้องการข้อมูลโค้ดอย่างง่าย ในบล็อกนี้ ฉันจะนำเสนอปัญหาทั่วไปที่สามารถแก้ไขได้ง่ายโดยใช้สคริปต์ ES6 ซึ่งเป็นส่วนหนึ่งของข้อมูลโค้ด JavaScript

เคล็ดลับข้อมูลโค้ด JavaScript: ใช้ 'let' แทน 'var'

ให้ เป็นเหมือน var แต่ ให้ มีขอบเขต ให้ สามารถเข้าถึงได้เฉพาะในระดับขอบเขตบล็อกที่มีการประกาศและกำหนดค่า var สามารถเข้าถึงได้ในทุกระดับเกี่ยวกับขอบเขตของบล็อกที่กำหนดไว้ ในตัวอย่างต่อไปนี้ ตัวแปร 'num1' ถูกกำหนดไว้ในคำสั่ง If ดังนั้นจึงไม่สามารถเข้าถึงได้นอกฟังก์ชัน

 ถ้าเป็นจริง) {
  ให้ num1 = 40;
}

ให้ num2 = 20;

console.log (num2, num1);
console.log(num1);

เอาท์พุท:
20
ไม่ได้กำหนด

 ให้ = 25;
ให้ b = 50;

ถ้าเป็นจริง) {
  ให้ = 100;
  วาร์ค = 5;
  console.log(a/c);
  console.log(b/c);
}

console.log(c);
console.log (ก);

เอาท์พุท:
20
10
5
25

ใช้ 'const' เมื่อค่าตัวแปรไม่เปลี่ยนแปลง

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

ฟังก์ชันลูกศรของ JavaScript Code Snippet ซึ่งเป็นไวยากรณ์ใหม่สำหรับ Functions

ฟังก์ชันของข้อมูลโค้ด JavaScript ใน ES6 ได้เปลี่ยนเป็นนิพจน์ที่ง่ายกว่า '() => {}'

 // ไวยากรณ์เก่า
ฟังก์ชัน myHello() {
  console.log("สวัสดีชาวโลก..!");
}

// ไวยากรณ์ใหม่
var myHello = () => {
  console.log("สวัสดีชาวโลก..!");
}

ไวยากรณ์ใหม่อาจทำให้สับสนเล็กน้อยในตอนแรก ไวยากรณ์มีสองส่วน

 var myHello = ()

ส่วนแรกของ JavaScript Code Snippet ประกาศตัวแปรและกำหนดฟังก์ชัน () ให้กับตัวแปร มันบอกว่าตัวแปรเป็นฟังก์ชัน

 => {//ทำอะไรบางอย่าง} 

ส่วนที่สองประกาศส่วนของร่างกายของฟังก์ชัน ส่วนลูกศรที่มีวงเล็บปีกกากำหนดส่วนของร่างกาย

ตัวอย่างอื่นๆ แต่มีพารามิเตอร์

 ให้ withParameters = (a, b) => {
  console.log(a+b);
}

ด้วยพารามิเตอร์ (10, 20);

เอาท์พุท:
30

 ให้ sumOfNum = (a, b = 10) => {
  ส่งคืน a + b;
}

console.log (sumOfNum (20);
console.log(ผลรวม(20,30);

เอาท์พุท:
30
50

ใหม่' สำหรับ…ของ…' ลูป

for…of คล้ายกับ for…in โดยมีการดัดแปลงเล็กน้อย สำหรับ...ของการ วนซ้ำผ่านรายการองค์ประกอบ เช่น Array และส่งคืนองค์ประกอบ (ไม่ใช่ดัชนี) ทีละรายการ โปรดทราบว่าตัวแปร 'num' จะส่งออกแต่ละองค์ประกอบในอาร์เรย์ ไม่ใช่ดัชนี

 ให้ตัวเลข = [5,6,7,8];

สำหรับ (ให้จำนวนตัวเลข) {
  console.log(ค่า);
}

เอาท์พุท:
5
6
7
8

 ให้ str = 'อาร์ตูโร';

สำหรับ (ให้ถ่านของ str) {
  console.log (ถ่าน);
}

เอาท์พุท:
อา
r
t
ยู
r
o

การทำลายการกำหนดตัวแปร

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

 ให้โปรไฟล์ = ['John', 32, 'engineer'];

ให้ [ชื่อ, อายุ, งาน] = โปรไฟล์;

console.log (ชื่อ);

เอาท์พุท:
จอห์น

ค้นหาวัตถุเฉพาะในอาร์เรย์ของวัตถุ

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

 ให้พนักงาน = [
  { id: 0, ชื่อ: 'นีน่า' },
  { id: 1 ชื่อ: 'เควิน' },
  { รหัส: 2 ชื่อ: 'จอห์น' }
]

ให้พนักงาน = staff.find(emp => emp.name === 'John');

console.log (ไคลเอนต์);

เอาท์พุท:
{ รหัส: 2 ชื่อ: 'จอห์น' }

วนรอบคีย์อ็อบเจ็กต์และค่า

โครงสร้างข้อมูลของเราอาจเป็นออบเจ็กต์ที่ซับซ้อนซึ่งมีคู่คีย์/ค่าต่างๆ การวนซ้ำแต่ละคู่อาจดูแปลกๆ เล็กน้อย แต่มันตรงไปตรงมาเมื่อเราได้ใช้ฟังก์ชันของ Object

หลังจากที่คีย์ของ Object ถูกคว้าแล้ว เราสามารถวนซ้ำผ่านคีย์และค่าต่างๆ ได้พร้อมกัน ในการแก้ปัญหาที่ตามมา เราเข้าถึงแต่ละคู่โดยใช้ตัวแปรคีย์และค่าระหว่างลูป

 ให้ myObject = { ปีเตอร์: 15, จอห์น: 20, แอน: 35 };

Object.keys(myObject).forEach((คีย์, ค่า) => {
  //...ทำอะไรสักอย่าง
  console.log (คีย์, ค่า);
});

เอาท์พุท:
ปีเตอร์ 15
จอห์น 20
แอน 35

กรองอาร์เรย์ของวัตถุตามเงื่อนไข

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

 ให้ที่ตั้ง = [
  "ไฟล์/ข้อมูล1/ไฟล์",
  "ไฟล์/data1/file2",
  "ไฟล์/ข้อมูล2/ไฟล์",
  "ไฟล์/data2/file2"
];

ให้ filter = location.filter(path => path.includes('data2'));

console.log (ตัวกรอง);

เอาท์พุท:
[ 'files/dir2/file', 'files/dir2/file2' ]

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

กำหนดคีย์ให้กับวัตถุที่มีชื่อเดียวกัน

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

 ให้ชื่อ = 'จอห์น';
ให้อายุ = 32;
ให้งาน = 'วิศวกร';

// แทนสิ่งนี้
ให้ profile1 = { ชื่อ: ชื่อ, อายุ: อายุ, งาน: งาน };

// ทำเช่นนี้
ให้ profile2 = { ชื่อ, อายุ, งาน };

console.log (profile2);

เอาท์พุท:
{ ชื่อ: 'จอห์น' อายุ: 32 อาชีพ: 'วิศวกร' }

การใช้ตัวดำเนินการกระจาย ES6 '…'

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

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

 ให้ตัวเลข 1 = [1,2,3,4,5];

console.log(...numbers1);

เอาท์พุท:
1 2 3 4 5

ตัวอย่างที่สองรวมเนื้อหาของสองอาร์เรย์โดยการสร้างอาร์เรย์ชั่วคราวใหม่ที่มีเนื้อหาทั้งสอง

 ให้ตัวเลข2 = [6,7,8,9,10];

ให้รวมกัน = [...numbers1, ...numbers2];

console.log(...รวมกัน);

เอาท์พุท:
1 2 3 4 5 6 7 8 9 10

ตัวอย่างสุดท้ายแสดงให้เห็นว่าตัวดำเนินการ spread สามารถเปลี่ยนอาร์เรย์เป็นรายการอาร์กิวเมนต์ของฟังก์ชันได้อย่างไร Math.max ส่งคืนค่าจำนวนสูงสุดในรายการอาร์กิวเมนต์ที่ส่งไป หนึ่งในข้อโต้แย้งเหล่านั้นคือ 10 ซึ่งสูงที่สุด

 ให้ตัวเลข 1 = [1,2,3,4,5];

ให้ตัวเลข2 = [6,7,8,9,10];

ให้รวมกัน = [...numbers1, ...numbers2];

console.log(Math.max(...รวมกัน));

เอาท์พุท:
10

ฟังก์ชัน Getters และ Setters ใหม่

Getters และ setters เป็นหนึ่งในคุณสมบัติที่มีประโยชน์ที่นำมาใช้ใน ES6 มันมีประโยชน์ถ้าเราใช้คลาสใน JavaScript

 ชื่อบุคคลในชั้นเรียน {
  ตัวสร้าง (ชื่อ) {
    this.name = ชื่อ;
  }
  รับชื่อ () {
    ส่งคืน this.name;
  }
  ตั้งชื่อ (ชื่อ) {
    this.name = ชื่อ;
  }
}

ให้คน = ชื่อบุคคลใหม่ ("จอน สโนว์");
console.log(person.Name); // (เอ)

person.Name = "ดานี่"; // (ข)
console.log(person.Name);

เอาท์พุท:
จอน สโนว์
Dany

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