โปรโฮสต์ > บล็อก > ข่าวทางอินเทอร์เน็ต > 12 เคล็ดลับ JavaScript ที่บทช่วยสอนส่วนใหญ่พลาด

12 เคล็ดลับ JavaScript ที่บทช่วยสอนส่วนใหญ่พลาด

12 เคล็ดลับ JavaScript ที่บทช่วยสอนส่วนใหญ่พลาด

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

ในบทความนี้ ฉันจะแสดง 12 วิธีที่ยอดเยี่ยมในการปรับปรุงและเพิ่มความเร็วโค้ด JavaScript ของคุณ ในกรณีส่วนใหญ่เป็นแบบสากล

เราเตือนคุณ: สำหรับผู้อ่าน "Habr" ทุกคน - ส่วนลด 10 rubles เมื่อลงทะเบียนในหลักสูตร Skillbox ใด ๆ โดยใช้รหัสส่งเสริมการขาย "Habr"

Skillbox แนะนำ: หลักสูตรภาคปฏิบัติ "นักพัฒนามือถือ PRO".

การกรองค่าที่ไม่ซ้ำ

อาร์เรย์

ประเภทวัตถุ Set เปิดตัวใน ES6 พร้อมด้วย... ตัวดำเนินการแพร่กระจาย เราสามารถใช้มันเพื่อสร้างอาร์เรย์ใหม่ที่มีค่าเฉพาะเท่านั้น

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Result: [1, 2, 3, 5]

ในสถานการณ์ปกติ จำเป็นต้องใช้โค้ดมากกว่านี้มากในการดำเนินการเดียวกัน

เทคนิคนี้ใช้ได้กับอาร์เรย์ที่มีประเภทพื้นฐาน: undefinition, null, boolean, string และ number หากคุณกำลังทำงานกับอาร์เรย์ที่มีวัตถุ ฟังก์ชัน หรืออาร์เรย์เพิ่มเติม คุณจะต้องใช้แนวทางที่แตกต่างออกไป

ความยาวของอาร์เรย์แคชเป็นรอบ

วงจร

เมื่อคุณเรียนรู้เรื่องลูป คุณจะต้องปฏิบัติตามขั้นตอนมาตรฐาน:

for (let i = 0; i < array.length; i++){
  console.log(i);
}

อย่างไรก็ตาม ด้วยไวยากรณ์นี้ for loop จะตรวจสอบความยาวของอาร์เรย์ซ้ำๆ ในแต่ละครั้ง

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

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

โดยหลักการแล้ว เกือบจะเหมือนกับข้างต้น แต่การเพิ่มขนาดลูปจะช่วยประหยัดเวลาได้มาก

พิกัดการลัดวงจร (พิกัด McCarthy)

ผู้ประกอบการที่มีเงื่อนไข

ตัวดำเนินการแบบไตรภาคเป็นวิธีที่รวดเร็วและมีประสิทธิภาพในการเขียนคำสั่งแบบมีเงื่อนไขง่ายๆ (และบางครั้งก็ไม่ง่ายนัก):

x>100? “มากกว่า 100”: “น้อยกว่า 100”;
x>100? (x>200? "มากกว่า 200": "ระหว่าง 100-200"): "น้อยกว่า 100";

แต่บางครั้งแม้แต่ตัวดำเนินการที่ประกอบด้วยสามก็มีความซับซ้อนเกินความจำเป็น เราสามารถใช้ 'และ' && และ 'หรือ' แทน || ได้ ตัวดำเนินการบูลีนเพื่อประเมินนิพจน์บางอย่างด้วยวิธีที่กระชับยิ่งขึ้น มักเรียกว่า "ไฟฟ้าลัดวงจร" หรือ "พิกัดไฟฟ้าลัดวงจร"

Какэтоработает

สมมติว่าเราต้องการส่งกลับเงื่อนไขใดเงื่อนไขหนึ่งจากสองเงื่อนไขขึ้นไป

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

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
 
console.log(0 && null); // Result: 0

