Maison interface Web js tutoriel 分析 JavaScript 中令人困惑的变量赋值_javascript技巧

分析 JavaScript 中令人困惑的变量赋值_javascript技巧

May 16, 2016 pm 07:10 PM
javascript 分析

Javascript是一门弱类型的语言,声明变量不需要声明其类型,var x 就可以等于任何类型的值。
比如:

var str = "string....";
var arr = ["this","is","array"];
var obj = {name:"caizhongqi",age:26,sex:"male"};
这些都是正确的,这似乎非常简单方便,但是这种方便也会带来一些令人难于捉摸的意外,看看下面的例子(例1):

<script> var x = "this is string"; <BR> var y = x; <BR> x="ni hao"; <BR> alert(y) <BR></script>

你可能一下子知道alert出来的就是“this is string”,没错,但对于用Java语言的程序员来说,var y=x 应该是把x在存储器中的地址(指针)赋给y变量才对,因此他们觉得应该alert出“ni hao”才会更符合Java语言的习惯,但JavaScript语言不是这样,字符串的赋值是直接量操作,直接把数据copy给y的存储空间。

再看看下面的例子(例2):

<script> <BR>var x = ["hello"] // 这是一个数组,只有一个元素,并且该元素为字符串类型 <BR>var y = x; <BR>x[0] = "world"; <BR>alert(y[0]); <BR></script>

如果你还以为alert出来的是“hello”,那就错了。当 var y = x 时,x不是已经把它的数组给了y吗?但事实上却不是这样, 当 var y = x 时,x传的是它在存储器中的地址(指针)!x[0]="world" 修改了在原存储位置上的数据,因此alert(y[0])就是拿x的新值出来alert。混乱了吧?怎么一会儿是直接量一会儿是引用量呢?
不急,下面的例子将更加混乱(例3):

<script> <BR>var x = ["hello"] // 这是一个数组,只有一个元素,并且该元素为字符串类型 <BR>var y = x; <BR>x = ["ni","hao"]; // x 将变成一个新的数组了。 <BR>alert(y[0]); <BR></script>

你的眼睛告诉你,alert出来的是“hello”!这让人捉摸不透古灵精怪的JavaScript!

周星驰的《国产零零漆》中有类似的一幕:
当星爷刚从深圳到香港执行任务时,袁咏仪从他的行李中发现一个吹头发的风筒,星爷说这其实是个须刨,把皮鞋拿出来一看却是一个风筒,一个貌似大哥大电话的玩意其实又是一个须刨。须刨与风筒把袁咏仪与观众都搞混乱了,哈哈哈哈,这是我很喜欢的一部片,第一次看时肚子都笑痛了。

回过头来再看看刚才的变量赋值,直接量与引用量的使用,就好像须刨与风筒换来换去,把我们都搞晕了。
其实问题出在对x的第二次赋值 x = ["ni","hao"] 上,我们看看变量在存储器上变化以及JavaScript在对待字符串类型与对象类型的不同:

我们观察下面两种情况:
var x = "this is string...";
var y = ["this","is","string"];

x与y不同之处在于类型,javascript的解析器把字符串直接赋值(其实就是copy)给x(直接量),却把数组的指针赋给y(引用量),这一切都是瞬间全自动的!结合下面的图,可能会更好地理解:



图中p1、p2...就是变量的指针,上面的 var y 中的y存的就是Object类型变量的指针p1(假设),而x存放的就是字符串本身。再分析一下例3,执行 var x = ["hello"] 时,解析器就在内存上开辟一块存储空间放这个数组,而 x 就拿到了这个空间的地址(指针),再执行 x = ["ni","hao"] 时,解析器又新开辟一块存储空间放这个新数组,而x就是这个新存储空间的指针,这也就是说,JavaScript 里变量的重定义(或重新赋值)将会新开辟一块存储空间,而没有销毁原来的空间;回过头来再看例2,x[0] = "world",这句没有给x新定义值,没有新开辟存储空间,只是修改了它存储空间里面的数据,因此例2最后alert出来的就是“world”;例1是字符串赋值,全过程是直接量操作。

