English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript每天必学之数组和对象部分

Parte dell'oggetto 

Tipo Object 

Object è una raccolta non ordinata che può contenere oggetti di qualsiasi tipo, tutti gli altri oggetti derivano da questo oggetto. 

Ci sono due modi per creare un tipo Object, uno è utilizzare l'operatore new e l'altro è la notazione letterale. 

1. Creazione di Object utilizzando l'operatore new
 var obj = new Object(); //Attenzione alla maiuscola, può essere scritto direttamente come Object()
Attenzione, la scrittura new Object() per generare un nuovo oggetto è equivalente alla scrittura obj = {} in modo letterale. 

2. Creazione tramite modo letterale:

 var obj = {
 nome: 'trigkit4',
 età: 21
}; //Punto e virgola aggiunto 

在使用字面量声明Object对象时,不会调用Object()构造函数(FF除外) 

Object.prototype对象 

所有构造函数都有一个prototype属性,指向一个原型对象。

Object.prototype.print = function(){ console.log(this)};
var obj = new Object();
obj.print() // Object 

实例obj直接继承了Object.prototype的属性和方法
1.对象只是一种特殊的数据。对象拥有属性和方法。 JavaScript 是面向对象的语言,但 JavaScript 不使用类。 JavaScript 基于 [prototype][1],而不是基于类的。

2.属性:是隶属于某个特定对象的变量。方法:是只有某个特定对象才能调用的函数。

3.js对象是属性和方法的集合。一个方法就是一个函数,是对象的成员。属性是一个值或一组值(以数组或对象的形式),是对象的成员。

4.js对象是基于构造器函数的,使用构造器函数创建一个新对象时,就可以说是实例化了一个新对象。属性是构造器函数内部的变量。
使用构造器函数实例化的对象:
 cat = new Animal();
Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。

 <script type="text/javascript">
 //对象是名/值对的集合
  var browser = {  //对象是由花括号括起来的
   name:"Firefox",
   kernel:"Gecko"
  };
</script> 
//通过点号(.)或“[]”来访问对象的属性
 browser.name   //"Firefox"
 browser["kernel"] //"Gecko" 

对象(objct)是属性(property)的集合,每个属性都由“名/值对”构成,js同样定义了一个特殊的对象——数组,它是带有编号的值的有序集合。 

js还定义了一个特殊的对象——函数,函数是具有与他相关联的可执行代码的对象,通过调用函数来执行代码,并返回运算结果。 

JS中没有类,但是它取了一个新的名字叫“原型对象”,因此"类==原型对象",详情见:JavaScript类的写法(一) 

Secondo, la differenza e la relazione tra la classe (oggetto prototipo) e l'oggetto (istanza)
1. La classe (oggetto prototipo) è astratta, concettuale, e rappresenta una categoria di cose.
2. Gli oggetti sono concreti, reali, e rappresentano una cosa specifica.
3. La classe (oggetto prototipo) è uno schema per le istanze di oggetto, e l'istanza di oggetto è un individuo della classe.
Un comune fraintendimento è che i valori letterali numerici non sono oggetti. Questo è dovuto a un errore del parser JavaScript, che tenta di interpretare l'operatore punto come parte di un valore letterale a virgola mobile. 

Ci sono molte soluzioni alternative che possono far sembrare i valori letterali numerici come oggetti.
2..toString(); // Il secondo punto può essere解析 normalmente
2 .toString(); // Attenzione allo spazio prima del punto
(2).toString(); // 2 viene calcolato prima

Eliminazione dell'attributo 

Il metodo unico per eliminare un attributo è utilizzare l'operatore delete; impostare l'attributo su undefined o null non elimina veramente l'attributo, ma solo rimuove l'associazione tra l'attributo e il valore. 

Le tre caratteristiche principali dell'orientamento agli oggetti in JavaScript 

Encapsulation: senza considerare l'implementazione interna, solo l'uso delle funzionalità
Ereditarietà: ereditare nuovi oggetti da oggetti esistenti
Polimorfismo: il polimorfismo si riferisce a diversi stati di una referenza in diverse situazioni.

1. Encapsulation 

L'encapsulation significa raccogliere le caratteristiche comuni di cose della stessa categoria (inclusi attributi e azioni) in una classe, per facilitare l'uso. Ad esempio, per l'uomo, è possibile encapsulare nel modo seguente: 

Uomo{
 Età (proprietà之一)
Altezza (proprietà之二)
Sesso (proprietà之三)

Fare cose (azione之一)
Camminare (azione之二)
Parlare (azione之三)
} 

