ES8 - Nowe funkcje

Ten rozdział skupia się na nowych funkcjach w ES8.

Wypełnienie String

ES8 wprowadza dwie funkcje obsługi łańcuchów do wypełniania napisów. Funkcje te mogą służyć do dodawania spacji lub dowolnego zestawu znaków na początku i na końcu wartości ciągu.

Strunowy. padStart ()

Ta funkcja dopełnia bieżący ciąg podanym ciągiem wejściowym wielokrotnie od początku, aż bieżący ciąg osiągnie podaną długość. Składnia funkcji padStart () jest podana poniżej -

Składnia

string_value.padStart(targetLength [, padString])

Funkcja padStart () akceptuje dwa parametry, które są następujące -

targetLength- Wartość liczbowa, która reprezentuje docelową długość ciągu po wypełnieniu. Jeśli wartość tego parametru jest mniejsza lub równa istniejącej długości ciągu, wartość ciągu jest zwracana bez zmian.
padString- To jest opcjonalny parametr. Ten parametr określa znaki, których należy użyć do dopełnienia ciągu. Wartość ciągu jest uzupełniana spacjami, jeśli żadna wartość nie jest przekazywana do tego parametru.

Przykład

Poniższy przykład deklaruje zmienną ciągu, product_cost. Zmienna zostanie uzupełniona zerami od lewej strony, aż całkowita długość ciągu będzie wynosić siedem. Przykład ilustruje również zachowanie funkcji padStart (), jeśli żadna wartość nie jest przekazywana do drugiego parametru.

<script>

   //pad the String with 0
   let product_cost = '1699'.padStart(7,0)
   console.log(product_cost)
   console.log(product_cost.length)

   //pad the String with blank spaces
   let product_cost1 = '1699'.padStart(7)
   console.log(product_cost1)
   console.log(product_cost1.length)
</script>

Wynik powyższego kodu będzie taki, jak podano poniżej -

String.padEnd ()

Ta funkcja dopełnia bieżący ciąg podanym ciągiem wejściowym wielokrotnie od końca, aż bieżący ciąg osiągnie określoną długość.

Składnia funkcji padEnd () jest podana poniżej -

Składnia

string_value.padEnd(targetLength [, padString])

Funkcja padEnd () przyjmuje dwa parametry -

targetLength- Wartość liczbowa, która reprezentuje docelową długość ciągu po wypełnieniu. Jeśli wartość tego parametru jest mniejsza lub równa istniejącej długości ciągu, wartość ciągu jest zwracana bez zmian.
padString- To jest opcjonalny parametr. Ten parametr określa znaki, których należy użyć do dopełnienia ciągu. Wartość ciągu jest uzupełniana spacjami, jeśli żadna wartość nie jest przekazywana do tego parametru.

Przykład

Poniższy przykład deklaruje zmienną ciągu, product_cost. Zmienna zostanie uzupełniona zerami od prawej strony, aż całkowita długość ciągu będzie wynosić siedem. Przykład ilustruje również zachowanie funkcji padStart (), jeśli żadna wartość nie jest przekazywana do drugiego parametru.

<script>

   //pad the string with x
   let product_cost = '1699'.padEnd(7,'x')
   console.log(product_cost)
   console.log(product_cost.length)
   
   //pad the string with spaces
   let product_cost1 = '1699'.padEnd(7)
   console.log(product_cost1)
   console.log(product_cost1.length)
</script>

Wynik powyższego kodu będzie taki, jak wspomniano poniżej -

Końcowe przecinki

Końcowy przecinek to po prostu przecinek po ostatniej pozycji na liście. Końcowe przecinki są również nazywane przecinkami końcowymi.

Końcowe przecinki i tablica

Końcowe przecinki w tablicach są pomijane podczas używania pętli Array.prototype.forEach.

Przykład

Poniższy przykład iteruje tablicę z końcowymi przecinkami przy użyciu pętli foreach.

<script>

   let marks = [100,90,80,,]
   console.log(marks.length)
   console.log(marks)
   marks.forEach(function(e){ //ignores empty value in array
      console.log(e)
   })
</script>

Wynik powyższego kodu będzie taki, jak pokazano poniżej -

4
[100, 90, 80, empty]
100
90
80

Końcowe przecinki i wywołanie funkcji

Końcowe przecinki przekazywane jako argumenty podczas definiowania lub wywoływania funkcji są ignorowane przez aparat wykonawczy JavaScript. Istnieją jednak dwa wyjątki -

Definicje funkcji lub wywołanie zawierające tylko przecinek spowoduje błąd SyntaxError. Na przykład poniższy fragment kodu zgłosi błąd -

function test(,){} // SyntaxError: missing formal parameter
(,)=>{}; //SyntaxError: expected expression, got ','
test(,) //SyntaxError: expected expression, got ','

Końcowych przecinków nie można używać z parametrami reszt.

function test(...arg1,){} // SyntaxError: parameter after rest parameter
(...arg1,)=>{} // SyntaxError: expected closing parenthesis, got ','

Przykład

Poniższy przykład deklaruje funkcję z końcowymi przecinkami na liście argumentów.

<script>

   function sumOfMarks(marks,){ // trailing commas are ignored
      let sum=0;
      marks.forEach(function(e){
         sum+=e;
      })
      return sum;
   }

   console.log(sumOfMarks([10,20,30]))
   console.log(sumOfMarks([1,2,3],))// trailing comma is ignored
</script>

Dane wyjściowe powyższego kodu są następujące -

