Javascript ES6

ECMAScript 2015 သည် JavaScript အတွက် ဒုတိယ အဓိက ပြန်လည်ပြင်ဆင်မှုဖြစ်သည်။

ECMAScript 2015 ကို ES6 နှင့် ECMAScript 6 ဟုခေါ်သည်။

ဤအခန်းသည် ES6 ၏ အရေးကြီးဆုံးအင်္ဂါရပ်များကို ဖော်ပြသည်။

ES6 တွင် အင်္ဂါရပ်အသစ်များ

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သော့ချက်စကားလုံးသည် သင့်အား block scope ပါသော variable တစ်ခုကိုကြေငြာရန်ခွင့်ပြုသည် ။

ဥပမာ

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

letအခန်းတွင် ပိုမိုဖတ်ရှုပါ - JavaScript Let .

JavaScript const

constသော့ချက်စကားလုံးသည် သင့်အား ကိန်းသေတစ်ခု (ကိန်းသေတန်ဖိုးတစ်ခုရှိသော JavaScript ကိန်းသေတစ်ခု) ကိုကြေငြာရန် ခွင့်ပြုသည် ။

ကိန်းသေများသည် တန်ဖိုးကို ပြောင်းလဲ၍မရပါက ကိန်းရှင်များကို ခွင့်ပြုခြင်းနှင့် ဆင်တူသည်။

ဥပမာ

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

constအခန်းတွင် ပိုမိုဖတ်ရှုပါ - JavaScript Const .

Arrow လုပ်ဆောင်ချက်များ

Arrow functions များသည် function expressions များကိုရေးသားရန်အတွက် short syntax ကိုခွင့်ပြုသည်။

functionသော့ချက်စကားလုံး၊ returnသော့ချက်စကားလုံးနှင့် ကောက်ကောက်ကွင်းပိတ်များ မလိုအပ်ပါ ။

ဥပမာ

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

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

Arrow လုပ်ဆောင်ချက်များသည် ၎င်းတို့ကိုယ်ပိုင် thisမရှိပါ။ အရာဝတ္ထုနည်းလမ်းများကို သတ်မှတ်ခြင်းအတွက် ၎င်းတို့သည် ကောင်းစွာမသင့်တော်ပါ ။

မြှားလုပ်ဆောင်ချက်များကို လွှင့်မထားပါ။ အသုံး မပြုမီ ၎င်းတို့ကို သတ်မှတ်ရပါမည် ။

လုပ်ဆောင်ချက်ဖော်ပြချက်သည် အမြဲတမ်းကိန်းသေတန်ဖိုးတစ်ခုဖြစ်သောကြောင့် အသုံးပြုခြင်း const သည် အသုံးပြုခြင်းထက် ပိုလုံခြုံပါသည် ။var

returnလုပ်ဆောင်ချက်သည် တစ်ခုတည်းသောဖော်ပြချက်ဖြစ်ပါက သော့ချက်စကားလုံးနှင့် ကောက်ကောက်ကွင်းကွင်းများကို သာ ချန်လှပ်နိုင်သည် ။ ထို့အတွက်ကြောင့် ၎င်းတို့ကို အမြဲထိန်းသိမ်းထားရန် အလေ့အကျင့်ကောင်းတစ်ခု ဖြစ်နိုင်သည်-

ဥပမာ

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

အခန်းတွင် Arrow Functions အကြောင်း ပိုမိုလေ့လာပါ- JavaScript Arrow Function .

For/O of Loop

JavaScript for/ofကြေငြာချက်သည် ထပ်တလဲလဲလုပ်နိုင်သော အရာဝတ္ထုများ၏ တန်ဖိုးများမှတဆင့် လှည့်ပတ်နေသည်။

for/of Arrays၊ Strings၊ Maps၊ NodeLists နှင့် အခြားအရာများကဲ့သို့ ထပ်တလဲလဲရနိုင်သော ဒေတာဖွဲ့စည်းပုံများကို သင့်အား လှည့်ပတ်ကြည့်ရှုနိုင်စေပါသည်။

loop တွင် အောက်ပါ for/ofsyntax ပါရှိသည်။

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

variable - ထပ်ခါထပ်ခါတိုင်းအတွက် နောက်ပစ္စည်းတန်ဖိုးကို variable သို့ သတ်မှတ်ပေးသည်။ Variable ကို const, let, သို့မဟုတ် var.

iterable - ထပ်တူကျနိုင်သော ဂုဏ်သတ္တိများရှိသော အရာဝတ္ထု။

Array တစ်ခုကို လှည့်ပတ်နေသည်။

ဥပမာ

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

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

ကြိုးတစ်ချောင်းကို လှည့်နေသည်။

ဥပမာ

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

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

အခန်းတွင် ပိုမိုလေ့လာပါ- JavaScript Loop For/In/Of .

JavaScript Map Objects

