Шинэ аргууд

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 -д шинээр бий болсон үндсэн аргууд тэдгээрийг ашиглахтай танилцлаа. Аргуудыг ашиглах мэдлэгтэй болсон тул бусад аргуудын талаар та интернетээс судлан мэдэн авахад хүндрэл үүсэхгүй.

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

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

Энэ хичээлээс RxJs санг өгөгдөлтэй ажиллах ажиллагааг маш эвтэйхэн болгосон операторуудын талаар авч үзэж эхлэнэ. Өмнөх хичээлүүдэд бид төрөл бүрийн промис, массив, мөр, тоо, үйл явц гэх мэтийн өгөгдлүүдээс Observable /ажиглагч/ классын хувиудыг хэрхэн үүсгэхийг үзэцгээсэн. Энэ хичээлээс өмнөх хичээлүүдэд сурч авсан мэдлэгтээ суурилан RxJs санг ашиглан төрөл бүрийн өгөгдлүүдийг яаж удирдан, өөрчлөх операторуудтай танилцах болно. Энэ хичээлд map, pluck гэдэг хоёр сонирхолтой операторыг үзнэ.

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

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

import React from "react";
import { Link } from "react-router-dom";
import "./Layout.scss";

const Layout = () => {
  return (
    <>
      <header>
        <nav className="nav">
          <ul>
            <li>
              <Link to="/">Нүүр</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/cars">Cars</Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>
        <h2>Агуулга</h2>
      </main>
      <footer>2023 Он</footer>
    </>
  );
};

export default Layout;

блокуудад салгаад хуудасны ажиллагааг шалгавал

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

Хукууд ердийн функцууд тул бид ч өөрсдөө хукийг зохион ашиглах боломжтой. Үүнийг input элемент, түүнд оруулсан текстийг үзүүлэх h1 гарчиг бүхий дараах энгийн

import React, {useState} from 'react'

function App() {
  const [name, setName] = useState('')
 
  const changeHandler = event => {
    setName(event.target.value)  
  }
 
  return (
    <div className="container pt-3">
      <input type="text" value={name} onChange={changeHandler}/>
      <h1>{name}</h1>
    </div>      
  );
}

export default App;

жишээгээр харцгаая.

JSX

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

Энэ хичээлээс эхлэн react ашигладаг jsx бичлэгийн дүрмийн талаар дэлгэрүүлэн авч үзнэ. Өмнөх хичээлүүдэд хуудасны хэвийн тэмдэглэгээний jsx бичлэгийн дүрмийн үндсэн ойлголтуудыг үзсэн. Энэ удаад jsx гэж юу болох, хэрхэн ажилладагийг react програм үүсгэх хичээлд үүсгэсэн төслийн кодоор авч үзье. Бидний үүсгэсэн төслийн оролтын index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

файлд ReactDOM обьектын render аргад App нэрээр импортлон авсан App компонентийг эхний параметрээр дамжуулж байгаа.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

олон гишүүнтийн язгуурууд x1, x2, x3 (x1<x2<x3) бол
1.
2. x1, x2, x3 арифметик прогрес үүсгэх бол
3. Уул прогрессын ялгавар
4.

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

 

sin90 -ийг олно уу.

Жич: Хатуу самар даа. Сурагчид барна гэхэд хүнд болов уу. ЕБС-ийн хүрээний аргаар л бодолтыг хийж байгаа тул бодолтыг харвал гайгүй ч юм шиг санагдаж магадгүй гоё бодлого.

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

 

тэгшитгэлийг бод.

Жич: Бодох арга орж ирж байна уу. Найз нөхөд, багштайгаа хамжаад үзээрэй. Иймэрхүү бодлогууд сэтгэлгээг хөгжүүлэх, арга техникт суралцахад тустай. 

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