การใช้ || จะส่งกลับค่าจริงแรก หากตัวถูกดำเนินการแต่ละตัวประเมินเป็นเท็จ ค่าที่ประเมินล่าสุดจะถูกส่งกลับ

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
 
console.log(0 || null); // Result: null

1 ตัวอย่าง

สมมติว่าเราต้องการส่งกลับความยาวของตัวแปร แต่เราไม่ทราบประเภทของตัวแปร

ในกรณีนี้ คุณสามารถใช้ if/else เพื่อตรวจสอบว่า foo เป็นประเภทที่ถูกต้อง แต่วิธีนี้อาจยาวเกินไป ดังนั้นจึงควรใช้ "ไฟฟ้าลัดวงจร" ของเรา

return (foo || []).length;

หากตัวแปร foo มีความยาวที่เหมาะสม ค่านั้นจะถูกส่งกลับ ไม่เช่นนั้นเราจะได้ 0

2 ตัวอย่าง

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

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

ขึ้นอยู่กับตำแหน่งที่เราใช้ การเรียก this.state.data อาจทำให้แอปพลิเคชันไม่สามารถเริ่มทำงานได้ ในการแก้ปัญหา เราสามารถสรุปสิ่งนี้ด้วยนิพจน์แบบมีเงื่อนไข:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

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

return (this.state.data || 'Fetching Data');

เราไม่สามารถเปลี่ยนรหัสด้านบนเพื่อใช้ && ตัวดำเนินการ 'การดึงข้อมูล' && this.state.data จะส่งคืน this.state.data ไม่ว่าจะไม่ได้กำหนดไว้หรือไม่ก็ตาม

ห่วงโซ่เสริม

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

ตัวอย่างเช่น เราสามารถปรับโครงสร้างตัวอย่างด้านบนใหม่เพื่อรับ this.state.data?..() นั่นคือข้อมูลจะถูกส่งกลับก็ต่อเมื่อค่าไม่เป็นโมฆะ

หรือหากเป็นเรื่องสำคัญว่าจะกำหนด state หรือไม่ เราก็สามารถส่งคืน this.state?.data

แปลงเป็นบูลีน

การแปลงประเภท

นอกเหนือจากฟังก์ชันบูลีนปกติจริงและเท็จแล้ว JavaScript ยังถือว่าค่าอื่นๆ ทั้งหมดเป็นความจริงหรือเท็จ

จนกว่าจะระบุไว้เป็นอย่างอื่น ค่าทั้งหมดใน JavaScript นั้นเป็นความจริง ยกเว้น 0, "", null, ไม่ได้กำหนด, NaN และแน่นอนเป็นเท็จ หลังเป็นเท็จ

เราสามารถสลับระหว่างทั้งสองได้อย่างง่ายดายโดยใช้ตัวดำเนินการ ! ซึ่งจะแปลงประเภทเป็นบูลีนด้วย

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"

แปลงเป็นสตริง

การแปลงประเภท

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

const val = 1 + "";
 
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

แปลงเป็นจำนวนเต็ม

การแปลงประเภท

เราทำการแปลงกลับแบบนี้

let int = "15";
int = +int;
 
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

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

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

อาจมีสถานการณ์ที่ + จะถูกตีความว่าเป็นตัวดำเนินการต่อข้อมูลแทนที่จะเป็นตัวดำเนินการบวก เพื่อหลีกเลี่ยงปัญหานี้ คุณควรใช้เครื่องหมายตัวหนอน: ~~ โอเปอเรเตอร์นี้เทียบเท่ากับ -n-1 ตัวอย่างเช่น ~15 เท่ากับ -16

การใช้เครื่องหมายตัวหนอนสองตัวติดต่อกันจะทำให้การดำเนินการเป็นโมฆะ เนื่องจาก - (- - n - 1) - 1 = n + 1 - 1 = n กล่าวอีกนัยหนึ่ง ~-16 เท่ากับ 15

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

<Quick Powers

การดำเนินงาน

