มาอธิบาย ES6 โดยละเอียดอย่างรวดเร็วและเรียนรู้เกี่ยวกับคุณสมบัติใหม่!

บทความนี้จะให้ความเข้าใจเชิงลึกเกี่ยวกับ ES6 และเรียนรู้เกี่ยวกับคุณสมบัติใหม่ของ ES6 ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!

การเข้าสู่ Front-end (vue) สู่หลักสูตรการเรียนรู้: เข้าสู่การเรียนรู้

ทำความเข้าใจกับ ES6

ECMAScript เป็น脚本语言的标准化规范ที่พัฒนาโดย Netscape เดิมชื่อ Mocha ต่อมาเปลี่ยนชื่อเป็น LiveScript และในที่สุดก็เปลี่ยนชื่อเป็น JavaScript
ECMAScript 2015 (ES2015) เวอร์ชัน 6 เดิมชื่อ ECMAScript 6 ( ES6 ) เพิ่มคุณสมบัติใหม่

ให้ขอบเขตบล็อก ES6

ก่อนอื่นขอบเขตคืออะไร? ขอบเขตหมายถึงการประกาศตัวแปร ขอบเขตที่ถูกต้องของตัวแปรนี้คือก่อน let js มี全局作用域และ函数作用域ของ var เท่านั้น และ ES6 นำ块级作用域มาสู่ js

 -
วาร์ = "?";
ให้ ข = "⛳";
-
console.log(ก);
console.log(ข);

 -
Uncaught ReferenceError: b ไม่ได้ถูกกำหนดไว้

อย่างที่คุณเห็น เราใช้คีย์เวิร์ด var เพื่อกำหนดตัวแปร a ในบล็อก จริงๆ แล้วตัวแปรดังกล่าวสามารถเข้าถึงได้ทั่วโลก ดังนั้น var声明的变量是全局的แต่เราต้องการให้ตัวแปรมีผลในบล็อกและเป็น เข้าถึงได้หลังจากออกจากบล็อก ไม่ คุณสามารถใช้คีย์เวิร์ดขอบเขตระดับบล็อกใหม่ได้ let ใน ES6 เพื่อประกาศตัวแปร a เมื่อฉันเข้าถึงอีกครั้ง จะมีการรายงานข้อผิดพลาด โดยบอกว่า a is not defined และ a ไม่ได้ถูกกำหนดไว้

อาร์เรย์ทำลายล้าง ES6

