Шинэ аргууд

EcmaScript 6 -гийн зарим обьектуудад шинээр бий болсон аргуудын талаар хичээлд авч үзье.

Обьектыг өргөжүүлэх

Обьектын өргөжүүлэлтийг хийх аргыг

let obj1 = {a: 1};
let obj2 = {b: 2, c: 3};

обьектууд дээр авч үзье. obj1 -ийг obj2 -оор өргөжүүлье гэвэл ES6 -д бий болсон assign аргыг

Object.assign(obj1,obj2);

ашигладаг. Аргад эхний параметрээр өргөжих /target/ обьектыг харин хоёрдахь параметрээр өргөжүүлэх /source/ обьектыг өгнө. Дээрх командын дараа

console.log('Obj1', obj1);
console.log('Obj2', obj2);

obj1 , obj2 обьектууд хэрхэн өөрчлөгдсөнг консолд харвал

гэж харагдана. source буюу obj2 обьект өөрчлөлтгүй харин target буюу obj1 обьект obj2 обьектоор өргөжсөн байгаа. assign аргаар обьектуудыг нэгтгэн шинэ обьектыг

let obj1 = {a: 1};
let obj2 = {b: 2, c: 3};
let obj4 = {d: 2, e: 3};

let obj3 = Object.assign({}, obj1, obj2, obj4);

console.log('Obj1', obj1);
console.log('Obj2', obj2);
console.log('Obj3', obj3);

үүсгэж болдог. Үүний тулд assign аргад эхний параметрээр хоосон обьектыг өгөөд араас нь үр дүнгийн обвектод нэгдэн орох обьектуудыг заан өгнө. Хуудсыг шинэчилбэл

консолд дээрх үр дүнг харуулна. Нэгтгэлд орж буй обьектуудад ямар нэгэн өөрчлөлт орохгүйгээр үр дүнгийн обьектод аргад өгсөн бүх обьектууд нэгдэн орсон байгаа.

Массивын аргууд

Массивт бий болсон find буюу хайлт хийдэг аргыг

let findedItem = [1, 2, 3, 4].find(x => x>2);
console.log(findedItem);

жишээгээр харцгаая. find арга [1, 2, 3, 4] массиваас 2 -оос их утгатай элементийг хайна гэдгийг ES6 -гийн сумаар тодорхойлогдох x => x>2 функцээр өгсөн. Хуудсаа шинэчилбэл консолд

үр дүнг харуулна. find арга нөхцөлд тохирсон эхний утгыг буцааж байгаад анхаарна уу.

Мөрийн аргууд

Мөр төрлийн өгөгдөлд шинээр бий аргуудтай

let str = 'Hello!';

console.log('Repeat:', str.repeat(3));
console.log('StartsWith:', str.startsWith('Hel'));
console.log('StartsWith:', str.startsWith('Hel', 1));
console.log('Includes:', str.includes('Hel'));
console.log('Includes:', str.includes('Hel', 1));

жишээгээр танилцая. Аргуудын ажиллагаа нэрнээсээ л ойлгомжтой тул тайлбарлах шаардлага байхгүй тул хуудсаа шиэчлээд үр дүнг харвал

гэж харуулна. repeat арга параметрээр өгөгдсөн хэмжээгээр мөрийг олшруулна. startsWith арга параметрээр өгөгдсөн утгаа мөр эхлэж байгааг шалгана. startsWith аргад хоёрдахь параметрээр мөрийн индексийг заавал тухайн индексээс мөр өгөгдсөн утгаар эхлэсэнг шалгана. Иймээс үр дүнд эхний startsWith арга true харин хоёрдахь нь false өгнө. Учир нь эхний аргад индексийг өгөөгүй тулд түүнийг 0 гэж үзээд str мөр Hel гэж эхлэж байгааг шалган true харин хоёрдахь удаад 1 -р индекс буюу ello! г Hel гэж эхлэж байгааг шалган false өгнө. includes аргын ажиллагаа startsWith аргатай ижилхэн боловч арга эхлэж буйг биш агуулж буйг шалгадагаараа ялгаатай.
Хичээлд EcmaScript 6 -д шинээр бий болсон үндсэн аргууд тэдгээрийг ашиглахтай танилцлаа. Аргуудыг ашиглах мэдлэгтэй болсон тул бусад аргуудын талаар та интернетээс судлан мэдэн авахад хүндрэл үүсэхгүй.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 754 Төлбөртэй

