Quoi de neuf dans es6

Nouvelles fonctionnalités de l'ES6 : 1. Utilisez const et let pour déclarer des variables, les deux variables ont une portée au niveau du bloc ; 2. Chaîne de modèle, la syntaxe "`string`" peut rendre l'épissage de chaîne plus concis 3, fonction Flèche, qui peut ; résoudre le problème de ce pointage ; 4. Opérateur d'extension, qui étend l'objet itérable en ses éléments séparés ; 5. Modularisation, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

ECMAScript 6 (ES6) est fondamentalement devenu le standard de l'industrie. Sa popularité est beaucoup plus rapide que celle d'ES5. La raison principale est que les navigateurs modernes prennent en charge ES6 très rapidement, en particulier les navigateurs Chrome et Firefox, qui prennent déjà en charge la plupart des fonctionnalités d'ES6.

Ce qui suit est une explication détaillée des nouvelles fonctionnalités ES6 couramment utilisées, une par une :

1 Différentes déclarations de variables : const et let

Dans le passé, JS n'avait pas de portée au niveau du bloc, et. const et let remplissent cette commodité. L'espace blanc, const et let sont tous des étendues au niveau du bloc.

ES6 recommande d'utiliser let pour déclarer les variables locales, par rapport à la var précédente (peu importe où elle est déclarée, elle sera considérée comme déclarée en haut de la fonction) La différence entre les déclarations let et var :

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

let signifie déclarer des variables, tandis que const signifie déclarer des constantes. Les deux sont des portées au niveau du bloc ; les variables déclarées par const seront considérées comme des constantes, ce qui signifie que leurs valeurs seront définies après elles. sont définis. Ne peut plus être modifié :

const a = 1
a = 0 //报错

Si const est un objet, la valeur contenue dans l'objet peut être modifiée. Pour le dire de manière abstraite, il suffit que l'adresse pointée par l'objet n'ait pas changé :

const student = { name: 'cc' }

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

Il y a quelques points à noter :

• Les variables déclarées avec le mot-clé let n'ont pas la fonction de hissage de variable
• Déclarations let et const uniquement Valable dans le bloc le plus proche (entre accolades)
• Lorsque vous utilisez une déclaration const constante, veuillez utiliser des variables majuscules, telles que : CAPITAL_CASING
• const doit se voir attribuer une valeur au moment de la déclaration

2. Chaîne de modèle

Avant ES6, nous gérions souvent des chaînes de modèle comme ceci : Créez des modèles via "" et "+"

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

Et pour ES6

• formatage de chaîne de base. Incorporez des expressions dans des chaînes pour la concaténation. Utilisez ${} pour définir ;

• ES6 backtick (``) peut être effectué directement ;

ES6 prend en charge les chaînes de modèle, ce qui rend l'épissage de chaînes plus concis et intuitif.

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

3. Fonctions fléchées

C'est l'une des fonctionnalités les plus intéressantes de ES6. => n'est pas seulement un raccourci pour la fonction mot-clé, il apporte également d'autres avantages. La fonction flèche partage la même chose avec le code qui l'entoure, ce qui peut vous aider à résoudre le problème de pointage. Les développeurs JavaScript expérimentés sont familiers avec les modèles tels que var self = this; ou var that = this qui font référence à l'environnement this. Mais avec =>, ce modèle n'est plus nécessaire. =>不只是关键字function的简写，它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如var self = this;或var that = this这种引用外围this的模式。但借助=>，就不需要这种模式了。

箭头函数最直观的三个特点。

• 不需要 function 关键字来创建函数
• 省略 return 关键字
• 继承当前上下文的 this 关键字

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

细节：当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return；

4. 函数的参数默认值

在ES6之前，我们往往这样定义参数的默认值：

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

5.延展操作符(Spread operator)

延展操作符 … 是ES6中引入的，将可迭代对象展开到其单独的元素中，所谓的可迭代对象就是任何能用for of循环进行遍历的对象，例如：数组、字符串、Map 、Set 、DOM节点等。

延展操作符...

Les trois fonctionnalités les plus intuitives des fonctions fléchées.

Vous n'avez pas besoin du mot-clé function pour créer une fonction

Omettre le mot-clé returnHériter du mot-clé this du contexte actuel

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

Détails : Lorsque votre fonction a un et un seul paramètre, c'est possible Omettre les parenthèses. Lorsque votre fonction renvoie une et une seule expression, vous pouvez omettre {} et renvoyer

4. Valeurs par défaut des paramètres de fonction

Avant ES6, nous définissions souvent les valeurs par défaut de paramètres comme. ceci :

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

L'opérateur de propagation… est introduit dans ES6, qui étend l'objet itérable en ses éléments séparés. Ce qu'on appelle l'opérateur de propagation Un itérable. object est tout objet qui peut être parcouru à l'aide d'une boucle for of, tel que des tableaux, des chaînes, des cartes, des ensembles, des nœuds DOM, etc. Opérateur d'extension... peut développer des expressions de tableau ou des chaînes au niveau de la syntaxe lors des appels de fonction/de la construction de tableaux ; il peut également développer des expressions d'objet par valeur-clé lors de la construction d'objets de manière à les développer.

Lorsqu'il est utilisé dans les itérateurs, c'est un opérateur Spread :

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

// 对象
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);

var parent = {
  foo() {
    console.log("Hello from the Parent");
  }
}
 
var child = {
  foo() {
    super.foo();
    console.log("Hello from the Child");
  }
}
 
Object.setPrototypeOf(child, parent);
child.foo(); // Hello from the Parent
             // Hello from the Child

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

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

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前端】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!