JavaScript 中undefined與null

JavaScript 中undefined與null的區(qū)別分析

null==undefined; // true
null !==undefined; // true

ull

首先他是一個對象，但是是一個空對象，因為是一個對象，所以

typeof null; // "object"

null是js保留的關(guān)鍵字；

null在參與數(shù)值運算的時候?qū)⒆詣愚D(zhuǎn)換成 0 ；例如：

var c=123 + null; // 123
var a=188 * null; // 0

null表示"沒有對象"，即該處不應(yīng)該有值。典型用法是：

（1）作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象。

（2）作為對象原型鏈的終點。

Object.getPrototypeOf(Object.prototype) // null

undefined

首先undefined是全局對象中的一個特殊屬性，他的值是一個未定義的，我們來看看他是否為全局對象的屬性：

alert("undefined" in window);

上述這段代碼會在瀏覽器輸出true;

然而當(dāng)我們創(chuàng)建一個空對象的時候：

var anObj={}; 
alert('undefined' in anObj); //輸出：false

undefined參與的所有數(shù)值運算，其值都會返回 NaN

var h=123+undefined; // NaN

undefined表示"缺少值"，就是此處應(yīng)該有一個值，但是還沒有定義。典型用法是：

（1）變量被聲明了，但沒有賦值時，就等于undefined。

（2) 調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。

（3）對象沒有賦值的屬性，該屬性的值為undefined。

（4）函數(shù)沒有返回值時，默認(rèn)返回undefined。

當(dāng)我們在程序中使用undefined值時，實際上使用的是window對象的undefined屬性。

同樣，當(dāng)我們定義一個變量但未賦予其初始值，例如：

var vaule ; // undefined
這個時候JavaScript預(yù)編譯會將其初始值的設(shè)置為 window.undefined 的引用。

于是，當(dāng)我們將一個變量或值與undefined比較時，實際上是與window對象的undefined屬性比較。這個比較過程中，JavaScript會搜索window對象名叫‘undefined'的屬性，然后再比較兩個操作數(shù)的引用指針是否相同。

由于window對象的屬性值是非常多的，在每一次與undefined的比較中，搜索window對象的undefined屬性都會花費時間。在需要頻繁與undefined進(jìn)行比較的函數(shù)中，這可能會是一個性能問題點。因此，在這種情況下，我們可以自行定義一個局部的undefined變量，來加快對undefined的比較速度。例如：

function anyFunc() { 
 var undefined; //自定義局部undefined變量 
 if(x==undefined){
 console.log(undefined)
 } //作用域上的引用比較 
 
 while(y !=undefined){
 console.log(undefined)
 } //作用域上的引用比較 
};

其中，定義undefined局部變量時，其初始值會是對window.undefined屬性值的引用。新定義的局部undefined變量存在與該函數(shù)的作用域上。在隨后的比較操作中，JavaScript代碼的書寫方式?jīng)]有任何的改變，但比較速度卻很快。因為作用域上的變量數(shù)量會遠(yuǎn)遠(yuǎn)少于window對象的屬性，搜索變量的速度會極大提高。

這就是許多前端JS框架為什么常常要自己定義一個局部undefined變量的原因！

avaScript 中的數(shù)據(jù)類型可分為兩類：基本數(shù)據(jù)類型（也稱為原始數(shù)據(jù)類型）和復(fù)雜數(shù)據(jù)類型（也稱為引用數(shù)據(jù)類型）。具體而言，JavaScript 支持以下數(shù)據(jù)類型：

基本數(shù)據(jù)類型（Primitive Types）

1,字符串類型（String）

