Définitions et méthodes courantes JavaScript

1. Certaines méthodes de chaîne courantes. Notez que l'appel de ces méthodes ne modifiera pas le contenu de la chaîne d'origine, mais renverra une nouvelle chaîne.
toUpperCase()
Convertir une chaîne en majuscules :

var s = 'Hello';
s.toUpperCase(); // 返回'HELLO'

toLowerCase()
Convertir une chaîne en minuscules :

var s = 'Hello';var lower = s.toLowerCase(); // 返回'hello'并赋值给变量lowerlower; // 'hello'

indexOf()
recherchera la position où apparaît la chaîne spécifiée :

var s = 'hello, world';
s.indexOf('world'); // 返回7s.indexOf('World'); // 没有找到指定的子串，返回-1

substring()
renvoie la sous-chaîne de la plage d'index spécifiée :

var s = 'hello, world's.substring(0, 5); // 从索引0开始到5（不包括5），返回'hello's.substring(7); // 从索引7开始到结束，返回'world'

2 Méthodes de tableau courantes
indexOf()
pour rechercher Le. position d'un élément spécifié

var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0arr.indexOf(20); // 元素20的索引为1arr.indexOf(30); // 元素30没有找到，返回-1arr.indexOf('30'); // 元素'30'的索引为2

slice()
intercepte certains éléments du tableau, puis renvoie un nouveau tableau :

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

Notez que les paramètres de début et de fin de slice() incluent l'index de début et n'incluent pas l'index de fin.
Si vous ne transmettez aucun paramètre à slice(), il interceptera tous les éléments du début à la fin. En profitant de cela, nous pouvons facilement copier un Array.

push et pop
push() ajoute plusieurs éléments à la fin du tableau, et pop() supprime le dernier élément du tableau :

var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4arr; // [1, 2, 'A', 'B']arr.pop(); // pop()返回'B'arr; // [1, 2, 'A']arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次arr; // []arr.pop(); // 空数组继续pop不会报错，而是返回undefinedarr; // []

unshift et shift

var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4arr; // ['A', 'B', 1, 2]arr.shift(); // 'A'arr; // ['B', 1, 2]arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次arr; // []arr.shift(); // 空数组继续shift不会报错，而是返回undefinedarr; // []

sort
trie le tableau actuel Il modifiera directement la position de l'élément du tableau actuel. Lorsqu'il est appelé directement, il sera trié. dans l'ordre par défaut. :

var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']

inverse
Supprimez tous les éléments de l'ensemble du tableau, c'est-à-dire inverse :

var arr = ['one', 'two', 'three'];
arr.reverse();
arr; // ['three', 'two', 'one']

splice
Modifier la "méthode universelle" de Array, qui peut supprimer plusieurs éléments à partir de l'index spécifié, puis ajouter plusieurs éléments à partir de cette position

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];// 从索引2开始删除3个元素,然后再添加两个元素:arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']// 只删除,不添加:arr.splice(2, 2); // ['Google', 'Facebook']arr; // ['Microsoft', 'Apple', 'Oracle']// 只添加,不删除:arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

concat
concatène le tableau actuel avec un autre tableau et renvoie un nouveau tableau

var arr = ['A', 'B', 'C'];var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]arr; // ['A', 'B', 'C']

join

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

3. Objet
Étant donné que les objets JavaScript sont typés dynamiquement, vous pouvez librement ajouter ou supprimer des attributs à un objet :

var xiaoming = {
    name: '小明'};
xiaoming.age; // undefinedxiaoming.age = 18; // 新增一个age属性xiaoming.age; // 18delete xiaoming.age; // 删除age属性xiaoming.age; // undefineddelete xiaoming['name']; // 删除name属性xiaoming.name; // undefineddelete xiaoming.school; // 删除一个不存在的school属性也不会报错

Pour détecter si xiaoming a un certain attribut, vous pouvez utiliser l'opérateur in :

var xiaoming = {
    name: '小明',
    birth: 1990,
    school: 'No.1 Middle School',
    height: 1.70,
    weight: 65,
    score: null};'name' in xiaoming; // true'grade' in xiaoming; // false

Mais attention, si in détermine qu'un attribut existe, cet attribut n'est pas forcément xiaoming Oui, elle peut être héritée par xiaoming :
Pour déterminer si une propriété appartient à xiaoming lui-même plutôt qu'héritée, vous pouvez utiliser la méthode hasOwnProperty() :

var xiaoming = {
    name: '小明'};
xiaoming.hasOwnProperty('name'); // truexiaoming.hasOwnProperty('toString'); // false

La norme ES6 introduit un nouveau type de données Map, Set

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95var s1 = new Set(); // 空Setvar s2 = new Set([1, 2, 3]); // 含1, 2, 3

La norme ES6 introduit un nouveau type itérable (peut être substitué)
Array , Map et Set appartiennent tous au type itérable.
Parcourir