60
6

Obiekt: wpisy () i wartości ()

ES8 wprowadza następujące nowe metody do wbudowanego typu obiektu -

Object.entries - Za pomocą metody Object.entries () można uzyskać dostęp do wszystkich właściwości obiektu.
Object.values() - Metoda Object.values () może służyć do uzyskiwania dostępu do wartości wszystkich właściwości obiektu.
Object.getOwnPropertyDescriptors()- Ta metoda zwraca obiekt zawierający wszystkie własne deskryptory właściwości obiektu. Pusty obiekt może zostać zwrócony, jeśli obiekt nie ma żadnych właściwości.

Przykład

<script>
   const student ={
      firstName:'Kannan',
      lastName:'Sudhakaran'
   }
   console.log(Object.entries(student))
   console.log(Object.values(student))
</script>

Wynik powyższego kodu będzie następujący -

[
["firstName", "Kannan"],
["lastName", "Sudhakaran"],
]
["Kannan", "Sudhakaran"]

Przykład

<script>
   const marks = [10,20,30,40]
   console.log(Object.entries(marks))
   console.log(Object.values(marks))
</script>

Wynik powyższego kodu będzie taki, jak podano poniżej -

["0", 10],
["1", 20],
["2", 30],
["3", 40]
]
[10, 20, 30, 40]

Przykład

<script>
   const student = {
      firstName : 'Mohtashim',
      lastName: 'Mohammad',
      get fullName(){
         return this.firstName + ':'+ this.lastName
      }
   }
   console.log(Object.getOwnPropertyDescriptors(student))
</script>

Wynik powyższego kodu będzie taki, jak wspomniano poniżej -

{firstName: {value: "Mohtashim", writable: true, enumerable: true, configurable: true}
fullName: {get: ƒ, set: undefined, enumerable: true, configurable: true}
lastName: {value: "Mohammad", writable: true, enumerable: true, configurable: true}
}

Async and Await

Async / Await to bardzo ważna funkcja w ES8, która jest cukrem syntaktycznym dla Obietnic w JavaScript. Słowo kluczowe await jest używane z obietnicami. Tego słowa kluczowego można użyć do wstrzymania wykonywania funkcji do czasu rozliczenia obietnicy. Słowo kluczowe await zwraca wartość obietnicy, jeśli obietnica zostanie rozwiązana, podczas gdy zgłasza błąd, jeśli obietnica zostanie odrzucona. Funkcja await może być używana tylko wewnątrz funkcji oznaczonych jako asynchroniczne. Funkcja zadeklarowana przy użyciu słowa kluczowego async zawsze zwraca obietnicę.

Składnia

Składnia funkcji async z await jest podana poniżej -

async function function_name(){
   let result_of_functionCall = await longRunningMethod();
}
//invoking async function

function_name().then(()=>{})
   .catch(()=>{})

Rozważmy przykład, który ma funkcję asynchroniczną, której wykonanie zajmuje dwie sekundy i zwraca wartość ciągu. Funkcję można wywołać na dwa sposoby, jak pokazano poniżej

Korzystanie promise.then ()
Korzystanie z aync / await.

Poniższy kod pokazuje wywołanie funkcji asynchronicznej przy użyciu tradycyjnej składni ES6 - promise.then ()

<script>
   function fnTimeConsumingWork(){
      return new Promise((resolve,reject)=>{
         setTimeout(() => {
            resolve('response is:2 seconds have passed')
         }, 2000);
      })
   }

   fnTimeConsumingWork().then(resp=>{
      console.log(resp)
   })
   console.log('end of script')
</script>

Wynik powyższego kodu będzie następujący -

end of script
response is:2 seconds have passed

Poniższy kod przedstawia bardziej przejrzysty sposób wywoływania funkcji asynchronicznej przy użyciu składni ES8 - async / await

<script>
   function fnTimeConsumingWork(){
      return new Promise((resolve,reject)=>{
         setTimeout(() => {
            resolve('response is:2 seconds have passed')
         }, 2000);
      })
   }
   async function my_AsyncFunc(){
      console.log('inside my_AsyncFunc')
      const response = await fnTimeConsumingWork();// clean and readable
      console.log(response)
   }
   my_AsyncFunc();
   console.log("end of script")
</script>

Wynik powyższego kodu będzie taki, jak wspomniano poniżej -

inside my_AsyncFunc
end of script
response is:2 seconds have passed

Obietnica łańcuchowa z Async / await

Poniższy przykład implementuje łańcuch obietnicy przy użyciu składni async / await.

W tym przykładzie add_positivenos_async()funkcja dodaje dwie liczby asynchronicznie i odrzuca, jeśli przekazywane są wartości ujemne. Wynik bieżącego wywołania funkcji asynchronicznej jest przekazywany jako parametr do kolejnych wywołań funkcji.

<script>
   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         } else
            reject('NOT_Postive_Number_Passed')
      })
      return p;
   }
   async function addInSequence() {
      let r1 = await add_positivenos_async(10, 20)
      console.log("first result", r1);
      let r2 = await add_positivenos_async(r1, r1);
      console.log("second result", r2)
      let r3 = await add_positivenos_async(r2, r2);
      console.log("third result", r3)
      return "Done Sequence"
   }
   addInSequence().then((r)=>console.log("Async :",r));
   console.log('end')
</script>

Wynik powyższego kodu będzie taki, jak podano poniżej -

end
first result 30
second result 60
third result 120
Async : Done Sequence