字符串是文本的數(shù)據(jù)類型，使用單引號（'）或雙引號（"）括起來表示。
JavaScript中的字符串是不可變的，即一旦創(chuàng)建，就不能改變其值（雖然可以改變字符串變量的值，使其指向另一個字符串）。
字符串中的每個字符都有一個索引，索引從0開始。
ES6引入了模版字符串（template strings），使用反引號（`）括起來，可以嵌入變量和表達(dá)式。

2,數(shù)值類型（Number）

數(shù)值類型用于表示數(shù)字，包括整數(shù)和浮點數(shù)。
JavaScript中的數(shù)字均采用IEEE 754標(biāo)準(zhǔn)定義的64位浮點格式表示，但在某些情況下（如數(shù)組索引）會基于32位整數(shù)處理。
數(shù)值類型可以表示極大或極小的數(shù)字，超出范圍的數(shù)字會表示為Infinity（正無窮）或-Infinity（負(fù)無窮）。
特殊值NaN（Not-a-Number）用于表示某些非數(shù)值的操作結(jié)果。

3,布爾類型（Boolean）

布爾類型只有兩個值：true和false，用于表示邏輯上的真和假。

4,未定義類型（Undefined）

當(dāng)聲明了一個變量但沒有給它賦值時，它的值就是undefined。
undefined是JavaScript中的一個預(yù)定義的全局變量，表示“缺少值”。

5,空類型（Null）

null表示一個空值，是一個只有一個值的特殊類型。
從邏輯上看，null表示一個空對象的指針，這也是為什么使用typeof檢測null時結(jié)果為"object"的原因。

6,Symbol類型（ES6新增）

Symbol是一種原始數(shù)據(jù)類型，用于創(chuàng)建唯一的標(biāo)識符。
Symbol類型的值可以作為對象的屬性名，以避免命名沖突。
Symbol可以通過Symbol()函數(shù)或Symbol.for()函數(shù)創(chuàng)建，后者創(chuàng)建的Symbol是全局的，可以重復(fù)獲取。

7,BigInt類型（較新，ES2020引入）

用于表示大于2^53 - 1的整數(shù)。BigInt提供了一種方法來表示任意大小的整數(shù)。
任意精度：BigInt可以表示任意精度的整數(shù)，解決了之前JavaScript中Number類型整數(shù)溢出的問題。
不可變性：BigInt的值是不可變的，即一旦創(chuàng)建，其值就不能被改變。
與Number的區(qū)別：BigInt與Number類型不是嚴(yán)格相等的，它們之間不能直接進(jìn)行算術(shù)運算，除非先將它們轉(zhuǎn)換為同一類型。

復(fù)雜數(shù)據(jù)類型（Reference Types）

對象類型（Object）對象是一種復(fù)雜的數(shù)據(jù)類型，用于存儲鍵值對集合。JavaScript中的數(shù)組、函數(shù)、日期等都是對象的一種特殊形式。對象屬性名可以是字符串或Symbol類型。
數(shù)組類型（Array）數(shù)組是一種特殊的對象，用于存儲一系列有序的值。數(shù)組的每個值稱為元素，可以通過索引訪問。數(shù)組索引從0開始，可以是整數(shù)或字符串（但通常使用整數(shù)）。
函數(shù)類型（Function）函數(shù)是JavaScript中的一等公民，可以作為變量賦值、作為參數(shù)傳遞、也可以作為返回值。函數(shù)用于定義可重復(fù)使用的代碼塊，可以接收參數(shù)并返回結(jié)果。
其他特殊對象類型如正則表達(dá)式（RegExp）、日期（Date）等，它們都是基于對象類型的特殊構(gòu)造器創(chuàng)建的。

總結(jié)

JavaScript 數(shù)據(jù)類型多種多樣，涵蓋了七種基本數(shù)據(jù)類型（字符串、數(shù)值、布爾、未定義、空、Symbol、BigInt）以及多種復(fù)雜數(shù)據(jù) Object 類型（對象、數(shù)組、函數(shù)等）。掌握這些數(shù)據(jù)類型的特點和應(yīng)用方法，對于編寫高效、可維護(hù)的 JavaScript 代碼具有重要意義。

TML5之fileReader異步讀取文件及文件切片讀取

fileReader的方法與事件

fileReade實現(xiàn)圖片預(yù)加載

fileReade實現(xiàn)文件讀取進(jìn)度條

fileReade的與file.s實現(xiàn)文件切片讀取

一、fileReader的方法與事件

1.方法

FileReader.abort()：終止讀取操作。返回時, readyState屬性為DONE。

FileReader.readAsArrayBuffer()：將文件讀取為ArrayBuffer數(shù)據(jù)對象。

FileReader.readAsBinaryString()：將文件讀取為二進(jìn)制數(shù)據(jù)。

FileReader.readAsDataURL()：將文件讀取為DataURL編碼（base64）==>URL格式的字符串。

FileReader.readAsText()：將文件讀取為文本==》字符串表示的文件內(nèi)容。

2.事件

FileReader.onloadstart：讀取開始時觸發(fā)

FileReader.onprogress：讀取中

FileReader.onloadend：讀取完成觸發(fā), 無論成功或失敗

FileReader.onload：文件讀取成功完成時觸發(fā)

FileReader.onabort：中斷時觸發(fā)

FileReader.onerror：出錯時觸發(fā)

3.實現(xiàn)圖片讀取預(yù)覽

在Web FileReader API接口實現(xiàn)之前, 圖片預(yù)覽的通常做法是先將圖片上傳至服務(wù)器, 上傳成功以后通過過觸發(fā)ajax請求到剛剛上傳的圖片, 然后加載到頁面。這個過程中如果圖片選擇錯誤或者需要修改上傳的圖片, 就需要重復(fù)上傳和下載請求, 并且還需要在服務(wù)器替換圖片資源, 會浪費大量的網(wǎng)絡(luò)資源和服務(wù)器資源。現(xiàn)在通過FileReader實現(xiàn)本地圖片讀取預(yù)覽, 就可以在本地實現(xiàn)圖片修改, 節(jié)省服務(wù)器資源。

既然是HTML5的API就目前來說肯定存在兼容性問題, 目前IE10開始支持FileReader, 所以通過服務(wù)上傳下載的圖片預(yù)覽方式還是有必要的, 接下來的示例僅僅展示FileReader的圖片讀取預(yù)覽代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.imgBox{
display: flex;
width: 300px;
height: 300px;
border: 1px solid #300;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<input type="file" name="">
<div class="imgBox"></div>
</body>
<script>
var imgBox=document.getElementsByClassName('imgBox')[0];
var reader=new FileReader(); //創(chuàng)建文件讀取對象
var inp=document.getElementsByTagName('input')[0]; //獲取文件源
inp.onchange=function(){ //input域發(fā)生改變后觸發(fā)文件讀取
reader.readAsDataURL(inp.files[0]); //使用文件讀取對象讀取圖片為base64編碼
}
reader.onload=function(e){ //當(dāng)圖片讀取成功后觸發(fā)
var img=new Image(); //創(chuàng)建img對象
img.src=e.target.result; //給img對象添加緩存中的bese64位編碼的圖片數(shù)據(jù)（異步）
img.onload=function(e){ //圖片數(shù)據(jù)加載完成以后
if(this.width > this.height){ //當(dāng)圖片的寬度大于高度
img.style.width='100%'; //是：設(shè)置圖片寬度100%，實現(xiàn)圖片全部預(yù)覽
}else{
img.style.height='100%';//否：設(shè)置圖片高度100%，實現(xiàn)圖片全部預(yù)覽
}
imgBox.style.backgroundColor='#000';
imgBox.innerHTML=null;
imgBox.appendChild(img);
}
}
</script>
</html>

4.實現(xiàn)文件加載進(jìn)度條

在FileReader.onprogress事件對象中有兩個屬性loaded和total, loaded表示當(dāng)前文件讀取大小, total表示文件整體大小, 并且在讀取時會持續(xù)觸發(fā)更新最新讀取狀態(tài)的數(shù)據(jù),

根據(jù)FileReader.onprogress事件就可以實現(xiàn)文件加載進(jìn)度條的動畫效果了, 但是由于FileReader是h5的API在IE中最低兼容到10版本, 所以需要根據(jù)具體的項目和兼容性來設(shè)計交互。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.progress{
position: relative;
margin-top: 5px;
width: 300px;
height: 20px;
border: 1px solid #300;
}
.progressText{
display: inline-block;
position: absolute;
width: 300px;
height: 20px;
text-align: center;
font-size: 10px;
line-height: 20px;
}
.progressSpan{
display: inline-block;
/* width: 200px; */
height: 20px;
background-color: #f0f;
}
</style>
</head>
<body>
<input type="file" name="">
<!-- 文件加載進(jìn)度條 -->
<div class="progress">
<span class="progressText"></span>
<span class="progressSpan"></span>
</div>
</body>
<script>
//獲取文件源（所有功能實現(xiàn)的公共代碼區(qū)）
var inp=document.getElementsByTagName('input')[0]; //獲取文件源
var reader=new FileReader(); //創(chuàng)建文件讀取對象
// fileReader實現(xiàn)圖片加載進(jìn)度條
var progressSpanObj=document.getElementsByClassName('progressSpan')[0];
var progressTextObj=document.getElementsByClassName('progressText')[0];
inp.onchange=function(){
reader.readAsArrayBuffer(inp.files[0]);
}
reader.onloadstart=function(e){ //開始讀取文件時觸發(fā)
progressTextObj.innerText="正在讀取文件(0%)...";
}
reader.onprogress=function(e){ //讀取進(jìn)度事件
console.log(Math.round(e.loaded / e.total * 100));
var precent=Math.round(e.loaded / e.total * 100);
progressSpanObj.style.width=precent / 100 * 300 + 'px';
progressTextObj.innerText='正在讀取文件(' + precent + '%)...';
}
reader.onload=function(e){
progressTextObj.innerText='文件讀取完成(100%)';
}
reader.onerror=function(e){
progressTextObj.innerText="文件讀取出錯誤(~0v0~)";
}
</script>
</html>

二、fileReade的與file.slice實現(xiàn)文件切片讀取

通過input-type[file]獲取的文件對象上有這樣幾個數(shù)據(jù)：

inputDom.files[0]；//獲取File對象(在onchange事件后獲取)

File對象上的屬性與方法：

File()：構(gòu)造函數(shù)，返回一個新的文件對象

File.lastModified：返回所引用文件最后的修改日期，為自 1970年1月1日0:00 以來的毫秒數(shù)。沒有已知的最后修改時間則會返回當(dāng)前時間。

File.lastModifiedDate：返回當(dāng)前File對象所引用文件最后修改事件的Date都西昂。

File.name：返回當(dāng)前File對象所引用文件的名字。

File.size：返回文件的大小

File.webkitRelativePath：返回Filex相關(guān)的path或URL(這是個非標(biāo)準(zhǔn)屬性, chrome上獲取的是一個空字符串)

File.slice()：文件對象上本身是沒有方法的，slice方法同通過繼承Blob對象上的slice方法實現(xiàn)的。

File對象說明手冊（MDN）：https://developer.mozilla.org/zh-CN/docs/Web/API/File

File.slice()方法說明手冊（MDN）：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/slice

在線咨詢

上一篇：HTML列表及實例
下一篇：抖音上很火的3D立體動態(tài)相冊實現(xiàn)代碼！趕快學(xué)起來吧

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JavaScript 中undefined與null

基本數(shù)據(jù)類型（Primitive Types）

復(fù)雜數(shù)據(jù)類型（Reference Types）

總結(jié)

您的項目需求