Qu'y a-t-il de nouveau dans es6 par rapport à es5 ?

Nouveau contenu : 1. Les mots-clés Let et const sont utilisés pour déclarer des variables, prendre en charge la portée au niveau du bloc et avoir des zones mortes temporaires ; 2. L'affectation de déstructuration consiste à effectuer une correspondance de modèles sur des tableaux ou des objets, puis à faire correspondre les variables qu'ils contiennent. La signification de l'affectation ; 3. Opérateur d'expansion, qui peut être utilisé pour développer des éléments dans des ensembles et des tableaux en éléments uniques 4. Définir un objet, une nouvelle structure de données, similaire à un tableau, mais les valeurs des membres sont uniques ; , il n'y a pas de valeurs en double ; 5. Méthodes du constructeur Array.from(), Array.of().

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

Nouvelles fonctionnalités d'ES6 par rapport à ES5

let, const :

let et const prennent en charge la portée au niveau du bloc et ont une zone morte temporaire (doivent d'abord être déclarées, puis utilisées, la promotion de variable n'est pas prise en charge) ;

const est une constante et doit se voir attribuer une valeur lorsqu'elle est déclarée. Lorsque l'affectation est un type de base, sa valeur ne peut pas être modifiée ; lorsque l'affectation est un type référence, sa référence ne peut pas être modifiée, mais les opérations sur le type référence. peut être effectué, comme pousser sur le tableau, Ajout, suppression et modification des attributs d'un objet

Affectation de déstructuration :

es6 permet d'extraire des valeurs de tableaux ou d'objets selon un certain modèle et d'attribuer des valeurs ​​aux variables, ce qu’on appelle l’affectation déstructurante.

L'affectation de déstructuration est simple et facile à comprendre dans l'écriture de code, avec une sémantique claire, ce qui facilite l'obtention de champs de données dans des objets complexes.

Affectation déstructurante des objets :

let obj = {
  a: 1,
  b: 2
};
let {a, b, c} = obj; // 大括号中的变量名必须和obj的属性名一致
console.log(a, b, c);

// 输出:
// a: 1
// b: 2
// c: undefined

Affectation déstructurante des tableaux : (identique aux chaînes)

let arr = ['a', 'b', 'c'];
let [e, f] = arr;	// 中括号中的变量按数组中元素的顺序被赋值
console.log(e, f);

// 输出：
// e: 'a'
// f: 'b'

// 快速交换两个变量值
let a = 1, b = 2;
[a, b] = [b, a];

Opérateur Expand :

Représenté par trois points (...), les opérateurs d'extension JavaScript étaient introduit dans ES6. Il peut être utilisé pour développer des éléments de collections et de tableaux en éléments individuels uniques.

L'opérateur spread peut être utilisé pour créer et cloner des tableaux et des objets, transmettre des tableaux comme arguments de fonction, supprimer les doublons des tableaux, et bien plus encore.

L'opérateur spread ne peut être utilisé que sur des objets itérables. Il doit être utilisé avant l’objet itérable sans aucune séparation. Par exemple :

console.log(...arr);

Array :

let arr1 = [1, 2, 3, 4];
let arr2 = ['a', 'b', ...arr1, 'c'];
console.log(arr2);

// 输出：
// ['a', 'b', 1, 2, 3, 4, 'c']

Object :

let obj1 = {
  a: 1,
  b: 2
};
let obj2 = {
  ...obj1,
  c: 3,
  d: 4
};
console.log(obj2);

// 输出：
// {a: 1, b: 2, c: 3, d: 4}

Gestion des paramètres restants :

Array :

let arr = [1, 2, 3, 4, 5];
let [a, b, ...c] = arr;	// 将arr后面所有的剩余参数放入c中
console.log(a, b, c);

// 输出：
// a: 1
// b: 2
// c: [3, 4, 5]

Object :

let obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};
let {a, b, ...c} = obj;
console.log(a, b, c);

// 输出：
// a: 1
// b: 2
// c: {c: 3, d: 4}

// 对象的复制（不是传地址）
let obj2 = {...obj};

Objet Set :

Set est fourni par ES6 Une nouvelle structure de données, similaire à un tableau, mais les valeurs des membres sont uniques et il n'y a pas de valeurs en double.

• Set lui-même est un constructeur utilisé pour générer la structure de données Set.

• Les objets Set vous permettent de stocker des valeurs uniques de tout type, qu'il s'agisse de valeurs primitives ou de références d'objet.

• Les éléments de Set n'apparaîtront qu'une seule fois, c'est-à-dire que les éléments de Set sont uniques.

• De plus, NaN et undefined peuvent être stockés dans Set, et NaN sont traités comme la même valeur (même si NaN !== NaN). La fonction

• Set peut accepter un tableau (ou une autre structure de données avec une interface itérable) comme paramètre d'initialisation.

Déduplication de tableau :

let arr = [2, 1, 2, 1, 3, 4, 4, 5];
let s = new Set(arr);
arr = [...s];
// arr: [2, 1, 3, 4, 5]

Méthode Set :

let s = new Set([1, 1, 2, 3, 'a']);
// 得到Set元素个数：
s.size;
// 清空集合
s.clear();
// 删除集合中的某个值，返回操作是否成功
s.delete('a');
// 查看集合是否包含某个值
s.has('a');
// 添加一项，返回集合本身的引用
s.add('b');

Objet Map :

