จาวาสคริปต์ ES6

สารบัญ

    แสดงสารบัญ

ECMAScript 2015 เป็นการแก้ไขครั้งใหญ่ครั้งที่สองของ JavaScript

ECMAScript 2015 มีชื่อเรียกอีกอย่างว่า ES6 และ ECMAScript 6

บทนี้จะอธิบายคุณลักษณะที่สำคัญที่สุดของ ES6

คุณสมบัติใหม่ใน ES6

  • คำหลักให้

  • คำสำคัญ const

  • ฟังก์ชั่นลูกศร

  • ... ผู้ดำเนินการ

  • สำหรับ/ของ

  • วัตถุแผนที่

  • ตั้งค่าวัตถุ

  • ชั้นเรียน

  • สัญญา

  • เครื่องหมาย

  • พารามิเตอร์เริ่มต้น

  • พารามิเตอร์ส่วนที่เหลือของฟังก์ชัน

  • String.includes()

  • String.startsWith()

  • String.endsWith()

  • อาร์เรย์.จาก()

  • คีย์อาร์เรย์()

  • อาร์เรย์ค้นหา()

  • อาร์เรย์ findIndex()

  • วิธีคณิตศาสตร์ใหม่

  • คุณสมบัติตัวเลขใหม่

  • วิธีการจำนวนใหม่

  • วิธีการใหม่ระดับโลก

  • รายการวัตถุ

  • โมดูลจาวาสคริปต์

รองรับเบราว์เซอร์สำหรับ 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

จาวาสคริปต์ให้

คีย์เวิร์ด 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

จาวาสคริปต์ const

คีย์เวิร์ด const ช่วยให้คุณสามารถประกาศค่าคงที่ (a ตัวแปร JavaScript ที่มีค่าคงที่)

ค่าคงที่จะคล้ายกับตัวแปรให้ ยกเว้นว่าค่าไม่สามารถเปลี่ยนแปลงได้

ตัวอย่าง

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

ผู้ดำเนินการสเปรด (...)

ตัวดำเนินการ ... จะขยายการทำซ้ำได้ (เช่น อาเรย์) ออกเป็นองค์ประกอบเพิ่มเติม:

ตัวอย่าง

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 ของ JavaScript วนซ้ำ ผ่านค่าของวัตถุที่สามารถทำซ้ำได้

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>

วนซ้ำบนสตริง

ตัวอย่าง

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

แผนที่จาวาสคริปต์

การใช้ออบเจ็กต์เป็นคีย์ถือเป็นคุณลักษณะสำคัญของแผนที่

ตัวอย่าง

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>

เรียนรู้เพิ่มเติมเกี่ยวกับออบเจ็กต์ Map และความแตกต่างระหว่าง Map และ Array ในบท: JavaScript Maps

ชุดจาวาสคริปต์

ตัวอย่าง

// 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

ใช้คำหลัก class เพื่อสร้างคลาส

เพิ่มวิธีการชื่อ constructor() เสมอ:

ไวยากรณ์

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

ตัวอย่าง

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

ตัวอย่างข้างต้นสร้างคลาสชื่อ "รถยนต์"

ชั้นเรียนมีคุณสมบัติเริ่มต้นสองประการ: "ชื่อ" และ "ปี"

คลาส 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

สัญญาจาวาสคริปต์

A 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>

เรียนรู้เพิ่มเติมเกี่ยวกับสัญญาในบท: 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>

พารามิเตอร์ส่วนที่เหลือของฟังก์ชัน

พารามิเตอร์ส่วนที่เหลือ (...) อนุญาตให้ฟังก์ชันปฏิบัติต่ออาร์กิวเมนต์จำนวนไม่ จำกัด ในรูปแบบอาร์เรย์:

ตัวอย่าง

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 จากวัตถุใด ๆ ที่มีความยาว ทรัพย์สินหรือวัตถุที่สามารถทำซ้ำได้

ตัวอย่าง

สร้างอาร์เรย์จากสตริง:

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:

  • <รหัส class="w3-codespan">EPSILON

  • <รหัส class="w3-codespan">MIN_SAFE_INTEGER

  • <รหัส class="w3-codespan">MAX_SAFE_INTEGER

ตัวอย่างของเอปไซลอน

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 วิธี:

  • <รหัส class="w3-codespan">isFinite()

  • <รหัส class="w3-codespan">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 หากอาร์กิวเมนต์คือ น่าน. มิฉะนั้นจะส่งกลับ 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, "กล้วย"]
[1, "ส้ม"]
[2, "แอปเปิ้ล"]
[3, "มะม่วง"]

วิธีการ entries() ไม่เปลี่ยนอาร์เรย์เดิม

โมดูล

โมดูลถูกนำเข้าด้วยสองวิธีที่แตกต่างกัน:

นำเข้าจากการส่งออกที่มีชื่อ

นำเข้าการส่งออกที่มีชื่อจากไฟล์ 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>

เรียนรู้เพิ่มเติมเกี่ยวกับโมดูลใน: โมดูล JavaScript