摘要:雖然會輸出,但是這只是存在的一個悠久。在的最初版本中使用的是位系統,為了性能考慮使用低位存儲變量的類型信息,開頭代表是對象,然而表示為全零,所以將它錯誤的判斷為。
簡介參考來源: JavaScript高級程序設計:?book.douban.com/subject/105… 千古壹號:?github.com/qianguyihao… 小冊前端面試之道:?juejin.im/book/5bdc71… zh.javascript.info/comparison
JavaScript誕生于1995年, 由web發展初期的Netscape創建, 當時它的出現主要是用于處理網頁中的前端驗證. 如今JavaScript早已不再局限于簡單的數據驗證, 而是具備了與瀏覽器窗口及其內容交互的能力.
一個完整的JavaScript實現應該由三個部分組成:
核心(ECMAScript)
文檔對象模型(DOM)
瀏覽器對象模型(BOM)
JavaScript是由公司開發而成的, 問題是不便于其他的公司拓展和使用. 所以歐洲的這個ECMA的組織, 牽頭制定JavaScript的標準, 取名為ECMAScript.
ECMAScript: 是一種由European Computer Manufacturers Association制定和發布的腳本語言規范.
ECMAScript就是對實現該標準規定的各個方面內容的語言的描述, JavaScript實現了ECMAScript, ActionScript同樣也實現了ECMAScript. 而不同的瀏覽器廠商對該標準會有不同的實現.
文檔對象模型(DOM)
DOM是針對XML, 但是經過擴展用于HTML的API.
DOM把整個頁面映射成為一個多層節點結構.?
DOM級別
DOM1級的主要目標是映射文檔的結構
DOM2級在原有基礎上擴充了鼠標和用戶界面事件等細分模塊
DOM3級引入了以統一方式加載和保存文檔的方法, 新增了驗證文檔的方法
瀏覽器對象模型(BOM)
開發人員使用BOM可以控制瀏覽器顯示的頁面以外的部分, 比如讓瀏覽器自動滾動
使用元素可以指定在禁用腳本的瀏覽器中顯示的替代內容
defer屬性規定是否對腳本執行進行延遲,直到頁面加載為止,?瀏覽器會先加載沒有defer的js.
async屬性規定一旦腳本可用,則會異步執行
保留字
其他不建議使用的標識符
代碼規范
Alloyteam代碼規范:?github.com/AlloyTeam/C…
Airbnb代碼規范中文版:?github.com/BingKui/jav…
elsewhen代碼規范:?github.com/elsewhencod…
HTML和css代碼規范:?codeguide.bootcss.com/
嚴格模式
參考來源:?developer.mozilla.org/zh-CN/docs/…
可以在整個腳本或函數中開啟嚴格模式, 建議一個函數一個函數地開啟嚴格模式
在函數作用域中使用嚴格模式: 函數開頭寫上"use strict"
為什么要使用嚴格模式:
減少js代碼運行的一些不安全不合理之處, 減少一些怪異行為
提高編譯器效率, 加快運行速度
為未來新版本的js做好鋪墊
數據類型
基本(值)類型
數字number
JavaScript不區分整數值和浮點數值, JavaScript中的所有數值均用浮點數值表示.
JavaScript能識別十六進制值. 某些JavaScript的實現支持八進制直接量, 有些不支持.
JavaScript中的算術運算在溢出, 下溢或被零整除時不會報錯Infinity**(-Infinity)表示. 下溢是當運算結果無限接近于0, 這種情況下JavaScript會返回0. 非零數被零整除會返回無窮大或負無窮大, 零除以零會返回一個非數字值(not a number)NaN.
NaN和任何值都不相等, 包括它自己. x!=x當且僅當x為NaN時, 結果才為true
ECMAScript能夠表示的最小數值Number.MIN_VALUENumber.MAX_VALUE**isFinite()**函數可以判斷參數是否位于最小值和最大值之間
在js中, 浮點數的運算可能會得到一個不精確的結果(二進制無法精確表示十分之一)
var a = 0.1 + 0.2;
console.log(a); // 0.30000000000000004
字符串string
使用加號運算符進行字符串連接
使用s.length得到字符串的長度
字符串中所有的方法實際上返回的是一個新的字符串值
var s = "hello, world";
s[s.length-1]
s.charAt(s.length-1) // 最后一個字符
s.charCodeAt(s.length - 1) // 返回100
String.fromCharCode(65, 66, 67); // 返回"ABC"
s.substring(1, 4) // 截取從位置1到位置3的字符串, 會把負數參數轉換為0
s.slice(1, s.length)
s.slice(0, -1) // 如果參數是負數, 比如參數是-3, 則看做s.length-3
s.substr(1, 4) // 第二個參數代表的是截取的長度
s.split(", w") // 根據指定切割字符串
s.replace("l", "a") // 替換
s.replace(/l/g, "a")
s.indexOf("e") // 字符e首次出現的位置, 返回-1表示找不到
s.lastIndexOf("l") // 字符l最后一次出現的位置
s.indexOf("l", 3) // 從位置3開始查找字符l首次出現的位置
s.toUpperCase()
s.toLowerCase()
s.concat("cxq"); //連接字符串
s.trim() // 去掉字符串前后的空白
boolean
undefined, null, 0, -0, NaN, ""都可以被轉換成false
undefined
undefined是預定義的全局變量, 表示未定義.
對未初始化和未聲明的變量執行typeof都會返回undefined
undefined和NaN都是全局對象的屬性
var message; // 此時message保存的是undefined
console.log(windows.undefined);
null
null常用來表示空值.
進行初始賦值時, 可將變量賦值為null
作為垃圾回收時, 可將變量賦值為null
對于 null 來說,很多人會認為他是個對象類型,其實這是錯誤的。雖然 typeof null 會輸出 object,但是這只是 JS 存在的一個悠久 Bug。在 JS 的最初版本中使用的是 32 位系統,為了性能考慮使用低位存儲變量的類型信息,000 開頭代表是對象,然而 null 表示為全零,所以將它錯誤的判斷為 object 。雖然現在的內部類型判斷代碼已經改變了,但是對于這個 Bug 卻是一直流傳下來
對象(引用)類型
基本類型的值直接保存在棧內存中, 對象類型是保存到堆內存中.
內置對象
Arguments函數參數集合, Object基礎對象,?Function函數構造器,?Error異常
Date日期, Math數學, RegExp正則?
Array數組, Boolean布爾, Number數字, String字符串
宿主對象
由js的運行環境提供的對象
window, global, document
自定義對象
開發人員自己創建的對象
// 給對象添加屬性
var p = {};
p.name = "brenner";
p["content-type"] = null;
"name" in p // 返回true說明屬性名存在
delete p.name; // 刪除對象的屬性
當函數參數是對象類型時
function test(person){
person.age = 26;
person = {
name: "yyy",
age: 30
};
return person;
}
const p1 = {
name: "ccc",
age: 25
};
const p2 = test(p1);
console.log(p1, p2);
判斷類型
typeof
參考來源:?jartto.wang/2019/01/17/…
typeof就是判斷參數是什么類型的實例, 返回數據類型的字符串表達
// 對未初始化和未聲明的變量執行typeof都會返回undefined
typeof name;
var a;
typeof(typeof a); // string
typeof 123; // number
typeof "hello"; // string
typeof !!" 0"; // boolean
typeof new Function(); // function
對于基本類型, 除null以外, 均可返回意料之中的結果
對于引用類型, 除function以外, 一律返回object
對于null, 返回object
對于function, 返回function
instanceof
A instanceof B用來檢測A是否是B的實例, 是返回true, 否返回false.
不可用于檢測非引用數據類型
如果B的顯式原型對象在A的原型鏈上, 那么A是B的實例, 返回true
s = "hlslal";
s.split("l") instanceof Array // 返回true
[] instanceof Array; // true
{} instanceof Object; // true
new Date() instanceof Date; // true
類型轉換
隱式類型轉換
10 + "1" // 數字轉換成字符串
"2" * "4" // 字符串轉換成數字
1 - "x" // NaN, "x"無法轉換為數字
1+ +"2"+"3" // 返回33
NaN + "object" // NaN轉換為字符串"NaN"
!!x // 等價于Boolean(x)
"0" == 0 // 在比較之前字符串轉換為數字
顯式類型轉換
Number("123blue"); // 返回NaN
Number(true); // 1
Number(null); // 0
Number(undefined); // NaN
Number(""); // 0
// 對非string使用parseInt()或parseFloat(), 會先轉成string再操作
parseInt("123blue") // 返回123
parseInt("010", 8)
parseInt(true); // 返回NaN
parseFloat("3.14e-7")
var a = false;
String(a);
a.toString();
var a2 = 123;
a2.toString(2); // 轉成二進制形式的字符串
Boolean([]) // 返回true
Object(3) // new Number(3)
值的比較
字符串間的比較算法
首先比較兩個字符串的首位字符大小
如果一方字符較大, 則該字符串大于另一個字符串, 算法結束.
否則, 兩個字符串中的字符相等, 繼續取出各自的后一位字符進行比較
重復上述步驟進行比較,直到某字符串率先用完所有字符。
如果兩個字符串同時用完字符,那么它們被判定為相等,否則未結束(還有未比較的字符)的字符串更大
當不同類型的值進行比較時, 它們會首先被轉為數字再判定大小.
alert("01" == 1) // 返回true
undefined === undefined // true
null === null // true
NaN == NaN // 返回false
null == undefined // 返回true
null === undefined // 返回false
使用嚴格相等操作符===在進行比較時不會做任何的類型轉換.
引用類型
Date
使用來自UTC1970年1月1日零時開始經過的毫秒數來保存日期.
var someDate = new Date("1 25, 2019");
// 等價于
var someDate = new Date(Date.parse("1 25, 2019")); // Date.UTC()的參數是基于0的月份
var start = Date.now(); // 返回表示調用這個方法時的時間的毫秒數
基本包裝類型
ECMAScript提供了3個基本包裝類型(特殊的引用類型): Boolean, Number, String
引用類型與基本包裝類型的主要區別就是對象的生存期. 使用new關鍵字創建的實例, 在執行流離開當前作用域之前都一直保存在內存中. 而自動創建的基本包裝類型的對象, 則只存在于一行代碼的執行瞬間, 然后立即被銷毀.
var s = "abcd";
s.color = "red";
alert(s.color); // undefined
var value = "110";
var num = Number(value);
alert(typeof num); // number
var value = new Number("110");
alert(typeof value); // object
Global對象
不屬于任何其他對象的屬性和方法, 最終都是Global的屬性和方法, 諸如isNaN(), isFinite(), parseInt()
eval()方法
當解析器發現代碼中調用eval()方法時, 它會將傳入的參數當做實際的ECMAScript語句來解析
window對象
web瀏覽器中, 在全局作用域中聲明的所有變量和函數, 都成了window對象的屬性
Math對象
方法 | 說明 |
---|---|
Math.min()和Math.max() | |
Math.ceil() | 執行向上舍入 |
Math.floor() | 執行向下舍入 |
Math.round() | 執行四舍五入 |
Math.random() | 返回介于0和1之間一個隨機數 |
執行上下文 作用域
作用域就是變量和函數可作用的范圍. es5只有全局作用域和函數作用域,?es6新增塊級作用域
全局作用域
全局作用域在頁面打開時創建, 在頁面關閉時銷毀
在全局作用域中有一個全局對象window.
所有window對象的屬性和方法.
全局變量是不會被回收的
程序最外層定義的函數或變量
所有未定義直接賦值的變量
函數作用域
調用函數時創建函數作用域, 函數執行完后銷毀函數作用域
在函數作用域中也有變量聲明提升的特性
塊級作用域{}
作用域鏈如果變量名和函數名相同時, 函數名優先聲明
var a = 10;
function a() {}
console.log(a);
函數的生命周期: 分為創建和執行兩個時期
var x = 10;
function fn1(){
console.log(x);
}
function fn2(){
var x = 20;
fn1();
}
fn2(); // 10
var x = 10;
function A(){
var a = 20;
function B(){
var b = 30;
console.log(a);
}
}
執行環境定義了變量或函數有權訪問的其他數據, 每個執行環境都有一個與之關聯的對象, 環境中定義的所有變量和函數都保存在這個對象中(我們無法訪問這個對象, 但解析器在處理數據時會自動用到它).
某個執行環境中的所有代碼執行完畢后, 該環境也隨之被銷毀, 保存在其中的所有變量和函數定義也隨之被銷毀.
每個函數都有自己的執行環境. 當執行流進入一個函數時, 函數的環境就會被推入一個環境棧中. 而在函數執行后, 棧將其環境彈出, 把控制權返回給之前的執行環境.
全局執行上下文web瀏覽器中, 在執行全局代碼之前將window確定為全局上下文
var定義的全局變量賦值為undefined, 添加為window的屬性(變量聲明提升)
function聲明的全局函數添加為window的方法, this賦值為window(函數聲明提升)
最后開始執行全局代碼
形參變量賦值為實參, 添加到執行上下文的屬性
arguments賦值為實參列表, 添加到執行上下文的屬性
var定義的局部變量賦值為undefined, 添加到執行上下文的屬性
function聲明的函數添加到執行上下文的方法
this賦值為調用函數的對象
最后開始執行函數體中的代碼
var a = 3;
function fn(){
console.log(a);
console.log(window.a);
var a = 4;
}
fn(); // 輸出undefined
垃圾收集
標記清除
當變量進入環境(例如, 在函數中聲明一個變量), 就將這個變量標記為進入環境. 當變量離開環境時, 則將其標記為離開環境.
引用計數引用計數的含義是跟蹤記錄每個值被引用的次數.
可能出現循環引用, 比如兩個對象互相引用.
異常處理 try-catch-finally語句
如果try塊中的任何代碼發生了錯誤, 就會立即退出代碼執行過程, 然后接著執行catch塊. catch塊會接收到一個包含錯誤信息的對象
function fn() {
try {
return 1
}catch(error) {
return error.message;
}finally {
return 2;
}
}
錯誤類型
Error: 其他錯誤類型都繼承自該類型
EvalError: 會在使用eval()函數而發生異常時被拋出
RangeError: 會在數值超出相應范圍時觸發, 比如let arr = new Array(Number.MAX_VALUE);
ReferenceError: 訪問找不到的對象, 不存在的變量時就會發生這種錯誤
TypeError: 在變量中保存著意外的類型或者訪問不存在的方法
throw用于隨時拋出自定義錯誤
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/7263.html
摘要:基本的學習思路是跟著框架設計這本書,甚至可以說是這本書的讀書筆記。也參考很多網上解讀的博客和學習資料。當然,最重要的資料還是框架的源代碼。后來由于開發者反對,新興的框架都在命名空間上構建。 JavaScript框架學習筆記(一) 我為什么要學習框架 更深入的理解工具,以后用起來更順手而且也能做一定的工具取舍,學習理解新工具也就更快, 對提升js水平也很有幫助,框架有很多解決坑的經典思...
摘要:在上百種語言中算是命好的一個,還有就是最近納入高考體系的。由以下三個部分構成。就是對實現該標準規定的各個方面內容的語言的描述。是針對但經過擴展的用于的應用程序編程接口。將頁面映射為由節點構成的樹狀結構。 JavaScript的歷史這里就不再贅述了,當然JavaScript的歷史還是比較有意思的。在上百種語言中JavaScript算是‘命’好的一個,還有就是最近納入高考體系的python...
摘要:對象有狀態對象具有狀態,同一對象可能處于不同狀態之下。中對象獨有的特色對象具有高度的動態性,這是因為賦予了使用者在運行時為對象添改狀態和行為的能力。小結由于的對象設計跟目前主流基于類的面向對象差異非常大,導致有不是面向對象這樣的說法。 筆記說明 重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些...
摘要:對象有狀態對象具有狀態,同一對象可能處于不同狀態之下。中對象獨有的特色對象具有高度的動態性,這是因為賦予了使用者在運行時為對象添改狀態和行為的能力。小結由于的對象設計跟目前主流基于類的面向對象差異非常大,導致有不是面向對象這樣的說法。 筆記說明 重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些...
摘要:對象有狀態對象具有狀態,同一對象可能處于不同狀態之下。中對象獨有的特色對象具有高度的動態性,這是因為賦予了使用者在運行時為對象添改狀態和行為的能力。小結由于的對象設計跟目前主流基于類的面向對象差異非常大,導致有不是面向對象這樣的說法。 筆記說明 重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些...
閱讀 685·2023-04-25 22:50
閱讀 1525·2021-10-08 10:05
閱讀 983·2021-09-30 09:47
閱讀 1913·2021-09-28 09:35
閱讀 815·2021-09-26 09:55
閱讀 3405·2021-09-10 10:51
閱讀 3426·2021-09-02 15:15
閱讀 3290·2021-08-05 09:57