JavaScript ES6

ECMAScript 6 ແມ່ນຫຍັງ?

ECMAScript 6 ຖືກເອີ້ນວ່າ ES6 ແລະ ECMAScript 2015.

ບາງຄົນຮຽກຮ້ອງວ່າ JavaScript 6.

ວັນນີ້ນີ້ຫຼັກສະນະທີ່ເປັນບົດອະນຸຍາດໃນ ES6.

  • JavaScript let
  • JavaScript const
  • ກົດຫຼັກການ **
  • ຄຸນຄ່າປະສົງວຽກງານສະເພາະ.
  • Array.find()
  • Array.findIndex()

ການສະໜັບສະໜູນຄອມພິວເຕິ້ຂອງ ES6 (ECMAScript 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

let 语句ອະນຸຍາດທີ່ເຈົ້າຈະອະນຸຍາດການປະກາດຄວາມປະສົງວຽກງານທີ່ມີພາກສ່ວນຫຼັງ.

实例

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

亲自试一试

JavaScript const

const ຄຳສັ່ງທີ່ອະນຸຍາດທີ່ເຈົ້າຈະອະນຸຍາດການປະກາດຄຸນຄ່າສະເພາະ (ຄວາມປະສົງວຽກງານຂອງ JavaScript ທີ່ມີຄຸນຄ່າສະເພາະ).

ຄຸນຄ່າສະເພາະຄືກັນກັບ let ຄວາມປະສົງວຽກງານທີ່ສາມາດປ່ຽນມາຫຼາຍຄືນ.

实例

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

亲自试一试

ກະຈາຍຕົວໃນ JavaScript Let / Const ຫາຫຼາຍໃນ let ແລະ const ຂອງມັນ.

ກົດຫຼັກການສະຫຼາກ.

ສັນຍາກົດຫຼັກການຂອງ**() ຈະນຳຜູ້ປະຕິບັດການທຳອິດໄປຫາຄຸນຄ່າທີ່ສອງ.

实例

var x = 5;
var z = x ** 2;          // ຜົນຄະແນນແມ່ນ 25

亲自试一试

x ** y ຜົນຄະແນນຂອງ Math.pow(x,y) ຄືກັນ:

实例

var x = 5;
var z = Math.pow(x,2);   // ຜົນຄະແນນແມ່ນ 25

亲自试一试

ຄຸນຄ່າປະສົງວຽກງານສະເພາະ.

ES6 ການອະນຸຍາດມີຄວາມປະສົງວຽກງານຂອງການຕັ້ງຄວາມປະສົງວຽກງານ.

实例

function myFunction(x, y = 10) {
  // y is 10 if not passed or undefined
  return x + y;
}
myFunction(5); // ຈະກັບຄືນ 15

亲自试一试

Array.find()

find() ການແຈກະຕັ້ງມາສຳລັບຄຸນຄ່າຂອງຫຼັກຕົວທີ່ຜ່ານການທົດລອງພວກມັນຕົວຕົນ.

ຄວາມຊີ້ວິດການນັ້ນຫາ (ທີ່ກັບຄືນ) ຫຼັກຕົວທີ່ຫຼາຍກວ່າ 18 ທີ່ມີຄຸນຄ່າ (ທີ່):

实例

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

亲自试一试

请注意此函数接受 3 个参数：

  • ຄຸນນະພາບຂອງບັນດາທີີ
  • ບັນດາທີີສະຖານທີ່
  • ອີກຢ່າງຈະກວດສອບບັນດາຈຳນວນທົ່ວໄປ

Array.findIndex()

findIndex() ການແຈກະຕັ້ງມາສຳລັບດັດສະນະພະຍານຂອງຫຼັກຕົວຂອງພວກມັນທີ່ຜ່ານການທົດລອງພວກມັນຕົວຕົນ.

此例确定大于 18 的第一个元素的索引：

实例

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

亲自试一试

请注意此函数接受 3 个参数：

  • ຄຸນນະພາບຂອງບັນດາທີີ
  • ບັນດາທີີສະຖານທີ່
  • ອີກຢ່າງຈະກວດສອບບັນດາຈຳນວນທົ່ວໄປ

ພວກມັນວ່າປະສົມປະສານໃໝ່

ES6 ໄດ້ເພີ່ມປະສົມປະສານຫຼາຍຫຼາຍໃຫ້ບັນດາ Number:

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

实例

var x = Number.EPSILON;

亲自试一试

实例

var x = Number.MIN_SAFE_INTEGER;

亲自试一试

实例

var x = Number.MAX_SAFE_INTEGER;

亲自试一试

ພວກມັນວ່າຈຳນວນທົ່ວໄປໃໝ່

ES6 ໄດ້ເພີ່ມ 2 ພວກມັນວ່າຈຳນວນທົ່ວໄປໃຫ້ບັນດາ Number:

  • Number.isInteger()
  • Number.isSafeInteger()

Number.isInteger()

ຖ້າມີການຈຳນວນທົ່ວໄປ Number.isInteger() 方法返回 true。

实例

Number.isInteger(10);        // ກັບຄືນ true
Number.isInteger(10.5);      // ກັບຄືນ false

亲自试一试

Number.isSafeInteger()

ຈຳນວນທົ່ວໄປປອດໄພສາມາດສະແດງໄດ້ຢ່າງຫຼາຍຫຼາຍສຳລັບຈຳນວນທົ່ວໄປທີ່ສາມາດກວດສອບດ້ວຍຄວາມຫຼາຍຫຼາຍຫຼາຍ.

ຖ້າມີການຈຳນວນທົ່ວໄປປອດໄພ Number.isSafeInteger() 方法返回 true。

实例

Number.isSafeInteger(10);    // ກັບຄືນ true
Number.isSafeInteger(12345678901234567890);  // ກັບຄືນ false

亲自试一试

ຈຳນວນທົ່ວໄປປອດໄພແມ່ນຈຳນວນທັງໝົດຈາກ -(253 - 1) ຫາ +(253 - 1).

ນີ້ເປັນການປອດໄພ: 9007199254740991. ນີ້ເປັນການບໍ່ປອດໄພ: 9007199254740992.

ພວກມັນວ່າຈຳນວນທົ່ວໄປໃໝ່

ES6 ຍັງເປັນການເພີ່ມຫຼາຍພວກມັນວ່າຈຳນວນທົ່ວໄປ 2 ພວກມັນວ່າຈຳນວນທົ່ວໄປໃໝ່:

  • isFinite()
  • isNaN()

isFinite()

ຖ້າມີການຈຳນວນ Infinity ຫຼື NaN，则全局 isFinite() ພວກມັນກັບຄືນ false。

ຖ້າບໍ່ມີຜົນໄດ້ກັບຄືນ true:

实例

isFinite(10/0);       // ກັບຄືນ false
isFinite(10/1);       // ກັບຄືນ true

亲自试一试

ພວກມັນວ່າ isNaN()

如果参数是 NaN，则全局 isNaN() 方法返回 true。否则返回 false：

实例

isNaN("Hello");       // 返回 true

亲自试一试

箭头函数（Arrow Function）

箭头函数允许使用简短的语法来编写函数表达式。

您不需要 function 关键字、return 关键字以及花括号。

实例

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

亲自试一试

箭头功能没有自己的 this。它们不适合定义对象方法。

箭头功能未被提升。它们必须在使用前进行定义。

使用 const 比使用 var 更安全，因为函数表达式始终是常量值。

如果函数是单个语句，则只能省略 return 关键字和花括号。因此，保留它们可能是一个好习惯：

实例

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

亲自试一试