javascript
前端自学学习笔记——JavaScript
第1章 JavaScript介紹
文章目錄
- 第1章 JavaScript介紹
- 1.1 JavaScript編程語言
- 1.2 ECMAScript 與 JavaScript
- 1.3 javaScript和HTML、CSS
- 1.4 JS學習概況
- 第2章 入門
- 2.1 如何寫一段JS代碼并運行
- 2.3 變量
- 2.3.1 什么是變量
- 2.3.2 如何使用變量
- 2.3.3 變量的命名規則和規范
- 2.3.4 案例
- 2.4 數據類型
- 2.4.1 簡單數據類型
- 獲取變量的類型
- Number類型
- String類型
- Boolean類型
- Undefined和Null
- 2.4.2 復雜數據類型
- 2.5 注釋
- 第3章 數據類型轉換
- 3.1 轉換成字符串類型
- 3.2 轉換成數值類型
- 3.3 轉換成布爾類型
- 第4章 操作符
- 4.1 算術運算符
- 4.2 一元運算符 *
- 4.3 邏輯運算符(布爾運算符) *
- 4.4 關系運算符(比較運算符)
- 4.5 賦值運算符
- 4.6 運算符的優先級 *
- 第5章 流程控制
- 5.1 分支結構
- if語句
- 三元運算符
- switch語句
- 5.2 循環結構
- 5.2.1 while語句
- 5.2.2 do...while語句
- 5.2.3 for語句
- 5.2.4 continue和break
- 第6章 JS中特殊的對象-數組
- 6.1 數組的創建
- 6.2 獲取數組元素
- 6.3 遍歷數組
- 6.4 為數組修改添加元素
- 6.5 數組操作案例
- 第7章 函數
- 7.1 函數的聲明及調用
- 7.1.1 聲明
- 7.1.2 調用
- 7.2 參數
- 7.3 函數的返回值
- 7.4 函數相關的其它事情
- 7.4.1 匿名函數與自調用函數
- 7.4.2 函數本身也是值 *
- 第8章 作用域與JS代碼的運行 *
- 8.1 全局變量和局部變量 *
- 8.2 變量提升
- 8.3 JS代碼的運行 *
- 8.4 詞法作用域
- 8.5 作用域鏈 *
- 第9章 對象(Object)
- 9.1 什么是對象
- 9.2 JavaScript中的對象
- 9.3 如何得到一個對象
- 9.4 this 的指向
- 9.5 對象的使用
- 第10章 標準庫對象(內置對象)
- 10.1 Math對象
- 10.1.1 使用
- 10.1.2 案例
- 10.2 Date對象（構造函數）
- 10.2.1 使用
- 10.2.2 案例
- 10.3 Array對象
- 10.3.1 數組對象的屬性及方法
- 10.3.2 方法和屬性
- 10.4 String對象
- 10.5 包裝對象
- 課外知識：
- JS代碼規范&編程風格
- 調試工具
1.1 JavaScript編程語言
JavaScript一種輕量級的腳本語言，也是一種嵌入式（embedded）語言，是一種 對象模型 語言，簡稱 JS ；
JavaScript 的核心語法部分(語言本身)很精簡，只包括兩個部分：
1：基本的語法構造（比如操作符、控制結構、語句）；
2：標準庫（就是一系列具有各種功能的對象比如Array、Date、Math等）。
想要實現其他復雜的操作和效果，都要依靠宿主環境提供API，目前，已經嵌入 JavaScript 的宿主環境有多種，
最常見的環境就是 瀏覽器，另外還有服務器環境(操作系統)
JavaScript現在的意義(應用場景)
JavaScript 發展到現在幾乎無所不能。
1.2 ECMAScript 與 JavaScript
ECMA 歐洲計算機制造聯合會；
ECMAScript 是一套標準，定義了一種語言的標準，規定了基本語法、數據類型、關鍵字、具體API的設計規范等，解析引擎設計的參考標準，但與具體實現無關；
1.3 javaScript和HTML、CSS
1.4 JS學習概況
我們在學習JS時，需要學習的內容分為兩部分，語言結構及宿主環境提供的API；
語言結構部分主要時語言規則及內置對象(標準庫對象)；
而宿主環境的API，根據宿主環境不同而不同，以瀏覽器為例，最常見的三個類型：
瀏覽器控制類、DOM操作類、網絡控制類；
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-qmYlMxsr-1651933582283)(./img/1.1.5.png)]
總結：
JavaScript編程語言簡稱 JS，是一種嵌入式的腳本語言，應用范圍及其廣泛，由布蘭登-艾奇開發，在20+年的發展中歷經滄桑，學習 JS 分為語言規則及宿主環境兩部分；
第2章 入門
2.1 如何寫一段JS代碼并運行
- 寫在行內
- 寫在script標簽中 *
- 寫在外部js文件中，在頁面引入
注意點： 引用外部js文件的 script 標簽中不可以再寫JavaScript代碼，即使寫了也不會執行，沒有作用
溫馨提示：
下面開始進入 JS 基礎語法的學習，非?？菰?#xff0c;別睡著……
音樂很優美很動聽，但學五線譜真的是乏味無聊痛苦不堪；
2.3 變量
2.3.1 什么是變量
-
什么是變量
變量是計算機內存中存儲數據的標識符，根據變量名稱可以獲取到內存中存儲的數據
-
為什么要使用變量
使用變量可以方便的獲取或者修改內存中的數據
變量就是存儲數據的容器；
2.3.2 如何使用變量
- var聲明變量
- 變量的賦值
- 同時聲明多個變量
- 同時聲明多個變量并賦值
2.3.3 變量的命名規則和規范
-
規則 - 必須遵守的，不遵守會報錯
- 由字母、數字、下劃線、$符號組成，且不能以數字開頭
- 不能是關鍵字和保留字，例如：for、while。
- 區分大小寫
-
規范 - 建議遵守的，不遵守不會報錯
- 變量名必須有意義
- 遵守駝峰命名法。(首字母小寫，后面單詞的首字母需要大寫。例如：userName、userPassword)
-
下面哪些變量名不合法
a 1 age18 18age name $ $name _sex &sex theworld theWorld
2.3.4 案例
2.4 數據類型
2.4.1 簡單數據類型
Number、String、Boolean、Undefined、Null
獲取變量的類型
typeof
var age = 18; console.log(typeof age); // 'number'檢測數據的數據類型
instanceof 用于檢測某個數據是否為某種數據類型，返回一個布爾值
var arr = [1,2,3]; console.log(arr instanceof Array)//trueNumber類型
-
數值字面量：數值的固定值的表示法
110 1024 60.5
-
浮點數
-
- 浮點數的精度問題
-
數值范圍
最小值：Number.MIN_VALUE，// 這個值為： 5e-324 5乘以10的-324次方 最大值：Number.MAX_VALUE，// 這個值為： 1.7976931348623157e+308 無窮大：Infinity 無窮小：-Infinity
String類型
‘abc’ “abc”
-
字符串字面量
‘程序猿’，‘程序媛’, “黑馬程序猿”
思考：如何打印以下字符串。
我是一個 “正直” 的人
我很喜歡 "黑馬 ‘程序猿’ " -
轉義符
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-d6Fie2OC-1651933582285)(./img/1498289626813.png)]
var s = '我很喜歡 \"黑馬 \'程序猿\' \"'; console.log(s);- 字符串長度
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和null是一個面試中很容易被問到的問題，后面的高級部分詳解；
2.4.2 復雜數據類型
? Object
題外話
如何使用谷歌瀏覽器，快速的查看數據類型？
字符串的顏色是黑色的，數值類型是藍色的，布爾類型也是藍色的，undefined和null是灰色的
console.log('ss',2,null,undefined,true);2.5 注釋
被注釋的內容是不執行的，不管什么內容都不會運行；
單行注釋
用來描述下面一個或多行代碼的作用
// 這是一個變量 var name = 'hm';多行注釋
用來注釋多條代碼
/* var age = 18; var name = 'zs'; console.log(name, age); */總結：
JS代碼的書寫，變量的聲明方式，數據類型，注釋；
第3章 數據類型轉換
3.1 轉換成字符串類型
-
toString()
var num = 5; console.log(num.toString()); -
String()
var s = null; console.log(s.toString()); console.log(String(s));// String()函數存在的意義：有些值沒有toString()， // 這個時候可以使用String()。比如：undefined和null -
拼接字符串方式
num + “”，當 + 兩邊一個操作符是字符串類型，一個操作符是其它類型的時候，會先把其它類型轉換成字符串再進行字符串拼接，返回字符串
3.2 轉換成數值類型
-
Number()
var a = Number('1'); var b = Number(1); var c = Number('c'); var d = Number(null); var e = Number(undefined);console.log(a,b,c,d,e); // 1 1 NaN 0 NaN// Number()可以把任意值轉換成數值，如果要轉換的字符串中有一個不是數值的字符，返回NaN（not a number） -
parseInt()
var a = parseInt('1.2df'); var b = parseInt(1); var c = parseInt('c12'); var d = parseInt(null); var e = parseInt(undefined);console.log(a,b,c,d,e); //1 1 NaN NaN NaN// 如果第一個字符是數字會解析,直到遇到非數字結束 // 如果第一個字符不是數字或者符號就返回NaN（not a number） -
parseFloat()
var a = parseFloat('1.2df'); var b = parseFloat('1.3.4'); var c = parseFloat('c12'); var d = parseFloat(null); var e = parseFloat(undefined);console.log(a,b,c,d,e); //1.2 1.3 NaN NaN NaN// parseFloat() 把字符串轉換成浮點數 // parseFloat()和parseInt非常相似， // 不同之處在與parseFloat會解析第一個 . 遇到第二個.或者非數字結束 // 如果解析的內容里只有整數，解析成整數 -
+，-，-0 等運算
var str = '500'; console.log(+str); // 取正 console.log(-str); // 取負 console.log(str - 0);
注：
在實際開發中，將一種類型轉變為字符串類型通常使用‘+’（加一個空串），而將一種類型轉變為數值類型通常使用‘-’（減一個0）。
3.3 轉換成布爾類型
- Boolean()
總結：
字符串、數值及不類型的數據類型轉換
第4章 操作符
表達式：值和操作符，運算會有一個結果；
同時，表達式中的每個數值及部分表達式，又稱為 子表達式
4.1 算術運算符
+ - * / %4.2 一元運算符 *
一元運算符：只有一個操作數的運算符，一元運算會直接修改原始變量的數據；
5 + 6 兩個操作數的運算符 二元運算符
++ 自身加 (自增)
– 自身減 (自減)
-
前置++（先加1，后運算）
var num1 = 5; ++ num1; var num2 = 6; console.log(num1 + ++ num2); //13 -
后置++（先運算，后加1）
var num1 = 5; num1 ++; var num2 = 6 console.log(num1 + num2 ++); //12 -
猜猜看
var a = 1; var b = ++a + ++a; console.log(b); //5var a = 1; var b = a++ + ++a; console.log(b);//4var a = 1; var b = a++（1） + a++（2）; // console.log(b); // 3var a = 1; var b = ++a + a++; console.log(b);//4總結
前置++：先加1，后參與運算
后置++：先參與運算，后加1后置++ 運算的兩個條件，滿其一就會執行
1：整個表達式結束；2表達式沒結束但是又被使用了；
上面兩個理解后，下面兩個自通
前置-- ：先減1，后參與運算
后置-- ：先參與運算，后減1
4.3 邏輯運算符(布爾運算符) *
&& 與 兩個操作數同時為true，結果為true，否則都是false || 或 兩個操作數有一個為true，結果為true，否則為false ! 非 取反 var a = 1; var b = 2; var c = 0;console.log(a || b); //1 console.log(b || a); //2 console.log(c && a); //0 console.log(a || c && b); //1// JS邏輯運算中的邏輯或和邏輯與的運算結果： // 決定整個表達式的子表達式的值 //運算優先級：先運算&& 邏輯與，再運算|| 邏輯或4.4 關系運算符(比較運算符)
< > >= <= == != === !== ==與===的區別：==只進行值得比較，===類型和值同時相等，則相等//由于js是一種弱類型語言，變量的數據類型存在自動轉換var result = '55' == 55; // true var result = '55' === 55; // false 值相等，類型不相等 var result = 55 === 55; // true4.5 賦值運算符
注意與數學符號的差別；
= += -= *= /= %=
例如： var num = 0; num += 5; //相當于 num = num + 5;4.6 運算符的優先級 *
優先級從高到底 1. () 優先級最高 2. 一元運算符 ++ -- ! 3. 算數運算符 先* / % 后 + - 4. 關系運算符 > >= < <= 5. 相等運算符 == != === !== 6. 邏輯運算符 先&& 后|| 7. 賦值運算符 // 練習1： var s = 4 >= 6 || '人' != '阿凡達' && !(12 * 2 == 144) && true console.log(s); //true// 練習2： var num = 10; var f = 5 == num / 2 && (2 + 2 * num) //f=22數字類型的 console.log(f.toString() === 22) //false總結：
操作符的使用，基本數學運算，一元運算符自增自減及前置后置的區別，邏輯運算符及取值，關系比較運算符，賦值運算符，運算符優先級；
第5章 流程控制
程序的三種基本結構
順序結構： 從上到下執行的代碼就是順序結構
程序默認就是由上到下順序執行的；
分支結構：根據不同的情況及判斷，執行對應代碼；
循環結構：重復執行一段代碼；
5.1 分支結構
if語句
語法結構
if (/* 條件表達式 */) {// 執行語句 }if (/* 條件表達式 */){// 成立執行語句 } else {// 否則執行語句 }if (/* 條件1 */){// 成立執行語句 } else if (/* 條件2 */){// 成立執行語句 } else if (/* 條件3 */){// 成立執行語句 } else {// 最后默認執行語句 }案例
//獲取兩個數字中的最大值 var num1=100; var num2=20; if(num1>num2){console.log(num1); }else{console.log(num2); } // 判斷一個數是偶數還是奇數 var n = 10; if(n%2==0){console.log('偶數'); }else{console.log('奇數'); } /** 例子:* 獲取考試的分數,如果成績是在90(含)分以上的,則顯示級別:A* 如果成績是大于等于80的則:B* 如果成績是大于等于70的則:C* 如果成績是大于等于60的則:D* 如果成績是小于60的則:E** */var score = 91;if (score >= 90) {console.log("A");} else if (score >= 80) {console.log("B");} else if (score >= 70) {console.log("C");} else if (score >= 60) {console.log("D");} else {console.log("E");}作業：判斷一個年份是閏年還是平年
閏年：能被4整除，但不能被100整除的年份 或者 能被400整除的年份
var n = 2016; if(n%4==0){if(n%100 !=0){console.log('閏年');}else if(n%400 ==0){console.log('閏年');}else{console.log('平年');} }else{console.log('平年'); }三元運算符
表達式1 ? 表達式2 : 表達式3 是對if……else語句的一種簡化寫法 運行結果：若表達式1成立，執行表達式2；若表達式1不成立，執行表達式3。案例：
// 是否年滿18歲 var age = 18; var s = age>=18?'Yes':'no'; console.log(s); // 從兩個數中找最大值 var a1 = 110; var a2 = 19; var s = a1>a2?a1:a2; console.log(s);switch語句
語法格式:
switch (expression) {case 常量1:語句;break;case 常量2:語句;break;…case 常量n:語句;break;default:語句;break; }/* * 執行過程: * 獲取表達式的值,和值1比較,相同則執行代碼1,遇到break跳出整個語句,結束 * 如果和值1不匹配,則和值2比較,相同則執行代碼2,遇到break跳出整個語句,結束 * 如果和值2不匹配,則和值3比較,相同則執行代碼3,遇到break跳出整個語句,結束 * 如果和值3不匹配,則和值4比較,相同則執行代碼4,遇到break跳出整個語句,結束 * 如果和之前的所有的值都不一樣,則直接執行代碼5,結束 */ break可以省略，如果省略，代碼會繼續執行下一個case switch 語句在比較值時使用的是全等操作符, 因此不會發生類型轉換（例如，字符串'10' 不等于數值 10） /* * * 判斷這個人的成績的級別: * 如果是A,則提示,分數在90分以上 * 如果是B,則提示,分數在80分以上 * 如果是C,則提示,分數在70分以上 * 如果是D,則提示,分數在60分以上 * 否則提示,不及格 * */var jiBie="B"; switch (jiBie){case "A" : console.log("分數在90分以上的");break;case "B" : console.log("分數在80分以上的");break;case "C" : console.log("分數在70分以上的");break;case "D" : console.log("分數在60分以上的");break;default :console.log("不及格"); }注：
switch用于值比較確定的情況，執行效率高；而if用于范圍判斷。
5.2 循環結構
在JS語言中，循環語句有三種，while、do…while、for循環。
5.2.1 while語句
基本語法：
// 當循環條件為true時，執行循環體， // 當循環條件為false時，結束循環。 while (循環條件) {//循環體 }案例1：計算1-100之間所有數的和
// 初始化變量 var i = 1; var sum = 0; // 判斷條件 while (i <= 100) {// 循環體sum += i;// 自增i++; } console.log(sum);案例2：打印100以內 7的倍數
var i = 1; while(i<100){if(i%7==0){console.log(i);}i++; }案例3：打印100以內所有偶數
var i = 1; while(i<=100){if(i%2==0){console.log(i);}i++; }案例4：打印100以內所有偶數的和
var i = 1; var s = 0; while(i<=100){if(i%2==0){s = s+i;}i++; } console.log(s);作業：
打印100以內的奇數
打印100以內的奇數的和
5.2.2 do…while語句
do…while循環和while循環非常像，二者經?？梢韵嗷ヌ娲?#xff0c;
但是do…while的特點是不管條件成不成立，都會執行一次。
do {// 循環體; } while (循環條件);案例：計算1+2+3+4+……+99+100 的結果
// 初始化變量 var i = 0; var sum = 1; do {sum += i;//循環體i++;//自增 } while (i <= 100);//循環條件5.2.3 for語句
while和do…while一般用來解決無法確認次數的循環。for循環一般在循環次數確定的時候比較方便
for循環語法：
// for循環的表達式之間用的是;號分隔的，千萬不要寫成, for (初始化表達式1; 判斷表達式2; 自增表達式3) {// 循環體4 }執行順序：1243 ---- 243 -----243(直到循環條件變成false)
5.2.4 continue和break
break:立即跳出整個循環，即循環結束，開始執行循環后面的內容（直接跳到大括號）
continue:立即跳出當前循環，繼續下一次循環（跳到i++的地方）
案例1：求1-100之間不能被7整除的整數的和（用continue）
var s = 0; for(var i=0;i<100;i++){if(i%7==0){continue;}s+=i; } console.log(s);案例2：求200-300之間所有的奇數的和（用continue）
var s = 0; for(var i=200;i<=300;i++){if(i%2==0){continue;}else{s+=i;} } console.log(s);案例3：求200-300之間第一個能被7整數的數（break）
for(var i=200;i<=300;i++){if(i%7==0){console.log(i);break;} }總結：
代碼的執行流程分為順序、分支和循環三種結構，順序結構是默認的，判斷結構主要有if-else和switch-case兩種，循環結構有while、do-while、for三種，其中continue和break是跳出循環；
第6章 JS中特殊的對象-數組
之前學習的數據類型，只能存儲一個值(比如：Number/String)。我們想在一個變量中存儲多個值，應該如何存儲？
所謂數組，就是將多個元素（通常是同一類型）按一定順序排列放到一個集合中，那么這個集合我們就稱之為數組。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-qwxYYTnt-1651933582287)(./img/Snipaste_2019-02-20_16-56-34.png)]
6.1 數組的創建
// 字面量方式創建數組 var arr1 = []; //空數組 // 創建一個包含3個數值的數組，多個數組項以逗號隔開 var arr2 = [1, 3, 4]; // 創建一個包含2個字符串的數組 var arr3 = ['a', 'c']; console.log(arr1); console.log(arr2);// 構造函數方式創建數組 var a1 = new Array(); //空數組 var a2 = new Array('1',2,'h'); //包含三個元素的數組 console.log(a1); console.log(a2);// 可以通過數組的length屬性獲取數組的長度 console.log(arr3.length); // 可以設置length屬性改變數組中元素的個數 arr3.length = 0;console.log(arr3[0]);//undefined數組的元素可以是任意類型的數據，因此，有時數組中的某個元素的值又是一個數組，而這樣的數組被稱為多維數組，如果數組中只有其他類型的數據，而沒有另外的數組值，這樣的數組被稱為一維數組；
通常，數組被嵌套N層，則稱為N維數組，最常見的就是二維數組、三維數組、四維數組，超過一維的數組都會被泛稱為多維數組；
數組的維度值越大，復雜度就越高，開發中盡量避免產生高維度值的數組；
var arr1 = [a,b,c]; // 一維數組 var arr2 = [a,b,c,[d,e]]; // 二維數組 var arr3 = [a,b,c[d,e,[f,g]]]; // 三維數組 var arr4 = [a,b,c[d,e,[f,g,[h,t,y]]]]; // 四維數組6.2 獲取數組元素
// 格式：數組名[下標] 下標又稱索引 // 下標從0開始 // 功能：獲取數組對應下標的那個值，如果下標不存在，則返回undefined。 var arr = ['red',, 'green']; arr[0]; // red arr[1]; // undefined 下標位置沒有數據 arr[2]; // green arr[5]; // 這個數組的最大下標為2,因此返回undefined // 獲取多維數組的數據 var arr = ['路飛','娜美',['巴基','女帝',['佐助','喬巴']]]; console.log(arr[2][2][0]); //佐助6.3 遍歷數組
遍歷：遍及所有，對數組的每一個元素都訪問一次就叫遍歷。
for循環數組遍歷的基本語法：
for(var i = 0; i < arr.length; i++) {// 數組遍歷的固定結構 }for循環示例：
var arr1 = [1, 3, 4]; for(var i = 0;i<arr1.length;i++){console.log(arr1[i]); }while循環示例：
var arr1 = [1, 3, 4]; var i = 0; while(i<arr1.length){console.log(arr1[i]);i++; }6.4 為數組修改添加元素
// 格式：數組名[下標/索引] = 值; // 如果下標有對應的值，會把原來的值覆蓋，如果下標不存在，會給數組新增一個元素。 var arr = ["red", "green", "blue"]; // 把red替換成了yellow arr[0] = "yellow"; // 給數組新增加了一個pink的值 arr[3] = "pink";6.5 數組操作案例
案例1：求數組中的所有數的和
//求和 var arr = [10, 20, 30, 40, 50]; //定義變量存儲和 var sum = 0; for (var i = 0; i < arr.length; i++) {sum += arr[i]; } console.log("和為:" + sum);案例2：獲取數組中的最大值
//最大值 var arr = [10, 20, 30, 40, 50, 60]; //假設這個變量中的值是最大的 var maxNum = arr[0]; //遍歷數組 for (var i = 0; i < arr.length; i++) {//判斷if (maxNum < arr[i]) {maxNum = arr[i];} } console.log("最大值是:" + maxNum);案例3： 遍歷出數組中所有的偶數
// 遍歷出數組中所有的偶數 var arr = [1,2,3,4,5,6,7]; for(var i=0;i<arr.length;i++){//判斷if(arr[i]%2==0){console.log(arr[i]);} }案例4：將數組轉為字符串并以 | 分割
//把數組中的每個名字后面拼接一個|然后以字符串的方式輸出 var names = ["卡卡西", "佐助", "鳳姐", "鳴人", "黑崎一護"]; var str = "";//空的字符串,用來存儲最后的拼接的結果的字符串 //不停的遍歷數組的數據,并且拼接字符串 for (var i = 0; i < names.length - 1; i++) {str += names[i] + "|";//拼接字符串的方式 } str += names[names.length - 1]; console.log(str);總結：
數組就是多個數據的集合，有一維數組和多維數組之分，可以使用字面量、構造函數等方式創建數組，使用下標來獲取數組元素數據，使用for或者while循環來遍歷數組元素；
第7章 函數
把一段相對獨立的具有特定功能的代碼塊封裝起來，形成一個獨立實體，就是函數，起個名字（函數名），在后續開發中可以反復調用
函數的作用就是封裝一段代碼，將來可以重復使用
7.1 函數的聲明及調用
7.1.1 聲明
- 關鍵字聲明
- 表達式聲明
-
特點：
函數聲明的時候，函數體并不會執行，只要當函數被調用的時候才會執行。
一個函數一般都特定的用來干 一件 事情
7.1.2 調用
- 調用函數的語法：
-
特點：
函數體只有在調用的時候才會執行，調用需要()進行調用。
可以調用多次(重復使用)
7.2 參數
- 為什么要有參數
- 語法：
- *形參和實參 **
JS 函數在調用時，允許傳多個實參，就是實參個數可以比形參個數多；
如果實參個數多于形參個數，則取到形參個數；如果實參個數少于形參個數，多出來的形參默認為undefined
- arguments
常用于不確定參數傳遞個數情況。
arguments是當前函數的一個內置對象，arguments對象中存儲了傳遞的所有實參。
arguments展示形式是一個偽數組（具有length屬性，索引存儲數據，但不具備pop、push方法）
7.3 函數的返回值
當函數執行完的時候，并不是所有時候都要把結果打印。我們期望函數給我一些反饋（比如計算的結果返回進行后續的運算），這個時候可以讓函數返回一些東西。也就是返回值。函數通過return返回一個值
返回值語法：
//聲明一個帶返回值的函數 function 函數名(形參1, 形參2, 形參...){//函數體return 返回值; }//可以通過變量來接收這個返回值 var 變量 = 函數名(實參1, 實參2, 實參3);*返回值詳解： **
如果函數沒有顯示的使用 return語句 ，那么函數有默認的返回值：undefined
如果函數使用 return語句，那么跟再return后面的值，就成了函數的返回值
如果函數使用 return語句，但是return后面沒有任何值，那么函數的返回值也是：undefined
函數使用return語句后，這個函數會在執行完 return 語句之后停止并立即退出，也就是說return后面的所有其他代碼都不會再執行。
? return一次只能返回一個值，若返回值為多個，則以最后一個為準，或使用數組返回。
7.4 函數相關的其它事情
7.4.1 匿名函數與自調用函數
匿名函數：沒有名字的函數
匿名函數如何使用：
將匿名函數賦值給一個變量，這樣就可以通過變量進行調用
var fun1 = function(){console.log(1); } fun1();//匿名函數調用匿名函數如果沒有任何變量來表示它，那么就不能直接調用來執行，因此可以通過匿名函數的自調用的方式來執行
(function () {alert(123); })();//立即執行函數關于自執行函數（匿名函數自調用）的作用：防止全局變量污染，封裝一個局部作用。
7.4.2 函數本身也是值 *
function fn() {} console.log(typeof fn);- 函數作為參數
因為函數也是一種值類型，可以把函數作為另一個函數的參數，在另一個函數中調用
function f1(f){f(); } function f2(){console.log(2); } f1(f2); //2- 函數做為返回值
因為函數是一種類型，所以可以把函數可以作為返回值從函數內部返回，這種用法在后面很常見。
function fn(b) {var a = 10;return function () {alert(a+b);} } var f = fn(5); f(); //15總結：
函數是一段代碼的封裝，可重復多次運行，函數的聲明有表達式聲明和關鍵字聲明，使用 ·函數名()· 的方式進行調用，調用時傳入的參數為實參，聲明時的參數時形參，函數使用return返回值，函數可以是沒有名字的匿名函數，函數本身也可以當做值使用；
第8章 作用域與JS代碼的運行 *
作用域：變量可以起作用的范圍和區域
8.1 全局變量和局部變量 *
-
全局變量與全局作用域
在任何地方都可以訪問到的變量就是全局變量，全局變量所在的區域就是全局作用域
-
局部變量
只在固定的代碼片段內可訪問到的變量，最常見的例如函數內部的變量，就是局部變量。局部變量所在的區域就是局部作用域(函數作用域)
8.2 變量提升
console.log(a); // undefined var a = 2; console.log(a); // a is not defined-
變量提升
定義變量的時候，變量的聲明會被提升到作用域的最上面，變量的賦值不會提升。
-
函數提升
JavaScript解析器首先會把當前作用域的函數聲明提前到整個作用域的最前面
注：不管是普通變量還是函數，盡量不要出現重名；
8.3 JS代碼的運行 *
console.log(s); //undefined var s = 2;JavaScript代碼的執行是由瀏覽器中的JavaScript解析器來執行的。
JavaScript解析器執行JavaScript代碼的時候，分為兩個過程：預解析(編譯)過程和代碼執行過程
預解析過程：
代碼執行過程
變量的賦值，函數的調用，循環判斷等，根據代碼由上往下順序執行；
var a = 25; function abc (){alert(a);//undefinedvar a = 10; } abc();// 如果變量和函數同名的話，函數優先做提升 console.log(a); function a() {console.log('aaaaa'); } var a = 1; console.log(a); // 1、---------------- var num = 10; fun(); function fun() {console.log(num); //undefinedvar num = 20; }// 2、---------------- var a = 18; f1(); function f1() {var b = 9;console.log(a); //undefinedconsole.log(b); // 9var a = '123'; }8.4 詞法作用域
變量的作用域是在定義時決定而不是執行時決定的，也就是說詞法作用域取決于編譯階段，通過靜態分析就能確定，因此詞法作用域也叫做靜態作用域。
在 js 中詞法作用域規則:
- 函數允許訪問函數外的數據.
- 整個代碼結構中只有函數可以限定作用域.
- 作用域規則首先使用提升規則分析
- 如果當前作用規則中有名字了, 就不考慮外面的名字
也就是說：
函數內部可以訪問函數外部的變量，但是函數外部不可以訪問函數內部的變量；
函數內部如果有變量，則優先使用內部的變量，如果函數內部沒有，才會使用函數外部的變量；
8.5 作用域鏈 *
只有函數可以制造作用域結構， 那么只要是代碼，就至少有一個作用域, 即全局作用域。凡是代碼中有函數，那么這個函數就構成另一個作用域。如果函數中還有函數，那么在這個作用域中就又可以誕生一個作用域。將這樣的所有的作用域列出來，可以有一個結構: 函數內指向函數外的鏈式結構。就稱作作用域鏈。 var a = 1; function fn1(){function fn2(){function fn3(){console.log(a);}fn3();}fn2(); } fn1();[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Gcb6GTum-1651933582290)(./img/Snipaste_2019-02-20_22-42-07.png)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-bFUBfGCJ-1651933582292)(./img/Snipaste_2019-02-20_22-43-41.png)]
var a = 1; function fn1(){var a = 2;function fn2(){var a = 3;function fn3(){console.log(a);}fn3();}fn2(); } fn1();總結：
函數內部是JS代碼的局部作用域，函數外部是全局作用域，JS 代碼的運行分為與解析階段和執行階段，變量的聲明實在與解析階段的，所以變量存在提升，而變量只在自己的作用域中起作用，但是自己作用域是可以訪問上級作用域的；
第9章 對象(Object)
9.1 什么是對象
萬物皆對象
現實生活中：萬物皆對象，對象是一個具體的事物，一個具體的事物就會有行為和特征。 舉例： 一部車，一個手機 車是一類事物，門口停的那輛車才是對象特征：紅色、四個輪子行為：駕駛、剎車9.2 JavaScript中的對象
JavaScript中的對象其實就是生活中對象的一個抽象 JavaScript的對象是無序屬性的集合。 其屬性可以包含基本值、對象、數組或函數。 對象就是一組沒有順序的值。 我們可以把JavaScript中的對象想象成鍵值對，其中值可以是數據和函數。 對象的行為和特征特征---屬性行為---方法事物的特征在對象中用屬性來表示。
事物的行為在對象中用方法來表示。
9.3 如何得到一個對象
-
字面量方式創建對象
var obj1 = {};//得到一個空對象 var obj2 = {name:'西嶺',age:18};//得到擁有兩個屬性的對象 //得到擁有兩個屬性和一個方法的對象 var obj3 = {name:'西嶺',age:18,fei:function(){console.log('你上天啊！');} } -
new Object() 創建對象 （內置構造函數）
var person = new Object();person.name = 'lisi'; person.age = 35; person.sayHi = function(){console.log('Hello,everyBody'); } -
自定義構造函數創建對象
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');
9.4 this 的指向
JavaScript中的this指向問題，比較復雜，有時候會讓人難以捉摸，隨著學習的深入，我們會不斷接觸this，
在學習過程中，我們可以不斷總結，最終搞清楚this在何種情況下指向何處……
目前，我們只需要記住以下兩點就可以了：
1: 函數如果在某個對象下，this就指向這個對象
2: 函數如果被直接調用，this指向window對象
var o1 = {name: '山治',f: function () {console.log(this.name);} } o1.f(); // 山治 function f(){console.log(this); } f(); console.log(window);this永遠指向一個對象。且運行再那個對象下，就指向那個對象。
9.5 對象的使用
- 方法及屬性的使用
- 遍歷對象的屬性
通過for…in語法可以遍歷一個對象
var obj1 = {name:'路飛',age : 17,sex : '男', }for(var k in obj1){console.log(k);//獲取對象下的屬性名console.log(obj1[k]);//獲取對象下的屬性值 }注意：使用for …in語法，同樣可以遍歷數組，遍歷數組時k指的是下標值。
- 刪除對象的屬性
總結：
創建對象有三種方式，字面量、new關鍵字及自定義構造函數；對象中有屬性及方法，this只想當前對象，使用 . (點) 語法調用屬性及方法；
第10章 標準庫對象(內置對象)
JavaScript 提供了很多個內置對象：Math/Array/Number/String/Boolean…
對象只是帶有屬性和方法的特殊數據類型。
我們在學習時其實就是要記住對象的每個屬性和方法怎么使用，代表什么含義；
技術問題，遇到分歧，去哪里查找資料：
火狐開發者社區–MDN
微軟開發者社區–MSDN
10.1 Math對象
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math
10.1.1 使用
Math 是一個內置對象， 它具有數學常數和函數的屬性和方法。不是一個函數對象。
與其它全局對象不同的是, Math 不是一個構造器. Math 的所有屬性和方法都是靜態的.
跟數學相關的運算直接使用Math中的成員即可
Math對象的屬性（常量）
| Math.E 常量 | 數學常數 e。這是歐拉數，自然對數的底。 |
| Math.LN2 常量 | 2 的自然對數。 |
| Math.LN10 常量 | 10 的自然對數。 |
| Math.LOG2E 常量 | 以 2 為底 e 的對數。 |
| Math.LOG10E 常量 | 以 10 為底 e 的對數。 |
| Math.PI 常量（常用） | Pi。這是圓的周長與直徑的比值。 |
| Math.SQRT1_2 常量 | 0.5 的平方根，或相當于 1 除以 2 的平方根。 |
| Math.SQRT2 常量 | 2 的平方根。 |
Math對象的方法（函數）
| Math.abs 函數（常用） | 返回數字的絕對值。 |
| Math.acos 函數 | 返回數字的反余弦值。 |
| Math.acosh 函數 | 返回數字的雙曲反余弦值（或反雙曲余弦值）。 |
| Math.asin 函數 | 返回數字的反正弦值。 |
| Math.asinh 函數 | 返回數字的反雙曲正弦。 |
| Math.atan 函數 | 返回數字的反正切值。 |
| Math.atan2 函數 | 將與 X 軸的角度（以弧度為單位）返回到由 y 和 x 坐標表示的點。 |
| Math.atanh 函數 | 返回數字的反雙曲正切。 |
| Math.ceil 函數（常用） | 返回大于或等于提供的數值表達式的最小整數。 |
| Math.cos 函數 | 返回數字的余弦值。 |
| Math.cosh 函數 | 返回數字的雙曲余弦。 |
| Math.exp 函數 | 返回 e（自然對數的底）的乘冪數。 |
| Math.expm1 函數 | 返回 e（自然對數的底）的乘冪數減去 1 的結果。 |
| Math.floor 函數（常用） | 返回小于或等于提供的數值表達式的最大整數。 |
| Math.hypot 函數 | 返回參數平方和的平方根。 |
| Math.imul 函數 | 返回被視為 32 位帶符號整數的兩個數字的積。 |
| Math.log 函數 | 返回數字的自然對數。 |
| Math.log1p 函數 | 返回 1 加上一個數字的的自然對數。 |
| Math.log10 函數 | 返回數字以 10 為底的對數。 |
| Math.log2 函數 | 返回數字以 2 為底的對數。 |
| Math.max 函數（常用） | 返回提供的兩個數值表達式中的較大值。 |
| Math.min 函數（常用） | 返回提供的兩個數字中的較小值。 |
| Math.pow 函數 | 返回基表達式的指定乘冪數的值。 |
| Math.random 函數（常用） | 返回介于 0 和 1 之間的偽隨機數。 |
| Math.round 函數（常用） | 返回舍入到最近整數的指定數值表達式。 |
| Math.sign 函數 | 返回數字符號，它指示數字為正數、負數還是 0。 |
| Math.sin 函數 | 返回數字的正弦值。 |
| Math.sinh 函數 | 返回數字的反雙曲正弦。 |
| Math.sqrt 函數 | 返回數字的平方根。 |
| Math.tan 函數 | 返回數字的正切值。 |
| Math.tanh 函數 | 返回數字的雙曲正切。 |
| Math.trunc 函數 | 返回數字的整數部分，刪除任何小數數字。 |
注意：
Math.abs()：在對字符串數字進行操作時，會有隱式轉換。
Math.round()：在取’.5’時特殊，往大了取，e.g -1.5 取 -1 ，1.5 取 2 。
10.1.2 案例
-
求10-20之間的隨機數
Math.floor(Math.random() * (max - min)) + min; //獲得兩個數之間的隨機整數，并包含這兩個數 //e.g 若取1-10 Math.floor(Math.random() * (10 - 1)) + 1 -
讓一個P標簽隨機改變背景顏色
function rndColor(){var r = parseInt(Math.random()*256);var g = parseInt(Math.random()*256);var b = parseInt(Math.random()*256);var a = parseInt(Math.random())return "rgb("+r+","+g+","+b+","+a+")" }
10.2 Date對象（構造函數）
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date
10.2.1 使用
創建 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開始- 獲取日期的毫秒形式
- 日期格式化方法
- 獲取日期指定部分
10.2.2 案例
- 案例1：寫一個函數，格式化日期對象，返回yyyy-MM-dd HH:mm:ss的形式
- 計算時間差，返回相差的天/時/分/秒
Date對象 的方法。
| getDate 方法 | 使用當地時間返回一個月某天的值。 |
| getDay 方法 | 使用當地時間返回一個星期某天的值。 |
| getFullYear 方法 | 使用當地時間返回年份值。 |
| getHours 方法 | 使用當地時間返回小時值。 |
| getMilliseconds 方法 | 使用當地時間返回毫秒值。 |
| getMinutes 方法 | 使用當地時間返回分鐘值。 |
| getMonth 方法 | 使用當地時間返回月份值。 |
| getSeconds 方法 | 使用當地時間返回秒值。 |
| getTime 方法 | 將 Date 對象中的時間值返回為自 1970 年 1 月 1 日午夜起經過的毫秒數。 |
| getTimezoneOffset 方法 | 返回主機的時間與協調通用時間 (UTC) 之間的分鐘差值。 |
| getUTCDate 方法 | 使用 UTC 返回一個月某天的值。 |
| getUTCDay 方法 | 使用 UTC 返回一個星期某天的值。 |
| getUTCFullYear 方法 | 使用 UTC 返回年份值。 |
| getUTCHours 方法 | 使用 UTC 返回小時值。 |
| getUTCMilliseconds 方法 | 使用 UTC 返回毫秒值。 |
| getUTCMinutes 方法 | 使用 UTC 返回分鐘值。 |
| getUTCMonth 方法 | 使用 UTC 返回月份值。 |
| getUTCSeconds 方法 | 使用 UTC 返回秒值。 |
| getVarDate 方法 | 將 Date 對象中的 VT_DATE 值返回。 |
| getYear 方法 | 返回年份值。 |
| hasOwnProperty 方法 | 返回一個布爾值，該值指示一個對象是否具有指定名稱的屬性。 |
| isPrototypeOf 方法 | 返回一個布爾值，該值指示對象是否存在于另一個對象的原型鏈中。 |
| propertyIsEnumerable 方法 | 返回一個布爾值，該值指示指定屬性是否為對象的一部分以及該屬性是否是可枚舉的。 |
| setDate 方法 | 使用當地時間設置一個月中某一日的數值。 |
| setFullYear 方法 | 使用當地時間設置年份值。 |
| setHours 方法 | 使用當地時間設置小時值。 |
| setMilliseconds 方法 | 使用當地時間設置毫秒值。 |
| setMinutes 方法 | 使用當地時間設置分鐘值。 |
| setMonth 方法 | 使用當地時間設置月份值。 |
| setSeconds 方法 | 使用當地時間設置秒值。 |
| setTime 方法 | 設置 Date 對象中的日期和時間值。 |
| setUTCDate 方法 | 使用 UTC 設置一個月中某一日的數值。 |
| setUTCFullYear 方法 | 使用 UTC 設置年份值。 |
| setUTCHours 方法 | 使用 UTC 設置小時值。 |
| setUTCMilliseconds 方法 | 使用 UTC 設置毫秒值。 |
| setUTCMinutes 方法 | 使用 UTC 設置分鐘值。 |
| setUTCMonth 方法 | 使用 UTC 設置月份值。 |
| setUTCSeconds 方法 | 使用 UTC 設置秒值。 |
| setYear 方法 | 使用當地時間設置年份值。 |
| toDateString 方法 | 以字符串值的形式返回一個日期。 |
| toGMTString 方法 | 返回使用格林尼治標準時間 (GMT) 轉換為字符串的日期。 |
| toISOString 方法 | 以字符串值的形式返回采用 ISO 格式的日期。 |
| toJSON 方法 | 用于在 JSON 序列化之前轉換目標類型的數據。 |
| toLocaleDateString 方法 | 將一個日期以字符串值的形式返回，該字符串應適合于宿主環境的當前區域設置。 |
| toLocaleString 方法 | 返回使用當前區域設置轉換為字符串的對象。 |
| toLocaleTimeString 方法 | 以字符串值的形式返回一個時間，此字符串值應與宿主環境的當前區域設置相適應。 |
| toString 方法 | 返回表示對象的字符串。 |
| toTimeString 方法 | 以字符串值形式返回時間。 |
| toUTCString 方法 | 返回使用 UTC 轉換為字符串的日期。 |
| valueOf 方法 | 返回指定對象的原始值。 |
10.3 Array對象
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
10.3.1 數組對象的屬性及方法
length屬性: 返回數組的成員數量。
var arr = ['a', 'b']; console.log(arr.length) // 2數組對象的常用方法舉例
-
push方法用于在數組的末端添加一個或多個元素，并返回添加新元素后的數組長度。注意，該方法會改變原數組。
var a = []; a.push(1) // 1 a.push('a') // 2 a.push(true, {}) // 4 console.log(a); //[1, 'a', true, {}]注：unshift方法用于在數組的最前面添加一個或多個元素，并返回添加新元素后的數組長度。方法會改變原數組。
-
pop方法用于刪除數組的最后一個元素，并返回該元素。注意，該方法會改變原數組
var a = ['a', 'b', 'c']; a.pop() // 'c' console.log(a);// ['a', 'b']注：shift方法用于刪除數組的第一個元素，并返回該元素。注意，該方法會改變原數組
-
slice方法用于提取原數組的一部分（淺拷貝），返回一個新數組，原數組不變。
它的第一個參數為起始位置(從0開始)，第二個參數為終止位置(但該位置的元素本身不包括在內)。 如果省略第二個參數，則一直返回到原數組的最后一個成員。
var a = ['a','b','c','d','e']; console.log(a.slice(0)) // ["a", "b", "c", "d", "e"] console.log(a.slice(1)) // ["b", "c", "d", "e"] console.log(a.slice(1,3)); // ["b", "c"] -
返回數組的字符串表示形式。
var arr = [1, 2, 3, 4]; console.log(arr.toString()); //1,2,3,4 -
isArray()方法用于判斷某個數據是否為數組，H5新增方法。
10.3.2 方法和屬性
Array 對象的屬性。
| constructor 屬性 | 指定創建數組的函數。 |
| length 屬性（數組） | 返回一個整數值，此整數比數組中所定義的最高位元素大 1，是實際元素個數。 |
| prototype 屬性 | 返回對數組的原型。 |
Array 對象的方法。
| concat 方法（數組） | 返回由兩個數組組合而成的新數組。 |
| entries 方法 | 返回包含數組的鍵/值對的迭代器。 |
| every 方法（常用） | 檢查定義的回調函數是否為數組中的所有元素返回 true。 |
| fill 方法 | 使用指定值填充數組。 |
| filter 方法（常用） | 對數組的每個元素調用定義的回調函數，并返回回調函數為其返回 true 的值的數組。 |
| findIndex 方法（常用） | 返回滿足回調函數中指定的測試條件的第一個數組元素的索引值。 |
| forEach 方法（常用） | 為數組中的每個元素調用定義的回調函數。 |
| hasOwnProperty 方法 | 返回一個布爾值，該值指示某個對象是否具有指定名稱的屬性。 |
| indexOf 方法（數組）（常用） | 返回某個值在數組中的第一個匹配項的索引。 |
| isPrototypeOf 方法 | 返回一個布爾值，該值指示某個對象是否存在于另一個對象的原型鏈中。 |
| join 方法（常用） | 返回由一個數組的所有元素串聯而成的 String 對象。 |
| keys 方法 | 返回包含數組的索引值的迭代器。 |
| lastIndexOf 方法（數組） | 返回指定值在數組中的最后一個匹配項的索引。 |
| map 方法（常用） | 對數組的每個元素調用定義的回調函數并返回包含結果的數組。 |
| pop 方法（常用） | 從數組中移除最后一個元素并將該元素返回。 |
| propertyIsEnumerable 方法 | 返回一個布爾值，該值指示指定屬性是否為對象的一部分且是否可枚舉。 |
| push 方法（常用） | 將新元素追加到一個數組中，并返回數組的新長度。 |
| reduce 方法（常用） | 通過對數組中的所有元素調用定義的回調函數來累積單個結果。 回調函數的返回值是累積的結果，并且作為對回調函數的下一個調用中的參數提供。 |
| reduceRight 方法 | 通過對數組中的所有元素調用定義的回調函數來按降序順序累積單個結果。 回調函數的返回值是累積的結果，并且作為對回調函數的下一個調用中的參數提供。 |
| reverse 方法（常用） | 將元素順序被反轉的 Array 對象返回。 |
| shift 方法（常用） | 從數組中移除第一個元素并將返回該元素。 |
| slice 方法（數組）（常用） | 返回一個數組中的一部分。 |
| some 方法（常用） | 檢查定義的回調函數是否為數組的任何元素返回 true。 |
| sort 方法（常用） | 返回一個元素已經進行了排序的 Array 對象。 |
| splice 方法（常用） | 從一個數組中移除元素，如有必要，在所移除元素的位置上插入新元素，并返回所移除的元素。注意與slice方法的區別。 |
| toLocaleString 方法 | 返回使用當前區域設置的字符串。 |
| toString 方法 | 返回數組的字符串表示形式。 |
| unshift 方法（常用） | 在數組的開頭插入新元素。 |
| valueOf 方法 | 獲取對數組的引用。 |
| values 方法 | 返回包含數組的值的迭代器。 |
10.4 String對象
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String
var s = 'JavaScript'; // length屬性返回字符串的長度。 var i = s.length; //返回參數在字符串中第一次出現的位置 var i = s.indexOf('b'); //從原字符串取出子字符串并返回，不改變原字符串 var i = s.substr(2,4);//從下標第二個開始截取4個長度的字符串 //toLowerCase方法用于將一個字符串全部轉為小寫 //toUpperCase則是全部轉為大寫 var i = s.toLowerCase(); var i = s.toUpperCase();// 用于替換匹配的子字符串,只替換第一個匹配 var i = s.replace('a','b'); console.log(i);String 對象的屬性。
| constructor 屬性 | 指定用于創建對象的函數。 |
| length 屬性（字符串） | 返回 String 對象的長度。 |
| prototype 屬性 | 為對象的類返回原型的引用。 |
String 對象的方法。
| anchor 方法 | 將具有 NAME 特性的 HTML 定位點放置在文本兩側。 |
| big 方法 | 將 HTML 標記放置在文本兩側。 |
| blink 方法 | 將 HTML 標記放置在文本兩側。 |
| bold 方法 | 將 HTML 標記放置在文本兩側。 |
| charAt 方法（常用） | 返回指定索引處的字符。 |
| charCodeAt 方法（常用） | 返回指定字符的 Unicode 編碼。 |
| codePointAt 方法 | 返回一個 Unicode UTF-16 字符的碼位。 |
| concat 方法（字符串） | 返回由提供的兩個字符串串聯而成的字符串。 |
| EndsWith 方法 | 返回一個布爾值，該值指示字符串或子字符串是否以傳入字符串結尾。 |
| includes 方法（常用） | 返回一個布爾值，該值指示傳入字符串是否包含在字符串對象中。 |
| fixed 方法 | 將 HTML 標記放置在文本兩側。 |
| fontcolor 方法 | 將具有 COLOR 特性的 HTML 標記放置在文本兩側。 |
| fontsize 方法 | 將具有 SIZE 特性的 HTML 標記放置在文本兩側。 |
| hasOwnProperty 方法（常用） | 返回一個布爾值，該值指示某個對象是否具有指定名稱的屬性。 |
| indexOf 方法（字符串）（常用） | 返回字符串內第一次出現子字符串的字符位置。 |
| isPrototypeOf 方法 | 返回一個布爾值，該值指示某個對象是否存在于另一個對象的原型鏈中。 |
| italics 方法 | 將 HTML 標記放置在文本兩側。 |
| lastIndexOf 方法（字符串） | 返回字符串內子字符串的最后一個匹配項。 |
| link 方法 | 將具有 HREF 特性的 HTML 定位點放置在文本兩側。 |
| localeCompare 方法 | 返回一個值，該值指示兩個字符串在當前區域設置中是否相等。 |
| match 方法 | 通過使用提供的正則表達式對象來搜索字符串并以數組形式返回結果。 |
| normalize 方法 | 返回指定字符串的 Unicode 范式。 |
| propertyIsEnumerable 方法 | 返回一個布爾值，該值指示指定屬性是否為對象的一部分且是否可枚舉。 |
| repeat 方法 | 返回一個新的字符串對象，它的值等于重復了指定次數的原始字符串。 |
| replace 方法 | 使用正則表達式替換字符串中的文本并返回結果。 |
| search 方法 | 返回正則表達式搜索中第一個子字符串匹配項的位置。 |
| slice 方法（字符串）（常用） | 返回字符串的片段。 |
| small 方法 | 將 HTML 標記放置在文本兩側。 |
| split 方法 | 返回一個字符串拆分為若干子字符串時所產生的字符串數組。 |
| StartsWith 方法 | 返回一個布爾值，該值指示字符串或子字符串是否以傳入字符串開頭。 |
| strike 方法 | 將 HTML 標記放置在文本兩側。 |
| sub 方法 | 將 HTML 標記放置在文本兩側。 |
| substr 方法（常用） | 返回一個從指定位置開始且具有指定長度的子字符串。 |
| substring 方法 | 返回 String 對象中指定位置處的子字符串。 |
| sup 方法 | 將 HTML 標記放置在文本兩側。 |
| toLocaleLowerCase 方法 | 返回一個字符串，其中所有字母字符都轉換為小寫形式，并將考慮主機環境的當前區域設置。 |
| toLocaleString 方法 | 返回使用當前區域設置轉換為字符串的對象。 |
| toLocaleUpperCase 方法 | 返回一個字符串，其中所有字母字符都轉換為大寫形式，并將考慮主機環境的當前區域設置。 |
| toLowerCase 方法 | 返回一個字符串，其中所有字母字符都轉換為小寫形式。 |
| toString 方法 | 返回字符串。 |
| toUpperCase 方法 | 返回一個字符串，其中所有字母字符都轉換為大寫形式。 |
| trim 方法（常用） | 返回已移除前導空格、尾隨空格和行終止符的字符串。 |
| valueOf 方法 | 返回字符串。 |
10.5 包裝對象
對象是 JavaScript 語言最主要的數據類型，三種原始類型的值——數值、字符串、布爾值——在一定條件下，也會自動轉為對象，也就是原始類型的“包裝對象”。
所謂“包裝對象”，就是分別與數值、字符串、布爾值相對應的Number、String、Boolean三個原生對象。這三個原生對象可以把原始類型的值變成（包裝成）對象。
var v1 = new Number(123); var v2 = new String('abc'); var v3 = new Boolean(true);typeof v1 // "object" typeof v2 // "object" typeof v3 // "object"v1 === 123 // false v2 === 'abc' // false v3 === true // false包裝對象的最大目的，首先是使得 JavaScript 的對象涵蓋所有的值，其次使得原始類型的值可以方便地調用某些方法。
原始類型的值，可以自動當作對象調用，即調用各種對象的方法和參數。
這時，JavaScript 引擎會自動將原始類型的值轉為包裝對象實例，在使用后立刻銷毀實例。
比如，字符串可以調用length屬性，返回字符串的長度。
'abc'.length // 3上面代碼中，abc是一個字符串，本身不是對象，不能調用length屬性。
JavaScript 引擎自動將其轉為包裝對象，在這個對象上調用length屬性。
調用結束后，這個臨時對象就會被銷毀。這就叫原始類型與實例對象的自動轉換。
注意：JS的內置對象還有很多，我們只不過是學習了比較常用的幾個而已；
在后面的學習中，我們還有講解使用其他類型的內置對象；
可以查看狐火和微軟開發者社區，獲取更多知識……
課外知識：
如果有時間，在語言部分結束后，添加課程大綱外的擴展內容
JS代碼規范&編程風格
-
縮進：
空格和tab鍵都可以，盡量保持一致，使用一種；
兩個空格和四個空格都行，盡量保持一致就行，但是使用4個空格的多一些； -
分號：
盡量不要忘記，每一行的結束都要加分號
while 與 for 循環后面不要加分號if else、switch等分支語句后面不要加分號關鍵字聲明函數，后面不要加分號表達式聲明函數，函數后面加分號 -
區塊：
兩種寫法
? 理論上兩種都可以，但是盡量使用第一種，因為js會在行尾自動添加分號，有時會出現意外情況；
-
圓括號
函數的聲明和調用、表達式運算
1：函數調用時，函數名和括號之間沒有空格
2：函數聲明時，函數名和括號之間沒有空格
3：參與表達式運算時，括號的前面和后面，都要加空格
-
變量的聲明
if (!x) {console.log(1); }//等同于 ↓ var x; if (!x) {console.log(1); }為了避免此種情況的出現，建議將所有在本作用域下聲明的變量都提到最前面聲明并賦值；
-
自增自減運算
因為 ++ 在前和++ 在后的運算結果不同，所以，盡量使用 +=1 -=1 替代，
提高代碼的可讀性；
你的團隊中一定有搞不明白++在前和在后的區別的二傻子；生活不易，請善待他們；
-
賦值 =
賦值前后加空格；
變量命名和代碼縮進 規范，是一個程序員必備的基本編程素質；
讓別人給你調試BUG的第一前提條件就是 縮進要規范；
調試工具
代碼區、console控制臺、斷點調試、網絡、本地緩存、內存使用
本文內容轉載至黑馬課程的學習筆記，對其中一些內容有添加和刪改。
如果覺得對你有幫助的話，點個贊唄~
總結
以上是生活随笔為你收集整理的前端自学学习笔记——JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 无线局域网知识
- 下一篇： div+css静态网页设计——男女装商城