编程知识 cdmana.com

Compréhension et analyse de l'objet de base JS

Préface

Tout d'abord, l'objet doit être compris différemment de la classe,L'objet est justejsMoyenneobjectCompréhension,Compréhension de la classe continuer l'analyse plus tard

Base

Création d'objets

  1. Création d'objets:Les objets sont créés de deux façons
    Création littérale

    const obj = {
        a:1,
    }
    obj.c = 3
    Copier le Code

    new objectObjet

    const obj = new Object()
    obj.a = 1
    Copier le Code

    La différence:Adoptionnew ObjectLes objets créés nécessitent l'ajout d'attributs un par un

  2. Type de base
    jsIl existe six types principaux destring、number、boolean、null、undefined(Type de base),object(Les types complexes comprennentfunction、array) . Spécial:nullEst le type de base,Maistypeof null = 'object'

Objets intégrés

Les objets intégrés comprennent,Pas un par un pour chaque objet intégré

  • Number
  • String
  • Object
  • Boolean
  • Array
  • Function
  • Date
  • RegExp
  • Error

Les objets intégrés sont écrits en majuscules initiales,Pour faire la différence avec le même mot en minuscules initiales,Ils ne font pas référence au même concept Exemple: En minusculesstringLe type qui représente la variable est une chaîne
Application: typeof 'test' === 'string'

Et les majuscules StringReprésentationjsObjets intégrés pour
Application:

    var string1 = new String('test')
    console.log(string1 instanceof String) //true
Copier le Code

stringEtSting Les différences et les liens Exemple:

var string1 = 'test'
typeof string1 //string
string1 instanceof String //false
var string2 = new String('test')
typeof string2 //object
string instanceof String //true
string1 === string2 //false
string1 == string2 //true
Copier le Code

Une chaîne définie directement par un littéral peut être appelée String Des propriétés telles que string1.length, Une variable définie littéralement n'est pas un objet , Mais je peux le voir lengthPropriétés, Parce qu'à un moment donné ,js Sera automatiquement défini par la quantité littérale stringVariable de type convertie enStringObjet de,De même,Number

Comment accéder aux propriétés de l'objet et calculer les propriétés

  1. Accès direct par point
var obj = {
    a:1
}
console.log(obj.a)
Copier le Code
  1. Accès au nom de la clé ( Le nom de la clé peut également être calculé )
    const arr = [3,1,2]
    const obj = {
        test1: 1,
        test2: 2,
        test3: 3
    }
    console.log(obj['test1']) //1
    arr.forEach((item)=>{
        console.log(obj[`test${item}`]) //3,1,2
    })
Copier le Code
  1. Propriétés calculées( Quand une variable est définie , Le nom de l'attribut peut être calculé comme suit )
const obj = {
 ['test'+1]:1
}
console.log(obj.test1)
Copier le Code

Objet(Inclure un tableau)Copie de,Copie peu profonde,Copie en profondeur

Copier

  1. Stockage des objets: La valeur de propriété de l'objet n'est pas stockée dans le conteneur de l'objet , C'est stocké ailleurs , La propriété pointera vers une valeur stockée ailleurs ( Comme un pointeur ), Et à l'intérieur de l'objet se trouve une référence à la propriété

2.Copier, Copie directe , Juste copier la référence , L'objet copié est le même que la nouvelle référence d'objet , Tout indique la même valeur , Si vous changez la valeur stockée ailleurs , Les valeurs des attributs des deux objets changent Exemple:

var obj1 = {
    a: 1
}
var obj2 = obj1 // Copier la référence 
obj2.a = 4
console.log(obj1.a) //4
Copier le Code

Copie peu profonde

Copie peu profonde: Les valeurs sont copiées pour les propriétés de premier niveau , Mais les données de type de référence à l'intérieur de l'attribut sont copiées directement .es6Dansassign、Opérateur d'extension Exemple:

    const obj = {
        a: 1,
        b: [1,2,3]
    }
    const obj1 = Object.assign({},obj)
    obj1.a = 10
    obj1.b[0] = 100
    console.log(obj.a) //1
    console.log(obj.b) //[100,2,1](obj1 Le premier élément de la valeur de l'attribut référencé dans change ,obj Le premier élément de la valeur de l'attribut référencé dans change également )
Copier le Code

Copie en profondeur

Copie en profondeur, Est de copier les valeurs de chaque type de référence d'un objet ou d'une couche inférieure d'un tableau . Mise en œuvre récursive:

const oldObj = {
    a: { 
        a: 1,
        b: 3,
        c: 4
    },
    b:{
        o: {
            k:[1,2,3]
        },
        j:[4,5]
    }
}
function copy(obj){
    if(!obj) return null 
    let newObj = {}
    if(obj instanceof Array){
        newObj = []
        obj.forEach(item=>{
            newObj.push(item)
        })
    }else{
        Object.keys(obj).forEach((item)=>{
            if(typeof obj[item] !== 'object'){
                newObj[item] = obj[item]
            }else{
                newObj[item] = copy(obj[item])
            }
        })
    }
    return newObj
}
const copyObj = copy(oldObj)
Copier le Code

AdoptionJSONRéalisation

const oldObj = {
    a: { 
        a: 1,
        b: 3,
        c: 4
    },
    b:{
        o: {
            k:[1,2,3]
        },
        j:[4,5]
    }
}
const copyObj = JSON.parse(JSON.stringify(oldObj))
Copier le Code

Traversée de l'objet

Traversée

  1. Traversée du tableau

es5: forEach、some、every es6: map、filter

2. Traitement des objets Object.keys(), Transformer le nom de propriété de l'objet en tableau

const obj = {
    a:1,
    b:2
}
const c = Object.keys(obj) //[a,b]
Copier le Code

for ··· inEtfor ··· of

  1. for ··· in: Obtenir un nom de propriété énumérable
// Utiliser dans l'objet 
const obj = {
    a:1,
    b:2
}
for(key in obj){
    console.log(key)
} //a,b
//Utilisation dans un tableau
const arr = [1,3]
for(key in arr){
    console.log(key)
}//0,1( L'indice sera imprimé )
Copier le Code
  1. for ··· of Obtenir une valeur d'attribut énumérable ( Ne peut pas être utilisé dans un objet )
//Utilisation dans un tableau
const arr = [1,3]
for(key in arr){
    console.log(key)
}//1,3
Copier le Code

Résumé

  1. Il y a deux façons de créer des objets
  2. js Il y a un lien entre l'objet intégré et la variable de création directe
  3. Après avoir appris comment les objets sont stockés , Une copie de l'objet. . La copie profonde la copie peu profonde est encore plus importante
  4. for···in Est d'obtenir une propriété énumérable ,Etfor···of Est d'obtenir une valeur d'attribut énumérable , Et ne peut pas agir sur l'objet

版权声明
本文为[Yangff]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210914164425954Y.html

Scroll to Top