ดังที่แสดงด้านล่าง ขั้นแรกให้กำหนดฟังก์ชันที่ส่งคืนอาร์เรย์ ก่อนที่จะใช้อาร์เรย์ที่ยกเลิกโครงสร้าง ให้เรียกอาร์เรย์และกำหนดค่าที่ส่งคืนให้กับ temp จากนั้นจึงพิมพ์อาร์เรย์ชั่วคราว หลังจากใช้解构数组แล้ว ให้กำหนดตัวแปรอาร์เรย์โดยตรง และ จากนั้นฟังก์ชันจะส่งคืนค่าชี้ไปที่ตัวแปร มันจะกำหนดค่าของรายการแรกให้กับตัวแปรอาเรย์แรก รายการที่สองให้กับตัวแปรอาเรย์ที่สอง และอื่นๆ ในที่สุด ตัวแปรทั้งสามจะถูกพิมพ์และไม่มี ปัญหา.

 ฟังก์ชั่นอาหารเช้า () {
กลับ ['?', '?', '?'];
-
var temp = อาหารเช้า ();
console.log(อุณหภูมิ[0], อุณหภูมิ[1], อุณหภูมิ[2]);

ให้ [a, b, c] = อาหารเช้า();
console.log(ก, ข, ค);

 -
-

วัตถุทำลายล้าง ES6

ขั้นแรก ฟังก์ชัน breakfast จะส่งคืนอ对象ใช้解构对象เพื่อกำหนดออบเจ็กต์ คีย์ในคู่คีย์-ค่าแสดงถึงชื่อคีย์ของออบเจ็กต์จริงที่แมปไว้ จะเสร็จสิ้นโดยอัตโนมัติ จากนั้นฟังก์ชัน Breakfast จะถูกเรียกให้ส่งคืนออบเจ็กต์ จากนั้นพิมพ์ตัวแปร a, b, c แล้วคุณจะเห็นว่าไม่มีปัญหา

 ฟังก์ชั่นอาหารเช้า () {
กลับ { ก: '?', ข: '?', ค: '?' }
-
ให้ { a: a, b: b, c: c } = อาหารเช้า ();
console.log(ก, ข, ค);

 -

สตริงเทมเพลต ES6

ก่อนที่จะใช้สตริงเทมเพลต เราจะเชื่อมตัวแปรสตริงเข้าด้วยกันโดยใช้เครื่องหมาย +

ใช้สตริงเทมเพลตที่ได้รับจาก ES6 ขั้นแรกให้ใช้ `` เพื่อล้อมสตริง เมื่อคุณต้องการใช้ตัวแปร ให้ใช้ ${变量}

 ให้ = '?',
ข = '??';

ให้ c = 'กินวันนี้' + a + 'เห็นหลังกิน' + b;
console.log(c);

ให้ d = `กิน ${a} วันนี้แล้วดูหลังกิน ${b}`;
console.log(ง);

 กินวันนี้มั้ย มาดูหลังกินกัน ⁉️
กินวันนี้มั้ย มาดูหลังกินกัน ⁉️

ES6 กำหนดว่าสตริงมีสตริงอื่นหรือไม่

เมื่อใช้ฟังก์ชันเหล่านี้ คุณสามารถดำเนินการต่างๆ ให้เสร็จสิ้นได้อย่างง่ายดาย เช่น สตริงขึ้นต้นด้วยสิ่งใดสิ่งหนึ่ง สตริงลงท้ายด้วยสิ่งใดสิ่งหนึ่งหรือไม่ และมีสตริงใดๆ หรือไม่

 ให้ str = 'สวัสดี ฉันชื่อเสี่ยวโจว ❤️';
console.log(str.startsWith('สวัสดี'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('สวัสดี'));
console.log(str.includes(" "));

 จริง
จริง
เท็จ
จริง

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

ใน ES6 คุณสามารถใช้พารามิเตอร์เริ่มต้นได้ เมื่อเรียกใช้ฟังก์ชัน หากไม่มีการกำหนดค่าให้กับพารามิเตอร์ ฟังก์ชันนั้นจะถูกดำเนินการโดยใช้พารามิเตอร์เริ่มต้นที่ตั้งไว้ ค่า เขียนทับค่าเริ่มต้น ใช้สิ่งต่อไปนี้:

 ฟังก์ชั่นพูด (str) {
console.log(str);
-
ฟังก์ชั่น say1(str = 'เฮ้') {
console.log(str);
-
พูด();
พูด1();
say1('❤️');

 ไม่ได้กำหนด
เฮ้ เฮ้ ❤️

ตัวดำเนินการสเปรด ES6

ใช้ ... เพื่อขยายองค์ประกอบเพื่อให้ใช้งานง่าย ดังนี้

 ให้ arr = ['❤️', '?', '?'];
console.log(arr);
console.log(...arr);
ให้ brr = ['เจ้าชาย', ...arr];
console.log(brr);
console.log(...brr);

 [ '', '?', '?' ]
 ? ?
[ 'เจ้าชาย', '❤️', '?', '?' ]
เจ้าชาย ❤️ ?

ตัวดำเนินการส่วนที่เหลือ ES6

ตัวดำเนินการ ... ใช้กับพารามิเตอร์ฟังก์ชันและรับอาร์เรย์ของพารามิเตอร์ โดยจะใช้ดังนี้:

 ฟังก์ชัน f1(ก, ข, ...ค) {
console.log(ก, ข, ค);
console.log(ก, ข, ...ค);
-
f1('?','?','☃️','㊙️');

 ? [ '☃️', '㊙️' ]
? ☃️ ㊙️

ชื่อฟังก์ชัน ES6

คุณสามารถใช้ .name เพื่อรับชื่อของฟังก์ชันได้ การใช้งานเฉพาะมีดังนี้:

 ฟังก์ชัน f1() { }
console.log(f1.name);
ให้ f2 = ฟังก์ชั่น () { };
console.log(f2.ชื่อ);
ให้ f3 = ฟังก์ชัน f4() { };
console.log(f3.ชื่อ);

 f1
f2
f4

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

การใช้ฟังก์ชันลูกศรสามารถทำให้โค้ดกระชับยิ่งขึ้น แต่คุณต้องใส่ใจกับข้อจำกัดของฟังก์ชันลูกศรด้วย และฟังก์ชันลูกศรเองก็ไม่มีสิ่งนี้ ซึ่งชี้ไปที่พาเรนต์

 ให้ f1 = a => a;

ให้ f2 = (ก, ข) => {
กลับ + b;
-

console.log(f1(10));
console.log(f2(10, 10));

 10
20

การแสดงออกของวัตถุ ES6

การใช้นิพจน์อ็อบเจ็กต์ของ es6 หากแอตทริบิวต์ของอ็อบเจ็กต์เหมือนกับค่า ค่าสามารถละเว้นได้ และ function สามารถละเว้นได้เมื่อเขียนฟังก์ชัน การใช้งานจะเป็นดังนี้:

 ให้ a = '㊙️';
ให้ b = '☃️';

const obj = {
ก: ก,
ข: ข,
พูดว่า: ฟังก์ชั่น () {

-
-

const es6obj = {
ก,
ข
พูด() {

-
-

console.log(obj);
console.log(es6obj);

 { a: '㊙️', b: '☃️', พูดว่า: [ฟังก์ชัน: พูด] }
{ a: '㊙️', b: '☃️', พูดว่า: [ฟังก์ชัน: พูด] }

ค่าคงที่ ES6

ใช้คีย์เวิร์ด const เพื่อกำหนดการวัด const จำกัดการดำเนินการในการกำหนดค่าให้กับการวัด แต่ไม่จำกัดค่าในการวัด ใช้ดังต่อไปนี้:

 แอป const = ['☃️', '?'];
console.log(...แอป);
app.push('?');
console.log(...แอป);
แอพ = 10;

คุณจะเห็นว่าเมื่อกำหนดค่าให้กับการวัดอีกครั้ง จะมีการรายงานข้อผิดพลาด

 ?
 ? ?
แอพ = 10;
-
TypeError: การกำหนดให้กับตัวแปรคงที่

ชื่อคุณสมบัติวัตถุ ES6

เมื่อใช้จุดเพื่อกำหนดแอตทริบิวต์ของวัตถุ หากชื่อแอตทริบิวต์มีอักขระเว้นวรรค จะถือว่าผิดกฎหมายและไม่สามารถส่งผ่านไวยากรณ์ได้ การใช้ [属性名] สามารถแก้ปัญหาได้อย่างสมบูรณ์แบบ และไม่เพียงแต่สามารถเขียนชื่อแอตทริบิวต์ได้โดยตรงเท่านั้น แต่ยังสามารถเขียนชื่อแอตทริบิวต์ได้โดยตรงอีกด้วย สามารถระบุได้โดยใช้ตัวแปร

 ให้ obj = {};
ให้ = 'ชื่อน้อย';
obj.name = 'เจ้าชาย';
// การใช้จุดเพื่อกำหนดคุณลักษณะโดยมีช่องว่างตรงกลางถือเป็นสิ่งผิดกฎหมาย // obj.little name = 'Little Prince';
obj[a] = 'เจ้าชายน้อย';
console.log(obj);

 { ชื่อ: 'เจ้าชาย', 'ชื่อน้อย': 'เจ้าชายน้อย' }

ES6 กำหนดว่าค่าสองค่าเท่ากันหรือไม่

ผลลัพธ์ของการเปรียบเทียบค่าพิเศษบางอย่างโดยใช้ === หรือ == อาจไม่ตรงกับความต้องการของคุณ คุณสามารถใช้ Object.is(第一个值，第二个值) เพื่อตัดสิน และคุณอาจมีความสุข

 console.log(น่าน == น่าน);
console.log(+0 == -0);
console.log(Object.is(น่าน, น่าน));
console.log(Object.is(+0, -0));

 เท็จ
จริง
จริง
เท็จ

ES6 การคัดลอกวัตถุ

ใช้ Object.assign() เพื่อคัดลอกวัตถุหนึ่งไปยังอีกวัตถุหนึ่งดังต่อไปนี้:

 ให้ obj = {};
วัตถุมอบหมาย(
// แหล่งที่มา obj,
//คัดลอกวัตถุเป้าหมาย { a: '☃️' }
-
console.log(obj);

 { ก: '☃️' }

ES6 ตั้งค่าต้นแบบของวัตถุ

คุณสามารถใช้ es6 เพื่อตั้งค่าต้นแบบของวัตถุได้ดังนี้:

 ให้ obj1 = {
รับ() {
กลับ 1;
-
-
ให้ obj2 = {
ก: 10,
รับ() {
กลับ 2;
-
-
ให้ทดสอบ = Object.create(obj1);
console.log(test.get());
console.log(Object.getPrototypeOf(ทดสอบ) === obj1);
Object.setPrototypeOf (ทดสอบ, obj2);
console.log(test.get());
console.log(Object.getPrototypeOf(ทดสอบ) === obj2);

 1
จริง
2
จริง

ต้นแบบ ES6

 ให้ obj1 = {
รับ() {
กลับ 1;
-
-
ให้ obj2 = {
ก: 10,
รับ() {
กลับ 2;
-
-
ให้ทดสอบ = {
__โปรโต__:obj1
-
console.log(test.get());
console.log(Object.getPrototypeOf(ทดสอบ) === obj1);
ทดสอบ.__โปรโต__ = obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(ทดสอบ) === obj2);

 1
จริง
2
จริง

ES6 สุดๆ

 ให้ obj1 = {
รับ() {
กลับ 1;
-
-
ให้ทดสอบ = {
__โปรโต__: obj1,
รับ() {
กลับ super.get() + ' ☃️';
-
-
console.log(test.get());

 1 ☃️

ES6 สร้างตัววนซ้ำ

ก่อนที่จะเรียนรู้ ให้เขียนตัววนซ้ำก่อน

 ฟังก์ชั่นตาย (arr) {
ให้ฉัน = 0;

กลับ {
ต่อไป() {
ปล่อยให้ทำ = (i >= arr.length);
ให้ค่า = !done ? arr[i++] : ไม่ได้กำหนด;

กลับ {
ความคุ้มค่า: ค่า,
เสร็จแล้ว: เสร็จแล้ว
-
-
-
-
ให้ arr = ['☃️', '?', '?'];

ให้ dieArr = ตาย (arr);
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());

 { ค่า: '☃️' เสร็จแล้ว: false }
{ ค่า: '?' เสร็จแล้ว: false }
{ ค่า: '?' เสร็จแล้ว: false }
{ ค่า: ไม่ได้กำหนด เสร็จสิ้น: จริง }

ตกลง มาดูตัวสร้างแบบง่ายกันดีกว่า

 ฟังก์ชั่น * ตาย (arr) {
สำหรับ (ให้ i = 0; i < arr.length; i++) {
ผลผลิต arr [i];
-
-
ให้ทดสอบ = die(['?','☃️']);
console.log(test.ถัดไป());
console.log(test.ถัดไป());
console.log(test.ถัดไป());

 { ค่า: '?' เสร็จแล้ว: false }
{ ค่า: '☃️' เสร็จแล้ว: false }
{ ค่า: ไม่ได้กำหนด เสร็จสิ้น: จริง }

คลาส ES6

ใช้ es6 สร้างคลาสได้รวดเร็วและสะดวกเยี่ยมเลย

 คลาสสตู {
ตัวสร้าง (ชื่อ) {
this.name = ชื่อ;
-
พูด() {
กลับ this.name + 'พูด Ori';
-
-
ให้ เสี่ยวหมิง = ใหม่ สตู("小明");
console.log(เซียวหมิง.พูด());

 เสี่ยวหมิงกล่าวว่า Ori ให้

ES6 เตรียมพร้อม

กำหนดวิธีการรับ/ตั้งค่าเพื่อรับหรือแก้ไขแอตทริบิวต์ของคลาส

 คลาสสตู {
ตัวสร้าง (ชื่อ) {
this.name = ชื่อ;
-
รับ() {
ส่งคืน this.name;
-
ชุด (newStr) {
this.name = newStr;
-
-
ให้ เสี่ยวหมิง = ใหม่ สตู("小明");
console.log(xiaoming.get());
xiaoming.set("ความเสียหาย")
console.log(xiaoming.get());

 เสี่ยวหมิงและดาหมิง

ES6 คงที่

วิธีการที่แก้ไขด้วยคีย์เวิร์ดแบบคงที่สามารถใช้งานได้โดยตรงโดยไม่ต้องสร้างอินสแตนซ์ให้กับออบเจ็กต์

 คลาสสตู {
พูดแบบคงที่ (str) {
console.log(str);
-
-
stu.say("วิธีคงที่ดั้งเดิม");

 วิธีดั้งเดิมแบบคงที่

ES6 ขยายออกไป

การใช้การสืบทอดสามารถลดความซ้ำซ้อนของโค้ดได้ เช่น:

 บุคคลในชั้นเรียน {
ตัวสร้าง (ชื่อ bir) {
this.name = ชื่อ;
this.bir = บีร์;
-
แสดงข้อมูล() {
กลับ 'ชื่อ:' + this.name + 'วันเกิด:' + this.bir;
-
-
คลาส A ขยายบุคคล {
ตัวสร้าง (ชื่อ bir) {
ซุปเปอร์(ชื่อ, บีร์);
-
-
ให้ zhouql = ใหม่ A("Zhou Qiluo", "2002-06-01");
// Zhou Qiluo เองไม่มีเมธอด showInfo แต่สืบทอดมาจาก console.log(zhouql.showInfo()) ของบุคคล

 ชื่อ: Zhou Qiluo วันเกิด: 01-06-2545

ชุดอีเอส6

คอลเลกชันชุด ต่างจากอาร์เรย์ ไม่อนุญาตให้มีองค์ประกอบที่ซ้ำกันในคอลเลกชันชุด

 //สร้างคอลเลกชัน Set ให้ food = new Set('??');
// เติมซ้ำๆ เข้าไปได้อันเดียวใน food.add('?');
food.add('?');

console.log(อาหาร);
// ขนาดคอลเลกชันปัจจุบัน console.log (food.size);
// ตรวจสอบว่ามีองค์ประกอบอยู่ในคอลเลกชัน console.log(food.has('?'));
// ลบองค์ประกอบในคอลเลกชัน food.delete('?');
console.log(อาหาร);
// วนซ้ำคอลเลกชัน food.forEach(f => {
console.log(ฉ);
-
// ล้างคอลเลกชั่น food.clear();
console.log(อาหาร);

 ชุด (3) { '?', '?', '?'
3
จริง
ชุด (2) { '?', '?'
-
-
ชุด(0) {}

แผนที่ ES6

แผนที่รวมเพื่อจัดเก็บคู่คีย์-ค่า

 ให้อาหาร = แผนที่ใหม่ ();
ให้ = {}, b = ฟังก์ชั่น () { }, c = "ชื่อ";

food.set(a, '?');
food.set(b, '?');
food.set(b, '?');
food.set(c, 'ข้าว');

console.log(อาหาร);
console.log(food.size);
console.log(food.get(a));
อาหาร ลบ(c);
console.log(อาหาร);
console.log(food.has(a));

food.forEach((v, k) => {
console.log(`${k} + ${v}`);
-
อาหาร.ชัดเจน();
console.log(อาหาร);

 แผนที่(3) { {} => '?', [ฟังก์ชั่น: b] => '?', 'ชื่อ' => 'ข้าว' }
3
-
แผนที่(2) { {} => '?', [ฟังก์ชั่น: b] => '?' }
จริง
[วัตถุวัตถุ] + ?
ฟังก์ชัน () { } + ?
แผนที่(0) {}

ES6 แบบโมดูลาร์

เมื่อใช้การพัฒนาแบบโมดูลาร์ es6 สามารถนำเข้าและส่งออกเนื้อหาบางส่วนได้อย่างง่ายดาย รวมถึงการส่งออกเริ่มต้นและรายละเอียดอื่นๆ

 ให้ = '?';
ให้ f1 = function (str = 'พารามิเตอร์ของคุณ') {
console.log(str);
-
ส่งออก { ก, f1 };

 นำเข้า {a, f1} จาก './27moduletest.js';
console.log(ก);
f1();
f1('เข้าใจแล้ว');