I vantaggi dell'encapsulation: 

L'encapsulation protegge l'integrità dei dati interni;
L'encapsulation rende più facile la refactoring degli oggetti;
Rafforza la decoupling tra moduli, migliorando la reusabilità degli oggetti;
Aiuta a evitare conflitti di namespace;

Ecco un esempio:

 <script type="text/javascript"> 
   var boy = {}; // Creazione di un oggetto vuoto
     boy.name = "小明"; // Assegnazione delle proprietà secondo l'oggetto prototipo
     boy.age = 12;
   var girl = {};
     girl.name = "小红";
     girl.age = 10;
 </script> 

Questo è il modo più semplice di encapsulamento, dove due attributi sono racchiusi all'interno di un oggetto. Tuttavia, questo metodo ha due svantaggi: primo, se si generano molte istanze, è molto complicato scriverlo; secondo, non c'è modo di vedere alcun tipo di relazione tra l'istanza e il prototipo. 

Modello di costruttore 

Per risolvere il problema di generare istanze da oggetti prototipo, JavaScript fornisce un modello di costruttore (Constructor). 

In realtà, il "costruttore" è una funzione comune, ma utilizza il variabile this all'interno. Utilizzando l'operatore new con il costruttore, possiamo generare istanze e il variabile this viene vincolato all'oggetto istanza. 

Ad esempio, l'oggetto prototype di boy e girl può essere scritto così:

 <script type="text/javascript"> 
  function Person(name,age){
    this.name = name;
    this.age = age;
  }
</script> 

Ora possiamo generare gli oggetti istanza.

 <script type="text/javascript"> 
  var boy = new Person("xiaoming",12);
  var girl = new Person("xiaohong",10);
  alert(boy.name); //xiaoming
  alert(boy.age); //12
</script> 

In questo modo, boy e girl avranno automaticamente un attributo constructor che punta al loro costruttore.

alert(boy.constructor == Person); //true

alert(girl.constructor); //esegui il codice di costruttore completo, prova a farlo tu stesso
Il modello Prototype di Javascript stabilisce che ogni costruttore ha un attributo prototype che punta a un altro oggetto. Tutte le proprietà e i metodi di questo oggetto vengono ereditati dalle istanze del costruttore. 

Questo significa che possiamo definire direttamente su un oggetto prototype le proprietà e i metodi invariabili.

<script type="text/javascript">
function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.prototype.type = "umano";
Person.prototype.eat = function(){
  alert("mangiare riso");
}
</script> 

Poi, generiamo le istanze:

 <script type="text/javascript">
var boy = new Person("xiaoming","12");
var girl = new Person("xiaohong","10");
alert(boy.type); //umano
boy.eat(); //mangiare
</script> 

In questo modo, tutti gli attributi type e il metodo eat() di ogni istanza, sono tutti indirizzati alla stessa memoria, che punta all'oggetto prototype, quindi aumenta l'efficienza di esecuzione.
 alert(boy.eat == girl.eat); //true
L'attributo prototipale è un attributo integrato che specifica il costruttore esteso dall'oggetto.
 Il seguente codice aggiunge una nuova proprietà size al costruttore Animal, questa nuova proprietà è l'attributo prototipale dell'oggetto cat. Utilizzando l'attributo prototipale, tutti gli oggetti che estendono il costruttore Animal possono accedere all'attributo size

cat = new Animal("feline","meow", "walk/run");
cat.prototype.size = "fat"; 

In questo caso, tutte le proprietà size degli oggetti Animal sono "grassi". Il prototipo di default è una nuova istanza di Object, poiché è ancora un oggetto, è possibile aggiungere nuove proprietà a questo oggetto. È come se style fosse un oggetto di JavaScript, è possibile aggiungere proprietà anche dopo style.

 <script type="text/javascript">
  /*Definizione di una classe Person*/
  function Person(_name,_age,_salary){
   //Proprietà pubblica della classe Person, il modo di definire le proprietà pubbliche della classe è: "this.nomeProprietà"
   this.Name=_name;
   //Proprietà private della classe Person, il modo di definire le proprietà private della classe è: "var nomeProprietà"
   var Age=_age;
   var Salary=_salary;
   //Definizione del metodo pubblico (metodo privilegiato) della classe Person, il modo di definire i metodi pubblici della classe
è: "this.functionName=function(){.....}"
   this.Show=function(){
 alert("Age="+Age+"\t"+"Salary="+Salary);//È permesso accedere alle proprietà private della classe in un metodo pubblico
   }
</script> 

Quando un oggetto cerca una proprietà, prima esplora le sue proprietà stesse, se non trova nulla, continua a cercare l'oggetto di riferimento [[Prototype]], se non trova nulla, continua a cercare [[Prototype]].[[Prototype]] e così via, fino a quando [[Prototype]].….[[Prototype]] non è undefined (il [[Prototype]] dell'oggetto Object è undefined) 

