Apa yang baharu dalam es6

Ciri baharu es6: 1. Gunakan const dan biarkan untuk mengisytiharkan pembolehubah, kedua-dua pembolehubah adalah skop peringkat blok 2. Rentetan templat, sintaks "`rentetan`" membenarkan penggabungan rentetan Lebih ringkas; fungsi, yang boleh menyelesaikan masalah penunjuk ini;

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

ECMAScript 6 (ES6) pada asasnya telah menjadi standard industri Popularitinya jauh lebih pantas daripada ES5 Sebab utama ialah penyemak imbas moden menyokong ES6 dengan sangat cepat, terutamanya pelayar Chrome dan Firefox, yang sudah menyokong Kebanyakan ciri ES6.

Berikut ialah penjelasan terperinci tentang ciri ES6 baharu yang biasa digunakan:

1 Pengisytiharan pembolehubah yang berbeza: const dan let

Sebelum ini, JS tidak mempunyai skop tahap blok dan biarkan mengisi jurang yang mudah ini.

ES6 mengesyorkan menggunakan let untuk mengisytiharkan pembolehubah tempatan, berbanding dengan var sebelumnya (tidak kira di mana ia diisytiharkan, ia akan dianggap sebagai diisytiharkan di bahagian atas fungsi) Perbezaan antara pengisytiharan let dan var:

var x = '全局变量';
{
  let x = '局部变量';
  console.log(x); // 局部变量
}
console.log(x); // 全局变量

let bermaksud mengisytiharkan pembolehubah, manakala const bermaksud mengisytiharkan pemalar kedua-duanya adalah skop peringkat blok yang diisytiharkan oleh const akan dianggap pemalar, yang bermaksud bahawa Sekali nilai ditetapkan, ia tidak boleh diubah suai:

const a = 1
a = 0 //报错

Jika const ialah objek, nilai yang terkandung dalam objek boleh diubah suai. Untuk meletakkannya secara lebih abstrak, cukuplah alamat yang ditunjukkan oleh objek tidak berubah:

const student = { name: 'cc' }

student.name = 'yy';// 不报错
student  = { name: 'yy' };// 报错

Ada beberapa perkara yang perlu diperhatikan:

• Pembolehubah yang diisytiharkan oleh kata kunci let tidak Dengan ciri angkat pembolehubah
• pengisytiharan let dan const hanya sah dalam blok terdekat (dalam pendakap kerinting)
• Apabila menggunakan pengisytiharan const malar, sila gunakan huruf besar pembolehubah, seperti : CAPITAL_CASING
• const mesti diberikan pada masa pengisytiharan

rentetan templat

Sebelum ES6, kami sering mengendalikan rentetan templat seperti ini: Gunakan "" dan " " untuk membina templat

$("body").html("This demonstrates the output of HTML \
content to the page, including student's\
" + name + ", " + seatNumber + ", " + sex + " and so on.");

dan untuk ES6

• pemformatan rentetan asas. Benamkan ungkapan dalam rentetan untuk penyatuan. Gunakan ${} untuk mentakrifkan;

• ES6 backtick (``) boleh dilakukan secara terus; penyambungan adalah lebih ringkas dan intuitif.

3. Fungsi Anak Panah

$("body").html(`This demonstrates the output of HTML content to the page, 
including student's ${name}, ${seatNumber}, ${sex} and so on.`);

Ini adalah salah satu ciri yang paling menarik dalam ES6. bukan sekadar singkatan untuk fungsi kata kunci, ia juga membawa faedah lain. Fungsi anak panah berkongsi perkara yang sama dengan kod yang mengelilinginya, yang boleh membantu anda menyelesaikan masalah penunjuk ini. Pembangun JavaScript yang berpengalaman biasa dengan corak seperti atau

yang merujuk kepada perkara ini. Tetapi dengan =>, corak ini tidak diperlukan lagi.

=>Tiga ciri paling intuitif bagi fungsi anak panah. var self = this;var that = this

Kata kunci fungsi tidak diperlukan untuk mencipta fungsi

Abaikan kata kunci kembali

• Warisi kata kunci ini dalam konteks semasa

Butiran: Apabila fungsi anda mempunyai satu dan hanya satu parameter, anda boleh meninggalkan kurungan. Apabila fungsi anda mengembalikan satu dan hanya satu ungkapan, anda boleh meninggalkan {} dan mengembalikan; >Sebelum ES6, kami sering mentakrifkan nilai lalai parameter seperti ini:

// ES5
var add = function (a, b) {
    return a + b;
};
// 使用箭头函数
var add = (a, b) => a + b;