从上面的分析可以看出,JavaScript 的变量可以存储直接量也可以存储指针,这是没办法被人工干扰的,因此,在日常的编码中,就需要注意这些问题,比如大字符串连接,循环里面赋值等细节就能直接影响到程序的执行效率。

看看两个例子:

var _tmpStr="";
var str = "this is big string...";
for (i=0; i    _tmpStr += a;
}
a = _tmpStr;

因为是字符串操作,使用直接量,每次循环都要操作大字符串,非常笨重,效率低下。如果改用引用量操作,即通过数组:

var str = "this is big string...";
var _tmpArray = [];
for (i=0; i    _tmpArray[i]=str;
}
str = _tmpArray.join("");

做个测试,假如有个100k的字符串,用直接量连接操作,我的机器上需要约2600毫秒,如果用数组连接,则需要150毫秒,效率相差十几倍。

好久没写这么长的文章了,花了我大半天的时间。

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)

Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 pm 02:54 PM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel Dec 17, 2023 pm 05:13 PM

JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Analyse des raisons pour lesquelles le répertoire secondaire du CMS DreamWeaver ne peut pas être ouvert Analyse des raisons pour lesquelles le répertoire secondaire du CMS DreamWeaver ne peut pas être ouvert Mar 13, 2024 pm 06:24 PM

Titre : Analyse des raisons et des solutions pour lesquelles le répertoire secondaire de DreamWeaver CMS ne peut pas être ouvert. Dreamweaver CMS (DedeCMS) est un puissant système de gestion de contenu open source largement utilisé dans la construction de divers sites Web. Cependant, parfois pendant le processus de création d'un site Web, vous pouvez rencontrer une situation dans laquelle le répertoire secondaire ne peut pas être ouvert, ce qui perturbe le fonctionnement normal du site Web. Dans cet article, nous analyserons les raisons possibles pour lesquelles le répertoire secondaire ne peut pas être ouvert et fournirons des exemples de code spécifiques pour résoudre ce problème. 1. Analyse des causes possibles : Problème de configuration des règles pseudo-statiques : pendant l'utilisation

Comment obtenir facilement le code d'état HTTP en JavaScript Comment obtenir facilement le code d'état HTTP en JavaScript Jan 05, 2024 pm 01:37 PM

Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service

Analyser si le langage de programmation principal de Tencent est Go Analyser si le langage de programmation principal de Tencent est Go Mar 27, 2024 pm 04:21 PM

Titre : Le principal langage de programmation de Tencent Go : Une analyse approfondie En tant que principale entreprise technologique chinoise, Tencent a toujours attiré beaucoup d’attention dans son choix de langages de programmation. Ces dernières années, certains pensent que Tencent adopte principalement Go comme principal langage de programmation. Cet article procédera à une analyse approfondie pour déterminer si le principal langage de programmation de Tencent est Go et donnera des exemples de code spécifiques pour étayer ce point de vue. 1. Application du langage Go dans Tencent Go est un langage de programmation open source développé par Google. Son efficacité, sa concurrence et sa simplicité sont appréciées par de nombreux développeurs.

Analyser les avantages et les inconvénients de la technologie de positionnement statique Analyser les avantages et les inconvénients de la technologie de positionnement statique Jan 18, 2024 am 11:16 AM

Analyse des avantages et des limites de la technologie de positionnement statique Avec le développement de la science et de la technologie modernes, la technologie de positionnement est devenue un élément indispensable de nos vies. La technologie de positionnement statique en fait partie. Elle présente des avantages et des limites uniques. Cet article procédera à une analyse approfondie de la technologie de positionnement statique pour mieux comprendre son état d'application actuel et ses tendances de développement futures. Examinons d’abord les avantages de la technologie de positionnement statique. La technologie de positionnement statique permet de déterminer les informations de position en observant, mesurant et calculant l'objet à positionner. Par rapport à d'autres technologies de positionnement,

See all articles