In parole semplici, è attraverso l'oggetto [[Prototype]] che si mantiene un riferimento a un altro oggetto, attraverso questo riferimento si procede alla ricerca delle proprietà, questo è la catena di prototipi. 

Oggetto null 

Il ruolo dell'assegnazione di null a una variabile in JavaScript è:
Assegnare un puntatore vuoto rende facile capire che la variabile è destinata a contenere un oggetto. Facilita anche il debug. 

L'oggetto window globale 

Ogni funzione o variabile globale in JavaScript è un attributo di window.
L'oggetto self è identico all'oggetto window, self viene solitamente utilizzato per confermare che si è nel contesto della finestra corrente. 

L'oggetto principale di window ha i seguenti:
 Oggetto document JavaScript
Oggetto frames JavaScript
Oggetto history JavaScript
Oggetto location JavaScript
Oggetto navigator JavaScript
Oggetto screen JavaScript

Alcuni metodi comuni
 Il metodo valueof(): restituisce il valore originale dell'oggetto specificato
Il metodo split() divide una stringa in un array di stringhe e restituisce questo array.
Il metodo indexOf() può restituire la posizione della prima occorrenza di una stringa specifica nella stringa.   
Il metodo substring() viene utilizzato per estrarre i caratteri tra due indici specifici di una stringa.
Il metodo substr() estrae una stringa specifica dalla posizione startPos.   
Il metodo join() viene utilizzato per inserire tutti gli elementi di un array in una stringa.
arrayObject.join(separator)
Il metodo reverse() è utilizzato per invertire l'ordine degli elementi dell'array.   
Il metodo slice() può restituire gli elementi selezionati da un array esistente.

Oggetto letterale 

Un oggetto letterale è utilizzato per creare un processo che contiene molte proprietà, come segue:

 <script type="text/javascript">
 var company = {
  name: "Microsoft",
  ages: 39,
  employees: 99000,
  CEO: "Nadella"
 };  
</script> 

Ecco cosa c'è da notare: le proprietà e i valori delle proprietà sono separati da due punti (:); più proprietà sono separate da virgole (,). Un'oggetto letterale può anche definire metodi, è sufficiente scrivere function come proprietà dell'oggetto, è una funzione anonima, per chiamarla è sufficiente scrivere il nome del metodo().

 <script type="text/javascript">
var dog = {
 name:"husky",
 age:2,
 run:function(){
    return "123";
}
}
alert(dog.run()); // Se si inserisce dog.run, verrà visualizzato il codice della parte function successiva
</script> 

Imballaggio di tipo valore base 

JavaScript ha cinque tipi di valori base: number, string, Boolean, null e undefined. Oltre a null e undefined, gli altri tre hanno cosiddetti oggetti di imballaggio di base. È possibile creare oggetti di imballaggio utilizzando i costruttori incorporati Number(), String() e Boolean().

 var num = new Number(10);
console.log(typeof num); // object 
Metodi Object
 Object() // Restituisce un oggetto vuoto
Object(undefined) // Restituisce un oggetto vuoto
Object(null) // Restituisce un oggetto vuoto
Object(1) // Uguale a new Number(1)
Object('foo') // Uguale a new String('foo')
Object(true) // Uguale a new Boolean(true)
Object([]) // Restituisce l'array originale
Object({}) // Restituisce l'oggetto originale
Object(function() {}) // Restituisce la funzione originale 

Parte dell'array 

1. Oggetto Array 

Oggetto Array: Fornisce supporto per la creazione di array di qualsiasi tipo di dati.
arrayObj = new Array()
arrayObj = new Array([size])
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])

Definizione: var arr = [2,3,45,6]; var arr = new Array(2,4,5,7) 

Non ci sono differenze nella definizione, [] ha prestazioni migliori perché il codice è più breve. 

Utilizzo di array e oggetti letterali: var aTest = []; Creare un array utilizzando un array letterale è una buona scelta; in modo simile, gli oggetti letterali possono anche essere utilizzati per risparmiare spazio. Le due righe seguenti sono equivalenti, ma quella che utilizza l'oggetto letterale è più breve:

 var oTest = new Object; // Evitare di utilizzarlo il più possibile
 var oTest = {}; // La scelta migliore, o var 0Test = []; 

