ល្បិច JavaScript ចំនួន 12 ដែលអ្នកបង្រៀនភាគច្រើននឹក

នៅពេលខ្ញុំចាប់ផ្តើមរៀន JavaScript រឿងដំបូងដែលខ្ញុំបានធ្វើគឺបង្កើតបញ្ជីល្បិចដែលជួយខ្ញុំសន្សំពេលវេលា។ ខ្ញុំ​បាន​ប្រទះ​ឃើញ​ពួក​វា​ពី​អ្នក​សរសេរ​កម្មវិធី​ផ្សេង​ទៀត​នៅ​លើ​គេហទំព័រ​ផ្សេង​គ្នា និង​ក្នុង​សៀវភៅ​ដៃ។

នៅក្នុងអត្ថបទនេះ ខ្ញុំនឹងបង្ហាញអ្នកនូវវិធីល្អៗចំនួន 12 ដើម្បីកែលម្អ និងបង្កើនល្បឿនកូដ JavaScript របស់អ្នក។ ក្នុងករណីភាគច្រើនពួកគេមានលក្ខណៈជាសកល។

យើងរំលឹក៖ សម្រាប់អ្នកអានទាំងអស់នៃ "Habr" - ការបញ្ចុះតម្លៃ 10 rubles នៅពេលចុះឈ្មោះក្នុងវគ្គសិក្សា Skillbox ណាមួយដោយប្រើលេខកូដផ្សព្វផ្សាយ "Habr" ។

Skillbox ណែនាំ៖ វគ្គសិក្សាជាក់ស្តែង "អ្នកអភិវឌ្ឍន៍ចល័ត PRO".

ត្រងតម្លៃពិសេស

អារេ

ប្រភេទ Set object ត្រូវបានណែនាំនៅក្នុង ES6 រួមជាមួយនឹង... , spread operator យើងអាចប្រើវាដើម្បីបង្កើត array ថ្មីដែលមានតែតម្លៃពិសេសប៉ុណ្ណោះ។

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

ក្នុងស្ថានភាពធម្មតា កូដច្រើនទៀតគឺត្រូវការជាចាំបាច់ដើម្បីអនុវត្តប្រតិបត្តិការដូចគ្នា។

បច្ចេកទេសនេះដំណើរការសម្រាប់អារេដែលមានប្រភេទបឋម៖ មិនបានកំណត់ ទុកជាមោឃៈ ប៊ូលីន ខ្សែអក្សរ និងលេខ។ ប្រសិនបើអ្នកកំពុងធ្វើការជាមួយអារេដែលមានវត្ថុ មុខងារ ឬអារេបន្ថែម អ្នកនឹងត្រូវការវិធីសាស្រ្តផ្សេង។

ប្រវែងនៃអារេឃ្លាំងសម្ងាត់ជារង្វង់

វដ្ត

នៅពេលអ្នករៀនរង្វិលជុំ អ្នកធ្វើតាមនីតិវិធីស្តង់ដារ៖

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

ទោះយ៉ាងណាក៏ដោយ ជាមួយនឹងវាក្យសម្ព័ន្ធនេះ សម្រាប់រង្វិលជុំត្រួតពិនិត្យម្តងហើយម្តងទៀតអំពីប្រវែងនៃអារេនីមួយៗ។

ពេលខ្លះវាអាចមានប្រយោជន៍ ប៉ុន្តែក្នុងករណីភាគច្រើន វាមានប្រសិទ្ធភាពជាងក្នុងឃ្លាំងសម្ងាត់ប្រវែងនៃអារេ ដែលនឹងតម្រូវឱ្យមានការចូលប្រើវាមួយ។ យើង​អាច​ធ្វើ​វា​បាន​ដោយ​កំណត់​អថេរ​ប្រវែង ដែល​យើង​កំណត់​អថេរ i ដូច​នេះ៖

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

ជាគោលការណ៍ស្ទើរតែដូចគ្នានឹងខាងលើប៉ុន្តែដោយការបង្កើនទំហំរង្វិលជុំយើងនឹងទទួលបានការសន្សំពេលវេលាដ៏សំខាន់។

ការវាយតម្លៃសៀគ្វីខ្លី (ការវាយតម្លៃ McCarthy)

ប្រតិបត្តិករតាមលក្ខខណ្ឌ

ប្រតិបត្តិករ ternary គឺជាវិធីលឿន និងមានប្រសិទ្ធភាពក្នុងការសរសេរសេចក្តីថ្លែងការណ៍តាមលក្ខខណ្ឌសាមញ្ញ (ហើយជួនកាលមិនសាមញ្ញទេ)៖

x> 100? "ច្រើនជាង 100": "តិចជាង 100";
x> 100? (x>200? "more than 200": "រវាង 100-200"): "តិចជាង 100";