Object တစ်ခုကို သော့တစ်ခုအနေနဲ့ သုံးရတာက အရေးကြီးတဲ့ Map အင်္ဂါရပ်တစ်ခုပါ။

ဥပမာ

// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

// Create a new Map
const fruits = new Map();

// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

အခန်းရှိ မြေပုံအရာဝတ္ထုများအကြောင်း ပိုမိုလေ့လာပါ- JavaScript Map() ။

JavaScript တွင် Objects များကို သတ်မှတ်ပါ။

ဥပမာ

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

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

အခန်းတွင် သတ်မှတ်အရာဝတ္ထုများအကြောင်း ပိုမိုလေ့လာပါ- JavaScript Set() ။

JavaScript အတန်းများ

JavaScript Classes များသည် JavaScript Objects အတွက် နမူနာများဖြစ်သည်။

classအတန်းတစ်ခုဖန်တီးရန် အဓိကစကားလုံးကို အသုံးပြုပါ ။

အမည်ရှိ နည်းလမ်းကို အမြဲထည့် constructor()ပါ

အထားအသို

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

ဥပမာ

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

အထက်ဖော်ပြပါ ဥပမာသည် "ကား" ဟူသော အတန်းတစ်ခုကို ဖန်တီးပေးသည်။

အတန်းတွင် ကနဦးဂုဏ်သတ္တိနှစ်ခုရှိသည်- "အမည်" နှင့် "နှစ်" ။

JavaScript အတန်းသည် အရာဝတ္ထု တစ်ခုမဟုတ်ပါ ။

၎င်းသည် JavaScript အရာဝတ္ထုများအတွက် နမူနာပုံစံ တစ်ခုဖြစ်သည်။

Class ကိုအသုံးပြုခြင်း။

သင့်တွင် class တစ်ခုရှိသောအခါ၊ သင်သည် အရာဝတ္ထုများဖန်တီးရန် class ကိုသုံးနိုင်သည်။

ဥပမာ

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

အခန်းရှိ အတန်းများအကြောင်း ပိုမိုလေ့လာပါ- JavaScript Classes .

JavaScript ကတိများ

Promise သည် "Producing Code" နှင့် "Consuming Code" တို့ကို ချိတ်ဆက်ထားသည့် JavaScript object တစ်ခုဖြစ်သည်။

"ထုတ်လုပ်ရေးကုဒ်" သည် အချိန်အနည်းငယ်ကြာနိုင်ပြီး "စားသုံးမှုကုဒ်" ရလဒ်ကို စောင့်ရပါမည်။

Promise Syntax

ကတိကိုအသုံးပြုခြင်း ဥပမာ

အခန်းတွင် ကတိများအကြောင်း ပိုမိုလေ့လာပါ- JavaScript Promises .

သင်္ကေတအမျိုးအစား

JavaScript သင်္ကေတသည် Number၊ String သို့မဟုတ် Boolean ကဲ့သို့သော မူလဒေတာအမျိုးအစားဖြစ်သည်။

၎င်းသည် အခြားကုဒ်ကို မတော်တဆဝင်ရောက်၍မရသော ထူးခြားသော "ဝှက်ထားသော" အထောက်အထားကို ကိုယ်စားပြုသည်။

ဥပမာအားဖြင့်၊ မတူညီသောကုဒ်သမားများသည် ပြင်ပကုဒ်တစ်ခုပိုင်ဆိုင်သော လူတစ်ဦး၏အရာဝတ္တုသို့ 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

သင်္ကေတများသည် အမြဲတမ်းထူးခြားသည်။

တူညီသောဖော်ပြချက်ဖြင့် သင်္ကေတနှစ်ခုကို ဖန်တီးပါက ၎င်းတို့တွင် မတူညီသောတန်ဖိုးများ ရှိမည်ဖြစ်သည်။

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

Function Rest Parameter

ကျန်သော ကန့်သတ်ဘောင် (...) သည် array တစ်ခုအနေဖြင့် မရေမတွက်နိုင်သော အငြင်းအခုံအရေအတွက်ကို ကုသရန် function တစ်ခုကို ခွင့်ပြုသည်-

ဥပမာ

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);

String.includes()

စာကြောင်းတစ်ကြောင်း တွင် သတ်မှတ်ထားသောတန်ဖိုးပါရှိလျှင် includes()နည်းလမ်းသည် ပြန်ပို့ ပေးသည်၊ သို့မဟုတ်ပါက ၊truefalse

ဥပမာ

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

String.startsWith()

သတ်မှတ်ထားသောတန်ဖိုးဖြင့် အစပြုပါက၊ သို့မဟုတ်ပါက နည်းလမ်း startsWith()သည် :truefalse

ဥပမာ

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

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

String.endsWith()

သတ်မှတ်ထားသောတန်ဖိုးဖြင့် စာကြောင်းတစ်ခု အဆုံးသတ်ပါက နည်းလမ်းသည် ပြန်လာသည်၊ သို့မဟုတ် ပါ endsWith()က ၊truefalse