var a = ['A', 'B', 'C'];var s = new Set(['A', 'B', 'C']);var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);for (var x of a) { // 遍历Array    alert(x);
}for (var x of s) { // 遍历Set    alert(x);
}for (var x of m) { // 遍历Mapalert(x[0] + '=' + x[1]);
}

à travers une nouvelle boucle for...of 4. Fonction
Arguments de mots-clés gratuits, qui sont uniquement à l'intérieur de la fonction Fonctionne et toujours pointe vers tous les paramètres transmis par l’appelant de la fonction actuelle. arguments est comme Array mais ce n'est pas un Array.

function foo(x) {
    alert(x); // 10for (var i=0; i<arguments.length; i++) {
        alert(arguments[i]); // 10, 20, 30    }
}
foo(10, 20, 30);

Max est un débutant en JavaScript. Il a écrit une fonction max() qui renvoie le plus grand des deux nombres :

document.write(Math.max(7.25,7.30));

5. Portée de la variable
ES6 introduit le nouveau mot-clé let. Utilisez let au lieu de var pour déclarer une variable au niveau du bloc

&#39;use strict&#39;;function foo() {var sum = 0;for (let i=0; i<100; i++) {
        sum += i;
    }
    i += 1; // SyntaxError}

La norme ES6 introduit le nouveau mot-clé const pour définir des constantes. Const et let ont une portée au niveau du bloc

const PI = 3.14;
PI = 3; // 某些浏览器不报错，但是无效果！PI; // 3.14

6 .Fonction avancée
La carte ( ) est définie dans JavaScript Array. Nous appelons la méthode map() de Array, transmettons notre propre fonction et obtenons un nouveau Array comme résultat.

function pow(x) {return x * x;
}var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

reduce() applique une fonction à [x1, x2, x3...] de ce tableau Cette fonction doit recevoir deux paramètres, réduire() Continuer. le calcul cumulatif du résultat avec l'élément suivant de la séquence. L'effet est :

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {return x + y;
}); // 25

le filtre est également une opération couramment utilisée, qui est utilisée pour convertir un tableau. Certains éléments sont filtrés et les éléments restants sont renvoyés.
Appliquez la fonction transmise à chaque élément tour à tour, puis décidez de conserver ou de supprimer l'élément selon que la valeur de retour est vraie ou fausse.
Par exemple, dans un Tableau, supprimez les nombres pairs et ne gardez que les nombres impairs

var arr = [1, 2, 4, 5, 6, 9, 10, 15];var r = arr.filter(function (x) {return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

Pour supprimer les chaînes vides dans un Tableau, vous pouvez écrire :

var arr = ['A', '', 'B', null, undefined, 'C', '  '];var r = arr.filter(function (s) {return s && s.trim(); // 注意：IE9以下的版本没有trim()方法});
r; // ['A', 'B', 'C']

Fonction anonyme (fonction sans nom de fonction)

var friends = ["Mike", "Stacy", "Andy", "Rick"];

friends.forEach(function (eachName, index){
console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick});

algorithme de tri

// 看上去正常的结果:['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];// apple排在了最后:['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']// 无法理解的结果:[10, 20, 1, 2].sort(); // [1, 10, 2, 20]

第二个排序把apple排在了最后，是因为字符串根据ASCII码进行排序，而小写字母a的ASCII码在大写字母之后。
第三个排序结果是什么鬼？简单的数字排序都能错？
这是因为Array的sort()方法默认把所有元素先转换为String再排序，结果'10'排在了'2'的前面，因为字符'1'比字符'2'的ASCII码小。

7闭包
高阶函数除了可以接受函数作为参数外，还可以把函数作为结果值返回

function lazy_sum(arr) {var sum = function () {return arr.reduce(function (x, y) {return x + y;
        });
    }return sum;
}

当我们调用lazy_sum()时，返回的并不是求和结果，而是求和函数：

var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()

调用函数f时，才真正计算求和的结果：

f(); // 15

在函数lazy_sum中又定义了函数sum，并且，内部函数sum可以引用外部函数lazy_sum的参数和局部变量，当lazy_sum返回函数sum时，相关参数和变量都保存在返回的函数中，这种称为“闭包（Closure）”的程序结构拥有极大的威力。

请再注意一点，当我们调用lazy_sum()时，每次调用都会返回一个新的函数，即使传入相同的参数：

var f1 = lazy_sum([1, 2, 3, 4, 5]);var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2; // false

f1()和f2()的调用结果互不影响。

8.箭头函数
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。
为什么叫Arrow Function？因为它的定义用的就是一个箭头：
x => x * x
上面的箭头函数相当于：

function (x) {return x * x;
}

generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。

function* foo(x) {
    yield x + 1;
    yield x + 2;return x + 3;
}

函数在执行过程中，如果没有遇到return语句（函数末尾如果没有return，就是隐含的return undefined;），控制权无法交回被调用的代码。