ប៉ុន្តែជួនកាលសូម្បីតែប្រតិបត្តិករ ternary មានភាពស្មុគស្មាញជាងតម្រូវការ។ យើងអាចប្រើ 'and' && និង 'or' ជំនួសវិញ || ប្រតិបត្តិករ Boolean ដើម្បីវាយតម្លៃកន្សោមជាក់លាក់ក្នុងវិធីសង្ខេបជាងនេះ។ វាត្រូវបានគេហៅថា "សៀគ្វីខ្លី" ឬ "ការវាយតម្លៃសៀគ្វីខ្លី" ។

តើការងារនេះ

ឧបមាថា​យើង​ចង់​ត្រឡប់​លក្ខខណ្ឌ​មួយ​ក្នុង​ចំណោម​លក្ខខណ្ឌ​ពីរ​ឬ​ច្រើន។

ការប្រើ && នឹងត្រឡប់តម្លៃមិនពិតដំបូង។ ប្រសិនបើ operand នីមួយៗវាយតម្លៃទៅពិត នោះកន្សោមចុងក្រោយដែលបានវាយតម្លៃនឹងត្រូវបានត្រឡប់។

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

ការប្រើប្រាស់ || នឹងត្រឡប់តម្លៃពិតដំបូង។ ប្រសិនបើ operand នីមួយៗវាយតម្លៃទៅមិនពិត នោះតម្លៃដែលបានវាយតម្លៃចុងក្រោយនឹងត្រូវបានត្រឡប់។

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?..()។ នោះ​គឺ​ទិន្នន័យ​ត្រូវ​បាន​ត្រឡប់​លុះត្រា​តែ​តម្លៃ​មិន​មែន​ទទេ។

ឬប្រសិនបើវាជាបញ្ហាថាតើរដ្ឋត្រូវបានកំណត់ឬអត់ យើងអាចត្រឡប់ this.state?.data។

បំប្លែងទៅជាប៊ូលីន

ប្រភេទការបំប្លែង

បន្ថែមពីលើមុខងារប៊ូលីនធម្មតាពិត និងមិនពិត JavaScript ក៏ចាត់ទុកតម្លៃផ្សេងទៀតទាំងអស់ថាជាការពិត ឬក្លែងក្លាយ។

រហូតទាល់តែមានការកត់សម្គាល់ផ្សេង តម្លៃទាំងអស់នៅក្នុង JavaScript គឺជាការពិត លើកលែងតែ 0, "", null, undefined, NaN និងជាការពិតណាស់ មិនពិត។ ក្រោយមកទៀតគឺក្លែងក្លាយ។

យើងអាចប្តូររវាងទាំងពីរយ៉ាងងាយស្រួលដោយប្រើ ! operator ដែលបំប្លែងប្រភេទទៅជាប៊ូលីន។

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

វាអាចមានស្ថានភាពដែល + នឹងត្រូវបានបកស្រាយថាជា ប្រតិបត្តិករភ្ជាប់ជាជាង ប្រតិបត្តិករបន្ថែម។ ដើម្បីជៀសវាងបញ្ហានេះ អ្នកគួរតែប្រើ tildes: ~~ ។ ប្រតិបត្តិករនេះស្មើនឹង -n-1 ។ ឧទាហរណ៍ ~15 ស្មើនឹង -16 ។

ការប្រើ tildes ពីរក្នុងមួយជួរ បដិសេធប្រតិបត្តិការព្រោះ - (- - n - 1) - 1 = n + 1 - 1 = n ។ នៅក្នុងពាក្យផ្សេងទៀត ~ 16 គឺស្មើនឹង 15 ។

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

<ថាមពលរហ័ស

ប្រតិបត្តិការ

ចាប់ផ្តើមនៅក្នុង ES7 អ្នកអាចប្រើ exponentiation operator ** ជាអក្សរកាត់សម្រាប់អំណាច។ វាលឿនជាងការប្រើ 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 operator។

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() យកប៉ារ៉ាម៉ែត្រស្រេចចិត្តពីរ៖ មុខងារជំនួស ដែលអាចត្រូវបានប្រើដើម្បីត្រង JSON ដែលបានបង្ហាញ និងតម្លៃចន្លោះ។

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

នោះហើយជាទាំងអស់ ខ្ញុំសង្ឃឹមថាបច្ចេកទេសទាំងអស់នេះមានប្រយោជន៍។ តើអ្នកដឹងល្បិចអ្វីខ្លះ? សរសេរពួកវានៅក្នុងមតិយោបល់។

Skillbox ណែនាំ៖

• វគ្គសិក្សាជាក់ស្តែងរយៈពេលពីរឆ្នាំ "ខ្ញុំជាអ្នកបង្កើតគេហទំព័រ PRO".
• វគ្គសិក្សាតាមអ៊ីនធឺណិត "អ្នកអភិវឌ្ឍន៍ C# ពី 0".
• វគ្គសិក្សាជាក់ស្តែងឆ្នាំ "អ្នកអភិវឌ្ឍន៍ PHP ពី 0 ដល់ PRO".

ប្រភព: www.habr.com