// ES5
[1,2,3].map((function(x){
    return x + 1;
}).bind(this));
    
// 使用箭头函数
[1,2,3].map(x => x + 1);

5 Operator spread (Pengendali spread)

< . , Set, nod DOM, dsb. Anda boleh mengembangkan ungkapan tatasusunan atau rentetan pada peringkat sintaks semasa panggilan fungsi/pembinaan tatasusunan anda juga boleh mengembangkan ungkapan objek dalam istilah nilai kunci semasa membina objek.

Apabila digunakan dalam iterator, ia ialah operator Spread:

// ES6之前，当未传入参数时，text = 'default'；
function printText(text) {
    text = text || 'default';
    console.log(text);
}

// ES6；
function printText(text = 'default') {
    console.log(text);
}

printText('hello'); // hello
printText();// default

Apabila digunakan dalam parameter fungsi, ia ialah operator Rehat: Apabila Apabila digunakan untuk menghantar parameter kepada fungsi , ia ialah operator Rehat:

6. Literal binari dan oktal

延展操作符 …

延展操作符...ES6 menyokong literal binari dan oktal, yang boleh ditukar kepada nilai perlapanan dengan menambah 0o atau 0O di hadapan nombor:

function foo(x,y,z) {
  console.log(x,y,z);
}
 
let arr = [1,2,3];
foo(...arr); // 1 2 3

7. Pemusnahan Objek dan tatasusunan

function foo(...args) {
  console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

8 Kelas super objek

ES6 membenarkan penggunaan kaedah super dalam objek:

let oValue = 0o10;
console.log(oValue); // 8
 
let bValue = 0b10; // 二进制使用 `0b` 或者 `0B`
console.log(bValue); // 2

<. 🎜>

9.untuk...daripada dan untuk...dalam

untuk...daripada digunakan untuk melintasi iterator, Seperti tatasusunan:

// 对象
const student = {
    name: 'Sam',
    age: 22,
    sex: '男'
}
// 数组
// const student = ['Sam', 22, '男'];

// ES5；
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + ' --- ' + age + ' --- ' + sex);

// ES6
const { name, age, sex } = student;
console.log(name + ' --- ' + age + ' --- ' + sex);

let letter = ['a', 'b', 'c'];
letter.size = 3;
for (let letter of letters) {
  console.log(letter);
}
// 结果: a, b, c

for...in 用来遍历对象中的属性：

let stu = ['Sam', '22', '男'];
stu.size = 3;
for (let stu in stus) {
  console.log(stu);
}
// 结果: Sam, 22, 男

10.ES6中的类

ES6 中支持 class 语法，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式。

函数中使用 static 关键词定义构造函数的的方法和属性：

class Student {
  constructor() {
    console.log("I'm a student.");
  }
 
  study() {
    console.log('study!');
  }
 
  static read() {
    console.log("Reading Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

类中的继承和超集：

class Phone {
  constructor() {
    console.log("I'm a phone.");
  }
}
 
class MI extends Phone {
  constructor() {
    super();
    console.log("I'm a phone designed by xiaomi");
  }
}
 
let mi8 = new MI();

extends 允许一个子类继承父类，需要注意的是，子类的constructor 函数中需要执行 super() 函数。 当然，你也可以在子类方法中调用父类的方法，如super.parentMethodName()。 在 这里 阅读更多关于类的介绍。

有几点值得注意的是：

• 类的声明不会提升（hoisting)，如果你要使用某个 Class，那你必须在使用之前定义它，否则会抛出一个 ReferenceError 的错误
• 在类中定义函数不需要使用 function 关键词

11、模块化(Module)

ES5不支持原生的模块化，在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。

导出(export)

ES6允许在一个模块中使用export来导出多个变量或函数。

导出变量

//test.js
export var name = 'Rainbow'

心得：ES6不仅支持变量的导出，也支持常量的导出。 export const sqrt = Math.sqrt;//导出常量

ES6将一个文件视为一个模块，上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。

 //test.js
 var name = 'Rainbow';
 var age = '24';
 export {name, age};

导出函数

// myModule.js
export function myModule(someArg) {
  return someArg;
}

导入(import)

定义好模块的输出以后就可以在另外一个模块通过import引用。

import {myModule} from 'myModule';// main.js
import {name,age} from 'test';// test.js

心得:一条import 语句可以同时导入默认函数和其它变量。import defaultMethod, { otherMethod } from 'xxx.js';

【相关推荐：javascript视频教程、web前端】

Atas ialah kandungan terperinci Apa yang baharu dalam es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!