Аливаа зүйлийг сурахад хүнээс багагүй хүч, хөдөлмөр шаардана. Манай хүмүүс яаж хурдан сурах, яаж амар хийх талаар их асуудаг. Хурдан сурах нь тухайн хүнээс л хамаарана. Хүн бол толгой, тархи, санаа бодлыг нь ольчихдог машин техник биш гэдгийг л ойлгоорой. Суралцахад тэвчээр, тогтмол үзэх, чин хүсэл зориг байх хэрэгтэй. Тэгэхгүй бол сайн үр дүнд найдах бараг хэрэггүй. Сайтын хичээлүүд практик ашиглалтад түлхүү анхаарсан тул шууд ашиглах эсхүл гэрын авлаг байдлаар ашиглахад зориулагдсан. 

Энэ удаад Миксин /Mixin/ гэж юу болох, ямар хэрэгтэй, түүнийг хэрхэн ашиглахыг авч үзнэ. Үүний тулд Жагсаалтыг шүүх хичээлийн жишээнд өөрчлөлтийг хийн өргөжүүлье. Төслийн components хавтаст List.vue нэрээр

<template>
  <h1>List</h1>
</template>

<script>
export default {
 
}
</script>

кодтой компонентийг үүсгээд програмын эхлэлийн цэг main.js файлд компонентийг app-list нэрээр глобал байдлаар

import Vue from 'vue'
import App from './App.vue'
import List from './components/List.vue'

Vue.filter('uppercase', value => value.toUpperCase())

Vue.component('app-list', List)

new Vue({
  el: '#app',
  render: h => h(App),
})

бүртгүүлье.

  Нээгдсэн тоо: 1219 Нийтийн

Компонентыг бүртгүүлэх хичээлд компонентийн нэрийг 'my-counter' гэж мөр төрлөөр бичин өгсөн. Энэ нь зарим тохиолдолд асуудал үүсгэдэг. Жишээ нь та төсlлийн кодыг бичиж буй засварлагчид кодыг цэвэр байлгах ямар нэгэн хэрэгсэл /linter/ ашиглаж байвал нэрэнд хашилтыг хэрэглэвэл төслийн хэвээс хасагддаг тул үүнийг ашиглахгүй байх нь дээр. Иймээс VueJs -д компонентийн нэрийг үүсгэх өөр аргачлал байдаг. Компонентийн нэрийг өгөхдөө

            new Vue({
                el: '#app',
                components: {
                    'my-counter': component
                }
            });

хашилтанд my-counter гэж html кодод ашиглах тегийн нэрийг өгсөн байгаа.

  Нээгдсэн тоо: 242 Нийтийн

Хичээлээр Үр дүнгийн компонент хичээлээр хийсэн компонентод динамик ажиллагааг хэрэгжүүлве. Өөрөөр хэлбэл сорилгын үр дүнг динамикаар үзүүлэх юм. Үүний тулд Quiz компонентод

const [results, setResults] = useState({})

сорилгын үр дүнгийн results төлвийг нэмэн өгье. results обьект үр дүнг {[асуултын_id]: хариултын_төлөв} хэлбэрээр агуулна. Өөрөөр хэлбэл хариултын төлөв талбарт хариулт зөв бол right буруу бол wrong утгыг агуулах юм.

  Нээгдсэн тоо: 1038 Төлбөртэй

Промисүүдийн ашиглалтыг илүү тод харуулахын тулд алслагдсан сервэрийг ашиглах жишээг харцгаая. Алслагдсан сервертэй ажиллахад хөнгөн болгох үүднээс төсөлд jquery санг суулгая. Үүний тулд терминалыг нээгээд

npm i -s jquery командыг өгөхөд npm пакет төсөлд jquery санг суулгана. Төслийн package.json файлын dependencies талбарт "jquery": "^3.3.1" хамаарал нэмэгдэн орж ирнэ. Одоо төсөлд jquery санг ашиглах боломжтой болсон тул кодоо бичье.

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

Нээгдсэн тоо : 167

 

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

Нээгдсэн тоо : 243

 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 206

 

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 320

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 350

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Нээгдсэн тоо : 357

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 437

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 449

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 512

 
Энэ долоо хоногт

функцийн уламжлалыг тооц.

Нээгдсэн тоо : 523

 

утгыг ол.

Нээгдсэн тоо : 315

 

prob04_103_01 ба prob04_103_02 векторууд перпендикуляр бол y -ийн утгыг ол.

Нээгдсэн тоо : 177