前端基礎入門四(JavaScript基礎)
目標:
- 掌握程式設計的基本思維
- 掌握程式設計的基本語法
我們先來學習JavaScript基礎,後續會講解JavaScript高階。
重點內容
變數的宣告及使用
資料型別
型別轉換
運算子
JavaScript介紹
JavaScript是什麼
JavaScript是一種執行在客戶端 的指令碼語言
JavaScript的直譯器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於客戶端的指令碼語言,最早是在HTML(標準通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增加動態功能。
JavaScript現在的意義(應用場景)
JavaScript 發展到現在幾乎無所不能。
- 網頁特效
- 服務端開發(Node.js)
- 命令列工具(Node.js)
- 桌面程式(Electron)
- App(Cordova)
- 控制硬體-物聯網(Ruff)
- 遊戲開發(cocos2d-js)
JavaScript和HTML、CSS的區別
- HTML:提供網頁的結構,提供網頁中的內容
- CSS: 用來美化網頁
- JavaScript: 可以用來控制網頁內容,給網頁增加動態的效果
JavaScript的組成
ECMAScript - JavaScript的核心
ECMA 歐洲計算機制造聯合會
網景:JavaScript
微軟:JScript
定義了JavaScript的語法規範
JavaScript的核心,描述了語言的基本語法和資料型別,ECMAScript是一套標準,定義了一種語言的標準與具體實現無關
BOM - 瀏覽器物件模型
一套操作瀏覽器功能的API
通過BOM可以操作瀏覽器視窗,比如:彈出框、控制瀏覽器跳轉、獲取解析度等
DOM - 文件物件模型
一套操作頁面元素的API
DOM可以把HTML看做是文件樹,通過DOM提供的API可以對樹上的節點進行操作
JavaScript的書寫位置
寫在行內
<input type="button" value="按鈕" onclick="alert('Hello World')" />
寫在script標籤中
<head> <script> alert('Hello World!'); </script> </head>
寫在外部js檔案中,在頁面引入
<script src="main.js"></script>
變數
-
什麼是變數
變數是計算機記憶體中儲存資料的識別符號,根據變數名稱可以獲取到記憶體中儲存的資料 -
為什麼要使用變數
使用變數可以方便的獲取或者修改記憶體中的資料
如何使用變數
var宣告變數
var age;
變數的賦值
var age;age = 18;
同時宣告多個變數
var age, name, sex; age = 10; name = 'zs';
同時宣告多個變數並賦值
var age = 10, name = 'zs';
變數在記憶體中的儲存
var age = 18;
變數的命名規則和規範
-
規則 - 必須遵守的,不遵守會報錯
- 由字母、數字、下劃線、$符號組成,不能以數字開頭
- 不能是關鍵字和保留字,例如:for、while。
- 區分大小寫
-
規範 - 建議遵守的,不遵守不會報錯
- 變數名必須有意義
- 遵守駝峰命名法。首字母小寫,後面單詞的首字母需要大寫。例如:userName、userPassword
資料型別
簡單資料型別
Number、String、Boolean、Undefined、Null
Number型別
-
數值字面量:數值的固定值的表示法
110 1024 60.5 -
進位制
十進位制
var num = 9; 進行算數計算時,八進位制和十六進位制表示的數值最終都將被轉換成十進位制數值。
十六進位制
var num = 0xA; 數字序列範圍:0~9以及A~F
八進位制
var num1 = 07; // 對應十進位制的7 var num2 = 019; // 對應十進位制的19 var num3 = 08; // 對應十進位制的8 數字序列範圍:0~7 如果字面值中的數值超出了範圍,那麼前導零將被忽略,後面的數值將被當作十進位制數值解析
-
浮點數
-
浮點數的精度問題
浮點數
var n = 5e-324; // 科學計數法 5乘以10的-324次方
浮點數值的最高精度是 17 位小數,但在進行算術計算時其精確度遠遠不如整數
var result = 0.1 + 0.2; // 結果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100);
不要判斷兩個浮點數是否相等
-
-
數值範圍
最小值:Number.MIN_VALUE,這個值為: 5e-324
最大值:Number.MAX_VALUE,這個值為: 1.7976931348623157e+308
無窮大:Infinity
無窮小:-Infinity -
數值判斷
-
NaN:not a number
- NaN 與任何值都不相等,包括他本身
-
isNaN: is not a number
-
String型別
字串長度
length屬性用來獲取字串的長度
var str = '程式猿 Hello World'; console.log(str.length);
字串拼接
字串拼接使用 + 連線
console.log(11 + 11); console.log('hello' + ' world'); console.log('100' + '100'); console.log('11' + 11); console.log('male:' + true);
- 兩邊只要有一個是字串,那麼+就是字串拼接功能
- 兩邊如果都是數字,那麼就是算術功能。
Boolean型別
- Boolean字面量: true和false,區分大小寫
- 計算機內部儲存:true為1,false為0
Undefined和Null
- undefined表示一個宣告瞭沒有賦值的變數,變數只宣告的時候值預設是undefined
- null表示一個空,變數的值如果想為null,必須手動設定
複雜資料型別
Object
獲取變數的型別
typeof
var age = 18; console.log(typeof age); // 'number'
字面量
在原始碼中一個固定值的表示法。
數值字面量:8, 9, 10
字串字面量:'程式設計師', "大前端"
布林字面量:true,false
註釋
單行註釋
用來描述下面一個或多行程式碼的作用
// 這是一個變數 var name = 'hm';
多行註釋
用來註釋多條程式碼
/* var age = 18; var name = 'zs'; console.log(name, age); */
資料型別轉換
如何使用谷歌瀏覽器,快速的檢視資料型別?
字串的顏色是黑色的,數值型別是藍色的,布林型別也是藍色的,undefined和null是灰色的
轉換成字串型別
-
toString()
var num = 5; console.log(num.toString());
-
String()
String()函式存在的意義:有些值沒有toString(),這個時候可以使用String()。比如:undefined和null
-
拼接字串方式
num + "",當 + 兩邊一個操作符是字串型別,一個操作符是其它型別的時候,會先把其它型別轉換成字串再進行字串拼接,返回字串
轉換成數值型別
-
Number()
Number()可以把任意值轉換成數值,如果要轉換的字串中有一個不是數值的字元,返回NaN - parseInt()
var num1 = parseInt("12.3abc"); // 返回12,如果第一個字元是數字會解析知道遇到非數字結束 var num2 = parseInt("abc123"); // 返回NaN,如果第一個字元不是數字或者符號就返回NaN
-
parseFloat()
parseFloat()把字串轉換成浮點數
parseFloat()和parseInt非常相似,不同之處在與parseFloat會解析第一個. 遇到第二個.或者非數字結束 如果解析的內容裡只有整數,解析成整數
-
+,-0等運算
var str = '500'; console.log(+str); // 取正 console.log(-str); // 取負 console.log(str - 0);
轉換成布林型別
- Boolean()
0 ''(空字串) null undefined NaN 會轉換成false 其它都會轉換成true
操作符
運算子 operator
5 + 6
表示式 組成 運算元和操作符,會有一個結果
算術運算子
一元運算子
一元運算子:只有一個運算元的運算子
5 + 6 兩個運算元的運算子 二元運算子
++ 自身加1
-- 自身減1
- 前置++
var num1 = 5; ++ num1; var num2 = 6; console.log(num1 + ++ num2);
後置++
var num1 = 5; num1 ++; var num2 = 6 console.log(num1 + num2 ++);
總結
前置++:先加1,後參與運算
後置++:先參與運算,後加1
上面兩個理解後,下面兩個自通
前置-- :先減1,後參與運算
後置-- :先參與運算,後減1
邏輯運算子(布林運算子)
&& 與 兩個運算元同時為true,結果為true,否則都是false
|| 或 兩個運算元有一個為true,結果為true,否則為false
! 非 取反
關係運算子(比較運算子)
< > >= <= == != === !==
==與===的區別:==只進行值得比較,===型別和值同時相等,則相等 var result = '55' == 55; // true var result = '55' === 55; // false 值相等,型別不相等 var result = 55 === 55; // true
賦值運算子
= += -= *= /= %=
例如: var num = 0; num += 5; //相當於 num = num + 5;
運算子的優先順序
優先順序從高到底
1\. () 優先順序最高 2\. 一元運算子 ++ -- ! 3\. 算數運算子 先* / % 後 + - 4\. 關係運算子 > >= < <= 5. 相等運算子 == != === !== 6. 邏輯運算子 先&& 後|| 7. 賦值運算子
表示式和語句
表示式
一個表示式可以產生一個值,有可能是運算、函式呼叫、有可能是字面量。表示式可以放在任何需要值的地方
語句
語句可以理解為一個行為,迴圈語句和判斷語句就是典型的語句。一個程式有很多個語句組成,一般情況下;分割一個一個的語句
流程控制
程式的三種基本結構
順序結構
從上到下執行的程式碼就是順序結構
程式預設就是由上到下順序執行的
分支結構
根據不同的情況,執行對應程式碼
迴圈結構
迴圈結構:重複做一件事情
分支結構
if語句
語法結構
if (/* 條件表示式 */) { // 執行語句 } if (/* 條件表示式 */){ // 成立執行語句 } else { // 否則執行語句 } if (/* 條件1 */){ // 成立執行語句 } else if (/* 條件2 */){ // 成立執行語句 } else if (/* 條件3 */){ // 成立執行語句 } else { // 最後預設執行語句 }
switch語句
語法格式:
switch (expression) { case 常量1: 語句; break; case 常量2: 語句; break; case 常量3: 語句; break; … case 常量n: 語句; break; default: 語句; break; }
break可以省略,如果省略,程式碼會繼續執行下一個case
switch 語句在比較值時使用的是全等操作符, 因此不會發生型別轉換(例如,字串'10' 不等於數值 10)
布林型別的隱式轉換
流程控制語句會把後面的值隱式轉換成布林型別
轉換為true 非空字串 非0數字 true 任何物件 轉換成false 空字串 0 false null undefined // 結果是什麼? var a = !!'123';
迴圈結構
在javascript中,迴圈語句有三種,while、do..while、for迴圈。
while語句
基本語法:
// 當迴圈條件為true時,執行迴圈體, // 當迴圈條件為false時,結束迴圈。 while (迴圈條件) { //迴圈體 }
程式碼示例:
// 計算1-100之間所有數的和 // 初始化變數 var i = 1; var sum = 0; // 判斷條件 while (i <= 100) { // 迴圈體 sum += i; // 自增 i++; } console.log(sum);
do...while語句
do..while迴圈和while迴圈非常像,二者經常可以相互替代,但是do..while的特點是不管條件成不成立,都會執行一次。
基礎語法:
do { // 迴圈體; } while (迴圈條件);
程式碼示例:
// 初始化變數 var i = 1; var sum = 0; do { sum += i;//迴圈體 i++;//自增 } while (i <= 100);//迴圈條件
for語句
while和do...while一般用來解決無法確認次數的迴圈。for迴圈一般在迴圈次數確定的時候比較方便
for迴圈語法:
// for迴圈的表示式之間用的是;號分隔的,千萬不要寫成, for (初始化表示式1; 判斷表示式2; 自增表示式3) { // 迴圈體4 }
continue和break
break:立即跳出整個迴圈,即迴圈結束,開始執行迴圈後面的內容(直接跳到大括號)
continue:立即跳出當前迴圈,繼續下一次迴圈(跳到i++的地方)
除錯
-
過去除錯JavaScript的方式
- alert()
- console.log()
-
斷點除錯
斷點除錯是指自己在程式的某一行設定一個斷點,除錯時,程式執行到這一行就會停住,然後你可以一步一步往下除錯,除錯過程中可以看各個變數當前的值,出錯的話,除錯到出錯的程式碼行即顯示錯誤,停下。
-
除錯步驟
瀏覽器中按F12-->sources-->找到需要除錯的檔案-->在程式的某一行設定斷點
-
除錯中的相關操作
Watch: 監視,通過watch可以監視變數的值的變化,非常的常用。
F10: 程式單步執行,讓程式一行一行的執行,這個時候,觀察watch中變數的值的變化。
F8:跳到下一個斷點處,如果後面沒有斷點了,則程式執行結束。
tips: 監視變數,不要監視表示式,因為監視了表示式,那麼這個表示式也會執行。
- 程式碼除錯的能力非常重要,只有學會了程式碼除錯,才能學會自己解決bug的能力。初學者不要覺得除錯程式碼麻煩就不去除錯,知識點花點功夫肯定學的會,但是程式碼除錯這個東西,自己不去練,永遠都學不會。
陣列
為什麼要學習陣列
之前學習的資料型別,只能儲存一個值(比如:Number/String。我們想儲存班級中所有學生的姓名,此時該如何儲存?
陣列的概念
所謂陣列,就是將多個元素(通常是同一型別)按一定順序排列放到一個集合中,那麼這個集合我們就稱之為陣列。
陣列的定義
陣列是一個有序的列表,可以在陣列中存放任意的資料,並且陣列的長度可以動態的調整。
通過陣列字面量建立陣列
// 建立一個空陣列 var arr1 = []; // 建立一個包含3個數值的陣列,多個陣列項以逗號隔開 var arr2 = [1, 3, 4]; // 建立一個包含2個字串的陣列 var arr3 = ['a', 'c']; // 可以通過陣列的length屬性獲取陣列的長度 console.log(arr3.length); // 可以設定length屬性改變陣列中元素的個數 arr3.length = 0;
獲取陣列元素
陣列的取值
// 格式:陣列名[下標] 下標又稱索引 // 功能:獲取陣列對應下標的那個值,如果下標不存在,則返回undefined。 var arr = ['red',, 'green', 'blue']; arr[0]; // red arr[2]; // blue arr[3]; // 這個陣列的最大下標為2,因此返回undefined
遍歷陣列
遍歷:遍及所有,對陣列的每一個元素都訪問一次就叫遍歷。
陣列遍歷的基本語法:
for(var i = 0; i < arr.length; i++) { // 陣列遍歷的固定結構 }
陣列中新增元素
陣列的賦值
// 格式:陣列名[下標/索引] = 值; // 如果下標有對應的值,會把原來的值覆蓋,如果下標不存在,會給陣列新增一個元素。 var arr = ["red", "green", "blue"]; // 把red替換成了yellow arr[0] = "yellow"; // 給陣列新增加了一個pink的值 arr[3] = "pink";
函式
為什麼要有函式
如果要在多個地方求1-100之間所有數的和,應該怎麼做?
什麼是函式
把一段相對獨立的具有特定功能的程式碼塊封裝起來,形成一個獨立實體,就是函式,起個名字(函式名),在後續開發中可以反覆呼叫
函式的作用就是封裝一段程式碼,將來可以重複使用
函式的定義
-
函式宣告
function 函式名(){
// 函式體
}
-
函式表示式
var fn = function() {
// 函式體
}
-
特點:
函式宣告的時候,函式體並不會執行,只要當函式被呼叫的時候才會執行。
函式一般都用來幹一件事情,需用使用動詞+名詞,表示做一件事情 tellStory sayHello等
函式的呼叫
呼叫函式的語法:
函式名();
特點:
函式體只有在呼叫的時候才會執行,呼叫需要()進行呼叫。
可以呼叫多次(重複使用)
程式碼示例:
// 宣告函式 function sayHi() { console.log("吃了沒?"); } // 呼叫函式 sayHi(); // 求1-100之間所有數的和 function getSum() { var sum = 0; for (var i = 0; i < 100; i++) { sum += i; } console.log(sum); } // 呼叫 getSum();
函式的引數
為什麼要有引數
function getSum() { var sum = 0; for (var i = 1; i <= 100; i++) { sum += i; } console.log(); } // 雖然上面程式碼可以重複呼叫,但是隻能計算1-100之間的值 // 如果想要計算n-m之間所有數的和,應該怎麼辦呢?
語法:
// 函式內部是一個封閉的環境,可以通過引數的方式,把外部的值傳遞給函式內部 // 帶引數的函式宣告 function 函式名(形參1, 形參2, 形參...){ // 函式體 } // 帶引數的函式呼叫 函式名(實參1, 實參2, 實參3);
形參和實參
- 形式引數:在宣告一個函式的時候,為了函式的功能更加靈活,有些值是固定不了的,對於這些固定不了的值。我們可以給函式設定引數。這個引數沒有具體的值,僅僅起到一個佔位置的作用,我們通常稱之為形式引數,也叫形參。
- 實際引數:如果函式在宣告時,設定了形參,那麼在函式呼叫的時候就需要傳入對應的引數,我們把傳入的引數叫做實際引數,也叫實參。
var x = 5, y = 6; fn(x,y); function fn(a, b) { console.log(a + b); } //x,y實參,有具體的值。函式執行的時候會把x,y複製一份給函式內部的a和b,函式內部的值是複製的新值,無法修改外部的x,y
函式的返回值
當函式執行完的時候,並不是所有時候都要把結果列印。我們期望函式給我一些反饋(比如計算的結果返回進行後續的運算),這個時候可以讓函式返回一些東西。也就是返回值。函式通過return返回一個返回值
返回值語法:
//宣告一個帶返回值的函式 function 函式名(形參1, 形參2, 形參...){ //函式體 return 返回值; } //可以通過變數來接收這個返回值 var 變數 = 函式名(實參1, 實參2, 實參3);
函式的呼叫結果就是返回值,因此我們可以直接對函式呼叫結果進行操作。
返回值詳解:
如果函式沒有顯示的使用 return語句 ,那麼函式有預設的返回值:undefined 如果函式使用 return語句,那麼跟再return後面的值,就成了函式的返回值 如果函式使用 return語句,但是return後面沒有任何值,那麼函式的返回值也是:undefined 函式使用return語句後,這個函式會在執行完 return 語句之後停止並立即退出,也就是說return後面的所有其他程式碼都不會再執行。
arguments的使用
JavaScript中,arguments物件是比較特別的一個物件,實際上是當前函式的一個內建屬性。也就是說所有函式都內建了一個arguments物件,arguments物件中儲存了傳遞的所有的實參。arguments是一個偽陣列,因此及可以進行遍歷
函式其它
匿名函式
匿名函式:沒有名字的函式
匿名函式如何使用:
將匿名函式賦值給一個變數,這樣就可以通過變數進行呼叫 匿名函式自呼叫
關於自執行函式(匿名函式自呼叫)的作用:防止全域性變數汙染。
自呼叫函式
匿名函式不能通過直接呼叫來執行,因此可以通過匿名函式的自呼叫的方式來執行
(function () { alert(123); })();
函式是一種資料型別
function fn() {} console.log(typeof fn);
- 函式作為引數
因為函式也是一種型別,可以把函式作為兩一個函式的引數,在兩一個函式中呼叫
- 函式做為返回值
因為函式是一種型別,所以可以把函式可以作為返回值從函式內部返回,這種用法在後面很常見。
function fn(b) { var a = 10; return function () { alert(a+b); } } fn(15)();
程式碼規範
1.命名規範 2.變數規範 var name = 'zs'; 3.註釋規範 // 這裡是註釋 4.空格規範 5.換行規範 var arr = [1, 2, 3, 4]; if (a > b) { } for(var i = 0; i < 10; i++) { } function fn() { }
作用域
作用域:變數可以起作用的範圍
全域性變數和區域性變數
-
全域性變數
在任何地方都可以訪問到的變數就是全域性變數,對應全域性作用域 -
區域性變數
只在固定的程式碼片段內可訪問到的變數,最常見的例如函式內部。對應區域性作用域(函式作用域)不使用var宣告的變數是全域性變數,不推薦使用。
變數退出作用域之後會銷燬,全域性變數關閉網頁或瀏覽器才會銷燬
塊級作用域
任何一對花括號({和})中的語句集都屬於一個塊,在這之中定義的所有變數在程式碼塊外都是不可見的,我們稱之為塊級作用域。
在es5之前沒有塊級作用域的的概念,只有函式作用域,現階段可以認為JavaScript沒有塊級作用域
詞法作用域
變數的作用域是在定義時決定而不是執行時決定,也就是說詞法作用域取決於原始碼,通過靜態分析就能確定,因此詞法作用域也叫做靜態作用域。
在 js 中詞法作用域規則:
- 函式允許訪問函式外的資料.
- 整個程式碼結構中只有函式可以限定作用域.
- 作用域規則首先使用提升規則分析
- 如果當前作用規則中有名字了, 就不考慮外面的名字
var num = 123; function foo() { console.log( num ); } foo(); if ( false ) { var num = 123; } console.log( num ); // undefiend
作用域鏈
只有函式可以製造作用域結構, 那麼只要是程式碼,就至少有一個作用域, 即全域性作用域。凡是程式碼中有函式,那麼這個函式就構成另一個作用域。如果函式中還有函式,那麼在這個作用域中就又可以誕生一個作用域。
將這樣的所有的作用域列出來,可以有一個結構: 函式內指向函式外的鏈式結構。就稱作作用域鏈。
// 案例1: function f1() { function f2() { } } var num = 456; function f3() { function f4() { } }
預解析
JavaScript程式碼的執行是由瀏覽器中的JavaScript解析器來執行的。JavaScript解析器執行JavaScript程式碼的時候,分為兩個過程:預解析過程和程式碼執行過程
預解析過程:
- 把變數的宣告提升到當前作用域的最前面,只會提升宣告,不會提升賦值。
- 把函式的宣告提升到當前作用域的最前面,只會提升宣告,不會提升呼叫。
- 先提升var,在提升function
JavaScript的執行過程
var a = 25; function abc (){ alert(a);//undefined var a = 10; } abc(); // 如果變數和函式同名的話,函式優先 console.log(a); function a() { console.log('aaaaa'); } var a = 1; console.log(a);
全域性解析規則
函式內部解析規則
變數提升
-
變數提升
定義變數的時候,變數的宣告會被提升到作用域的最上面,變數的賦值不會提升。 -
函式提升
JavaScript解析器首先會把當前作用域的函式宣告提前到整個作用域的最前面
// 1、----------------------------------- var num = 10; fun(); function fun() { console.log(num); var num = 20; } //2、----------------------------------- var a = 18; f1(); function f1() { var b = 9; console.log(a); console.log(b); var a = '123'; } // 3、----------------------------------- f1(); console.log(c); console.log(b); console.log(a); function f1() { var a = b = c = 9; console.log(a); console.log(b); console.log(c); }
物件
為什麼要有物件
function printPerson(name, age, sex....) { } // 函式的引數如果特別多的話,可以使用物件簡化 function printPerson(person) { console.log(person.name); …… }
什麼是物件
現實生活中:萬物皆物件,物件是一個具體的事物,一個具體的事物就會有行為和特徵。
舉例: 一部車,一個手機
車是一類事物,門口停的那輛車才是物件
特徵:紅色、四個輪子 行為:駕駛、剎車
JavaScript中的物件
JavaScript中的物件其實就是生活中物件的一個抽象 JavaScript的物件是無序屬性的集合。 其屬性可以包含基本值、物件或函式。物件就是一組沒有順序的值。我們可以把JavaScript中的物件想象成鍵值對,其中值可以是資料和函式。 物件的行為和特徵 特徵---屬性 行為---方法
- 事物的特徵在物件中用屬性來表示。
- 事物的行為在物件中用方法來表示。
物件字面量
字面量:11 'abc' true [] {}等
var o = { name: 'zs, age: 18, sex: true, sayHi: function () { console.log(this.name); } };
物件建立方式
物件字面量
var o = { name: 'zs', age: 18, sex: true, sayHi: function () { console.log(this.name); } };
new Object()建立物件
var person = new Object(); person.name = 'lisi'; person.age = 35; person.job = 'actor'; person.sayHi = function(){ console.log('Hello,everyBody'); }
工廠函式建立物件
function createPerson(name, age, job) { var person = new Object(); person.name = name; person.age = age; person.job = job; person.sayHi = function(){ console.log('Hello,everyBody'); } return person; } var p1 = createPerson('張三', 22, 'actor');
自定義建構函式
function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.sayHi = function(){ console.log('Hello,everyBody'); } } var p1 = new Person('張三', 22, 'actor');
屬性和方法
如果一個變數屬於一個物件所有,那麼該變數就可以稱之為該物件的一個屬性,屬性一般是名詞,用來描述事物的特徵 如果一個函式屬於一個物件所有,那麼該函式就可以稱之為該物件的一個方法,方法是動詞,描述事物的行為和功能
new關鍵字
建構函式 ,是一種特殊的函式。主要用來在建立物件時初始化物件, 即為物件成員變數賦初始值,總與new運算子一起使用在建立物件的語句中。
- 建構函式用於建立一類物件,首字母要大寫。
- 建構函式要和new一起使用才有意義。
new在執行時會做四件事情
new會在記憶體中建立一個新的空物件 new 會讓this指向這個新的物件 執行建構函式 目的:給這個新物件加屬性和方法 new會返回這個新物件
this詳解
JavaScript中的this指向問題,有時候會讓人難以捉摸,隨著學習的深入,我們可以逐漸瞭解 現在我們需要掌握函式內部的this幾個特點 1. 函式在定義的時候this是不確定的,只有在呼叫的時候才可以確定 2. 一般函式直接執行,內部this指向全域性window 3. 函式作為一個物件的方法,被該物件所呼叫,那麼this指向的是該物件 4. 建構函式中的this其實是一個隱式物件,類似一個初始化的模型,所有方法和屬性都掛載到了這個隱式物件身上,後續通過new關鍵字來呼叫,從而實現例項化
物件的使用
遍歷物件的屬性
通過for..in語法可以遍歷一個物件
var obj = {}; for (var i = 0; i < 10; i++) { obj[i] = i * 2; } for(var key in obj) { console.log(key + "==" + obj[key]); }
刪除物件的屬性
function fun() { this.name = 'mm'; } var obj = new fun(); console.log(obj.name); // mm delete obj.name; console.log(obj.name); // undefined
簡單型別和複雜型別的區別
基本型別又叫做值型別,複雜型別又叫做引用型別
值型別:簡單資料型別,基本資料型別,在儲存時,變數中儲存的是值本身,因此叫做值型別。
引用型別:複雜資料型別,在儲存是,變數中儲存的僅僅是地址(引用),因此叫做引用資料型別。
-
堆和棧
堆疊空間分配區別:
1、棧(作業系統):由作業系統自動分配釋放 ,存放函式的引數值,區域性變數的值等。其操作方式類似於資料結構中的棧;
2、堆(作業系統): 儲存複雜型別(物件),一般由程式設計師分配釋放, 若程式設計師不釋放,由垃圾回收機制回收,分配。方式倒是類似於連結串列。 - 注意:JavaScript中沒有堆和棧的概念,此處我們用堆和棧來講解,目的方便理解和方便以後的學習。
內建物件
JavaScript中的物件分為3種:內建物件、瀏覽器物件、自定義物件
JavaScript 提供多個內建物件:Math/Array/Number/String/Boolean...
物件只是帶有屬性和方法的特殊資料型別。
學習一個內建物件的使用,只要學會其常用的成員的使用(通過查文件學習)
可以通過MDN/W3C來查詢
內建物件的方法很多,我們只需要知道內建物件提供的常用方法,使用的時候查詢文件。
如何學習一個方法?
- 方法的功能
- 引數的意義和型別
- 返回值意義和型別
- demo進行測試
Math物件
Math物件不是建構函式,它具有數學常數和函式的屬性和方法,都是以靜態成員的方式提供
跟數學相關的運算來找Math中的成員(求絕對值,取整)
Math
演示:Math.PI、Math.random()、Math.floor()/Math.ceil()、Math.round()、Math.abs() 、Math.max()
Math.PI // 圓周率 Math.random() // 生成隨機數 Math.floor()/Math.ceil() // 向下取整/向上取整 Math.round() // 取整,四捨五入 Math.abs() // 絕對值 Math.max()/Math.min() // 求最大和最小值 Math.sin()/Math.cos() // 正弦/餘弦 Math.power()/Math.sqrt() // 求指數次冪/求平方根
Date物件
建立 Date 例項用來處理日期和時間。Date 物件基於1970年1月1日(世界標準時間)起的毫秒數。
// 獲取當前時間,UTC世界時間,距1970年1月1日(世界標準時間)起的毫秒數 var now = new Date(); console.log(now.valueOf()); // 獲取距1970年1月1日(世界標準時間)起的毫秒數 Date建構函式的引數 1. 毫秒數 1498099000356 new Date(1498099000356) 2. 日期格式字串 '2015-5-1' new Date('2015-5-1') 3. 年、月、日…… new Date(2015, 4, 1) // 月份從0開始
獲取日期的毫秒形式
var now = new Date(); // valueOf用於獲取物件的原始值 console.log(date.valueOf()) // HTML5中提供的方法,有相容性問題 var now = Date.now(); // 不支援HTML5的瀏覽器,可以用下面這種方式 var now = + new Date(); // 呼叫 Date物件的valueOf()
日期格式化方法
toString() // 轉換成字串 valueOf() // 獲取毫秒值 // 下面格式化日期的方法,在不同瀏覽器可能表現不一致,一般不用 toDateString() toTimeString() toLocaleDateString() toLocaleTimeString()
獲取日期指定部分
getTime() // 返回毫秒數和valueOf()結果一樣,valueOf()內部呼叫的getTime() getMilliseconds() getSeconds() // 返回0-59 getMinutes() // 返回0-59 getHours() // 返回0-23 getDay() // 返回星期幾 0週日 6周6 getDate() // 返回當前月的第幾天 getMonth() // 返回月份,***從0開始*** getFullYear() //返回4位的年份 如 2016
Array物件
建立陣列物件的兩種方式
- 字面量方式
- new Array()
// 1\. 使用建構函式建立陣列物件 // 建立了一個空陣列 var arr = new Array(); // 建立了一個陣列,裡面存放了3個字串 var arr = new Array('zs', 'ls', 'ww'); // 建立了一個陣列,裡面存放了4個數字 var arr = new Array(1, 2, 3, 4); // 2\. 使用字面量建立陣列物件 var arr = [1, 2, 3]; // 獲取陣列中元素的個數 console.log(arr.length);
-
檢測一個物件是否是陣列
- instanceof
- Array.isArray() HTML5中提供的方法,有相容性問題
函式的引數,如果要求是一個陣列的話,可以用這種方式來進行判斷
-
toString()/valueOf()
- toString() 把陣列轉換成字串,逗號分隔每一項
- valueOf() 返回陣列物件本身
-
陣列常用方法
演示:push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()
// 1 棧操作(先進後出) push() pop() //取出陣列中的最後一項,修改length屬性 // 2 佇列操作(先進先出) push() shift() //取出陣列中的第一個元素,修改length屬性 unshift() //在陣列最前面插入項,返回陣列的長度 // 3 排序方法 reverse() //翻轉陣列 sort(); //即使是陣列sort也是根據字元,從小到大排序 // 帶引數的sort是如何實現的? // 4 操作方法 concat() //把引數拼接到當前陣列 slice() //從當前陣列中擷取一個新的陣列,不影響原來的陣列,引數start從0開始,end從1開始 splice() //刪除或替換當前陣列的某些專案,引數start, deleteCount, options(要替換的專案) // 5 位置方法 indexOf()、lastIndexOf() //如果沒找到返回-1 // 6 迭代方法 不會修改原陣列(可選) every()、filter()、forEach()、map()、some() // 7 方法將陣列的所有元素連線到一個字串中。 join()
清空陣列
// 方式1 推薦 arr = []; // 方式2 arr.length = 0; // 方式3 arr.splice(0, arr.length);
基本包裝型別
為了方便操作基本資料型別,JavaScript還提供了三個特殊的引用型別:String/Number/Boolean
// 下面程式碼的問題? // s1是基本型別,基本型別是沒有方法的 var s1 = 'zhangsan'; var s2 = s1.substring(5); // 當呼叫s1.substring(5)的時候,先把s1包裝成String型別的臨時物件,再呼叫substring方法,最後銷燬臨時物件, 相當於: var s1 = new String('zhangsan'); var s2 = s1.substring(5); s1 = null;
// 建立基本包裝型別的物件 var num = 18; //數值,基本型別 var num = Number('18'); //型別轉換 var num = new Number(18); //基本包裝型別,物件 // Number和Boolean基本包裝型別基本不用,使用的話可能會引起歧義。例如: var b1 = new Boolean(false); var b2 = b1 && true; // 結果是什麼
String物件
字串的不可變
var str = 'abc'; str = 'hello'; // 當重新給str賦值的時候,常量'abc'不會被修改,依然在記憶體中 // 重新給字串賦值,會重新在記憶體中開闢空間,這個特點就是字串的不可變 // 由於字串的不可變,在大量拼接字串的時候會有效率問題
建立字串物件
var str = new String('Hello World'); // 獲取字串中字元的個數 console.log(str.length);
字串物件的常用方法
字串所有的方法,都不會修改字串本身(字串是不可變的),操作完成會返回一個新的字串
// 1 字元方法 charAt() //獲取指定位置處字元 charCodeAt() //獲取指定位置處字元的ASCII碼 str[0] //HTML5,IE8+支援 和charAt()等效 // 2 字串操作方法 concat() //拼接字串,等效於+,+更常用 slice() //從start位置開始,擷取到end位置,end取不到 substring() //從start位置開始,擷取到end位置,end取不到 substr() //從start位置開始,擷取length個字元 // 3 位置方法 indexOf() //返回指定內容在元字串中的位置 lastIndexOf() //從後往前找,只找第一個匹配的 // 4 去除空白 trim() //只能去除字串前後的空白 // 5 大小寫轉換方法 to(Locale)UpperCase() //轉換大寫 to(Locale)LowerCase() //轉換小寫 // 6 其它 search() replace() split() fromCharCode() // String.fromCharCode(101, 102, 103); //把ASCII碼轉換成字串
自己是個做了幾年開發的老碼農,希望本文對你有用! 這裡推薦一下我的前端學習交流圈:767273102 ,裡面都是學習前端的,從最基礎的HTML+CSS+JS【炫酷特效,遊戲,外掛封裝,設計模式】到移動端HTML5的專案實戰的學習資料都有整理,送給每一位前端小夥伴。2019最新技術,與企業需求同步。好友都在裡面學習交流,每天都會有大牛定時講解前端技術!
點選: 加入
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2645003/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- JavaScript入門基礎JavaScript
- CTF入門學習5-> 前端JavaScript基礎前端JavaScript
- JavaScript入門①-基礎知識築基JavaScript
- JavaScript 基礎知識入門JavaScript
- 前端基礎入門一(HTML)前端HTML
- 前端入門3-CSS基礎前端CSS
- 網站前端_jQuery-基礎入門網站前端jQuery
- 前端基礎入門六(JQuery進階)前端jQuery
- 前端基礎之JavaScript引入前端JavaScript
- 前端-JavaScript基礎知識前端JavaScript
- 2020版JavaScript基礎入門教程全集分享JavaScript
- JavaScript入門②-函式(1)基礎{淺出}JavaScript函式
- JavaScript 基礎(四) – HTML DOM EventJavaScriptHTML
- HTML 基礎入門HTML
- Maven入門基礎Maven
- Java 入門基礎Java
- Redis入門基礎Redis
- goalng 基礎入門Go
- sqlServer 基礎入門SQLServer
- Ansible 基礎入門
- shell入門基礎
- mongodb基礎入門MongoDB
- MySQL 基礎入門MySql
- RabbitMQ基礎入門MQ
- SpringCloud基礎入門SpringGCCloud
- ZooKeeper 基礎入門
- Bootstrap基礎入門boot
- Html基礎入門HTML
- Vim 入門:基礎
- ElasticSearch基礎入門Elasticsearch
- Dart 基礎入門Dart
- Elasticsearch 基礎入門Elasticsearch
- 【FastAPI】入門基礎ASTAPI
- Linux基礎入門Linux
- go基礎入門Go
- Zookeeper基礎入門
- Nginx 基礎入門Nginx
- SQL入門基礎SQL