Maison interface Web js tutoriel javascript中的对象和数组的应用技巧_基础知识

javascript中的对象和数组的应用技巧_基础知识

May 16, 2016 pm 07:22 PM

javascript已经用了有三年多了,但是对一些细节的东西还是一知半解,比如对象和数组,一直都在用一些最基本的操作。这是我学习的一个坏习惯--懒,很多东西都是了解而已,看到稍微复杂点的逻辑就没有耐心。就像学asp时不知道asp跟脚本的关系,学html不知道什么是DOM...结果是学得慢且不扎实,碰到稍复杂的问题就歇菜(扯远了)。
今天继续优化脚本,尝试着合并一些数组时碰到问题,才算去仔细看了手册,做了一些测试。

javascript1.2之后允许使用[]创建数组:


var firstArray = [];
var secondArray = ["red", "green", "blue"];
var thirdArray = [,,,,];

可以在数组创建后添加元素:

secondArray[4] = 28;

这样的结果是第4个元素和第2个元素之间有1个空元素。
结果类似这样:["red", "green", "blue",,28]
需要注意的是,数组必须初始化,我测试了数组作为数组元素的定义:

var arrArray = [[]];

本来设想实现二维数组,结果是使用arrArray[i][0]当i>0时无效!
仔细看一下才明白,其实是定义了arrArray[0]为一个空数组,而其他元素都未定义,相当于
var arrArray=[];
arrArray[0]=[];
所以arrArray[1]没有定义,所以如果将它作为数组进行操作会出错。

删除一个数组元素:delete



var myColors = ["red", "green", "blue"];
delete myColors[1];
alert("The value of myColors[1] is: " + myColors[1]);

delete的结果是myColors[1]=undefined,但是myColors.length不变,myColors变成这样:["red",, "blue"]

替换或绝对删除数组元素用slice():


var myArray = [1, 2, 3, 4, 5];
myArray.slice(2); // returns [3, 4, 5]
myArray.slice(1, 3); // returns [2, 3]
myArray.slice(-3); // returns [3, 4, 5]
myArray.slice(-3, -1); // returns [3, 4]
myArray.slice(-4, 3); // returns [2, 3]
myArray.slice(3, 1); // returns []

var myArray = [1, 2, 3, 4, 5];
myArray.splice(3,2,''a'',''b'');
// returns 4,5 [1,2,3,''a'',''b'']
myArray.splice(1,1,"in","the","middle");
// returns 2 [1,"in","the","middle",3,''a'',''b'']


看了文档才知道,数组是传递引用的!


var x = [10, 9, 8];
var y = x;
x[0] = 2;
alert("The value of y's first element is: " + y[0]);

你猜结果是多少呢?
再看这个:

// Declare a reference type (array)
var refType = ["first ", " second", " third"]; 

// Declare a primitive type (number)
var primType = 10; 

// Declare a function taking two arguments, which it will modify
function modifyValues(ref, prim) 
{
ref[0] = "changed"; // modify the first argument, an array
prim = prim - 8; // modify the second, a number
}

// Invoke the function
modifyValues(refType, primType); 
// Print the value of the reference type
document.writeln("The value of refType is: ", refType+">");
// Print the value of the primitive type
document.writeln("The value of primType is: ", primType); 


测试时发现一个问题:


var arr=[];
arr['a']=1;
arr['b']=2;
alert(arr.length);

弹出的数字是0!
看了文档后知道,这样的数组叫做联合数组(Associative Arrays),arr['a']等同于arr.a,arr.length也就等同于arr['length'],而arr.length在我们初始化arr(var arr=[];)的时候自动赋值为0。
有人把这种联合数组叫做javascript的hash table。严格上讲,联合数组和普通数组本身都是对象(废话,javascript中的一切都是对象- -),意义和用法都是相同的。看下面的例子:

var arr=[];
arr=[1,2,3];
arr.test='test';
alert(arr);
alert(arr[1]);
alert(arr['test']);

var arr={}; arr=[2,3,4]; alert(arr[0]); 
var arr={};和var arr=[]都可以写成var arr=function(){}; 
从上面的代码可以看出,下标数组跟联合数组分别独立,下标只作用于下标数组,不能访问联合数组,相应的,联合数组不对length属性产生影响。联合数组的标签就是属性,但是下标数组的下标并不是属性,arr[0]!=arr.0,访问arr.0会出错。

在某些时候,用arr['a']代替arr.a作为方法调用会更有效,因为arr['a']中的'a'可以用变量传入,比如将方法赋给变量:


var d=document,l=links;

这时候用直接d.l就会出错,而用d[l]就可以正确执行,alert一下就知道了:)

alert(d.l);//脚本错误
alert(d[l]);//显示object

既然数组是由lenght属性的对象,那么是不是所有具有length属性的对象都是数组呢?比如String。测试之后发现,firefox是可以把String当作数组处理的,但是ie不行:


var myString = "Hello world";
alert(myString.length);
alert(myString[0]);

数组的对象应该比较独特,用户对象不能完全模拟:



function myarray(size){
this.length=size;
var x=0;
}
var arr=new myarray(5);
arr[9]=1;
alert(arr);
alert(arr[9]);
alert(arr.length);

本以为Array的length属性就是普通的对象属性,结果经过上面的例子发现,arr的length不再是数组length,arr的结构也不是普通数组结构。

定义一个函数/类的方法有好几种:


function fName(arguments){
//function body
};

var fName = function(arguments){
//function body
}

var fName = new Function("arguments","/*function body*/");


第三种方法比较好玩,看下面的例子:

var arr=new Function("var total=0; for (var i=0; i

用这个方法可以解析ajax返回的JSON,这样就不用低效的eval了(没有测试是否比eval快):
假设{b:{c:2}}为返回的json字符串:


var arr=new Function("this.a={b:{c:2}};");
var aa =new arr();
alert(aa.a.b.c);

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Apr 04, 2025 pm 02:42 PM

Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...

Qui est payé plus de python ou de javascript? Qui est payé plus de python ou de javascript? Apr 04, 2025 am 12:09 AM

Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.

Démystifier javascript: ce qu'il fait et pourquoi c'est important Démystifier javascript: ce qu'il fait et pourquoi c'est important Apr 09, 2025 am 12:07 AM

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Apr 04, 2025 pm 05:09 PM

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...

JavaScript est-il difficile à apprendre? JavaScript est-il difficile à apprendre? Apr 03, 2025 am 12:20 AM

Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.

Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido? Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido? ou: Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido? Apr 04, 2025 pm 05:36 PM

La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...

Comment implémenter la fonction de glisser-déposer et de régler la fonction de réglage similaire à VScode dans le développement frontal? Comment implémenter la fonction de glisser-déposer et de régler la fonction de réglage similaire à VScode dans le développement frontal? Apr 04, 2025 pm 02:06 PM

Explorez la mise en œuvre de la fonction de glisser et de réglage du panneau de type VScode dans le frontal. Dans le développement frontal, comment implémenter un VScode comme ...

La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? Apr 04, 2025 pm 05:12 PM

Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...

See all articles