ECMAScript 8 (ES8) lub ECMAScript 7 (ES7) został oficjalnie wydany w ubiegłym roku-koniec czerwca przez tc39 (co to jest TC39? Technical Committee 39-oficjalny Komitet Rozwoju Javascript. Komitet ten regularnie prowadzi posiedzenia i zazwyczaj członkowie są sprzedawcami przeglądarek). Obecnie standardem jest publikowanie nowych specyfikacji raz w roku. ES5 został opublikowany w 2009 roku, a następnie głównym wydaniem było ES6 w 2015 roku, ES7 w 2016 roku, Es8 w 2017 roku, Es9 w 2018 roku, Es10 w 2019 roku.
przeczytaj również: CronJ UI UX Design Company
Es7, Es8, Es9 i ES10 funkcje:
w tym artykule dowiesz się, jak wykorzystać wszystkie nowe funkcje JavaScript ES7, ES8, ES9 i ES10 mają do zaoferowania przykłady:
właściwości klasy :
możesz inicjalizować właściwości klasy poza konstruktorem!
Przykład:
class Animal { constructor() { this.name = "Lion" } age = 0;}That will be complied to: class Animal { constructor() { this.age = 0; this.name = "Lion"; } }Especially react developers can relate easily state! and initialProps!: class Animal { constructor() { this.name = "Lion" } age = 0; state = { } initialProps = { } }BabelJs.IO może być używany do testowania wszystkich nowych funkcji ECMA, można skonfigurować presety i testować. Oto przykład uruchomienia w babeljs.io przykład
tak, w ten sam sposób możesz teraz używać w Javascript!.
ciąg.padEnd () i string.funkcje padStart ():
jest to tylko sposób na dodanie dodatkowych znaków do końca lub na początku łańcucha.
ciąg.padStart()
metoda padStart() nakłada bieżący łańcuch na inny łańcuch (powtarzany, w razie potrzeby) tak, że otrzymany łańcuch osiągnie określoną długość. Wypełnienie jest stosowane od początku (po lewej) bieżącego łańcucha.
przykład:
ciąg.padEnd():
metoda padEnd() umieszcza bieżący łańcuch z podanym łańcuchem (powtórz, jeśli zajdzie taka potrzeba), tak aby otrzymany łańcuch osiągnął określoną długość. Wypełnienie jest stosowane od końca (z prawej) bieżącego łańcucha.
na przykład :
Operator wykładniczy:
operator wykładniczy zwraca wynik podniesienia pierwszego argumentu do potęgi drugiego argumentu. Operator wykładniczy jest prawostronnie asocjacyjny. a ** b ** c jest równe a ** (b ** c).
przykład:
końcowe przecinki:
końcowe przecinki są dozwolone w parametrach tablicy, obiektu i funkcji. Teraz, to nie jest wielkie, ale to jest miłe, jeśli w przypadku, gdy zapomnimy zamknąć lub raczej zakończyć przecinek, jeśli wymieniamy kilka elementów, nie ma znaczenia, czy uwzględnimy ten ostatni dodatkowy.
Przykład:
var list = var obj = { one: "1", two: "2", three: "3", // It is valid}function add( one, two, three, // It is valid) {}Obiekt.values() i Object.wpisy():
jest to sposób na traktowanie naszych obiektów jak słowników, w których możemy uzyskać nazwy parametrów i rzeczywiste lub raczej nazwy pól i rzeczywiste wartości powiązane z nimi odpowiednio przez wartości lub wpisy.
obiekt.values()
znasz obiekt.klucze(). Jest to dokładnie przeciwieństwo obiektu.klucze().
Przykład:
var fruits = { apple: 10, orange: 20, grapes: 30, pineapple: 40 }var totalVegetables = Object.values(fruits).reduce((a, b) => a + b);console.log(totalVegetables);Wyjście: 100
Obiekt.wpisy()
Object.entries() metoda zwraca tablicę par właściwości enumerable danego obiektu.
Przykład :
var fruits = { apple: 10, orange: 20, grapes: 30, pineapple: 40}for (var of Object.entries(fruits)) { console.log(key, val);}Wyjście:
jabłko 10
pomarańcza 20
winogrona 30
ananas 40
prototyp.includes()
to jest po prostu kolejna funkcja tablicy jest to sposób juiced po prostu określić, czy tablica zawiera wartość.
funkcje asynchroniczne
w es8 mamy funkcje asynchroniczne, jest to ponownie Ogromna nowa funkcja. Funkcje asynchroniczne to funkcje, które nie działają jedna po drugiej, które byłyby synchroniczne, zamiast tego działają równolegle i pozwalają nam wykonywać wiele funkcji jednocześnie.
obiekt.getOwnPropertyDescriptors ()
jako sposób na wydrukowanie dużego opisu ciągu znaków obiektu we wszystkich jego elementach.
funkcje ES9:
zmiany RegEx
więc to są zmiany wyrażeń regularnych, szczerze mówiąc, osobiście nie lubię używać wyrażeń regularnych, gdy to możliwe i stwierdziłem, że w rzeczywistości nie musimy ich używać zbyt często, więc tak naprawdę nie będziemy tak bardzo omawiać zmian wyrażeń regularnych, jednak jeśli jesteś bardzo zainteresowany, możesz zdecydowanie sprawdzić te zmiany ES9 dodał kilka wsparcia.
właściwości Rest/Spread
są naprawdę fajne pozwalają nam zasadniczo budować zakresy wartości poprzez użycie trzech elips razem wziętych.
iteracja asynchroniczna
to w rzeczywistości ostatnia duża iteracja i po prostu zapewnia potężniejsze wsparcie dla naszej funkcji asynchronicznej.
funkcje ES10:
więc wersja Chrome 72 właśnie się rozwinęła, kilka nowych ekscytujących funkcji ES10, czyli es 2019 w swojej przeglądarce, z których mogą korzystać Programiści, więc rzućmy okiem na nowe funkcje, które mamy w ES10, aby szukać.
Array.flat ()
zaczynając od flat() i flatmap (), więc jeśli masz tablicę taką jak na poniższym obrazku, możesz to zobaczyć, możesz po prostu konsolować.Zaloguj to i masz kilka zagnieżdżonych tablic.
więc jeśli chcesz spłaścić całą tablicę musisz użyć rekurencji lub wiesz, że musisz coś zrobić używając jakiegoś algorytmu.
na szczęście teraz JavaScript dostarcza go domyślnie, korzystając z .flat (), która rekurencyjnie spłaszczyłaby Twoją tablicę do określonego poziomu. Czyli płaski().
po prostu określ poziomy, spłaszcza je do jednego poziomu, jeśli zrobisz to dwa razy, spłaszcza je do dwóch poziomów.
jeśli chcesz spłaszczyć całą tablicę, możesz po prostu przekazać nieskończoność, a to spłaści całą tablicę z zagnieżdżonych tablic w czystszy sposób.
Array.flatmap ()
podobnie mamy flatmap (), która działa prawie jak mapa, jeśli mapujesz X i zwracasz powiedzmy (x, x*2), jeśli konsolujesz.Zaloguj swój wynik zobaczysz, że masz tablicę, która wygląda jak pokazane na poniższym obrazku zagnieżdżone.
ale jeśli masz zamiar zrobić tam flatmap (), nie dostałeś ładnej tablicy flatten dla Twojego wyniku.
obiekt.fromentries ()
idąc do numeru drugiego mamy obiekt.fromentries (), które w zasadzie znasz z wpisów object dot, możemy śmiało tworzyć te ładne pary klucz-wartość tablic klucz-wartość, ale teraz możesz po prostu iść do przodu i odzyskać swój oryginalny obiekt
z tej konkretnej tablicy, używając wpisów object of form i jeśli nie możesz zablokować oryginalnego obiektu, zobaczysz, że odzyskamy nasz obiekt klucz-wartość z powrotem do nas.
ciąg.trimstart () i String.trimend()
ponownie sprowadza nas to do naszego numeru trzy, który jest naszym .trimstart() i .trimend(). Więc jeśli masz ciąg, który ma długie spacje, możesz po prostu iść dalej i zrobić
console.log(string.trimstart())i nacisnąć Zapisz.
zobaczą właściwie po prostu json dot stringify to tak, że jesteśmy w stanie zobaczyć spacje, więc widzisz tylko spacje tylne pozostają podobnie, jeśli masz trim end tutaj, zobaczysz tylko twoje przednie spacje, a jeśli masz trim tutaj, zobaczysz wszystkie spacje zniknęły
opcjonalne Wiązanie catch
to prowadzi nas do naszego opcjonalnego wiązania dla try-catch, które praktycznie oznacza, że teraz nie masz ograniczony, aby dać złapać błąd tutaj, jeśli nie chcesz go, więc jeśli rzucisz nowy błąd tutaj, możesz uzyskać do niego dostęp tam za pomocą błędu.
ale jesli jakos tego nie chcesz to mozesz po prostu skorzystac z czegos takiego jak hey cos sie popsulo wiec jest to calkowicie w porzadku.
toString ()
ES9 również zmienia funkcję.metoda toString() więc jeśli masz
funkcja moja funkcja tutaj i jeśli robisz log kropki konsoli mojej funkcji dwa ciąg to, co zobaczysz, to twój oryginalny kod źródłowy tej konkretnej funkcji wcześniej te białe spacje te nowe linie jeśli masz tutaj jakieś polecenia, zostaną one usunięte, gdy robisz konsolę.Zaloguj moje drzwi funkcji do ciągu, ale teraz są one zachowane i prawie odzyskać oryginalny kod źródłowy funkcji, które zostały napisane.
sym.opis
Wracając do kolejnej propozycji jaką jest opis symbolu. Więc ostatnio wcześniej, jeśli chcesz porównać symbol, musisz przekształcić go w ciąg znaków, a następnie porównać go przez symbol i wtedy cokolwiek Twój opis był właściwy?
ponieważ jeśli spojrzysz, aby dodać symbol tutaj widać, że w zasadzie tylko symbol. Ale teraz możesz uzyskać dostęp do opisu symbolu za pomocą sym.opis i możesz sprawdzić, czy jest to równe opisowi, który został pierwotnie przekazany.
Szukam darmowego raportu z szacowania budżetu dla ReactJs Development, NodeJS development, AngularJS Development.?