Шинэ аргууд

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

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

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

ES6 -д өгөгдлүүдийг олонлог байдлаар хадгалан тэдгээртэй ажиллах Set , WeakSet обьектууд бий болсон. Хичээлээр энэхүү шинэчлэлүүдийн тухай үзье.

Set обьект

Set өөртөө төрөл бүрийн утгуудыг агуулан тэдгээртэй ажиллагааг хөнгөн болгох массив төрлийн тусгай бүтэц буюу обьект юм. Гэхдээ Set -д зөвхөн давтагдахгүй утгуудыг хадгалж болдог. Ингээд Set гэж юу болох түүнтэй хэрхэн ажиллахыг дараах

let set = new Set();
set.add(10);
set.add('Hello');
set.add({});

console.log(set);
console.log(set.size);

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

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

Компонентийн бусад амьдралын циклүүдийг судлахын өмнө функционал компонентийг ердийн буюу Component классаас удамшсан компонент болгож суръя. Манай төслийн Car компонент jsx кодийг буцаах ердийн функц хэлбэрийн хэрэгжүүлэлттэй.

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

Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин зурагдсанг /render/ тодорхойлох асуудлаар авч үзье. Асуудлыг дараах

import React, {useState, useEffect} from 'react'

function App() {
  const [renderCount, setRenderCount] = useState(1)
 
  useEffect(() => {
    setRenderCount(prev => prev + 1)
  })
 
  return (
      <div className="container">
        <h1>Render -ийн тоо {renderCount}</h1>
      </div>
  );
}

export default App;

кодоор шийдчих мэт.

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

Цэсийг нээх хаах ажиллагааг хариуцах компонентийг боловсруулсан тул энэ хичээлээр програмийн удирдах цэсийг хийе. Үүний тулд төслийн components хавтасны Navigation хавтаст цэсний компонентийн Drawer хавтасыг үүсгээд түүнд Drawer.js, Links.js, Drawer.module.css файлуудыг үүсгэн өгье. Drawer.js файлд

import classes from "./Drawer.module.css";
import {links} from "./Links"

const Drawer = (props) => {
  const renderLinks = () => {
    return links.map((link, index) => {
      return (
        <li key={index}>
          <a href="/#">Link {link}</a>
        </li>
      );
    });
  }
    
  return (
    <nav className={classes.Drawer}>
      <ul>{renderLinks()}</ul>
    </nav>
  )
}

export default Drawer;

код бүхий компонентийг үүсгэе.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

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

 

Талууд нь 5; 12; 13 нэгж урттай гурвалжны хэлбэрийг тогтоогоорой.

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

 

Призмд багтсан V эзэлхүүнтэй дөрвөн өнцөгт зөв пирамидийн оройнууд дээд суурийн төв болон доод суурийн талуудын дундаж цэгүүд харгалзах бол призмийн эзэлхүүнийг ол.

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