JavaScript ES6


Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Το ECMAScript 2015 ήταν η δεύτερη σημαντική αναθεώρηση της JavaScript.

Το ECMAScript 2015 είναι επίσης γνωστό ως ES6 και ECMAScript 6.

Αυτό το κεφάλαιο περιγράφει τα πιο σημαντικά χαρακτηριστικά του ES6.

Νέες δυνατότητες στο ES6

  • Η λέξη-κλειδί let

  • Η λέξη-κλειδί const

  • Λειτουργίες βέλους

  • Ο χειριστής

  • Για/για

  • Αντικείμενα χάρτη

  • Ορισμός αντικειμένων

  • Τάξεις

  • Υποσχέσεις

  • Σύμβολο

  • Προεπιλεγμένες παράμετροι

  • Παράμετρος ανάπαυσης συνάρτησης

  • String.includes()

  • String.startsWith()

  • String.endsWith()

  • Array.from()

  • Πλήκτρα πίνακα()

  • Εύρεση πίνακα()

  • Πίνακας findIndex()

  • Νέες Μαθηματικές Μέθοδοι

  • Ιδιότητες νέων αριθμών

  • Νέες μέθοδοι αριθμών

  • Νέες παγκόσμιες μέθοδοι

  • Εγγραφές αντικειμένων

  • Ενότητες JavaScript


Υποστήριξη προγράμματος περιήγησης για ES6 (2015)

Το Safari 10 και το Edge 14 ήταν τα πρώτα προγράμματα περιήγησης που υποστήριξαν πλήρως το ES6:

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
Jan 2017 Aug 2016 Mar 2017 Jul 2016 Aug 2018

JavaScript άδεια

Η λέξη-κλειδί let σάς επιτρέπει να δηλώσετε μια μεταβλητή με εμβέλεια μπλοκ.

Παράδειγμα

var x = 10;
// Here x is 10
{ 
  let x = 2;
    // Here x is 2
}
// Here x is 10

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using let</h2>

<p id="demo"></p>

<script>
let  x = 10;
// Here x is 10

{  
  let x = 2;
  // Here x is 2
}

// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


Διαβάστε περισσότερα για το let στο κεφάλαιο: JavaScript Let.


Συντ. JavaScript

Η λέξη-κλειδί const σας επιτρέπει να δηλώσετε μια σταθερά (α μεταβλητή JavaScript με σταθερή τιμή).

Οι σταθερές είναι παρόμοιες με τις μεταβλητές let, με τη διαφορά ότι η τιμή δεν μπορεί να αλλάξει.

Παράδειγμα

var x = 10;
// Here x is 10
{ 
  const x = 2;
    // Here x is 2
}
// Here x is 10

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Declaring a Variable Using const</h2>

<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10
{  
  const x = 2;
  // Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


Διαβάστε περισσότερα για το const στο κεφάλαιο: JavaScript Const.



Λειτουργίες βέλους

Οι συναρτήσεις βέλους επιτρέπουν μια σύντομη σύνταξη για τη σύνταξη παραστάσεων συναρτήσεων.

Δεν χρειάζεστε τη λέξη-κλειδί function, τη λέξη-κλειδί return και το αγκύλες σγουρές.

Παράδειγμα

// ES5
var x = function(x, y) {
     
   return x * y;
}

// ES6
const x = (x, y) => x * y;
 

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>

<p>Arrow functions are not supported in IE11 or earlier.</p>

<p id="demo"></p>

<script>
const x = (x, y) =&gt; x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Οι συναρτήσεις βέλους δεν έχουν το δικό τους αυτό. Δεν είναι κατάλληλα για τον ορισμό μεθόδων αντικειμένων.

Οι λειτουργίες βέλους δεν ανυψώνονται. Πρέπει να οριστούν πριν χρησιμοποιηθούν.

Χρησιμοποιώντας το const είναι πιο ασφαλές από τη χρήση του var, επειδή μια έκφραση συνάρτησης είναι πάντα σταθερή τιμή.

Μπορείτε να παραλείψετε τη λέξη-κλειδί return και τις σγουρές αγκύλες μόνο εάν η συνάρτηση είναι μία πρόταση. Εξαιτίας αυτού, ίσως είναι καλή συνήθεια να τα κρατάτε πάντα:

Παράδειγμα

const x = (x, y) => { return x * y };
 

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>Arrow functions are not supported in IE11 or earlier.</p>

<p id="demo"></p>

<script>
const x = (x, y) =&gt; { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Μάθετε περισσότερα για τις Λειτουργίες βέλους στο κεφάλαιο: Λειτουργία βέλους JavaScript.


Ο χειριστής του Spread (...).

Ο τελεστής ... επεκτείνει έναν επαναληπτικό (όπως ένας πίνακας) σε περισσότερα στοιχεία:

Παράδειγμα

const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>

<p>The "spread" operator spreads elements of iterable objects:</p>

<p id="demo"></p>

<script>
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];
document.getElementById("demo").innerHTML = year; 
</script>

</body>
</html>

Ο τελεστής ... μπορεί να χρησιμοποιηθεί για την επέκταση ενός επαναληπτικού σε περισσότερα ορίσματα για κλήσεις συναρτήσεων:

Παράδειγμα

const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>
<p>The "Spread" operator can be used to expand an iterable into more arguments for function calls:</p>

<p id="demo"></p>

<script>
const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);

