ในงานประจำวันของเรา เราเขียนฟังก์ชันต่างๆ เช่น การเรียงลำดับ การค้นหา การค้นหาค่าที่ไม่ซ้ำ การส่งพารามิเตอร์ การแลกเปลี่ยนค่า ฯลฯ ดังนั้นที่นี่ฉันจึงได้รวบรวมรายการเคล็ดลับการเขียนชวเลขของฉันไว้ที่นี่!
JavaScript เป็นภาษาที่ยอดเยี่ยมสำหรับการเรียนรู้และใช้งานอย่างแท้จริง สำหรับปัญหาหนึ่งๆ อาจมีวิธีแก้ไขปัญหาเดียวกันได้มากกว่าหนึ่งวิธี ในบทความนี้เราจะพูดถึงเฉพาะเรื่องที่เร็วที่สุดเท่านั้น
วิธีการเหล่านี้จะช่วยคุณได้อย่างแน่นอน:
การแฮ็ก JavaScript เหล่านี้ส่วนใหญ่ใช้ ECMAScript6 (ES2015) และเทคโนโลยีที่ใหม่กว่า แม้ว่าเวอร์ชันล่าสุดคือ ECMAScript11 (ES2020) ก็ตาม
==หมายเหตุ==: เคล็ดลับทั้งหมดด้านล่างได้รับการทดสอบบนคอนโซลของ Google Chrome
เราสามารถเตรียมใช้งานอาร์เรย์ที่มีขนาดเฉพาะได้โดยใช้ค่าเริ่มต้น (เช่น "", null หรือ 0) คุณอาจใช้สิ่งเหล่านี้กับอาร์เรย์ 1D อยู่แล้ว แต่คุณจะเริ่มต้นอาร์เรย์/เมทริกซ์ 2D ได้อย่างไร
const array = Array(5).fill('');
// เอาท์พุท (5) ["", "", "", "", ""]
const matrix = Array(5).fill(0).map(()=>Array(5).fill(0));
// เอาท์พุต (5) [อาร์เรย์ (5) อาร์เรย์ (5) อาร์เรย์ (5) อาร์เรย์ (5) อาร์เรย์ (5)]
0: (5) [0, 0, 0, 0, 0]
1: (5) [0, 0, 0, 0, 0]
2: (5) [0, 0, 0, 0, 0]
3: (5) [0, 0, 0, 0, 0]
4: (5) [0, 0, 0, 0, 0]
ความยาว: 5 เราควรใช้วิธี reduce เพื่อค้นหาการคำนวณทางคณิตศาสตร์พื้นฐานอย่างรวดเร็ว
const array = [5,4,7,8,9,2];
array.reduce((a,b) => a+b); // เอาท์พุต:
array.reduce((a,b) => a>b?a:b); // เอาท์พุต: 9
array.reduce((a,b) => a<b?a:b); // เอาท์พุต: 2
เรามีวิธีการในตัว sort() และ reverse() สำหรับการเรียงลำดับสตริง แต่อาร์เรย์ของตัวเลขหรือวัตถุล่ะ?
มาดูเทคนิคการเรียงลำดับตัวเลขและวัตถุจากน้อยไปหามาก
const stringArr = ["Joe", "Kapil", "Steve", "Musk"] stringArr.sort(); // เอาต์พุต (4) ["โจ", "คาพิล", "มัสค์", "สตีฟ"] stringArr.reverse(); // เอาต์พุต (4) ["Steve", "Musk", "Kapil", "Joe"]
const array = [40, 100, 1, 5, 25, 10]; array.sort((a,b) => ab); // เอาต์พุต (6) [1, 5, 10, 25, 40, 100] array.sort((a,b) => บริติชแอร์เวย์); // เอาต์พุต (6) [100, 40, 25, 10, 5, 1]
const objectArr = [
{ first_name: 'Lazslo', Last_name: 'Jamf' },
{ first_name: 'หมู', นามสกุล: 'โบดีน' },
{ first_name: 'โจรสลัด', นามสกุล: 'เด็กฝึกงาน' }
-
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// เอาท์พุต (3) [{…}, {…}, {…}]
0: {first_name: "หมู", นามสกุล: "โบดีน"}
1: {first_name: "Lazslo", นามสกุล: "Jamf"}
2: {first_name: "โจรสลัด", นามสกุล: "เด็กฝึกหัด"}
ความยาว: 3 ค่าเท็จ เช่น 0 , undefined , null , false , "" , '' สามารถละเว้นได้อย่างง่ายดายโดย
const array = [3, 0, 6, 7, '' , เท็จ]; array.filter(บูลีน); // เอาต์พุต (3) [3, 6, 7]
หากคุณต้องการลดการซ้อนกัน if...else หรือสลับกรณี คุณสามารถใช้ตัวดำเนินการเชิงตรรกะพื้นฐาน AND/OR
ฟังก์ชั่น doSomething (arg1) {
arg1 = arg1 ||. 10;
// ตั้งค่า arg1 เป็น 10 เป็นค่าเริ่มต้น หากยังไม่ได้ตั้งค่า return arg1;
-
ให้ฟู = 10;
foo === 10 && ทำอะไรบางอย่าง ();
// เป็นสิ่งเดียวกับ if (foo == 10) แล้ว doSomething();
// เอาท์พุต: 10
foo === 5 ||. ทำบางอย่าง ();
// เป็นสิ่งเดียวกับ if (foo != 5) แล้ว doSomething();
// เอาท์พุต: 10 คุณอาจใช้ indexOf() กับ for loop ที่ส่งคืนดัชนีแรกที่พบ หรือที่ใหม่กว่า includes() ซึ่งส่งคืนค่าบูลีน true/false จากอาร์เรย์เพื่อค้นหา Out/remove ซ้ำกัน นี่คือที่ที่เรามีสองวิธีที่เร็วกว่า
อาร์เรย์ const = [5,4,7,8,9,2,7,5]; array.filter((รายการ,idx,arr) => arr.indexOf(รายการ) === idx); // หรือ const nonUnique = [...ชุดใหม่ (อาร์เรย์)]; // เอาท์พุต: [5, 4, 7, 8, 9, 2]
โดยส่วนใหญ่ คุณจะต้องแก้ไขปัญหาโดยการสร้างวัตถุตัวนับหรือแผนที่ที่ติดตามตัวแปรเป็นคีย์ และ ติดตามความถี่/การเกิดขึ้นเป็นค่า
ให้ string = 'kapilalipak';
ตาราง const={};
สำหรับ (ให้ถ่านของสตริง) {
ตาราง [ถ่าน] = ตาราง [ถ่าน] +1 ||. 1;
-
// เอาต์พุต {k: 2, a: 3, p: 2, i: 2, l: 2} และ
const countMap = new Map();
สำหรับ (ให้ i = 0; i < string.length; i++) {
ถ้า (countMap.has(string[i])) {
countMap.set(สตริง[i], countMap.get(สตริง[i]) + 1);
} อื่น {
countMap.set(สตริง[i], 1);
-
-
// Output Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2} คุณสามารถหลีกเลี่ยงเงื่อนไขแบบซ้อนได้โดยใช้ตัวดำเนินการแบบไตรภาค if…elseif…elseif
ฟังก์ชั่น ไข้ (อุณหภูมิ) {
อุณหภูมิกลับ > 97 ? 'ไปพบแพทย์!'
: temp < 97 ? 'ออกไปเล่นกันเถอะ!!'
: temp === 97 ? 'พักผ่อนเถอะ!';
-
// ไข้ส่งออก (97): "พักผ่อนซะ!"
Fever(100): "Visit Doctor!" for และ for..in ซึ่งให้ดัชนีตามค่าเริ่มต้น แต่คุณสามารถใช้ arr[index]for..in ยังยอมรับสิ่งที่ไม่ใช่ตัวเลขด้วย ดังนั้นควรหลีกเลี่ยงforEach , for...of รับองค์ประกอบโดยตรงforEach ยังสามารถให้ดัชนีแก่คุณได้ แต่ for...of ไม่สามารถfor และ for...of พิจารณารูในอาเรย์ แต่ไม่ใช่อีก 2 อันโดยปกติแล้วเราจำเป็นต้องผสานหลายวัตถุในงานประจำวัน
ผู้ใช้ const = {
ชื่อ'คาปิล รากูวันชิ'
เพศ: 'ชาย'
-
วิทยาลัยคอนต์ = {
ประถมศึกษา: 'โรงเรียนประถมมณี'
รอง: 'โรงเรียนมัธยม Lass'
-
ทักษะ const = {
การเขียนโปรแกรม: 'สุดขีด',
ว่ายน้ำ: 'ปานกลาง',
นอน: 'โปร'
-
สรุป const = {...ผู้ใช้ ...วิทยาลัย ...ทักษะ};
// เพศเอาท์พุต: "ชาย"
ชื่อ : กปิล รากูวันชี
ประถมศึกษา: "โรงเรียนประถมศึกษามณี"
การเขียนโปรแกรม: "สุดขีด"
รอง: "โรงเรียนมัธยม Lass"
นอน: "โปร"
การว่ายน้ำ: "เฉลี่ย" นิพจน์ฟังก์ชันลูกศรเป็นทางเลือกขนาดกะทัดรัดแทนนิพจน์ฟังก์ชันแบบเดิม แต่มีข้อจำกัดและไม่สามารถใช้ในทุกสถานการณ์ เนื่องจากพวกเขามีขอบเขตคำศัพท์ (ขอบเขตหลัก) และไม่มีขอบเขตของตัวเอง arguments this จึงอ้างอิงถึงสภาพแวดล้อมที่ถูกกำหนดไว้
บุคคล const = {
ชื่อ' กะปิล'
พูดชื่อ() {
ส่งคืน this.name;
-
-
person.sayName();
// เอาต์พุต "Kapil" แต่
const person = {
ชื่อ' กะปิล'
พูดชื่อ : () => {
ส่งคืน this.name;
-
-
person.sayName();
// เอาท์พุต "" การผูกมัดเพิ่มเติม การผูกมัดเสริม?. หยุดการประเมินหากค่าอยู่ข้างหน้า ?. ไม่ได้กำหนดหรือเป็นโมฆะ และส่งคืน
ไม่ได้กำหนด
ผู้ใช้ const = {
พนักงาน: {
ชื่อ: "กะปิล"
-
-
user.employee?.ชื่อ;
// เอาท์พุต: "กะปิล"
user.employ?.ชื่อ;
// เอาท์พุต: ไม่ได้กำหนด
user.employ.name
// เอาท์พุต: VM21616:1 Uncaught TypeError: ไม่สามารถอ่านคุณสมบัติ 'ชื่อ' ของไม่ได้กำหนด ได้ ใช้วิธี Math.random() ในตัวเพื่อแย่งชิงอาร์เรย์
รายการ const = [1, 2, 3, 4, 5, 6, 7, 8, 9];
list.sort(() => {
กลับ Math.random() - 0.5;
-
// เอาต์พุต (9) [2, 5, 1, 6, 9, 8, 4, 3, 7]
//โทรมาอีกครั้ง.
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6] ตัวดำเนินการรวมรวม Null (??) เป็นตัวดำเนินการเชิงตรรกะ เมื่อตัวถูกดำเนินการด้านซ้ายว่างเปล่าหรือไม่ได้กำหนด จะส่งคืนค่า ตัวถูกดำเนินการทางขวา มิฉะนั้นจะส่งกลับตัวถูกดำเนินการทางซ้าย
const foo = null ?? 'โรงเรียนของฉัน'; // เอาท์พุต: "โรงเรียนของฉัน" const baz = 0 ?? 42; // เอาท์พุต: 0
3 คะแนนลึกลับเหล่านั้น ... สามารถพักหรือแพร่กระจายได้! ?
ฟังก์ชั่น myFun(a, b, ...manyMoreArgs) {
กลับข้อโต้แย้งความยาว;
-
myFun("หนึ่ง", "สอง", "สาม", "สี่", "ห้า", "หก");
// ผลลัพธ์: 6 และ
const parts = ['ไหล่', 'เข่า']; เนื้อเพลง const = ['head', ...parts, 'and', 'toes']; เนื้อเพลง; //เอาท์พุท: (5) ["head", "shoulders", "knees", "and", "toes"]
const search = (arr, low=0,high=arr.length-1) => {
กลับสูง;
-
ค้นหา ([1,2,3,4,5]);
// เอาท์พุต: 4 ในขณะที่แก้ไขปัญหา เราสามารถใช้เมธอดในตัวบางอย่าง เช่น .toPrecision() หรือ .toFixed() เพื่อใช้งานฟังก์ชันตัวช่วยมากมาย
ค่าคงที่ = 10; num.toString(2); // เอาท์พุต: "1010" num.toString(16); // เอาท์พุต: "a" num.toString(8); // เอาต์พุต: "12"
ให้ a = 5; ให้ข = 8; [ก,ข] = [ข,ก] [ก,ข] // Output(2) [8, 5]
นี่ไม่ใช่เคล็ดลับการจดชวเลขทั้งหมด แต่จะช่วยให้คุณมีความคิดที่ดีเกี่ยวกับวิธีใช้สตริง
ฟังก์ชั่น checkPalindrome (str) {
กลับ str == str.split('').reverse().join('');
-
checkPalindrome('นามาน');
// ผลลัพธ์: จริง โดยใช้ Object.entries(), Object.keys() และ Object.values()
const obj = { ก: 1, b: 2, c: 3 };
วัตถุ รายการ (obj);
// เอาท์พุท (3) [อาร์เรย์ (2), อาร์เรย์ (2), อาร์เรย์ (2)]
0: (2) ["ก", 1]
1: (2) ["ข", 2]
2: (2) ["ค", 3]
ความยาว: 3
วัตถุ.คีย์(obj);
(3) ["ก", "ข", "ค"]
วัตถุ.ค่า(obj);
(3) [1, 2, 3]