Per ottenere la migliore performance di scansione degli array, si consiglia di utilizzare il classico ciclo for.

 var list = [1, 2, 3, 4, 5, ...... 100000000];
per (var i = 0, l = list.length; i < l; i++) {
 console.log(list[i]);
} 

C'è una gestione nel codice precedente, ovvero il caching della lunghezza dell'array tramite l'espressione l = list.length. 

Costruttore Array 

Poiché il costruttore Array ha un comportamento incerto nel gestire i parametri, si consiglia sempre di utilizzare la sintassi letterale degli array - [] - per creare array. 

Quindi il seguente codice può essere molto confuso:
 new Array(3, 4, 5); // Risultato: [3, 4, 5]
new Array(3) // Risultato: [], la lunghezza di questo array è 3
Evitare di utilizzare il costruttore di array per creare nuovi array. Si consiglia di utilizzare la sintassi letterale degli array. Sono più brevi e concisi, aumentando così la leggibilità del codice. 

Proprietà dell'array Array 

Le tre proprietà dell'array Array: attributo Length, attributo prototype, attributo constructor 

1. Attributo Length 

L'attributo Length rappresenta la lunghezza dell'array, ossia il numero di elementi. Poiché gli indici degli array partono sempre da 0, i limiti superiori e inferiori di un array sono rispettivamente: 0 e length-1. A differenza di molti altri linguaggi, l'attributo length degli array JavaScript è variabile, il che deve essere notato con attenzione. 

2. Attributo prototype 

Restituisce il riferimento al prototype dell'oggetto. L'attributo prototype è comune agli oggetti object. 

Per illustrare l'uso dell'attributo prototype per l'oggetto Array, consideriamo l'esempio seguente.
 Aggiungere al tipo di oggetto Array un metodo che restituisce il valore massimo dell'array. Per fare questo, dichiarare una funzione, aggiungerla a Array.prototype e utilizzarla.

 function array_max() 
{ 
var i,max=this[0]; 
for(i=1;i<this.length;i++) 
{ 
if(max<this[i]) 
max=this[i]; 
} 
return max; 
} 
Array.prototype.max=array_max; 
var x=new Array(1,2,3,4,5,6); 
var y=x.max(); 

Dopo l'esecuzione del codice, y memorizza il valore massimo dell'array x, o meglio, 6. 

3. Attributo constructor 

Funzione che rappresenta la creazione di oggetti. Spiegazione: l'attributo constructor è un membro di tutti gli oggetti che hanno un prototype. Questi includono tutti gli oggetti nativi di JScript tranne Global e Math. L'attributo constructor memorizza un riferimento alla funzione che costruisce l'istanza specifica dell'oggetto. 

Ad esempio:

 x = new String("Hi"); 
if(x.constructor==String) //eseguire la gestione (condizione vera). 
//o 
function MyFunc{ 
//corpo della funzione. 
} 
y=new MyFunc; 

if(y.constructor==MyFunc)//eseguire la gestione (condizione vera).
Per un array:
 y = new Array();

Metodo Array Oggetto

Metodo sort() 

Sintassi
arrayObject.sort(sortby)
sortby opzionale. Specifica l'ordine di ordinamento. Deve essere una funzione.
var arr = [11,2,28,4,5,1];
console.log(arr.sort());//return [1, 11, 2, 28, 4, 5]
Perché qui 11 e 28 non sono stati ordinati in ordine? Questo perché il sort senza parametri ordina secondo l'ordine di codifica dei caratteri. 

Allora, se si desidera ordinare gli elementi dell'array in ordine crescente, vedere il codice seguente:

 var arr = [11,2,28,4,5,1];
 console.log(arr.sort(function(a,b){
  return a-b;//return [1, 2, 4, 5, 11, 28]
 }); 

Se si desidera ordinare secondo altri criteri, è necessario fornire una funzione di confronto, che deve confrontare due valori e restituire un numero che indica l'ordine relativo di questi valori. La funzione di confronto deve avere due parametri a e b, e il valore di ritorno deve essere come segue:
 Se a è minore di b, in un array ordinato, a dovrebbe apparire prima di b, quindi restituisce un valore minore di 0.
Se a è uguale a b, restituisce 0.
Se a è maggiore di b, restituisce un valore maggiore di 0.

Questo è tutto il contenuto dell'articolo, spero che sia utile per la vostra apprendimento e vi prego di sostenere la guida urla.