document.getElementById("demo").innerHTML = maxValue; 
</script>

</body>
</html>

Το For/Of Loop

Οι βρόχοι δηλώσεων JavaScript for/of μέσω των τιμών ενός επαναλαμβανόμενου αντικειμένου.

Το for/of σάς επιτρέπει να κάνετε βρόχο πάνω από δομές δεδομένων που είναι επαναλαμβανόμενα όπως Arrays, Strings, Maps, NodeLists και άλλα.

Ο βρόχος for/of έχει την ακόλουθη σύνταξη:

for (variable of iterable) {
      // code block to be executed
}

μεταβλητή - Για κάθε επανάληψη η τιμή της επόμενης ιδιότητας είναι αποδίδεται στη μεταβλητή. Η Μεταβλητή μπορεί να δηλωθεί με const, αφήστε ή var.

iterable - Ένα αντικείμενο που έχει επαναλαμβανόμενες ιδιότητες.

Κάνοντας βρόχο πάνω από έναν πίνακα

Παράδειγμα

const cars = ["BMW", "Volvo", "Mini"];
let text = "";

for (let x of cars) {
  text += x + " ";
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Of Loop</h2>
<p>The for of statement loops through the values of any iterable object:</p>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Mini"];

let text = "";
for (let x of cars) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Looping πάνω από μια χορδή

Παράδειγμα

let language = "JavaScript";
let text = "";


for (let x of language) {
  
  text += x + " ";
}
  

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Of Loop</h2>

<p>The for of statement loops through the values of an iterable object.</p>

<p id="demo"></p>

<script>
let language = "JavaScript";

let text = "";
for (let x of language) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Μάθετε περισσότερα στο κεφάλαιο: JavaScript Loop For/In/Of.


Χάρτες JavaScript

Η δυνατότητα χρήσης ενός Αντικειμένου ως κλειδιού είναι μια σημαντική λειτουργία του χάρτη.

Παράδειγμα

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Μάθετε περισσότερα σχετικά με τα αντικείμενα χάρτη και τη διαφορά μεταξύ χάρτη και πίνακα, στο κεφάλαιο: Χάρτες JavaScript.


Σύνολα JavaScript

Παράδειγμα

// Create a Set
const letters = new Set();

// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add values to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Μάθετε περισσότερα σχετικά με το Σετ αντικειμένων στο κεφάλαιο: Σύνολα JavaScript.


Τάξεις JavaScript

Οι τάξεις JavaScript είναι πρότυπα για αντικείμενα JavaScript.

Χρησιμοποιήστε τη λέξη-κλειδί κλάση για να δημιουργήσετε μια τάξη.

Να προσθέτετε πάντα μια μέθοδο με το όνομα constructor():

Σύνταξη

class ClassName {
   constructor() { ... }
}

Παράδειγμα

class Car {
   constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

Το παραπάνω παράδειγμα δημιουργεί μια κλάση με το όνομα "Car".

Η κλάση έχει δύο αρχικές ιδιότητες: "όνομα" και "έτος".

Μια κλάση JavaScript δεν είναι αντικείμενο.

Είναι ένα πρότυπο για αντικείμενα JavaScript.


Χρησιμοποιώντας μια τάξη

Όταν έχετε μια κλάση, μπορείτε να χρησιμοποιήσετε την κλάση για να δημιουργήσετε αντικείμενα:

Παράδειγμα

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes</h1>
<p>Creating two car objects from a car class:</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

document.getElementById("demo").innerHTML =
myCar1.name + " " + myCar2.name;
</script>

</body>
</html>

Μάθετε περισσότερα για τις τάξεις στο κεφάλαιο: Τάξεις JavaScript.


Υποσχέσεις JavaScript

Το Promise είναι ένα αντικείμενο JavaScript που συνδέει τον "Κώδικα παραγωγής" και τον "Κώδικα κατανάλωσης".

Η "Παραγωγή Κώδικα" μπορεί να πάρει κάποιο χρόνο και η "Κωδικός κατανάλωσης" πρέπει να περιμένει το αποτέλεσμα.

Σύνταξη υπόσχεσης

const myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Παράδειγμα χρήσης μιας υπόσχεσης

const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function(){ myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});
</script>

</body>
</html>

Μάθετε περισσότερα για το Promises στο κεφάλαιο: JavaScript Promises.


Ο τύπος συμβόλου

Ένα σύμβολο JavaScript είναι ένας πρωτόγονος τύπος δεδομένων όπως ο αριθμός, η συμβολοσειρά ή ο δυαδικός.

Αντιπροσωπεύει ένα μοναδικό "κρυφό" αναγνωριστικό στο οποίο κανένας άλλος κώδικας δεν μπορεί να έχει πρόσβαση κατά λάθος.

Για παράδειγμα, εάν διαφορετικοί κωδικοποιητές θέλουν να προσθέσουν μια ιδιότητα person.id σε ένα αντικείμενο ατόμου που ανήκει σε κωδικό τρίτου μέρους, θα μπορούσαν να αναμείξουν ο ένας τις αξίες του άλλου.

Χρησιμοποιώντας το Symbol() για τη δημιουργία μοναδικών αναγνωριστικών, επιλύεται αυτό το πρόβλημα:

Παράδειγμα

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

let id = Symbol('id');
person[id] = 140353;
// Now person[id] = 140353
// but person.id is still undefined

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Using JavaScript Symbol()</h2>

<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

let id = Symbol('id');
person[id] = 140353;

document.getElementById("demo").innerHTML = person[id] + " " + person.id;
</script>

</body>
</html>

Σημείωση

Τα σύμβολα είναι πάντα μοναδικά.

Εάν δημιουργήσετε δύο σύμβολα με την ίδια περιγραφή θα έχουν διαφορετικές τιμές:

Symbol("id") == Symbol("id"); // false

Προεπιλεγμένες τιμές παραμέτρων

Το ES6 επιτρέπει στις παραμέτρους συναρτήσεων να έχουν προεπιλεγμένες τιμές.

Παράδειγμα

function myFunction(x, y = 10) {	  // y is 10 if not passed or undefined	  return x + y;
}
myFunction(5); // will return 15

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Default Parameter Values</h2>
<p>If y is not passed or undefined, then y = 10:</p>

<p id="demo"></p>

<script>
function myFunction(x, y = 10) {
  return x + y;
}
document.getElementById("demo").innerHTML = myFunction(5);
</script>

</body>
</html>



Παράμετρος ανάπαυσης συνάρτησης

Η παράμετρος rest (...) επιτρέπει σε μια συνάρτηση να αντιμετωπίζει έναν απροσδιόριστο αριθμό ορισμάτων ως πίνακα:

Παράδειγμα

function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Rest Parameter</h2>

<p>The rest parameter (...) allows a function to treat an indefinite number of arguments as an array:</p>

<p id="demo"></p>

<script>
function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

String.includes()

Η μέθοδος includes() επιστρέφει true εάν μια συμβολοσειρά περιέχει μια καθορισμένη τιμή, διαφορετικά false:

Παράδειγμα

let text = "Hello world, welcome to the universe.";
text.includes("world")    // Returns true

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>

<p>Check if a string includes "world":</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>

</body>
</html>

String.startsWith()

Η μέθοδος startsWith() επιστρέφει true εάν μια συμβολοσειρά ξεκινά με μια καθορισμένη τιμή, διαφορετικά false:

Παράδειγμα

let text = "Hello world, welcome to the universe.";

text.startsWith("Hello")   // Returns true

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>
<p>Check if a string starts with "Hello":</p>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("Hello");
</script>

</body>
</html>

String.endsWith()

Η μέθοδος endsWith() επιστρέφει true εάν μια συμβολοσειρά τελειώνει με μια καθορισμένη τιμή, διαφορετικά false:

Παράδειγμα

var text = "John Doe";
text.endsWith("Doe")    // Returns true

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check if a string ends with "Doe":</p>

<p id="demo"></p>

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "John Doe";
document.getElementById("demo").innerHTML = text.endsWith("Doe");
</script>

</body>
</html>

Array.from()

Η μέθοδος Array.from() επιστρέφει ένα αντικείμενο Array από οποιοδήποτε αντικείμενο με μήκος ιδιοκτησία ή οποιοδήποτε επαναλήψιμο αντικείμενο.

Παράδειγμα

Δημιουργήστε έναν πίνακα από μια συμβολοσειρά:

Array.from("ABCDEFG")   // Returns [A,B,C,D,E,F,G]

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The from() Method</h2>

<p>Return an array object from any object with a length property or any iterable object.</p>

<p id="demo"></p>

<script>
const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = myArr;
</script>

<p>The Array.from() method is not supported in Internet Explorer.</p>

</body>
</html>

Πλήκτρα πίνακα()

Η μέθοδος keys() επιστρέφει ένα αντικείμενο Array Iterator με τα κλειδιά ενός πίνακα.

Παράδειγμα

Δημιουργήστε ένα αντικείμενο Array Iterator, που περιέχει τα κλειδιά του πίνακα:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The keys() Method</h2>

<p>Return an Array Iterator object with the keys of the array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

<p>Array.keys() is not supported in Internet Explorer.</p>

</body>
</html>

Εύρεση πίνακα()

Η μέθοδος find() επιστρέφει την τιμή του πρώτου στοιχείου πίνακα που περνάει λειτουργία δοκιμής.

Αυτό το παράδειγμα βρίσκει (επιστρέφει την τιμή του ) το πρώτο στοιχείο που είναι μεγαλύτερο από 18:

Παράδειγμα

 const numbers = [4, 9, 16, 25, 29];
let first = 
  numbers.find(myFunction);
function myFunction(value, index, array) {
    return 
  value > 18;
} 

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The find() Method</h2>

<p id="demo"></p>

<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

document.getElementById("demo").innerHTML = "First number over 18 is " + first;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Σημειώστε ότι η συνάρτηση παίρνει 3 ορίσματα:

  • Η τιμή του στοιχείου

  • Το ευρετήριο του στοιχείου

  • Ο ίδιος ο πίνακας


Πίνακας findIndex()

Η μέθοδος findIndex() επιστρέφει το ευρετήριο του πρώτου στοιχείου πίνακα που περνά μια δοκιμαστική συνάρτηση.

Αυτό το παράδειγμα βρίσκει το ευρετήριο του πρώτου στοιχείου που είναι μεγαλύτερο από 18:

Παράδειγμα

 const numbers = [4, 9, 16, 25, 29];
let first = 
  numbers.findIndex(myFunction);
function myFunction(value, index, array) {
    return 
  value > 18;
} 

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The findIndex() Method</h2>

<p id="demo"></p>

<script>
const numbers = [4, 9, 16, 25, 29];

document.getElementById("demo").innerHTML = "First number over 18 has index " + numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Σημειώστε ότι η συνάρτηση παίρνει 3 ορίσματα:

  • Η τιμή του στοιχείου

  • Το ευρετήριο του στοιχείου

  • Ο ίδιος ο πίνακας


Νέες Μαθηματικές Μέθοδοι

Το ES6 πρόσθεσε τις ακόλουθες μεθόδους στο αντικείμενο Math:

  • Math.trunc()

  • Math.sign()

  • Math.cbrt()

  • Math.log2()

  • Math.log10()


Η μέθοδος Math.trunc().

Το Math.trunc(x) επιστρέφει το ακέραιο μέρος του x:

Παράδειγμα

Math.trunc(4.9);    // returns 4
Math.trunc(4.7);    // returns 4
Math.trunc(4.4);    // returns 4
Math.trunc(4.2);    // returns 4
Math.trunc(-4.2);    // returns -4

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.trunc()</h2>

<p>Math.trunc(x) returns the integer part of x:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.trunc(4.7);
</script>

</body>
</html>

Η μέθοδος Math.sign().

Το Math.sign(x) επιστρέφει εάν το x είναι αρνητικό, μηδενικό ή θετικό:

Παράδειγμα

Math.sign(-4);    // returns -1
Math.sign(0);    // returns 0
Math.sign(4);    // returns 1

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.sign()</h2>

<p>Math.sign(x) returns if x is negative, null or positive:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.sign(4);
</script>

</body>
</html>

Η μέθοδος Math.cbrt().

Το Math.cbrt(x) επιστρέφει την κυβική ρίζα του x:

Παράδειγμα

Math.cbrt(8);    // returns 2
Math.cbrt(64);    // returns 4
Math.cbrt(125);    // returns 5

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.cbrt()</h2>

<p>Math.cbrt(x) returns the cube root of x:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.cbrt(8);
</script>

</body>
</html>

Η μέθοδος Math.log2().

Το Math.log2(x) επιστρέφει τον λογάριθμο βάσης 2 του x:

Παράδειγμα

Math.log2(2);    // returns 1

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.log2()</h2>

<p>Math.log2() returns the base 2 logarithm of a number.</p>
<p>How many times must we multiply 2 to get 8?</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.log2(8);
</script>

</body>
</html>

Η μέθοδος Math.log10().

Το Math.log10(x) επιστρέφει τον βασικό λογάριθμο 10 του x:

Παράδειγμα

Math.log10(10);    // returns 1

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.log10()</h2>

<p>Math.log10() returns the base 10 logarithm of a number.</p>
<p>How many times must we multiply 10 to get 1000?</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.log10(1000);
</script>

</body>
</html>

Ιδιότητες νέων αριθμών

Το ES6 πρόσθεσε τις ακόλουθες ιδιότητες στο αντικείμενο Number:

  • EPSILON

  • MIN_SAFE_INTEGER

  • MAX_SAFE_INTEGER

EPSILON Παράδειγμα

let x = Number.EPSILON;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>EPSILON</p>

<p id="demo"></p>

<script>
let x = Number.EPSILON;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

MIN_SAFE_INTEGER Παράδειγμα

let x = Number.MIN_SAFE_INTEGER;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>MIN_SAFE_INTEGER</p>

<p id="demo"></p>

<script>
let  x = Number.MIN_SAFE_INTEGER;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

MAX_SAFE_INTEGER Παράδειγμα

let x = Number.MAX_SAFE_INTEGER;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>MAX_SAFE_INTEGER</p>

<p id="demo"></p>

<script>
let  x = Number.MAX_SAFE_INTEGER;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Νέες μέθοδοι αριθμών

Το ES6 πρόσθεσε 2 νέες μεθόδους στο αντικείμενο Number:

  • Number.isInteger()

  • Number.isSafeInteger()


Η μέθοδος Number.isInteger().

Η μέθοδος Number.isInteger() επιστρέφει true εάν το όρισμα είναι ακέραιος.

Παράδειγμα

Number.isInteger(10);        // returns true
Number.isInteger(10.5);      // returns false

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isInteger() Method</h2>

<p>The isInteger() method returns true if the argument is an integer.</p>
<p>Otherwise it returns false.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number.isInteger(10) + "<br>" + Number.isInteger(10.5);
</script>

</body>
</html>

Η μέθοδος Number.isSafeInteger().

Ένας ασφαλής ακέραιος είναι ένας ακέραιος αριθμός που μπορεί να αναπαρασταθεί ακριβώς ως αριθμός διπλής ακρίβειας.

Η μέθοδος Number.isSafeInteger() επιστρέφει true εάν το όρισμα είναι ασφαλής ακέραιος αριθμός.

Παράδειγμα

Number.isSafeInteger(10);    // returns true
Number.isSafeInteger(12345678901234567890);  // returns false

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isSafeInteger() Method</h2>

<p>The isSafeInteger() method returns true if the argument is a safe integer.</p>
<p>Otherwise it returns false.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number.isSafeInteger(10) + "<br>" + Number.isSafeInteger(12345678901234567890);
</script>

</body>
</html>

Οι ασφαλείς ακέραιοι αριθμοί είναι όλοι οι ακέραιοι από -(253 - 1) έως +(253 - 1).
Αυτό είναι ασφαλές: 9007199254740991. Αυτό δεν είναι ασφαλές: 9007199254740992.


Νέες παγκόσμιες μέθοδοι

Το ES6 πρόσθεσε 2 νέες μεθόδους καθολικού αριθμού:

  • isFinite()

  • isNaN()


Η μέθοδος isFinite().

Η καθολική μέθοδος isFinite() επιστρέφει false εάν το όρισμα είναι Άπειρο ή NaN.

Διαφορετικά, επιστρέφει true:

Παράδειγμα

isFinite(10/0);       // returns false
isFinite(10/1);       // returns true

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isFinite() Method</h2>

<p>The isFinite() method returns false if the argument is Infinity or NaN.</p>
<p>Otherwise it returns true.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
isFinite(10 / 0) + "<br>" + isFinite(10 / 1);
</script>

</body>
</html>

Η μέθοδος isNaN().

Η καθολική μέθοδος isNaN() επιστρέφει true εάν το όρισμα είναι NaN. Διαφορετικά, επιστρέφει false:

Παράδειγμα

isNaN("Hello");       // returns true

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isNaN() Method</h2>

<p>The isNan() method returns true if the argument is NaN. Otherwise it returns false.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
isNaN("Hello") + "<br>" + isNaN("10");
</script>

</body>
</html>

Καταχωρήσεις αντικειμένων()

Παράδειγμα

Δημιουργήστε ένα Array Iterator και, στη συνέχεια, επαναλάβετε τα ζεύγη κλειδιών/τιμών:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
  document.getElementById("demo").innerHTML += x;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arrays</h1>
<h2>The entries() method</h2>

<p>entries() returns an Array Iterator object with key/value pairs:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

for (let x of f) {
  document.getElementById("demo").innerHTML += x + "<br>";
}
</script>

<p>The entries() method is not supported in Internet Explorer 11 (or earlier).</p>

</body>
</html>

Η μέθοδος entries() επιστρέφει ένα αντικείμενο Array Iterator με ζεύγη κλειδιών/τιμών:

[0, "Banana"]
[1, "Orange"]
[2, "Apple"]
[3, "Mango"]

Η μέθοδος entries() δεν αλλάζει τον αρχικό πίνακα.


Ενότητες

Τα modules εισάγονται με δύο διαφορετικούς τρόπους:

Εισαγωγή από επώνυμες εξαγωγές

Εισαγωγή εξαγωγών με όνομα από το αρχείο person.js:

import { name, age } from "./person.js";

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import { name, age } from "./person.js";

let text = "My name is " + name + ", I am " + age + ".";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Εισαγωγή από προεπιλεγμένες εξαγωγές

Εισαγάγετε μια προεπιλεγμένη εξαγωγή από το αρχείο message.js:

import message from "./message.js";

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

Μάθετε περισσότερα για τα Modules στο: JavaScript Modules.