溫故知新-js基礎
JavaScript的組成
- ECMAScript - JavaScript的核心
- 定義了JavaScript的語法規範
- JavaScript的核心，描述了語言的基本語法和數據類型，ECMAScript是一套標準，定義了一種語言的標準，與具體實現無關
- DOM - 文檔對象模型
- 一套操做頁面元素的API
- DOM能夠把HTML看作是文檔樹，經過DOM提供的API能夠對樹上的節點進行操做
- BOM - 瀏覽器對象模型
- 一套操做瀏覽器功能的API
- 經過BOM能夠操做瀏覽器窗口，好比：彈出框、控制瀏覽器跳轉、獲取分辨率等
JavaScript的書寫位置
- 複習css的書寫位置
- 行內式：不推薦，由於不便於維護
<h1 style="width: 99px">dogFly</h1> 複製代碼- 內聯式：寫在style標籤中,若是界面css樣式比較簡單可使用，複雜的話不推薦
<style>.fei{width: 99px;}</style> 複製代碼- 外聯式：寫在css文件中，使用link導入
<link rel="stylesheet" href="./外聯式.css"> 複製代碼
css外聯樣式的本質其實就是字符串替換 將下方這行代碼替換成對應文件的全部代碼javascript
- JavaScript的書寫位置
- 行內式：不推薦，由於不便於維護
<button onclick="window.alert('dogFly')">點靚仔</button> 複製代碼- 內聯式：寫在script標籤中,若是界面js代碼較少可使用，複雜的話不推薦
<script >alert("dogFly")</script > 複製代碼- 外聯式：寫在js文件中，使用script的src屬性導入
<script src="./外聯式.js"></script> 複製代碼
變量
什麼是變量
變量是計算機內存中存儲數據的標識符，根據變量名稱能夠獲取到內存中存儲的數據css
爲何要使用變量
有時候代碼運行產生的數據咱們須要存儲到內存中，方便之後使用前端
如何使用變量
- var聲明變量
var age;
複製代碼
- 變量的賦值
age = 18;
複製代碼
變量的命名規範和規則
- 命名規範: 建議遵照的，不遵照不會報錯
- 變量名必須有意義
- 遵照駝峯命名法。首字母小寫，後面單詞的首字母須要大寫，例如：userName、userPassword
- 命名規則: 必須遵照的，不遵照會報錯
- 由字母、數字、下劃線、$符號組成，不能以數字開頭
- 不能是關鍵字和保留字，例如：for、while(變量名也不能是特例name)
- 區分大小寫
數據類型
簡單數據類型
- number
須要注意特殊的NaN - string
- boolean
- undefined
聲明未賦值就是undefined - null
null這個值只能手動設置，變量在任什麼時候候它的值都不會是null
複雜數據類型
- array
- function
- object
判斷變量的類型
- typeof
- Object.prototype.toString.call()
- instanceof
數據類型轉換
轉換成number類型
- Number()
能夠把任意值轉換成數值，若是要轉換的字符串中存在任一個不是數值的字符，返回NaN - parseInt()
從左往右解析，遇到非數字結束（中止解析），將解析好的整數返回
若是第一個字符不是數字或者符號就返回NaN - parseFloat()
和parseInt很是類似，不一樣之處在於parseFloat會解析第一個.
遇到第二個.或者非數字結束
parseFloat不支持第二個參數，只能解析10進制數
若是解析的內容裏只有整數，解析成整數
轉換成string類型
- toString()
- String()
String()函數存在的意義：有些值沒有toString()，這個時候可使用String()，好比：undefined和nulljava
轉換成boolean類型
- Boolean()
如下八種狀況會獲得false，其他的一切數據獲得都是true
數字0、-0、null、false、undefined、空字符串」「、NaN、document.allandroid
隱式類型轉換
當運算符在運算時，若是兩邊數據不統一，CPU就沒法計算，這時咱們編譯器會自動將運算符兩邊的數據作一個數據類型轉換，轉成同樣的數據類型再計算,這就是隱式轉換ios
- 轉成string類型：+號兩邊若是有一邊是字符串，則會把另外一邊轉換成字符串，而後進行拼接
- 轉成number類型：如下幾種運算符會將任何數據轉換成number類型再運算，若是沒法轉換則爲NaN
自增自減（++ --）
算術運算符（+ - * / %）
比較運算符(> < >= <= == != === !==) - 轉成boolean類型：邏輯非（！）會將任何數據轉爲boolean類型且取反後再運算
運算符和表達式
算數運算符
加+， 減-， 乘*， 除/， 模%算法
比較運算符
小於<， 小於等於<=， 大於>， 大於等於>=， 相等==， 不相等!=， 全等===， 不全等!==編程
邏輯運算符
與&&， 或||， 非!json
賦值運算符
等於=，加等+=，減等-=，乘等*=，除等/=，模等%=api
自增自減運算符
++num， --num， num++， num--，
運算符的優先級不須要刻意的去記，由於開發中不多會遇到多個運算符參與的式子，萬一遇到也能夠經過()來提高優先級
js中算術運算符只能實現一些基本的數學計算，如加減乘除餘等，若是想要實現更加高級的數學計算，如冪運算求平方根等則須要用到Math對象，Math對象的方法不少，不須要死記硬背，用到時查閱文檔便可
運算符只是一種運算的符號，由運算符參與的式子稱之爲表達式
程序流程控制
順序結構：從上往下執行
分支結構：根據不一樣的狀況，執行不一樣的代碼
if語句
if (/* 條件表達式 */) {
// 執行語句
}
if (/* 條件表達式 */){
// 成立執行語句
} else {
// 不然執行語句
}
if (/* 條件1 */){
// 成立執行語句
} else if (/* 條件2 */){
// 成立執行語句
} else if (/* 條件3 */){
// 成立執行語句
} else {
// 最後默認執行語句
}
複製代碼
三元表達式
表達式1 ? 表達式2 : 表達式3
複製代碼
switch語句
switch(表達式){
case 值1:
表達式的結果 === 值1，須要執行的代碼
break;
case 值2:
表達式的結果 === 值2，須要執行的代碼
break;
case 值3：
表達式的結果 === 值3，須要執行的代碼
break;
.......
default:
表達式的結果和上面全部的case後面的值都不全等，則會執行這裏的代碼
break;
}
複製代碼
- switch語句在比較值時使用的是全等操做符, 所以不會發生類型轉換（例如，字符串'10' 不等於數值 10）
- break做用：結束該switch語句，因此通常狀況下要加上，若是不加上則會發生穿透
穿透：從上一個case代碼快執行到下一個case代碼塊
break關鍵字的做用就是防止穿透 - default語句能夠寫在任何地方，也能夠省略，可是通常寫在最後，這是一種代碼規範
- switch語句穿透用法
合理穿透：多種值須要執行相同代碼
<script> /**合理穿透：當存在多種值須要執行相同代碼時使用穿透能夠節省代碼 * 用戶輸入某一個月份，告訴用戶這個月份屬於什麼季節 * 12，1，2 冬季 * 3，4，5 春季 * 6，7，8 夏季 * 9，10，11 秋季 */ var month = +prompt("請輸入月份"); switch (month){ case 12: case 1: case 2: alert("冬季"); break; case 3: case 4: case 5: alert("春季"); break; case 6: case 7: case 8: alert("夏季"); break; case 9: case 10: case 11: alert("秋季"); break; default: alert("你輸你🐎呢臭弟弟"); break; } </script> 複製代碼 - switch語句穿透用法
循環結構：重複的作一件事
在javascript中，循環語句有三種，while、do..while、for循環
for語句
// for循環的表達式之間用的是;號分隔的，千萬不要寫成,
for (初始化表達式1; 判斷表達式2; 自增表達式3) {
// 循環體4
}
複製代碼
執行順序：1243 ---- 243 -----243(直到循環條件變成false)
- 初始化表達式
- 判斷表達式
- 自增表達式
- 循環體
while語句(瞭解便可)
// 當循環條件爲true時，執行循環體，
// 當循環條件爲false時，結束循環。
while (循環條件) {
//循環體
}
複製代碼
do...while語句(瞭解便可)
do..while循環和while循環很是像，兩者常常能夠相互替代，可是do..while的特色是無論條件成不成立，都會執行一次
do{
// 循環體;
} while (循環條件);
複製代碼
continue和break
break:當即跳出整個循環，即循環結束，開始執行循環後面的內容（直接跳到大括號）
continue:當即跳出當前循環，繼續下一次循環（跳到i++的地方）
break既能夠用於循環結構也能夠用於switch分支結構，continue只能用於循環結構語句
<script>
//示例：吃包子：我買了十個包子，包子每次只能吃一個，須要循環吃十個
//break：假如吃到第五個我吃飽了，後面的包子就都不用吃了
//continue:假如吃到第五個吃出來小強，那我第五個不吃了，可是我沒吃飽，後面仍是要繼續吃
var sum = 0;
for(var i = 1;i<=10;i++){
//continue
// if(i == 5) {
// console.log ( "吃到小強了，這個包子我不吃了" );
// continue;//結束本次循環體（後面的代碼不會執行），循環沒有結束，仍是會依次執行語句3和語句2
// };
//break
if(i==5){
console.log ( "我吃飽了，後面的包子都不想吃了" );
break;//結束整個循環語句
}
console.log ( "我吃的是第" + i + "個包子" );
}
</script>
複製代碼
拓展 短路運算
<script>
/*1.邏輯運算符
* 邏輯與&&:一假則假
* 邏輯或||:一真則真
* 邏輯非!：取反
2.短路運算：
* 若是第一個式子就能夠決定整個邏輯表達式的結果，那麼第二個式子根本就不會去運行計算，這就叫短路運算
3.邏輯與表達式：
* 找假：若是第一個式子結果能轉換爲false，邏輯與表達式的結果就是第一個式子的值；不然就是第二個式子的值
4.邏輯或表達式：
* 找真：若是第一個式子結果能轉換爲true，邏輯或表達式的結果就是第一個式子的值；不然就是第二個式子的值
5.邏輯非表達式：
* 沒有短路運算：由於它只有一個式子
*/
//1.若是第一個式子可以決定邏輯表達式的結果，那麼第二個式子就不會執行：短路運算
// var num1 = 10;
// var num2 = 20;
// var res = num1 > 0 || ++num2;
// console.log ( res );//true
// console.log ( num2 );//20 此時右邊式子沒有執行
//2.邏輯運算符的結果不必定是true或者false，有多是其餘的值
// var num1 = 10;
// var num2 = 20;
// var res = num1 || num2;
// console.log ( res );//10
//3.邏輯與表達式：&&
//找假：若是第一個式子結果能轉換爲false，邏輯與表達式的結果就是第一個式子的值；不然就是第二個式子的值
var num1 = 10;
var res1 = undefined && ++num1;
console.log ( res1 );//undefined
console.log ( num1 );//10 發生短路，第二個式子不會執行
//4.邏輯或表達式:||
//找真：若是第一個式子結果能轉換爲true，邏輯或表達式的結果就是第一個式子的值；不然就是第二個式子的值
var num2 = 20;
var res2 = 100 || ++num2;
console.log ( res2 );//100
console.log ( num2 );//20
</script>
複製代碼
數組
數組的定義
所謂數組，就是將多個元素（一般是同一類型）按必定順序排列放到一個集合中，那麼這個集合咱們就稱之爲數組
數組是一個有序的列表，能夠在數組中存聽任意的數據，而且數組的長度能夠動態的調整
數組的三要素
- 元素：數組中的數據
- 下標：元素在數組中的位置
- 長度：數組中元素的數量
數組的應用
求數組的平均值 最小值 最大值
var arr = [50,88,25,60,45];
//1.求數組中全部元素的平均值
var sum = 0;
for(var i = 0;i<arr.length;i++){
sum += arr[i];
}
console.log ( sum / arr.length );//平均數
//2.求數組中元素最大值
//打擂臺思想
var max = - Infinity;
for(var i = 0;i<arr.length;i++){
if(max <= arr[i]){
max = arr[i];
}
}
console.log ( max );
//3.求數組中元素最小值
var min = Infinity;
for(var i = 0;i<arr.length;i++){
if(min >= arr[i]){
min = arr[i];
}
}
console.log ( min );
複製代碼
數組翻轉
//翻轉數組
var arr = [90,88,20,100,5];//翻轉以後：[5,100,20,88,90]
// console.log ( arr );
//1.倒着對數組遍歷
var newArr = [];
for(var i = arr.length - 1;i>=0;i--){
console.log ( arr[ i ] );
//2.將倒着遍歷的元素按照順序添加到新數組中
newArr[newArr.length] = arr[i];
}
console.log ( newArr );
//1.2 將數組首尾元素的值互換
for(var i = 0;i<arr.length/2;i++){
console.log ( arr[ i ] );
//交換首尾元素的位置
//交換arr[i]和arr[arr.leth-1 - i]這兩個元素的值
var temp = arr[i];
arr[i] = arr[arr.length-1 - i];
arr[arr.length-1 - i] = temp;
}
console.log ( arr );
複製代碼
數組去重
<script>
/**
* 開關比較法
* 1.先定義個空的新數組newArr
* 2.遍歷舊數組arr中全部元素
* 3.定義一個bollean變量表示開關，默認爲開啓狀態
* 4.遍歷新數組全部元素與舊數組元素比較
* 5.若是該元素存在於新數組中，開關爲關閉狀態。不然開關爲開啓狀態
* 6.若是開關爲開啓狀態，則將舊數組的元素添加到新數組中
*/
var arr = [20,25,66,78,25,66,39];//[20,25,66,78,39]
//1.定義個空的新數組
var newArr = [];
//2.遍歷舊數組中全部元素
for(var i = 0;i<arr.length;i++){
//3.定義一個開關，默認爲開啓狀態
var canAdd = true;
//4.遍歷新數組全部元素
for(var j = 0;j<newArr.length;j++){
if(newArr[j] === arr[i]){
//5.若是存在，開關關閉
canAdd = false;
break;//一旦重複，後面不必比較，結束本次循環
};
//5.不存在，開關繼續保持開啓狀態
}
//6.若是開關爲開啓狀態，則將舊數組的元素添加到新數組中
if(canAdd == true){
newArr[newArr.length] = arr[i];//往新數組後面添加元素
}
}
console.log ( newArr );
</script>
複製代碼
斐波那契數列
//斐波那契阿數列:1,1,2,3,5,8,13,21,34,55..... 求第十位數字是幾？
//特色:從第三個數字開始，每個數字是前兩個數字的和
var fibNum = [1,1];
for(var i = 2;i<10;i++){//i=2 是由於從下標爲2的數字開始 纔是 前面兩個元素的和
fibNum[i] = fibNum[i-1] + fibNum[i-2];
};
console.log ( fibNum );
console.log ( fibNum[ fibNum.length - 1 ] );//數組中最後一個元素
複製代碼
冒泡算法(數組排序)
冒泡算法排序核心：數組中相鄰的兩個元素比較大小，若是前者大於後者則交換位置
每一輪比較能夠找出數組中最大的那個數字，而且移到了數組的最後面
- 分析冒泡算法
<script>
/*排序：將數組中的元素按照從小到大的順序排列
冒泡法排序核心原理：數組中相鄰的兩個元素比較大小，若是前者大於後者則交換位置
* 每一輪比較能夠找出數組中最大的那個數字
*/
var arr = [18,15,10,20,5];//[5,10,15,18,20]
//1.獲取數組中全部元素：數組遍歷
for(var i = 0;i<arr.length-1;i++) {//i = 0 1 2 3
//2.讓相鄰的兩個元素比較大小，若是前者大於後者就交換位置
//本身：arr[i] 相鄰的那個元素：arr[i+1]
console.log ( "第" + i + "次" + arr[ i ] + "和" + arr[ i + 1 ] + "比較" );//
if ( arr[ i ] > arr[ i + 1 ] ) {
//3.交換位置：交換兩個變量的值
var temp = arr[ i ];
arr[ i ] = arr[ i + 1 ];
arr[ i + 1 ] = temp;
}
console.log ( "第" + i + "次比較以後，數組變成了" + arr );//
}
console.log ( "第一輪比較的結果是" + arr );
//總結規律：循環會執行五次 [18,15,10,20,5]
//第一次 18 > 15 交換位置 [15,18,10,20,5]
//第二次 18 > 10 交換位置 [15,10,18,20,5]
//第三次 18 < 20 位置不變 [15,10,18,20,5]
//第四次 20 > 5 交換位置 [15,10,18,5,20]
//第五次比較 20 和undefined比較 無心思 [15,10,18,5,20] 最後一次比較無心義的，五個數字只須要比較四次就能夠了
//本次循環結束以後，最大的那個數字會變成數組的最後一個元素（一輪比較只能找出數組中最大的那個數字）
//第二輪：再來一輪：能夠找出第二大的數字 [15,10,18,5,20]
for(var i = 0;i<arr.length - 1;i++) {//i = 0 1 2 3
//2.讓相鄰的兩個元素比較大小，若是前者大於後者就交換位置
//本身：arr[i] 相鄰的那個元素：arr[i+1]
console.log ( "第" + i + "次" + arr[ i ] + "和" + arr[ i + 1 ] + "比較" );//
if ( arr[ i ] > arr[ i + 1 ] ) {
//3.交換位置：交換兩個變量的值
var temp = arr[ i ];
arr[ i ] = arr[ i + 1 ];
arr[ i + 1 ] = temp;
}
console.log ( "第" + i + "次比較以後，數組變成了" + arr );//
}
console.log ( "第二輪比較的結果是" + arr );
/**第二輪比較過程：找出第二大的數字
* 第一次 15 > 10 交換位置 [10,15,18,5,20]
* 第二次 15<18 位置不換 [10,15,18,5,20]
* 第三次 18>5 交換位置 10,15,5,18,20]
* 第四次： 18 < 20 由於此時數組的最後一個元素已是最大的了，本輪找出的最大數組只能是數組的倒數第二個
*/
//第三輪：再來一輪：能夠找出第三大的數字 [10,15,5,18,20]
for(var i = 0;i<arr.length - 1;i++) {//i = 0 1 2 3
//2.讓相鄰的兩個元素比較大小，若是前者大於後者就交換位置
//本身：arr[i] 相鄰的那個元素：arr[i+1]
console.log ( "第" + i + "次" + arr[ i ] + "和" + arr[ i + 1 ] + "比較" );//
if ( arr[ i ] > arr[ i + 1 ] ) {
//3.交換位置：交換兩個變量的值
var temp = arr[ i ];
arr[ i ] = arr[ i + 1 ];
arr[ i + 1 ] = temp;
}
console.log ( "第" + i + "次比較以後，數組變成了" + arr );//
}
console.log ( "第三輪比較的結果是" + arr );
//第四輪：再來一輪：能夠找出第四大的數字 [10,15,5,18,20]
for(var i = 0;i<arr.length - 1;i++) {//i = 0 1 2 3
//2.讓相鄰的兩個元素比較大小，若是前者大於後者就交換位置
//本身：arr[i] 相鄰的那個元素：arr[i+1]
console.log ( "第" + i + "次" + arr[ i ] + "和" + arr[ i + 1 ] + "比較" );//
if ( arr[ i ] > arr[ i + 1 ] ) {
//3.交換位置：交換兩個變量的值
var temp = arr[ i ];
arr[ i ] = arr[ i + 1 ];
arr[ i + 1 ] = temp;
}
console.log ( "第" + i + "次比較以後，數組變成了" + arr );//
}
console.log ( "第四輪比較的結果是" + arr );
//第四輪結束以後，因爲數組只有五個元素，已經找出了前面四個最大的元素，剩下的這一個元素一定是最小的
//沒有必要比較
</script>
複製代碼
- 精簡冒泡算法
for(var i = 0;i<arr.length - 1;i++){//1.外層循環決定比較的輪數
for(var j = 0;j< arr.length - 1 - i;j++){//2.內層循環決定每一輪比較的次數
if(arr[j] > arr[j+1]){//3.交換相鄰元素：比較兩個相鄰數字的大小
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
複製代碼
<script>
//分析i和j的由來
var arr = [18,15,10,20,5];
/*找規律：第一個規律：找出須要比較的輪數
1.數組的長度爲5 須要比較4輪
2.數組的長度爲6，須要比較5輪
3.數組的長度爲 arr.length 須要比較 arr.lenthg - 1 輪
第二個規律：找出每一輪須要比較多少次
數組長度爲5 第一輪 i = 0 ：須要比較四次
數組長度爲5 第二輪 i =1： 須要比較三次 （由於第一輪已經找出了最大的數放在數組的最後面）
數組長度爲5 第三輪 i = 2：須要比較兩次 （由於前兩輪已經找出了最大的兩個數字，本輪只須要比較前面三個數字便可）
數組長度爲5 第四輪 i = 3：須要比較1次 （由於前三輪已經找出了最大的三個數字，本輪只須要比較前面兩個數字大小便可）
arr.length - i的值 -1 = 每一輪須要比較的次數
*/
//1.外層循環決定行：輪數
for(var i = 0;i<arr.length - 1;i++){
//當i = 0 的時候（第一輪） 比較4次 4 + 0 = 4
//當i = 1的時候（第二輪） 比較 3 次 3 + 1 = 4
//當i = 2的時候（第三輪） 比較 2 次 2 + 2 = 4
//當i = 3的時候（第四輪） 比較 1 次 3 + 1 = 4
//規律：每一輪須要比較的次數 + i = arr.length - 1 (將i挪到等式右邊求出每輪比較次數)
//每一輪須要比較的次數 = arr.length - 1 - i
//內層循環決定每一輪比較的次數
for(var j = 0;j< arr.length - 1 - i;j++){
//比較兩個相鄰數字的大小
if(arr[j] > arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
console.log ( arr );//
</script>
複製代碼
拓展 引用類型與值類型
引用類型：array,obejct 數據存儲在堆中，地址存儲在棧中
值類型：string number boolean undefined null 數據存儲在棧中
區別：
值類型：棧中存儲的是數據，變量賦值時拷貝的是數據，修改拷貝後的數據不會對原數據形成影響
引用類型：棧中存儲的是地址，變量賦值時拷貝的也是地址，修改拷貝後的數據會對原數據形成影響
函數
什麼是函數
把一段相對獨立的具備特定功能的代碼塊封裝起來，造成一個獨立實體，就是函數，起個名字（函數名），在後續開發中能夠反覆調用
函數的做用就是封裝一段代碼，未來能夠重複使用
函數的定義
函數聲明
function 函數名(){
// 函數體
}
複製代碼
函數表達式
var 函數名 = function() {
// 函數體
}
複製代碼
函數兩種聲明方式的區別
函數聲明能夠在任何地方調用，而函數表達式方式調用必須在聲明後面
<script>
//函數有兩種聲明方式
//1.函數聲明： function 函數名() {};
function fn1 ( ) {
console.log ( "哈哈" );
}
//2.函數表達式： var 函數名 = 匿名函數
var fn2 = function ( ) {
console.log ( "呵呵" );
}
//這兩種方式惟一的區別：函數聲明能夠在任何地方調用，而函數表達式方式調用必須在聲明後面
// test();//這樣調用會報錯
var test = function ( ) {
console.log ( "嘿嘿" );
}
test();//只能在聲明的後面調用
</script>
複製代碼
函數的參數
爲何要有參數
函數內部是一個封閉的環境，能夠經過參數的方式，把外部的值傳遞給函數內部
形參和實參
形式參數：在聲明一個函數的時候，爲了函數的功能更加靈活，有些值是固定不了的，對於這些固定不了的值。咱們能夠給函數設置參數。這個參數沒有具體的值，僅僅起到一個佔位置的做用，咱們一般稱之爲形式參數，也叫形參
實際參數：若是函數在聲明時，設置了形參，那麼在函數調用的時候就須要傳入對應的參數，咱們把傳入的參數叫作實際參數，也叫實參
參數傳遞的本質
就是實參給形參賦值
return關鍵字
<script>
//return關鍵字：結束函數的調用 （相似於break關鍵字,只能用於函數體中）
//return後面的代碼不會執行
//寫一個函數：判斷一個數是否是偶數
function isOuShu ( num ) {
if(num %2 == 0){
console.log ( num + "是偶數" );
return;
}
console.log ( num + "不是偶數" );
}
isOuShu(1);
isOuShu(2);
</script>
複製代碼
函數的返回值
返回值的概念
當函數執行完的時候，並非全部時候都要把結果打印。咱們指望函數給我一些反饋（好比計算的結果返回進行後續的運算），這個時候可讓函數返回一些東西，也就是返回值
函數經過return返回一個返回值
返回值語法
//聲明一個帶返回值的函數
function 函數名(形參1, 形參2, 形參...){
//函數體
return 返回值;
}
//能夠經過變量來接收這個返回值
var 變量 = 函數名(實參1, 實參2, 實參3);
複製代碼
返回值分析
- 函數沒有使用return，默認返回值是undefined
- 函數使用return，可是return後面沒有接值，函數的返回值也是undefined
- 一個函數一旦執行的return，後面的代碼不會執行
- 函數使用return，而且return後面有值，函數的返回值就是這個值
arguments關鍵字
arguments概念
當前函數的內置對象，每個函數都有一個arguments對象，做用是存儲調用者傳遞過來的全部實參
爲何要有arguments關鍵字
js是一門弱語言，聲明函數的時候假如只有一個形參，實際上在調用的時候不管咱們傳入多少實參程序都不會報錯，爲了防止這種狀況，就用arguments關鍵字來獲取全部的實參
arguments特色
- 只能在函數體中使用，在函數外使用會報錯
- 是一個特殊的數組（僞數組），有數組的三要素，可是沒有數組其餘的方法
- arguemngs數組中的元素與形參一一對應
<script>
/**arguments關鍵字做用：獲取函數的全部實參
* 本質：當前函數的內置對象，每個函數都有一個arguments對象，做用是存儲調用者傳遞過來的全部實參
* 特色：1.只能在函數體中使用，函數外部使用會報錯
* 2.是一個特殊的數組（僞數組）
* 3.arguments僞數組的元素與形參一一對應
*
* 說明：1.能夠用函數變得更加靈活
* 2.arguments是一個僞數組
* * 僞數組：只有數組的下標、元素、長度，沒有數組其餘方法
*/
/**一：argument用法演示*/
//1.這行代碼會報錯，由於函數外部沒法使用arguments
// console.log ( arguments );
//2.定義一個無參的函數，做用是打印該函數的全部參數
function fn ( num1 ) {
//(1)arguemnt保存的是全部的實參的值
// console.log ( num1 );
// console.log ( arguments );//arguments只能在函數內部使用
//(2)arguemnt與形參是一一對應的
//修改了形參，arguemnt也會修改
num1 = 100;
console.log ( arguments );//修改了形參，arguments也會修改
//反之，修改了argeumnts，形參也會變化
}
fn(10,20);//實參與形參一一對應
/** 二：arguments實際用途展現：根據參數的數量讓函數實現不一樣的功能 */
function test ( ) {
if(arguments.length == 0){
//執行這個代碼
console.log ( "沒有參數" );
}else if(arguments.length == 1){
//執行這個代碼
console.log ( arguments[ 1 ] );
}else{
//執行這個代碼
console.log ( arguments[ 0 ] + arguments[ 1 ] );
}
}
test();
test(100);
test(10,20);
</script>
複製代碼
函數的註釋
通常的開發者工具都會自動幫你生成函數的註釋，只須要在函數聲明的上方輸入/** + 回車，它會本身幫你生成一堆東西(函數的做用、每個參數的意思、返回值的意思)，這就是函數的標準註釋，以下所示
/**
* 求數組中的最大數
* @param arr:數組
* @return max:最大數
*/
function getMaxNumber ( arr ) {
var max = -Infinity;
for(var i = 0;i<arr.length;i++){
if(max <= arr[i]){
max = arr[i];
}
}
return max;
}
複製代碼
回調函數
回調函數:若是一個函數的參數也是一個函數，那麼這個參數函數就叫作回調函數
爲何要有回調函數
當一個函數調用執行完畢以後，我想執行另外一段代碼塊，也就是調用另外一個函數
可是有時候可能本函數執行完畢後，根據不一樣的狀況須要調用的函數也不一樣，那麼咱們可使用形參來接收這個函數，而後再調用
此時：這個形參函數就稱之爲回調函數
<script>
//回調函數：若是一個函數的參數也是一個函數，那麼這個參數函數就叫作回調函數
//回調函數在什麼地方會執行呢？ 函數名() 的時候執行
//回調函數難點： 本質是一個參數
//誰來傳：調用者傳參 （函數名）
//誰來收,調用：函數調用 （函數執行完函數體以後，調用保存在這個參數中的一段代碼）
function a ( ) {
console.log ( "哈哈" );
}
function b ( ) {
console.log ( "呵呵" );
}
//c函數有一個功能，能夠接收調用者傳遞過來的一段代碼，而且在執行完自身函數體以後，會幫調用者執行這一段代碼
function c ( fn ) {
console.log ( "嘿嘿" );
//fn裏面是調用者傳遞過來的一段代碼，怎麼讓這段代碼執行呢？
fn();
};
//調用函數c，傳的是變量a中存儲的一段代碼
c(a);
c(b);
</script>
複製代碼
匿名函數
匿名函數：沒有名字的函數
匿名函數如何使用：
- 將匿名函數賦值給一個變量，這樣就能夠經過變量進行調用
- 匿名函數自調用
自調用函數
自調用函數：函數本身調用本身
最多見的：匿名函數自調用
自調用函數做用
開闢做用域，js中只有函數才能夠開闢做用域
防止全局變量污染
匿名函數自調用語法:( function(){} ) ()
將整個函數使用小括號包裹，而後在後面再加上小括號調用
<script>
/*自調用函數：函數本身調用本身
* 最多見的：匿名函數自調用
*/
//做用：開闢做用域，js中只有函數才能夠開闢做用域
//匿名函數至關於字面量函數,因爲沒有函數名，因此只能在聲明的同時調用
//語法： ( function(){} ) () 將整個函數使用小括號包裹，而後在後面再加上小括號調用
(function ( ) {
console.log ( "我是匿名函數" );
})();
//補充：其實有名字的函數也能夠本身調用本身，只是比較少見
(function test( ) {
console.log ( "我是有名字的函數，我也能夠自調用" );
})();
</script>
複製代碼
做用域
做用域
<script>
/*做用域：變量起做用的範圍
* js中只有兩種：全局做用域 局部做用域
*
1.全局做用域：變量在任何地方起做用
* 全局變量:在函數外面聲明
2.局部做用域：變量只能在函數內部起做用
* 局部變量：在函數內部聲明
*/
//1.全局變量
var a = 10;
function fn ( ) {
console.log ( a );
}
fn();
//2.局部變量
function fn1 ( ) {
var num = 10;
console.log ( num );
}
fn1();
console.log ( num );
//不使用var聲明的變量是全局變量，不推薦使用
</script>
複製代碼
做用域鏈
只有函數能夠製造做用域結構，那麼只要是代碼，就至少有一個做用域,即全局做用域。
凡是代碼中有函數，那麼這個函數就構成另外一個做用域。
若是函數中還有函數，那麼在這個做用域中就又能夠誕生一個做用域。
將這樣的全部的做用域列出來，能夠有一個結構: 函數內指向函數外的鏈式結構。就稱做做用域鏈。
變量在做用域鏈上的訪問規則
就近原則：訪問變量時，會優先訪問的是在本身做用域鏈上聲明的變量，若是本身做用域鏈上沒有聲明這個變量，那麼就往上一級去找有沒有聲明這個變量，若是有就訪問，若是沒有就繼續往上找有沒有聲明，直到找到0級做用域鏈上，若是有，就訪問，若是沒有就報錯
預解析
JavaScript代碼的執行是由瀏覽器中的JavaScript解析器來執行的。
JavaScript解析器執行JavaScript代碼的時候，分爲兩個過程：預解析過程和代碼執行過程
預解析過程：
- 把變量的聲明提高到當前做用域的最前面，只會提高聲明，不會提高賦值。
- 把函數的聲明提高到當前做用域的最前面，只會提高聲明，不會提高調用。
注: 先提高var，在提高function
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);
複製代碼
對象
####對象概念
爲何要有對象類型？
- 目前咱們學習過數組，它是js兩種複雜數據類型的第一種 數組的做用就是將多個數據放到一個變量的內存空間中，這樣作的好處就是能夠減小變量的聲明
- 數組通常存儲數據類型相同的數據，例如一個班級全部人的分數(都是number類型)，一個班級全部人的名字（都是string類型），數組是連續存儲的，經過下標咱們就知道里面的元素屬於哪個人的分數
- 數組的弊端:若是我想存放一我的的信息，例如:['張三',18,'男'] 這樣的話代碼易讀性不高，由於咱們並不知道里面的每個元素是什麼意思，雖然猜獲得第一個元素是姓名，第二個元素是年齡，第三個元素是性別，可是維護起來不方便
對象類型與數組對比
- 與數組的相同點：都是存儲多個數據
- 不一樣點：不是連續存儲的，而是鍵值對存儲{name:張三,age:18,gender:男}
<script>
/**
* 1.對象類型：能夠理解爲使用js代碼來描述生活中的某個具體的事物
* 2.例如 人有哪些特徵與行爲呢
* 特徵：姓名，年齡
* 行爲：吃飯，睡覺
* 3.對象的屬性：用於描述對象的特徵
* 4.對象的方法：用於描述對象的行爲
*/
var name = 'dogFly';
var age = 99;
var sex = '男';
//需求：使用一個變量來存儲一我的的信息
//使用數組,易讀性不高，根本不知道每個下標表示的是什麼數據
//解決方案：使用對象，既能夠存儲多個數據，也能夠提升代碼易讀性
var arr = [];
arr[0] = 'dogFly';
arr[1] = 99;
arr[2] = '男';
console.log ( arr );
//1.聲明一個對象： 語法 var 對象名 = new Object()
var gouFei = new Object();//建立一個空對象
gouFei.name = 'dogFly';
gouFei.sex = '男';
gouFei.age = 99;
console.log ( gouFei );
//2.對象經過屬性來取值 點語法 對象名.屬性名
console.log ( gouFei.name );
//補充：對象與數組之間的異同點
/*相同點：均可以存儲多個數據
不一樣點：數組是按照順序來存儲的，對象是無序存儲的
*/
//對象：使用代碼來描述現實世界的事物
/*現實世界中的人
* 屬性：年齡 身高 性別
* 行爲(函數)：吃飯 睡覺
*
汽車：
* 屬性（特徵）：顏色 輪子 價格
* 行爲：飆車 剎車
*/
</script>
複製代碼
####對象的使用
對象的取值與賦值
- 取值：兩種語法
- 點語法:對象名.屬性名
- 字符串語法:對象名['屬性名']
- 賦值：取值 = 值
- 對象名.屬性名 = 屬性的值
- 對象名['屬性名'] = 屬性的值
- 取值與賦值特色
- 賦值
若是有這個屬性，則是修改它的值
若是沒有這個屬性，則是添加一個屬性 - 取值
若是有這個屬性，則獲取它的值
若是沒有這個屬性，則獲得undefined
<script>
/*本小節知識點：對象的取值與賦值
取值：兩種語法
* 點語法： 對象名.屬性名
* 字符串語法 對象名['屬性名']
賦值： 取值 = 要賦的值
* 對象名.屬性名 = 屬性的值
* 對象名['屬性名'] = 屬性的值
*/
//1.聲明一個對象
//new Object() :構造函數方式 ：若是調用一個函數使用了new關鍵字，那麼這個函數就稱爲構造函數
//構造函數會自動返回一個對象
var person = new Object();
console.log ( person );
//2.賦值語法： 對象名.屬性 = 值
//2.1 若是對象沒有這個屬性，則是動態添加這個屬性
person.name = 'dogFly';
person.age = 66;
console.log ( person);
//2.2 若是有這個屬性，則是修改屬性值
person.name = 'coolFly';
console.log ( person );
//3.取值語法:兩種取值語法
//(1)點語法： 對象名.屬性名 (2字符串語法： 對象名['屬性名']
//3.1 點語法 對象名.屬性名
console.log ( person.age );//38
//3.2 若是沒有這個屬性，則取到的是undefined
console.log ( person.xxxxxx );
//3.3 字符串語法
console.log ( person[ "age" ] );
//4.練習題
var zhangsan = new Object();
zhangsan.name = '張三';
zhangsan.age = 18;
var name = 'age';
console.log ( zhangsan[ name ] );//18 zhangssan['age''] </script> 複製代碼
對象的初始化
什麼是對象的初始化：在聲明對象的同時賦值
初始化：開闢內存空間的同時存儲數據
<script>
/*對象描述現實世界的事物，人
特性（屬性）：姓名，年齡，性別
行爲： 吃飯 睡覺 大寶劍
*/
//對象的初始化
var person = new Object({
//語法： 屬性名 : 屬性值 (鍵值對)
name : 'dogFly',
age : 99,
sex : '男',
sayHi:function(){
console.log ( "你好，我是狗飛" );
},
girlFirend : {
name : 'gakki',
age : 18,
play : function(){
console.log ( "來過來抱抱" );
}
}
});
//取值
console.log ( person.name );
person.sayHi();//調用對象的方法
console.log ( person.girlFirend );//這個屬性是個對象
console.log ( person.girlFirend.name );
person.girlFirend.play();
//賦值
person.girlFirend.name = '20歲のgakki';
console.log ( person.girlFirend );
//若是對象的屬性是一個函數，咱們就稱這個函數叫作方法。 方法有歸屬感
</script>
複製代碼
建立對象的方法
- 對象字面量
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');
複製代碼
- 自定義構造函數建立對象
對象的遍歷
- 複習:數組的遍歷
固定的for循環結構for(var i = 0;i<數組.length;i++){var 元素 = 數組[i]} - 思考:對象可不可使用這種方式來遍歷呢?
不行，由於對象沒有長度這個屬性，也沒有下標 - 如何遍歷對象的全部屬性?
使用for-in循環
for(var 屬性名 in 對象名){
//這裏只能使用字符串語法取值，由於獲取的屬性名是一個字符串
var 屬性的值 = 對象名[屬性名]
}
複製代碼
刪除對象的屬性
function fun() {
this.name = 'mm';
}
var obj = new fun();
console.log(obj.name); // mm
delete obj.name;
console.log(obj.name); // undefined
複製代碼
this指向
-
方法：其實就是一個函數，只不過它是對象的一個屬性，因此咱們稱之爲方法
-
this關鍵字:誰調用這個方法，this就表明誰
-
JavaScript中的this指向問題，有時候會讓人難以捉摸，隨着學習的深刻，咱們能夠逐漸瞭解 如今咱們須要掌握函數內部的this幾個特色
- 函數在定義的時候this是不肯定的，只有在調用的時候才能夠肯定
- 通常函數直接執行，內部this指向全局window
- 函數做爲一個對象的方法，被該對象所調用，那麼this指向的是該對象
- 構造函數中的this實際上是一個隱式對象，相似一個初始化的模型，全部方法和屬性都掛載到了這個隱式對象身上，後續經過new關鍵字來調用，從而實現實例化
<script>
//方法中this表明誰？ ： 誰調用這個方法，this就表明誰
var person = {
name : 'dogFly',
age : 99,
sayHi : function ( ) {
//1.能夠在對象的方法中獲取對象的屬性
console.log ( "個人名字是" + person.name + "個人年齡是" + person.age );
//2.this關鍵字獲取對象
console.log ( "個人名字是" + this.name + "個人年齡是" + this.age );
}
}
//person這個對象調用了它的方法，this就表明person這個對象
person.sayHi();
person.name = 'gakki';//修改對象的屬性，this也會跟着改變（動態指向）
person.sayHi();
</script>
複製代碼
new關鍵字
構造函數 ，是一種特殊的函數。
主要用來在建立對象時初始化對象， 即爲對象成員變量賦初始值，總與new運算符一塊兒使用在建立對象的語句中。
若是調用一個函數的時候使用了new關鍵字，那麼這個函數就是構造函數
- new這個關鍵字在構造函數中會作四件事
- 在內存中開闢空間，建立一個空對象
- 把this指向這個對象
- 給這個對象賦值
- 返回(return)這個對象
- 構造函數使用注意點
- 一般函數名首字母大寫，用於區分普通函數
- 必需要使用new關鍵字來調用
- 手動在函數內return形成的影響
- 若是 return 基本數據類型 ： 無效，仍是會返回默認對象
- 若是 return 複雜數據類型 ： 有效，會覆蓋默認的對象
<script>
//自定義構造函數
//什麼是構造函數：若是調用一個函數的時候加了new關鍵字，那麼這個函數咱們稱之爲構造函數
//1.聲明一個空函數
function fn ( ) {
}
//查看使用new調用和不使用new調用的結果有什麼不一樣
var res1 = fn();//不加new關鍵字，此時fn就是普通函數
var res2 = new fn();//加new關鍵字，fn就變成了構造函數
console.log ( res1 );//undefined
console.log ( res2 ,typeof res2);//object 空對象(對象名就叫作fn)
//結論：使用new關鍵字以後，函數在內部會自動建立一個對象，而且幫咱們自動返回
//2.既然構造函數內部會自動建立一個對象，那麼可使用this關鍵字來表明這個對象
function Teacher ( name,age,hobby ) {
this.name = name;
this.age = age;
this.hobby = hobby;
}
//使用new關鍵字調用構造函數
var teacher2 = new Teacher ( "琨琨", 5, "籃球" );
console.log ( teacher2 );//{name: "琨琨", age: 5, hobby: "籃球"}
/*new這個關鍵字在構造函數中會作四件事
* 1.在內存中開闢空間，建立一個空對象
* 2.把this指向這個對象
* 3.給這個對象賦值
* 4.將這個對象返回(return)
*/
//3.構造函數使用注意點
/*1.一般函數名首字母大寫，用於區分普通函數
2.必需要使用new關鍵字來調用
3.手動在函數內return形成的影響
* 若是 return 基本數據類型 ： 無效，仍是會返回默認對象
* 若是 return 複雜數據類型 ： 有效，會覆蓋默認的對象
*/
function GirlFirend(name,age){
this.name = name;
this.age = age;
//若是手動return
// return '123' ; //基本數據類型，無效
//return ['123']; //複雜數據類型，有效，會覆蓋默認對象
}
var person1 = new GirlFirend('gakki',18);
console.log ( person1 );
</script>
複製代碼
內置對象
經過目前的學習，咱們對js的對象有了必定的瞭解，其實在js中還有一些內置對象
內置對象：js的做者提早寫好的對象
做用：將一些數據類型經常使用的屬性或者方法提早寫好，減輕開發者的工做量
API:（Application ProgrammingInterface,應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發人員基於某軟件或硬件得以訪問一組例程的能力,而又無需訪問源碼，或理解內部工做機制的細節
內置對象的方法不少，不須要刻意的死記硬背，熟能生巧
Date對象
<script>
/**
* Date對象：js內置的用於獲取當前日期與時間的對象
* 日期：只有年月日 2018/3/20
* 時間：只有時間 15：30：00
* 完整時間：年月日時 2018/3/20 15：30：00
*/
//1.建立一個Date對象
var date = new Date();
/*時間日期打印*/
//2.打印當前完整時間: （1）默認顯示當前電腦的時區時間 （2）打印date時會自動轉爲字符串 date.toString()
console.log ( date );//Fri Mar 23 2018 20:45:15 GMT+0800 (中國標準時間)
//3.打印日期：標準版本
console.log ( date.toDateString () );//Fri Mar 23 2018
//4.打印日期：本地版本（當前電腦）
console.log ( date.toLocaleDateString () );// 2018/3/23
//5.打印當前時間：標準版本
console.log ( date.toTimeString () );//20:51:17 GMT+0800 (中國標準時間)
//6.打印當前時間：本地版本
console.log ( date.toLocaleTimeString () );//下午8:51:17
/*年月日時打印*/
//1.打印當前年份
console.log ( date.getFullYear () );//2018
//2.打印當前月份 範圍：0-11 表明 1-12月
console.log ( date.getMonth () );//2 表明下標2 也就是3月
//3.打印當前日
console.log ( date.getDate () );//23
//4.打印當前星期 範圍0-6 表明星期天-星期六
console.log ( date.getDay () );//5
//5.打印時
console.log ( date.getHours () );
//6.打印分
console.log ( date.getMinutes () );
//7.打印秒
console.log ( date.getSeconds () );
/**建立自定義日期*/
var date1 = new Date(2020,0,1,12,3,5);//依次傳入 年，月，日，時，分，秒
console.log ( date1 );//Wed Jan 01 2020 12:03:05 GMT+0800 (中國標準時間)
var date2 = new Date("2022-05-06 12:03:35");
console.log ( date2 );//Fri May 06 2022 12:03:35 GMT+0800 (中國標準時間)
</script>
複製代碼
Math對象
數組經常使用api
- 鏈接數組:concat()
- 將數組元素拼接成字符串:join()
- 刪除數組最後一個元素:pop()
- 往數組後面添加元素:push()
- 翻轉數組:reverse()
- 刪除數組第一個元素:shift()
- 查找數組元素:slice()
<script>
//咱們建立了一個數組對象。此時它就已經擁有了內置對象全部的屬性和方法
var arr = [10,20,30];
console.log ( arr.length );//訪問數組對象的length屬性
//1.鏈接多個數組:將另外一個數組的全部元素都添加到arr的後面
console.log ( arr.concat ( [ 40, 50 ] ) );//[10,20,30]
//2.將數組中的每個元素都拼接成一個字符串
var str = arr.join();//10,20,30
console.log ( str );
//3.刪除數組的最後一個元素
arr.pop()//刪除數組的最後一個元素
console.log ( arr );//[10,20]
//3.往數組的最後面添加一個元素
arr.push(100);
console.log ( arr );//[10,20,100]
//4.翻轉數組
var newArr = arr.reverse();
console.log ( newArr );//[100,20,10]
//5.刪除數組的第一個元素
arr.shift();
console.log ( arr );//[20,10]
//6.查找一個數組中的某些元素
var arr1 = [10,20,70,40,50,60];
// 第一個參數：start：從那一個下標開始查找 若是爲負數則倒着查找
//第二個參數： end ： 結束位置 start <= 範圍 < end
console.log ( arr1.slice ( 1, 3 ) );//
//7.數組排序
//數組排序方法的參數是一個回調函數：告訴數組內置對象你的排序規則
//從小到大排序
var sortArr = arr1.sort(function (a,b)
{
return a - b
});
console.log ( sortArr );//從小到大
console.log ( sortArr.reverse () );//從大到小 （將從小到大排序好的數組翻轉一下便可）
</script>
複製代碼
String對象
字符串恆定性
- 字符串恆定性：字符串不能夠被修改的，通常調用字符串api的時候使用新的變量來接收
- 字符串恆定性原理
- 在內存中有一塊專門的內存空間區域負責存儲字符串(字符串常量區)
- 當咱們聲明一個字符串的時候，編譯器會先去這個區域尋找有沒有該字符串，若是有就直接取出來，沒有就新開闢空間 至關於緩存機制
- 這塊內存空間中的字符串一旦被建立，是不能夠被修改的
- 字符串恆定性注意點(舉例)
- var str1 = 'abc' 先去字符串常量區尋找有沒有叫作abc的字符串，沒有就建立
- str1[0] = 'b' 修改無效
- str1 = 'cba'; 修改有效，由於我修改的是str1這個變量存儲的數據，而不是改abc這個字符串
- var str2 = 'cba' 這行代碼效率極高，至關於str2 = str1，編譯器不會從新開闢內存空間，而是從已有的字符串中尋找
- str2 += 'abc' 能夠修改，這行代碼至關於將'cba' + 'abc'拼接以後的新字符串賦值給str2
<script>
//string恆定性：字符串是不能夠被修改的
//驗證:字符串是不能夠被修改的
var str = '飛飛哥我愛你';
str[3] = '恨';
console.log ( str );
//結論：調用字符串任何的API的時候，都用新的字符串去接收
var str1 = str.replace('我愛你','麼麼噠');
//生成一個新的
console.log ( str1 );//字符串的任何API都是返回一個新的字符串，不能改變自身的
console.log ( str );//字符串不可修改
//容易混淆：遍歷賦值操做與字符串恆定性搞混淆
var s1 = 'abc';
s1 += 'bbb';//這行代碼的意思不是去修改abc，而是將abc+bbb拼接的新字符串賦值給s1
console.log ( s1 );//abcbbb
</script>
複製代碼
字符串經常使用API介紹
- 獲取字符串長度:str.length
- 獲取字符串某一個下標字符:str.charAt()
- 拼接字符串:str.concat
- 判斷字符串中是否包含某些字符串:str.indexOf()
- 截取字符串:str.substr()
- 修改字符串:str.replace()
- 大小寫轉換:str.toLowerCase()小寫 str.toUpperCase()大寫
- 分隔字符串：str.split()
<script>
//字符串經常使用API介紹
var str = "愛你麼麼噠!";
//1 獲取字符串長度
var length = str.length;
console.log ( length );
//2 獲取字符串某一個下標字符 （字符串至關於一個僞數組）
console.log ( str[ 4 ] );
console.log ( str.charAt(4) ); charAt(下標)函數至關於`字符串[下標]`
//3 拼接字符串
var str1 = str.concat("今晚一塊兒吃雞");//這行代碼等價於 var str1 = str + "今晚一塊兒吃雞";
console.log ( str );
console.log ( str1 );
//4 判斷一個字符串在不在某個字符串裏面
var index1 = str.indexOf("愛");//若是存在，則返回參數字符串首字母所在的下標
var index2 = str.indexOf("你");
var index3 = str.indexOf("喲");//若是不存在，則返回 -1
console.log ( index1, index2, index3 );
//5 截取字符串 第一個參數：從哪一個下標開始截取 第二個參數：截取的長度
var str2 = str.substr(2,4);
console.log ( str2 );
//6 修改字符串 第一個參數：要修改的字符串 第二個參數：修改後的字符串
var str3 = str.replace("噠","啪");
console.log ( str );
console.log ( str3 );
//7 大小寫轉換 (只有英文才有大小寫，中文不存在大小寫)
console.log ( "AKlkshflsLKJHDHL".toLowerCase () );//轉爲小寫 aklkshflslkjhdhl
console.log ( "AKlkshflsLKJHDHL".toUpperCase () );//轉爲大寫 AKLKSHFLSLKJHDHL
console.log ( "中文不存在大小寫".toLowerCase () );//轉爲小寫
//8 分隔字符串:將字符串按照指定的符號分隔，獲得一個數組
var str4 = "我&愛&你";
//這個函數的返回值必定是一個數組
var arry = str4.split("&");//以&符號分隔字符串 [我,愛,你]
console.log ( arry );// [我,愛,你]
console.log ( str4.split ( ":" ) );//["我&愛&你"] 若是字符串中沒有這個分隔符 也會獲得一個數組
</script>
複製代碼
json對象簡介
- json對象與js對象外觀上惟一的區別： json對象的屬性和值都須要雙引號，js對象不須要
- 爲何要有json對象：由於在實際開發中，後臺並非只是爲了前端服務，他們還須要爲android和ios服務 若是直接返回一個js對象，那麼其餘語言沒法轉換，爲了統一，因此會返回給咱們一個json對象，這樣前端/安卓/ios均可以識別
/**
* json對象與js對象外觀上惟一的區別： json對象的屬性和值都須要雙引號，js對象不須要
* 爲何要有json對象：由於在實際開發中，後臺並非只是爲了前端服務，他們還須要爲java和ios服務
若是直接返回一個js對象，那麼其餘語言沒法轉換，爲了統一，因此會返回給咱們一個json對象，這樣前端/安卓/ios均可以識別
*
*/
//後臺一般返回數據是一個json對象：爲了讓不一樣語言的平臺達到數據統一性
//1.json對象，不管鍵仍是值，不管什麼數據類型須要雙引號（不識別數據類型，都是字符串）
var json = {
"name" : "張三",
"age" : "18",
}
//2.js對象是javascript語言中的對象(識別數據類型)
var js = {
name : "張三",
age : 18,
}
//他們在打印的時候都是object對象類型，幾乎沒什麼區別
console.log ( json );
console.log ( js );
複製代碼
只有對象纔有點語法，爲何字符串也可使用點語法呢？
<script>
/*1.只有對象纔有點語法，爲何字符串也可使用點語法呢？
* 2.基本包裝類型：爲了方便操做基本數據類型，JavaScript還提供了三個特殊的引用類型：String/Number/Boolean
* `new String()`
* `new Number()`
* `new Boolean()`
* 三種基本包裝類型中，Number與Boolean基本不用，最經常使用的就是string對象
* 3.基本包裝類型的工做原理：瞭解便可
* （1）基本數據類型調用函數API時，會先把基本數據類型包裝成臨時的對象
* （2）而後這個對象調用函數
* （3）調用完函數以後再銷燬對象
*/
// //基本包裝類型： Number(),String(),Boolean()
var num = 10;
//上面這行代碼，至關於編譯器幫咱們作了一件事： var num = new Number(10)
num.toString() ;
var bol = true;//var bol = new Boolean(true)
bol.toString();
var str = 'abcd';//var str = new String('abcd')
str.toString();
</script>
複製代碼
js基礎補充
js轉義符
轉義符：改變原來符號的做用就叫轉義符
/**
* 轉義符： `\` 改變原來符號的做用就叫轉義符
* \" :輸出雙引號 * \t:水平製表符，說人話就是多打幾個空格 * \n:換行符 * \\:顯示一個\ * */ console.log ( "出來混了\\那麼多年，從最開始的3萬，到後來的五萬，最後十五萬，\n我也\"沒有\"想到\t我最後會欠這麼多錢");//出來混了\那麼多年，從最開始的3萬，到後來的五萬，最後十五萬，
//我也"沒有"想到 我最後會欠這麼多錢
複製代碼
逗號運算符
- 逗號運算符: ,
- 逗號表達式:(表達式1，表達式2，表達式3.............)
一般與小括號一塊兒使用，逗號用於鏈接算式 - 運算規則: （1）逗號運算符鏈接的每個式子都會執行 （2）逗號運算式的結果是最終一個式子的結果
<script>
/**
* 1.逗號運算符: ,
* 2.逗號表達式：(表達式1，表達式2，表達式3.............)
* 一般與小括號一塊兒使用，逗號用於鏈接算式，逗號
* 3.運算規則：
* （1）逗號運算符鏈接的每個式子都會執行
* （2）逗號運算式的結果是最終一個式子的結果
*/
var n1 = 10;
var n2 = 20;
var res = (n1++, n1 + n2);
// 10/11 , 11 + 20
console.log ( res );//31 逗號運算符的結果是最後一個算式的結果
console.log ( n1 );//11
console.log ( n2 );//20
</script>
複製代碼
相關文章
- 1. 【溫故而知新】JS基礎知識梳理（1）
- 2. 溫故而知新——JavaSE基礎
- 3. Python基礎語法溫故知新
- 4. 溫故知新
- 5. mysql溫故知新
- 6. 溫故與知新
- 7. 溫故而知新
- 8. 溫故知新-x++
- 9. 溫故知新一
- 10. java基礎io流——OutputStream和InputStream的故事（溫故知新）
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（二）基本類型
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 【溫故而知新】JS基礎知識梳理（1）
- 2. 溫故而知新——JavaSE基礎
- 3. Python基礎語法溫故知新
- 4. 溫故知新
- 5. mysql溫故知新
- 6. 溫故與知新
- 7. 溫故而知新
- 8. 溫故知新-x++
- 9. 溫故知新一
- 10. java基礎io流——OutputStream和InputStream的故事（溫故知新）