เริ่มต้นใน ES7 คุณสามารถใช้ตัวดำเนินการยกกำลัง ** เป็นตัวย่อสำหรับกำลัง ซึ่งเร็วกว่าการใช้ Math.pow(2, 3) มาก ดูเหมือนง่าย แต่ประเด็นนี้รวมอยู่ในรายการเทคนิคเนื่องจากไม่ได้กล่าวถึงทุกที่

console.log(2 ** 3); // Result: 8

ไม่ควรสับสนกับสัญลักษณ์ ^ ซึ่งมักใช้สำหรับการยกกำลัง แต่ใน JavaScript นี่คือตัวดำเนินการ XOR

ก่อน ES7 นั้น ** ทางลัดสามารถใช้ได้เฉพาะกับกำลังของฐาน 2 โดยใช้ตัวดำเนินการเลื่อนไปทางซ้ายระดับบิต <<:

Math.pow(2, n);
2 << (n - 1);
2**n;

ตัวอย่างเช่น 2 << 3 = 16 เท่ากับ 2 ** 4 = 16

ลอยเป็นจำนวนเต็ม

การดำเนินการ / การแปลงประเภท

หากคุณต้องการแปลงทศนิยมให้เป็นจำนวนเต็ม คุณสามารถใช้ Math.floor(), Math.ceil() หรือ Math.round() แต่มีวิธีที่เร็วกว่านั้น เราใช้ | นั่นคือตัวดำเนินการ OR

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

พฤติกรรม | ขึ้นอยู่กับว่าคุณกำลังจัดการกับจำนวนบวกหรือลบ ดังนั้นวิธีนี้จึงเหมาะเฉพาะเมื่อคุณมั่นใจในสิ่งที่คุณกำลังทำอยู่

n | 0 จะลบทุกอย่างที่อยู่หลังตัวคั่นทศนิยม โดยตัดทศนิยมให้เป็นจำนวนเต็ม

คุณสามารถรับเอฟเฟกต์การปัดเศษแบบเดียวกันได้โดยใช้ ~~ หลังจากที่บังคับแปลงเป็นจำนวนเต็มแล้ว ค่ายังคงไม่เปลี่ยนแปลง

การลบตัวเลขต่อท้าย

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

let str = "1553";
Number(str.substring(0, str.length - 1));

แต่เราเพียงเขียนว่า:

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

การเชื่อมโยงอัตโนมัติ

ชั้นเรียน

สัญลักษณ์ลูกศร ES6 สามารถใช้ในวิธีการเรียนได้ และมีการผูกมัดโดยนัย ซึ่งหมายความว่าคุณสามารถบอกลาสำนวนที่ซ้ำซากได้ เช่น this.myMethod = this.myMethod.bind(this)!

import React, { Component } from React;
 
export default class App extends Compononent {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () => {
    // This method is bound implicitly!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

การตัดแต่งอาร์เรย์

อาร์เรย์

หากคุณต้องการแยกค่าออกจากอาร์เรย์ มีวิธีที่เร็วกว่า splice()

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

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Result: [0, 1, 2, 3]

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

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
 
console.log(array); // Result: [0, 1, 2, 3]

การพิมพ์ค่าสุดท้ายของอาร์เรย์

อาร์เรย์
เทคนิคนี้ต้องใช้เมธอด Slice()

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

การจัดรูปแบบโค้ด JSON

JSON

คุณอาจใช้ JSON.stringify อยู่แล้ว คุณรู้ไหมว่ามันช่วยจัดรูปแบบ JSON ของคุณ?

เมธอด stringify() รับพารามิเตอร์ทางเลือก XNUMX ตัว ได้แก่ ฟังก์ชันแทนที่ ซึ่งสามารถใช้เพื่อกรอง JSON ที่แสดง และค่าช่องว่าง

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
 
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

ฉันหวังว่าเทคนิคทั้งหมดนี้มีประโยชน์ คุณรู้เคล็ดลับอะไรบ้าง? เขียนไว้ในความคิดเห็น

Skillbox แนะนำ:

ที่มา: will.com

เพิ่มความคิดเห็น