ES6 fournit la structure de données Map. Il est similaire à un objet et constitue également une collection de paires clé-valeur, mais la portée de « clé » ne se limite pas aux chaînes. Différents types de valeurs (y compris les objets) peuvent être utilisés comme clés. En d’autres termes, la structure Object fournit une correspondance « chaîne-valeur » et la structure Map fournit une correspondance « valeur-valeur », qui est une implémentation plus complète de la structure Hash. Si vous avez besoin d'une structure de données « clé-valeur », Map est plus adaptée que Object.

Fonctionnalités de la carte :

• Les objets de la carte enregistrent les paires clé-valeur et sont capables de mémoriser l'ordre d'insertion d'origine des clés.

• Toute valeur (objet ou primitive) peut être utilisée comme clé ou valeur.

let arr = [
  ['a', 1],
  ['b', 2],
  ['c', 3]
];
let m = new Map(arr);
// m: {'a' => 1, 'b' => 2, 'c' => 3}

Méthode Map :

// 清空Map
m.clear();
// 删除某一项，返回操作是否成功
m.delete(key);
// 获取某一项的值，返回对应的val
m.get(key);
// 是否包含某一项
m.has(key);
// 添加一项，返回Map本身的引用
m.set(key, val);

fonction nouveau contenu :

• Fonction flèche : pas de paramètres this et argumentsthis和arguments

• 参数默认值

数组新增方法：

构造函数的方法：

• 把一个类数组转换成真正的数组：Array.from(arrLike [, mapFunc, mapThis]);

  参数：

  • arrLike:类数组
  • mapFunc:对类数组每一项的操作函数
  • mapThis:替换mapFunc的this指向

  另一种方法：let arr = [...arrLike];

• 将参数列表转换为数组：

  Array.of(...items);

  🎜🎜 Par défaut value 🎜🎜🎜

  🎜🎜Nouvelle méthode de tableau : 🎜🎜🎜

  🎜Méthode constructeur : 🎜

  🎜 🎜Convertir un tableau de classes en un vrai tableau : Array.from(arrLike [, mapFunc, mapThis]);🎜🎜Paramètres : 🎜
  🎜arrLike:Array- comme 🎜🎜<code>mapFunc :La fonction d'opération pour chaque élément du tableau, comme 🎜🎜mapThis :Remplace le this mapFunc /code>Pointez sur 🎜🎜🎜Une autre manière : let arr = [...arrLike];🎜🎜🎜🎜Convertissez la liste d'arguments en tableau : 🎜🎜Array.of( . ..articles);🎜

• 检测一个对象是否是一个数组：

  Array.isArray(obj);

对象的方法：

• arr.find(callback [, thisArg])：查找数组中满足条件的第一个元素的值

  let arr = [1, 2, 3, 4];
  let val = arr.find((item, index) => item >= 3);
  // val: 3
  let val = arr.find((item, index) => item >= 5);
  // val: undefined

• arr.findIndex(callback [, thisArg])：查找数组中满足条件的第一个元素的索引

• 数组扁平化：

  • arr.flat([depth])

    参数：depth：指定要提取嵌套数组的结构深度，默认为1，当depth = infinity时，无论数组多少层，都提取为一维数组。

  • arr.flatMap(callback[, thisArg])

    参数：callback：对原数组的每个元素进行操作，返回新数组的元素；

    该函数值支持深度为1的扁平化

• 数组元素填充：arr.fill(value[, start[, end]]);

  用一个固定的值填充一个数组中从起始索引到终止索引内到全部元素。不包括终止索引；不会改变数组长度

  参数：

  • value：用来填充数组元素的值；
  • start：起始索引，默认值为0；
  • end：终止索引，默认值为 arr.length ；

• arr.includes(valueToFind[, fromIndex])：判断数组中是否包含一个指定的值

  参数：

  • valueToFind：需要查找的值
  • fromIndex：从 fromIndex 处开始向后查找

字符串新增方法：

• str.startsWith(searchString[, position])：判断当前字符串是否以另一个给定的子字符串开头

  参数：

  • searchString：要搜索的字符串
  • position：在 str 中搜索 searchString 的开始位置，默认为0，也就是真正的字符串开头处

• str.endsWith(searchString[, position])：判断当前字符串是否以另一个给定的子字符串结束

  参数：

  • searchString：要搜索的字符串
  • position：在str中反向搜索的开始位置，默认为 str.length

• str.repeat(times)：返回重复str字符串times次的字符串

模版字符串：

反引号：``，可以换行

插值表达式：${}

对象新增方法：

• 简洁表示法：

  let a = 1, b = 2;
  // 原来的表示方法：
  let obj = {
    a: a,
    b: b,
    c: function() {}
  };
  // 简洁表示法：
  let obj = {
    a,
    b,
    c() {}
  };

• 属性名表达式：

  let name = "小明";
  let obj = {
    [name]: 111
  };
  console.log(obj);
  // 输出：
  // obj: {'小明': 111}
  
  // 等价于：
  let obj = {};
  obj[name] = 111;

• Object.assign(obj1, obj2, ...)：将第二个参数即之后的参数对象合并到第一个参数对象中

  let obj1 = {a: 1, b: 2};
  let obj2 = {c: 3, d: 4};
  Object.assign(obj2, obj1);
  // 等价于
  obj2 = {
    ...obj1,
    ...obj2
  }
  // 等价于
  obj2 = Object.assign({}, obj1, obj2);

• Object.is(value1, value2)：判断两个值是否相等（强类型）

  和===的区别：

  +0 === -0;	// true
  Object.is(+0, -0);	// false
  
  NaN === NaN; // false
  Object.is(NaN, NaN); // true

babel编译器：

将es6语法编译为es5语法

【相关推荐：javascript视频教程、编程视频】

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!