JavaScript 中undefined與null

JavaScript 中undefined與null的區別分析

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

ull

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

typeof null; // "object"

null是js保留的關鍵字；

null在參與數值運算的時候將自動轉換成 0 ；例如：

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

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

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

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

Object.getPrototypeOf(Object.prototype) // null

undefined

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

alert("undefined" in window);

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

然而當我們創建一個空對象的時候：

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

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

var h=123+undefined; // NaN

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

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

（2) 調用函數時，應該提供的參數沒有提供，該參數等于undefined。

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

（4）函數沒有返回值時，默認返回undefined。

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

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

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

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

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

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

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

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

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

基本數據類型（Primitive Types）

1,字符串類型（String）

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

2,數值類型（Number）

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

3,布爾類型（Boolean）

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

4,未定義類型（Undefined）

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

5,空類型（Null）

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

6,Symbol類型（ES6新增）

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

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

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

復雜數據類型（Reference Types）

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

總結

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

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

fileReader的方法與事件

fileReade實現圖片預加載

fileReade實現文件讀取進度條

fileReade的與file.s實現文件切片讀取

一、fileReader的方法與事件

1.方法

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

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

FileReader.readAsBinaryString()：將文件讀取為二進制數據。

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

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

2.事件

FileReader.onloadstart：讀取開始時觸發

FileReader.onprogress：讀取中

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

FileReader.onload：文件讀取成功完成時觸發

FileReader.onabort：中斷時觸發

FileReader.onerror：出錯時觸發

3.實現圖片讀取預覽

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

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

<!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(); //創建文件讀取對象
var inp=document.getElementsByTagName('input')[0]; //獲取文件源
inp.onchange=function(){ //input域發生改變后觸發文件讀取
reader.readAsDataURL(inp.files[0]); //使用文件讀取對象讀取圖片為base64編碼
}
reader.onload=function(e){ //當圖片讀取成功后觸發
var img=new Image(); //創建img對象
img.src=e.target.result; //給img對象添加緩存中的bese64位編碼的圖片數據（異步）
img.onload=function(e){ //圖片數據加載完成以后
if(this.width > this.height){ //當圖片的寬度大于高度
img.style.width='100%'; //是：設置圖片寬度100%，實現圖片全部預覽
}else{
img.style.height='100%';//否：設置圖片高度100%，實現圖片全部預覽
}
imgBox.style.backgroundColor='#000';
imgBox.innerHTML=null;
imgBox.appendChild(img);
}
}
</script>
</html>

4.實現文件加載進度條

在FileReader.onprogress事件對象中有兩個屬性loaded和total, loaded表示當前文件讀取大小, total表示文件整體大小, 并且在讀取時會持續觸發更新最新讀取狀態的數據,

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

<!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="">
<!-- 文件加載進度條 -->
<div class="progress">
<span class="progressText"></span>
<span class="progressSpan"></span>
</div>
</body>
<script>
//獲取文件源（所有功能實現的公共代碼區）
var inp=document.getElementsByTagName('input')[0]; //獲取文件源
var reader=new FileReader(); //創建文件讀取對象
// fileReader實現圖片加載進度條
var progressSpanObj=document.getElementsByClassName('progressSpan')[0];
var progressTextObj=document.getElementsByClassName('progressText')[0];
inp.onchange=function(){
reader.readAsArrayBuffer(inp.files[0]);
}
reader.onloadstart=function(e){ //開始讀取文件時觸發
progressTextObj.innerText="正在讀取文件(0%)...";
}
reader.onprogress=function(e){ //讀取進度事件
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實現文件切片讀取

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

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

File對象上的屬性與方法：

File()：構造函數，返回一個新的文件對象

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

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

File.name：返回當前File對象所引用文件的名字。

File.size：返回文件的大小

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

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

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立體動態相冊實現代碼！趕快學起來吧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript 中undefined與null

基本數據類型（Primitive Types）

復雜數據類型（Reference Types）

總結

您的項目需求