Maison > Article > interface Web > Quelles fonctionnalités ont été améliorées par es6
Quelles fonctionnalités ont été améliorées par es6
- 青灯夜游original
- 2022-11-21 15:36:393703parcourir
Fonctions améliorées d'es6 : 1. Affectation de déstructuration, permettant d'extraire des valeurs de tableaux ou d'objets et d'attribuer des variables selon un certain modèle. 2. Une interface de traversée est ajoutée à la chaîne, de sorte que la chaîne puisse être parcourue par la boucle "for...of". 3. La chaîne de modèle est une version améliorée de la chaîne. 4. Le modèle d'étiquette est une forme spéciale d'appel de fonction 5. Définissez les valeurs par défaut pour les paramètres de la fonction. 6. Le this de la fonction flèche pointe vers la portée supérieure. 7. Autorisez l'écriture des variables et des fonctions directement entre les accolades en tant qu'attributs et méthodes de l'objet. Environnement d'exploitation du didacticiel : système Windows 7, ECMAScript version 6, ordinateur Dell G3
ES6 améliore la syntaxe originale
1, affectation de déstructuration
es6 permet de suivre un certain modèle, extraire des valeurs de tableaux ou d'objets et attribuer des valeurs à des variables est appelé affectation de déstructuration L'affectation de déstructuration est simple et facile à comprendre dans l'écriture de code, et la sémantique est claire et facile à obtenir des champs de données dans des objets complexes. En déstructuration. , la source de la déstructuration est située sur le côté droit de l'expression d'affectation déstructurante, et la cible de la déstructuration est sur le côté gauche de l'expression de déstructuration
(1), affectation déstructurante du tableau
. ES6 permet de suivre un certain modèle, à partir du tableau et d'extraire des valeurs de l'objet et d'attribuer des valeurs aux variables est appelé déstructurationlet [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third // "baz" let [x, , y] = [1, 2, 3]; x // 1 y // 3 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4] let [x, y, ...z] = ['a']; x // "a" y // undefined z // []Essentiellement, cette méthode d'écriture appartient à la "correspondance de modèle". les motifs des deux côtés du signe égal sont les mêmes, la variable de gauche se verra attribuer la valeur correspondante Si la déstructuration échoue, la valeur sera égale à indéfinie. Un autre cas est une déstructuration incomplète, c'est-à-dire le motif sur. le côté gauche du signe égal ne correspond qu'à une partie du tableau sur le côté droit du signe égal Pour Set, vous pouvez également utiliser l'affectation de déstructuration des tableaux
L'affectation de déstructuration vous permet de. spécifiez une valeur par défaut
let [x, y, z] = new Set(['a', 'b', 'c']); x // "a"
- Notez qu'ES6 utilise l'opérateur d'égalité stricte (===) en interne pour déterminer si une position a une valeur . Ainsi, la valeur par défaut ne prendra effet que si un membre du tableau est strictement égal à. undefined. Si un membre du tableau est nul, la valeur par défaut ne prendra pas effet, car null n'est pas strictement égal à undefined
Dans le code ci-dessus, car x peut obtenir la valeur, donc la fonction f ne le fera pas. être exécuté du tout. Le code ci-dessus est en fait équivalent au code suivant
(2), déstructuration et affectation d'objets Il existe une différence importante entre la déstructuration d'objet et le tableau Différent. sont classés dans l'ordre, et la valeur de la variable est déterminée par sa position ; tandis que les attributs de l'objet n'ont pas d'ordre, et la variable doit avoir le même nom que l'attribut pour obtenir la valeur correcte
let [foo = true] = []; foo // true let [x, y = 'b'] = ['a']; // x='a', y='b' let [x, y = 'b'] = ['a', undefined]; // x='a', y='b' let [x = 1] = [null];x // nullL'affectation de déstructuration. de l'objet peut être fait. Il est très pratique d'attribuer les méthodes des objets existants à une certaine variable
function f() {
console.log('aaa');
}
let [x = f()] = [1];
L'exemple 1 du code ci-dessus attribue les méthodes logarithme, sinus et cosinus de l'objet Math aux variables correspondantes. , ce qui est pratique à utiliser. L'exemple 2 attribue console.log à la variable log let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
Dans le code ci-dessus, foo est le modèle correspondant et baz est la variable baz, pas le modèle. foo. Le mécanisme interne de déstructuration et d'affectation des objets consiste d'abord à trouver l'attribut du même nom puis à l'attribuer à la variable correspondante. Ce qui est réellement attribué, c'est la seconde solution et non la première. Comme les tableaux, la déstructuration peut également être utilisée pour les objets de structures imbriquées.
// 例一
let { log, sin, cos } = Math;
// 例二
const { log } = console;
log('hello') // hello
Valeurs par défautlet { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined
(3), déstructuration et attribution de chaînes
Les objets de type tableau ont un attribut de longueur, donc cet attribut peut également être déstructuré et attribué.let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
(4) Affectation de déstructuration de valeurs numériques et booléennes
Lors de l'affectation de déstructuration, si le côté droit du signe égal est une valeur numérique ou une valeur booléenne, il sera d'abord converti en objet .var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null
(5), Affectation de déstructuration des paramètres de fonction
let {length : len} = 'hello';
len // 5
(6), Objectif1) Échanger la valeur d'une variable
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true2) Renvoyer plusieurs valeurs du function Fonction uniquement Elle peut renvoyer une valeur. Si vous souhaitez renvoyer plusieurs valeurs, vous pouvez uniquement les placer dans un tableau ou un objet et les renvoyer. Avec les affectations de déstructuration, il est très pratique de récupérer ces valeurs. function add([x, y]){
return x + y;
}
add([1, 2]); // 33) Définition des paramètres de fonction L'affectation de déstructuration peut facilement faire correspondre un ensemble de paramètres avec des noms de variables.
let x = 1; let y = 2; [x, y] = [y, x];4) Extraire les données JSON
L'affectation de déstructuration est particulièrement utile pour extraire des données d'objets JSON.
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
5) Traversée de la structure Map
Tout objet déployé avec l'interface Iterator peut être parcouru à l'aide d'une boucle for...of. La structure Map prend en charge nativement l'interface Iterator, et avec la déstructuration et l'affectation des variables, il est très pratique d'obtenir des noms de clés et des valeurs de clés.
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
Si vous souhaitez uniquement obtenir le nom de la clé ou la valeur de la clé, vous pouvez l'écrire comme suit.
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
ES6 加强了对 Unicode 的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。
"\uD842\uDFB7" // "?" "\u20BB7" // " 7"
ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。
ES6 为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历。
for (let codePoint of 'foo') {
console.log(codePoint)
}
// "f"
// "o"
// "o"
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。
let x = 1;
let y = 2;
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"
let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"
模板字符串之中还能调用函数。如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。
function fn() {
return "Hello World";
}
`foo ${fn()} bar`
// foo Hello World bar
字符串的新增方法
1,String.fromCodePoint()
ES5 提供String.fromCharCode()方法，用于从 Unicode 码点返回对应字符，但是这个方法不能识别码点大于0xFFFF的字符。
2,String.raw()
ES6 还为原生的 String 对象，提供了一个raw()方法。该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法。
String.raw`Hi\n${2+3}!`
// 实际返回 "Hi\\n5!"，显示的是转义后的结果 "Hi\n5!"
String.raw`Hi\u000A!`;
// 实际返回 "Hi\\u000A!"，显示的是转义后的结果 "Hi\u000A!"
3, 实例方法：includes(), startsWith(), endsWith()
传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
3，函数的增强
（1）标签模板
标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。
let a = 5;
let b = 10;
function tag(s, v1, v2) {
console.log(s[0]);
console.log(s[1]);
console.log(s[2]);
console.log(v1);
console.log(v2);
return "OK";
}
tag`Hello ${ a + b } world ${ a * b}`;
// "Hello "
// " world "
// ""
// 15
// 50
// "OK"
ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
箭头函数的this指向上级作用域
const name = 'tony'
const person = {
name: 'tom',
say: () => console.log(this.name),
sayHello: function () {
console.log(this.name)
},
sayHi: function () {
setTimeout(function () {
console.log(this.name)
}, 500)
},
asyncSay: function () {
setTimeout(()=>console.log(this.name), 500)
}
}
person.say() //tony
person.sayHello() //tom
person.sayHi() //tony
person.asyncSay() //tom
4.对象的扩展
属性的简洁表示法
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。除了属性简写，方法也可以简写。
const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
// 等同于
const baz = {foo: foo};
const o = {
method() {
return "Hello!";
}
};
// 等同于
const o = {
method: function() {
return "Hello!";
}
};
1、如果key与value变量名相同，省略:value
2、省略函数：function
3、计算属性：[Math.random()]
const bar = 'bar'
const obj = {
bar,
fn () {
console.log('1111')
},
[Math.random()]: '123'
}
console.log(obj)
【推荐学习：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!