Би JavaScript-г сурч эхлэхэд хамгийн түрүүнд цаг хэмнэхэд тусалсан заль мэхийн жагсаалтыг гаргасан. Би тэдгээрийг бусад програмистуудаас, өөр өөр сайтууд болон гарын авлагуудаас олж харсан.
Энэ нийтлэлд би JavaScript кодоо сайжруулах, хурдасгах 12 гайхалтай аргыг танд үзүүлэх болно. Ихэнх тохиолдолд тэдгээр нь бүх нийтийнх байдаг.
Бид танд сануулж байна: "Хабр" -ын бүх уншигчдад - "Habr" сурталчилгааны кодыг ашиглан Skillbox-ын аль ч курст бүртгүүлэхдээ 10 рублийн хөнгөлөлт.
Skillbox зөвлөж байна: Практик курс .
Өвөрмөц утгыг шүүж байна
МАССИВ
Set объектын төрлийг ES6-д... тараах операторын хамт нэвтрүүлсэн бөгөөд бид үүнийг зөвхөн өвөрмөц утгыг агуулсан шинэ массив үүсгэхэд ашиглаж болно.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Ердийн нөхцөлд ижил үйлдлийг гүйцэтгэхийн тулд илүү их код хэрэгтэй.
Энэ техник нь анхдагч төрлүүдийг агуулсан массивуудад ажилладаг: тодорхойгүй, null, логикийн, мөр ба тоо. Хэрэв та объект, функц эсвэл нэмэлт массив агуулсан массивтай ажиллаж байгаа бол танд өөр арга хэрэг болно.
Цикл дэх кэш массивын урт
ЦИКЛ
For давталтуудыг сурахдаа та стандарт процедурыг дагаж мөрддөг:
for (let i = 0; i < array.length; i++){
console.log(i);
}Гэсэн хэдий ч, энэ синтаксийн тусламжтайгаар for давталт нь давталт бүрт массивын уртыг дахин дахин шалгадаг.
Заримдаа энэ нь ашигтай байж болох ч ихэнх тохиолдолд массивын уртыг кэш хийх нь илүү үр дүнтэй байдаг бөгөөд үүнд нэг удаа хандах шаардлагатай болдог. Бид i хувьсагчийг тодорхойлсон уртын хувьсагчийг тодорхойлох замаар үүнийг хийж болно, жишээ нь:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Зарчмын хувьд дээр дурдсантай бараг ижил боловч гогцооны хэмжээг нэмэгдүүлснээр бид ихээхэн цаг хэмнэх болно.
Богино холболтын үнэлгээ (Маккарти үнэлгээ)
НӨХЦӨЛТ ОПЕРАТОРУУД
Гурвалсан оператор нь энгийн (заримдаа тийм ч хялбар биш) нөхцөлт мэдэгдлийг бичих хурдан бөгөөд үр дүнтэй арга юм.
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-г буцаана.
Нэмэлт гинж
Модны бүтцэд гүн гүнзгий үл хөдлөх хөрөнгө буцаахыг оролдохдоо нэмэлт хэлхээ ашиглахыг санал болгож болно. Тэгэхээр асуултын тэмдэг үү? зөвхөн null биш тохиолдолд өмчийг олж авахад ашиглаж болно.
Жишээлбэл, бид энэ.state.data?..()-г авахын тулд дээрх жишээг дахин засварлаж болно. Өөрөөр хэлбэл, утга нь хоосон биш тохиолдолд л өгөгдлийг буцаана.
Эсвэл төлөв тодорхойлогдсон эсэх нь чухал бол бид энэ.төлөв?.өгөгдлөө буцааж болно.
Boolean руу хөрвүүлэх
ТӨРӨЛ ХӨРВҮҮЛЭХ
Ердийн логикийн үнэн ба худал функцээс гадна JavaScript нь бусад бүх утгыг үнэн эсвэл худал гэж үздэг.
Өөрөөр заагаагүй бол 0, "", null, тодорхойгүй, NaN ба мэдээж худал утгаас бусад нь JavaScript дахь бүх утгууд нь үнэн юм. Сүүлийнх нь худлаа.
Бид ! операторыг ашиглан энэ хоёрын хооронд амархан сэлгэх боломжтой бөгөөд энэ нь мөн төрлийг логик хэлбэрт хөрвүүлдэг.
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-тай тэнцүү.
- (- - 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() арга нь хоёр нэмэлт параметрийг авдаг: харуулсан JSON-г шүүж болох орлуулах функц болон зайны утга.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Энэ бүгд, эдгээр бүх техникүүд хэрэгтэй байсан гэж найдаж байна. Та ямар заль мэх мэддэг вэ? Тэднийг сэтгэгдэл дээр бичээрэй.
Skillbox зөвлөж байна:
- Хоёр жилийн практик сургалт .
- Онлайн курс .
- Практик жилийн курс .
Эх сурвалж: www.habr.com