首頁 web前端 js教程 分析 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毫秒,效率相差十几倍。

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

織夢CMS二級目錄打不開的原因分析 織夢CMS二級目錄打不開的原因分析 Mar 13, 2024 pm 06:24 PM

標題:解析織夢CMS二級目錄打不開的原因及解決方案織夢CMS(DedeCMS)是一款功能強大的開源內容管理系統,被廣泛應用於各類網站建設中。然而,有時在搭建網站過程中可能會遇到二級目錄無法開啟的情況,這給網站的正常運作帶來了困擾。在本文中,我們將分析二級目錄打不開的可能原因,並提供具體的程式碼範例來解決這個問題。一、可能的原因分析:偽靜態規則配置問題:在使用

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務

分析騰訊主要的程式語言是否為Go 分析騰訊主要的程式語言是否為Go Mar 27, 2024 pm 04:21 PM

標題:騰訊主要的程式語言是否為Go:一項深入分析騰訊作為中國領先的科技公司,在程式語言的選擇上一直備受關注。近年來,有人認為騰訊主要採用Go作為主要的程式語言。本文將對騰訊主要的程式語言是否為Go進行深入分析,並給出具體的程式碼範例來支持這一觀點。一、Go語言在騰訊的應用Go是一種由Google開發的開源程式語言,它的高效性、並發性和簡潔性受到眾多開發者的喜

分析靜態定位技術的優缺點 分析靜態定位技術的優缺點 Jan 18, 2024 am 11:16 AM

靜態定位技術的優勢與限制分析隨著現代科技的發展,定位技術已成為我們生活中不可或缺的一部分。而靜態定位技術作為其中的一種,具有其特有的優點與限制。本文將對靜態定位技術進行深入分析,以便更了解其應用現狀和未來的發展趨勢。首先,我們來看看靜態定位技術的優勢所在。靜態定位技術是透過對待定位物件進行觀測、測量和計算來實現位置資訊的確定。相較於其他定位技術,

See all articles