Résumé des API natives pratiques dans les compétences JavaScript_javascript

Aller directement au sujet

Analyser l'objet chaîne

Nous savons tous que les objets JavaScript peuvent être sérialisés en JSON, et JSON peut également être analysé en objets. Mais le problème est que s'il y a une "chose" qui n'est ni JSON ni un objet, il n'est pas pratique de la convertir. l'un ou l'autre, alors évaluez. Cela peut être utile

var obj = "{a:1,b:2}";  // 看起来像对象的字符串
eval("("+ obj +")")   // {a: 1, b: 2}

Parce que eval peut exécuter des expressions de chaîne et que nous voulons exécuter l'objet chaîne obj dans un objet réel, nous devons alors utiliser eval. Mais afin d'empêcher eval d'exécuter obj avec {} comme instruction, nous mettons une paire de () à l'extérieur de obj pour qu'il soit analysé dans une expression.

& (ET au niveau du bit)

Pour déterminer si un nombre est la nième puissance de 2, vous pouvez ET avec lui-même moins un

var number = 4
(number & number -1) === 0 // true

^ (XOR au niveau du bit)

Avec différentes troisièmes variables, vous pouvez échanger les valeurs des deux variables

var a = 4,b = 3
a = a ^ b //  7
b = a ^ b //  4
a = b ^ a //  3

Formater la date

Vous voulez obtenir l'heure après le format ? Désormais, vous n'avez plus besoin d'obtenir l'année, le mois, le jour, l'heure, la minute et la seconde, vous pouvez le faire en trois étapes

var temp = new Date();
var regex = /\//g;
(temp.toLocaleDateString() + ' ' + temp.toLocaleTimeString().slice(2)).replace(regex,'-');

// "2015-5-7 9:04:10"

Vous souhaitez convertir l'heure formatée en un objet temporel ? Utilisez directement le constructeur Date

new Date("2015-5-7 9:04:10");

// Thu May 07 2015 09:04:10 GMT+0800 (CST)

Vous souhaitez convertir un objet temporel standard en un horodatage Unix ? valueOf le fait

(new Date).valueOf();

// 1431004132641

De nombreux amis m'ont également rappelé que cela permettait d'obtenir rapidement l'horodatage

nouvelle date

Un dollar plus

Un dollar de plus peut rapidement convertir des nombres de chaînes en nombres mathématiques, c'est-à-dire

var number = "23" 
typeof number // string
typeof +number // number

Vous pouvez convertir des objets temporels en horodatages

new Date // Tue May 12 2015 22:21:33 GMT+0800 (CST)
+new Date // 1431440459887

URI échappé

Vous devez passer l'url en paramètre dans la route, maintenant échappez-la

var url = encodeURIComponent('http://segmentfault.com/questions/newest')

// "http%3A%2F%2Fsegmentfault.com%2Fquestions%2Fnewest"

Échappement inversé

decodeURIComponent(url)
// "http://segmentfault.com/questions/newest"

Numéro

Si vous souhaitez conserver quelques décimales après la virgule sans avoir à faire d'interception de chaîne, utilisez toFixed pour les supprimer

number.toFixed()   // "12346"
number.toFixed(3)  // "12345.679"
number.toFixed(6)  // "12345.678900"

La plage des paramètres est de 0 à 20, si elle n'est pas écrite, la valeur par défaut est 0

Détection de type

Typeof est la méthode de détection de type la plus fréquemment utilisée

typeof 3    // "number"
typeof "333"  // "string"
typeof false  // "boolean"

C'est bien pour les types de données de base (simples), mais une fois qu'il s'agit de types de données de référence, ce n'est pas si facile

typeof new Date()  // "object"
typeof []      // "object"
typeof {}      // "object"
typeof null     // "object"   

Les trois premiers sont supportables, mais null renvoie en fait un objet. Vous vous moquez de moi ! ! ! (ps : en fait, il s'agit d'un bug JavaScript que les gens ne peuvent pas corriger ꒰･◡･๑꒱)

À ce stade, nous utiliserons instanceof

toString instanceof Function
// true
(new Date) instanceof Date
// true
[] instanceof Object
// true
[] instanceof Array
// true

En fait, nous pouvons constater que [] et Object deviennent vrais. Bien que nous sachions que [] est également un objet, nous espérons une méthode plus précise pour déterminer le type, et maintenant elle est ici
Utilisez Object.prototype.toString() pour juger. Pour que chaque objet réussisse la détection, nous devons utiliser Function.prototype.call ou Function.prototype.apply pour appeler

var toString = Object.prototype.toString;

toString.call(new Date)  // "[object Date]"
toString.call(new Array)  // "[object Array]"
toString.call(new Object) // "[object Object]"
toString.call(new Number) // "[object Number]"
toString.call(new String) // "[object String]"
toString.call(new Boolean) // "[object Boolean]"

Il convient de noter que la méthode toString est très susceptible d'être remplacée, donc lorsque vous avez besoin de l'utiliser,
Vous pouvez utiliser directement la méthode Object.prototype.toString()

Mettre en œuvre l'héritage

Regardez un exemple officiel

//Shape - superclass
function Shape() {
 this.x = 0;
 this.y = 0;
}

Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info("Shape moved.");
};

// Rectangle - subclass
function Rectangle() {
 Shape.call(this); //call super constructor.
}

Rectangle.prototype = Object.create(Shape.prototype);

var rect = new Rectangle();

rect instanceof Rectangle //true.
rect instanceof Shape //true.

rect.move(1, 1); //Outputs, "Shape moved."

Obtenez les propriétés et les méthodes initialisées via un appel, et obtenez les propriétés et les méthodes sur l'objet prototype via Object.create

Itération

ES5 a de nombreuses fonctions d'itération, telles que mapper, filtrer, certains, chaque, réduire, etc.

Tableau

L'API spécifique est présentée en détail ici.
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Glob...
Voici quelques mots :
Rejoindre, pop, pousser, inverser, décaler, trier, épisser, décaler changera le tableau d'origine

concat,indexOf,lastIndexOf,slice,toString ne changera pas le tableau d'origine

Les méthodes d'itération telles que map, filter, some, each, reduction et forEach ne modifieront pas le tableau d'origine

Quelques points à noter :

1 shift, pop renverra l'élément supprimé
2 splice renverra un tableau composé d'éléments supprimés, ou un tableau vide
3 pressions renverront la nouvelle longueur du tableau
4 certains s'arrêtent quand c'est vrai
5 à chaque arrêt quand il y a faux
6 La méthode d'itération ci-dessus peut ajouter un paramètre thisArg à la fin, qui correspond à la valeur this lors de l'exécution du rappel.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.