ဥပမာ

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

Array.from()

The Array.from() method returns an Array object from any object with a length property or any iterable object.

Example

Create an Array from a String:

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

Array keys()

The keys() method returns an Array Iterator object with the keys of an array.

Example

Create an Array Iterator object, containing the keys of the array:

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

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

Array find()

The find() method returns the value of the first array element that passes a test function.

This example finds (returns the value of ) the first element that is larger than 18:

Example

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

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

Note that the function takes 3 arguments:

The item value
The item index
The array itself

Array findIndex()

The findIndex() method returns the index of the first array element that passes a test function.

This example finds the index of the first element that is larger than 18:

Example

const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);

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

Note that the function takes 3 arguments:

The item value
The item index
The array itself

New Math Methods

ES6 added the following methods to the Math object:

Math.trunc()
Math.sign()
Math.cbrt()
Math.log2()
Math.log10()

The Math.trunc() Method

Math.trunc(x) returns the integer part of x:

Example

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

The Math.sign() Method

Math.sign(x) returns if x is negative, null or positive:

Example

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

The Math.cbrt() Method

Math.cbrt(x) returns the cube root of x:

Example

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

The Math.log2() Method

Math.log2(x) returns the base 2 logarithm of x:

Example

Math.log2(2); // returns 1

The Math.log10() Method

Math.log10(x) returns the base 10 logarithm of x:

Example

Math.log10(10); // returns 1

New Number Properties

ES6 added the following properties to the Number object:

EPSILON
MIN_SAFE_INTEGER
MAX_SAFE_INTEGER

Example

let x = Number.EPSILON;

Example

let x = Number.MIN_SAFE_INTEGER;

Example

let x = Number.MAX_SAFE_INTEGER;

New Number Methods

ES6 added 2 new methods to the Number object:

Number.isInteger()
Number.isSafeInteger()

The Number.isInteger() Method

The Number.isInteger() method returns true if the argument is an integer.

Example

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

The Number.isSafeInteger() Method

A safe integer is an integer that can be exactly represented as a double precision number.

The Number.isSafeInteger() method returns true if the argument is a safe integer.

Example

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

Safe integers are all integers from -(2⁵³ - 1) to +(2⁵³ - 1).
This is safe: 9007199254740991. This is not safe: 9007199254740992.

New Global Methods

ES6 added 2 new global number methods:

isFinite()
isNaN()

The isFinite() Method

The global isFinite() method returns false if the argument is Infinity or NaN.

Otherwise it returns true:

Example

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

The isNaN() Method

The global isNaN() method returns true if the argument is NaN. Otherwise it returns false:

Example

isNaN("Hello"); // returns true

❮ Previous Next ❯

JS ကျူတိုရီရယ်

JS ဗားရှင်းများ

JS အရာဝတ္ထုများ

JS လုပ်ဆောင်ချက်များ

JS သင်တန်းများ

JS Async

JS HTML DOM

JS Browser BOM

JS ဝဘ် API များ

JS AJAX

JS JSON

JS နှင့် jQuery

JS ဂရပ်ဖစ်

JS ဥပမာများ

JS ကိုးကားချက်များ

Javascript ES6

ES6 တွင် အင်္ဂါရပ်အသစ်များ

ES6 (2015) အတွက် ဘရောက်ဆာ ပံ့ပိုးမှု

JavaScript ရအောင်

ဥပမာ

JavaScript const

ဥပမာ

Arrow လုပ်ဆောင်ချက်များ

ဥပမာ

ဥပမာ

For/O of Loop

Array တစ်ခုကို လှည့်ပတ်နေသည်။

ဥပမာ

ကြိုးတစ်ချောင်းကို လှည့်နေသည်။

ဥပမာ

JavaScript Map Objects

ဥပမာ

JavaScript တွင် Objects များကို သတ်မှတ်ပါ။

ဥပမာ

JavaScript အတန်းများ

အထားအသို

ဥပမာ

Class ကိုအသုံးပြုခြင်း။

ဥပမာ

JavaScript ကတိများ

Promise Syntax

ကတိကိုအသုံးပြုခြင်း ဥပမာ

သင်္ကေတအမျိုးအစား

ဥပမာ

မူရင်း ကန့်သတ်တန်ဖိုးများ

ဥပမာ

Function Rest Parameter

ဥပမာ

String.includes()

ဥပမာ

String.startsWith()

ဥပမာ

String.endsWith()

ဥပမာ

Array.from()

Example

Array keys()

Example

Array find()

Example

Array findIndex()

Example

New Math Methods

The Math.trunc() Method

Example

The Math.sign() Method

Example

The Math.cbrt() Method

Example

The Math.log2() Method

Example

The Math.log10() Method

Example

New Number Properties

Example

Example

Example

New Number Methods

The Number.isInteger() Method

Example