原生javascript知識點
JAVASCRIPT
1.變量
1.1概念
變量源於數學，是計算機語言中存儲計算結果或表示值抽象概念javascript
計算機有個地方叫內存，變量都會將值存入到內存中，變量就是指向這個值的名字php
1.2命名規則
1. 由字母數字下劃線和$組成 2. 不能以數字開頭 3. 嚴格區分大小寫 4. 不能使用關鍵字和保留字
關鍵字和保留字
ECMA-262第3版描述的關鍵字css
| break | do | instanceof | typeof |
|---|---|---|---|
| case | else | new | var |
| catch | finally | return | void |
| continue | for | switch | while |
| debugger* | function | this | with |
| default | if | throw | delete |
| in | try |
ECMA-262第3版描述的保留字html
| abstract | enum | int | short |
|---|---|---|---|
| boolean | export | interface | static |
| byte | extends | long | super |
| char | final | native | synchronized |
| class | float | package | throws |
| const | goto | private | transient |
| debugger | implements | protected | volatile |
| double | import | public |
ECMA-262第5版本非嚴格模式java
| class | enum | extends | super |
|---|---|---|---|
| const | export | import |
ECMA-262第5版嚴格模式node
| implements | package | public | interface |
|---|---|---|---|
| private | static | let | protected |
| yield |
2.數據類型
2.1字符串string
- 概念：由零個或者多個16位Unicode字符組成的字符序列。
- 定義方式：使用單引號''和雙引號""定義字符串
單雙引號的特色es6
- 單雙引號沒有區別，都不解析變量
- 單雙引號能夠相互嵌套
- 不能夠嵌套自身，除非使用轉義字符\轉義
// 單引號 var str1 = '老闆，瓜甜嗎？'; // 雙引號 var str2 = "滾犢子，這是苦瓜"; // 關於單引號嵌套雙引號 var str3 = '王健林說："先定一個小目標，先賺它一個億"'; // 雙引號嵌套單引號 var str4 = "俊哥說本身很'帥'，你們都笑了"; // 關於嵌套自身 var str5 = ''單引號'' // 最外層的一組單引號定義字符串，內層的一組單引號做爲普通單引號字符串，爲了不語法報錯和歧義，使用轉義字符轉義
特色：面試
1. 字符串是不能夠改變的，一旦建立，值不能改變，若是改變，要先銷燬原來的字符串，用新值填充ajax
var name = '俊哥'; name += '很帥'; // 俊哥很帥
2.轉爲字符串正則表達式
第一種方法： str.toString() 除null和undefined以外，全部的數據均可以經過 數據.toString()轉爲字符串 //會報錯 第二種方法： String():將任何值均可以轉爲字符串 對象=>字符串：[Object Object] 其餘數據=>原型輸出3.特殊字符串
\n 換行 \t 製表符 \r 回車 \ 斜槓(\有轉義的意思，須要展現,使用\轉義自身) \unnnn 16進制代碼nnnn表示一個Unicode字符(n爲0-F)
2.2 數值（Number）
1. 整數
// 十進制
var num1 = 12;
// 八進制(第一位必須是0)
// 0 1 2 3 4 5 6 7 10 11 12 13 14 15 16 17 20 21 22 23 24
var num2 = 070; // 等價於 十進制56
注意：八進制在嚴格模式下報錯
// 十六進制(第一位必須是0x)
// 0 1 2 3 4 5 6 7 8 9 a b c d e f 10
var num3 = 0xA; // 等價於 十進制10
注意：八進制和十六進制的數值最終都會轉換爲十進制數值進行 算數計算
2. 浮點數
var num1 = 1.1; var num2 = 0.8; var num3 = .4; // 不推薦 注意： 1. 0.1 + 0.2 = 0.30000000000000004 2. 0.8 - 0.2 = 0.20000000000000007 這是基於IEEE754的數值進行計算的通病，有計算損耗 因此：請不要使用浮點數進行精確計算
3. NaN(Not a Number)
概念：表示一個原本要返回數值的操做數未返回數值的狀況（這樣就不會拋出錯誤了）
3 - 'a' // 不知道結果，NaN 4 * 'b' // 不知道結果，NaN 5 / 'z' // 不知道結果，NaN 4 + 'x' // 結果：4x（此時+ 是鏈接運算符）
4. 其餘數據轉換爲數值
Number轉換規則
字符串=>數值 ''=>0 純數字字符串=>原型輸出(***) 普通字符串=>NaN(***) '0xf'=>15(支持十六進制字符串轉換爲十進制) 布爾值=>數值(***) true=>1 false=>0 數值=>數值 原型輸出 null=>0(***) undefined=>NaN(***) 對象=>數值 調用對象的valueOf()方法進行檢測，檢測結果是NaN 繼續調用對象toString()方法，再按前面的規則返回字符串值
parseInt轉換規則
從第一個字符開始查找，直到找到第一個非法數字截止，找到的便是轉換結果 'abc'=>NaN '23ab'=>23 true=>NaN null=>NaN '32.18'=>32 undefined=>NaN 特殊： '0xf'=>15(能夠轉換16進制) 進制之間的轉換 parseInt('10',2) // 2 parseInt('10',8) // 8 parseInt('10',10) // 10 parseInt('10',16) // 16 parseInt('AF',16) // 175parseFloat轉換規則
從第一個字符開始查找，直到找到第一個非法字符（除數字和第一個小數點）截止，找到的便是轉換結果 'abc'=>NaN '23ab'=>23 true=>NaN null=>NaN undefined=>NaN 25=>25 '32.18'=>32.18
2.3 布爾值（Boolean）
true：真
false：假
只有如下7個值轉換爲布爾值爲假，其餘爲真
'' //空字符 0 0.0 NaN false null undefined
2.4 未定義（undefined）
- 未定義的變量
- 定義可是未賦值的變量
// 定義可是未賦值 var str; console.log(str); // undefined // 由typeof 檢測未定義的變量 console.log(typeof abc); // undefined 若是不用typeof檢測，直接打印輸出一個未定義的變量，在JS中會直接報錯
注意：兩種未定義的狀況
console.log(a); //若是a在整個代碼中都未定義過，那麼JS報錯a is not defined
console.log(a); //程序都是順序執行，雖然a仍是未定義，可是整個代碼中有a的存在，程序不會報錯，執行出來是undefined
var a;
跟函數比較類似
瀏覽器在執行script代碼的時候，先將script內部的函數和變量值所有"登記"，而後纔去執行具體的每一行代碼
執行到console.log(abc)的時候，沒有"登記"過abc，則abc直接報錯，說沒有定義該變量，並且終止了代碼的執行
執行到第一個console.log(a)的時候，曾經"登記"過a變量，可是a變量在下面定義的，因而瀏覽器認爲說a屬於定義了可是未賦值的狀態，就賦值爲undefined， 不會報錯
函數跟變量不同的地方是：
函數提早登記以後，能夠直接提早調用，可是變量值提早調用只是不報錯，拿不到下面定義的值
2.5 對象（object）
null
console.log(typeof null);
array數組
var arr = ['a','b','c']; console.log(typeof arr);
對象
var obj = {}; console.log(typeof obj);
屬性Object.keys(傳入的對象); 而且以數組形式輸出
var obj = {a:1,b:2,c:3}
Object.keys(obj) //['a','b','c']
2.6 函數（function）
function demo(){}console.log(typeof demo); // function
3. 運算符
3.1 算術運算符
1. 普通算數運算符: + - * / %
var num1 = 8;
var num2 = 5;
console.log(num1 + num2); // 13
console.log(num1 - num2); // 3
console.log(num1 * num2); // 40
console.log(num1 / num2); // 1.6
console.log(num1 % num2); // 3 等價於 8/5=1...3
注意：當/ % 的除數爲0時,5/0 5%0 測試結果爲Infinity Infinity 無窮大的意思
當/ % 的除數爲0時 測試類型是 typeof(5/0) 或typeof(5%0) 爲NaN
2. 特殊算數運算符: ++ --
- 認識++和--
// ++:讓自身自增1
var num1 = 5;
num1++;
console.log(num1); // 6
var num2 = 8;
++num2;
console.log(9);
// --:讓自身自減1
var num3 = 4;
num3--;
console.log(num3); // 3
var num4 = 2;
--num4;
console.log(num4); // 1
總結：
1.i++,i-- 是先運算在+ -
++i，--i是先+ -,再運算
2. 無論++在變量以前，仍是在變量以後，都是讓自身增長1
無論--在變量以前，仍是在變量以後，都是讓自身減少1
- 區分++/--在前和在後的區別
var num1 = 5;
// num1++:++在變量num1以後，先執行console.log,再執行自身自增1
console.log(num1++); // 5
console.log(num1); // 6
var num2 = 3;
// ++num2:++在變量num2以前，先執行自身自增1，在執行console.log
console.log(++num2); // 4
console.log(num2); // 4
// 舉例
var num3 = 4;
var num4 = 8;
// 解釋：num4++(++在後)，num4會先和num3運算得出計算結果，而後自身再自增1爲9，因此+運算的結果是12，運算結束num4的值變爲9
console.log(num3 + num4++); // 12
console.log(num3,num4); // 4 9
總結：
2. ++在變量前，先自增1再運算
++在變量後，先運算再自增1
--在變量前，自減1再運算
--在變量後，先運算再自減1
==============================================
注意：這裏你們會考慮，都算完了，再自減1有毛線的做用?
減1以後，對以後的運算會產生影響，請看例子
var num5 = 1;
var num6 = 3;
console.log(num5 + num6++ + num6); // 1 + 3 + 4 = 8
第一個+運算執行的是：1 + 3
num6++:自身自增1
第二個+運算執行的是：4 + 4(中間num6++，num6變爲了4)
==============================================
3.2 賦值運算符 = += -= *= /= %=
// 將4賦值給num變量 var num = 4; console.log(num); // 4 // 將num1自增5，再賦值給自身 var num1 = 3; num1 += 5; // 等價於 num1 = num1 + 5 console.log(num1); // 8 // 將num2自減5，再賦值給自身 var num2 = 14; num2 -= 5; // 等價於 num2 = num2 - 5 console.log(num2); // 9 // 將num3自乘5，再賦值給自身 var num3 = 3; num3 *= 5; // 等價於 num3 = num3 * 5 console.log(num3); // 15 // 將num4自除5，再賦值給自身 var num4 = 10; num4 /= 5; // 等價於 num4 = num4 / 5 console.log(num4); // 2 console.log(typeof 7/0) //NaN // 獲取num5跟5取餘的結果，再賦值給自身 var num5 = 13; num5 %= 5; // 等價於 num5 = num5 % 5 console.log(num); // 3 console.log(typeof 7%0) //NaN
3.3 比較運算符 == === != !== > < <= > >=
1. 相等比較:== ===
var num1 = 3; var num2 = 3; console.log(num1 == num2); // true var num3 = 4; var num4 = 2; console.log(num3 == num4); // false var num5 = 7; var num6 = '7'; // ==:只比較值大小，不比較類型 console.log(num5 == num6); // true var num7 = 7; var num8 = '7'; // ===:比較值和類型，都相等結果爲true console.log(num7 === num8); // false // 特例 console.log(null == undefined); // true console.log(null === undefined); // false null==0 //false 0==undefined //false
2. 不相等比較: != !==
var num1 = 4; var num2 = 5; console.log(num1 == num2); // false // num1和num2不相等返回true console.log(num1 != num2); // true var num3 = 3; var num4 = '3'; console.log(num3 === num4); // false // num3和num4值和類型有一個不相等返回true console.log(num3 !== num4); // true
3. 大於小於比較: > >= < <=
var num1 = 5; var num2 = 19; console.log(num1 > num2); // false // num1>num2成立或者num1==num2成立均可以返回true console.log(num1 >= num2); // false console.log(num1 < num2); // true // num1<num2成立或者num1==num2成立均可以返回true console.log(num1 <= num2); // true
3.4 邏輯運算符
1. 邏輯與:&& - 兩真爲真，其他都爲假
console.log(true && true) // true console.log(true && false) // false console.log(false && true) // false console.log(false && false) // false
本質是：
// 將&&兩側的值"隱式"轉爲布爾值進行判斷
console.log(3 && 'a') // a
console.log('abc' && 23) // 23
console.log('abcd' && null); // null
console.log(0 && '麼麼噠') // 0
***console.log(undefined && null) // undefined***
***注意：
若是&&兩側都爲真，那麼之後面的爲結果；
若是&&兩側都爲假，那麼之前面的爲結果。
2. 邏輯或:|| - 兩假爲假，其他都爲真
console.log(true || true); // true console.log(true || false); // true console.log(false || true); // true console.log(false || false);// false
本質是：
console.log(23 || 8); // 23
console.log('ab' || null) // ab
console.log(undefined && '萌萌噠'); // 萌萌噠
console.log(null && undefined); // undefined
*注意:
若是||兩側都爲真，那麼之前面的爲結果
若是||兩側都爲假，那麼之後面的爲結果
3. 取反
console.log(!true); // false console.log(!false);// true
本質是：
console.log(!23); // false console.log(!null); // true console.log(!0); // true
3.5 條件運算符（三元運算符）
var result = 布爾值 ? 布爾值爲真走這 : 布爾值爲假走這; var result = 5 > 3 ? '婚姻大事全憑父母作主' : '小女子還想侍奉父母兩年'; console.log(result); // 婚姻大事全憑父母作主
3.6 特殊的+：鏈接運算符
1.特殊1：+
var num1 = 3; var num2 = 'a'; var num3 = 8; console.log(num1 - num2); // NaN console.log(num1 * num2); // NaN console.log(num1 / num2); // NaN // +兩邊有非數字'a',取鏈接運算 console.log(num1 + num2); // 3a // +兩邊是純數字，取加法運算 console.log(num1 + num3); // 11 var num4 = 5; num4 += 13; // num4的值爲18 num4 += 'abc'; // num4的值變爲18abc
2. 特殊2：- * /
var num1 = 12;
var num2 = '5'；
console.log(num1 - num2); // 7
console.log(num1 * num2); // 60
console.log(num1 / num2); // 2.4
console.log(num1 % num2); // 2
總結：
除+以外，其他的運算符，在進行純數字運算的時候，正常運算
3.特殊的+
var num1 = '5'；
// 將字符串類型的num1變爲數字
console.log(+num1); // 5
console.log(+num1+12); // 17
console.log(3+ +num1); // 8
總結：
在純數字字符串前多寫一個+，能夠將字符串類型的數字變爲數值類型的數字
3.7 運算符優先級
| 優先級 | 運算符 |
|---|---|
| 12 | 成員訪問(obj.username)、數組訪問(arr[1])、new(new Person)、函數調用(demo()) |
| 11 | 後置遞增(num++)，後置遞減(num--) |
| 10 | 取反(!) 前置遞增(++num) 前置遞減(—num) typeof void delete |
| 9 | 乘法(*) 除法(/) 取餘(%) |
| 8 | 加法(+) 減法(-) |
| 7 | < <= > >= in instanceof |
| 6 | == != === !== |
| 5 | 邏輯與(&&) |
| 4 | 邏輯或(||) |
| 3 | 三元運算符(? :) |
| 2 | 賦值運算符(= += -= *= /= %=) |
| 1 | 逗號(,) |
4.流程控制
4.1 順序分支
代碼從上向下執行
4.2 條件分支
1. if條件分支（具體值和範圍判斷均可）
// 定義變量
var age = 24;
// 只有if判斷
if (age < 18) {
console.log('小弟弟，你好小');
}
// if...else...判斷
if (age < 18) {
// 當年齡小於18歲的時候，執行此段代碼
console.log('年齡小於18歲');
} else {
// 當年齡大於等於18歲的時候，執行此段代碼
console.log('年齡大於18歲');
}
// if...else if...else...
if (age < 18) {
console.log('年齡小於18歲');
} else if (age >= 18 && age < 24) {
console.log('年齡在18(包含)到24(不包含)歲之間');
} else if (age >= 24 && age < 30) {
console.log('年齡在24(包含)到30(不包含)歲之間');
} else {
console.log('年齡大於等於30歲');
}
2. switch語句（具體值判斷）
// 將數值轉換爲具體的星期
var week = 3;
switch (week) {
case 1:
console.log('星期一');
break;
case 2:
console.log('星期二');
break;
case 3:
console.log('星期三');
break;
case 4:
console.log('星期四');
break;
case 5:
console.log('星期五');
break;
case 6:
console.log('星期六');
break;
case 7:
console.log('星期日');
break;
default:
console.log('輸入的數據有誤');
}
利用break進行合理的合併處理
var month = 1;
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
console.log('31天');
break;
case 4:
case 6:
case 9:
case 11:
console.log('30天');
break;
case 2:
console.log('28天');
break;
default:
console.log('輸入的月份有問題');
}
月份是1 3 5 7 8 10 12的時候，程序輸出31天，並break(打斷)，再也不執行下面的代碼
月份是4 6 9 11的時候，程序輸出30天，並break(打斷)，再也不執行下面的代碼
若是都不是，程序輸出"輸入的月份有問題"
if (month == 1) {
} else if (month == 2) {
} else if (month == 3) {
}
4.3 流程控制－循環語句
1. for循環
for (var i = 0; i < 10; i++) {
console.log(i);
}
2. while循環
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
3. do...while循環
var i = 0;
do {
console.log(i);
i++;
} while (i < 10);
不管條件是否成立，都先執行一次do中的代碼
4. break和continue語句
***break 若是在多層循環嵌套中，是終止當前層循環
*continue 是跳出當前循環，繼續執行當前層循環的下一次循環
// break:終止循環
for (var i = 0; i < 10; i++) {
if (i == 4) {
break;
}
console.log(i);
}
// 最終的結果是：0 1 2 3
// 跳過當前循環繼續執行下一次的循環
for (var i = 0; i < 10; i++) {
if (i == 4) {
continue;
}
console.log(i);
}
// 最終的結果是：0 1 2 3 5 6 7 8 9
5.函數
5.1 功能（爲何用）
- 減小代碼重複書寫的次數
- 提高開發效率，縮短開發時間
5.2 函數定義
1. 函數申明
// 1.定義普通函數
function demo(){
console.log('第一種定義函數方式');
}
// 調用函數
demo();
2. 匿名函數
// 使用1：函數表達式
var fun = function(){
console.log('第二種定義函數方式');
}
// 匿名函數第一種調用方式
fun();
// 使用2：匿名函數自調用
(function(){
console.log('匿名函數自調用');
})();
// 使用3：做爲其餘函數的參數
setTimeout(function(){
console.log('1s以後顯示在控制欄');
}, 1000)
3. 使用Function構造函數
var fun = new Function('x','y','console.log(x+y)');
fun(3,8)
4. 箭頭函數(ES6)
// 下面三個函數是一致的
var fun = function(a,b){return a+b;}
var fun = (a,b)=>a+b;
var fun = (a,b)=>{return a+b};
// 調用函數
fun(3,9);
5.3 特色
相關文章
- 1. Javascript知識點
- 2. javascript知識點
- 3. JavaScript 知識點
- 4. JavaScript知識點
- 5. javaScript知識點
- 6. Javascript 知識點
- 7. JavaScript 知識點(二)
- 8. JavaScript 小知識點
- 9. JavaScript原理知識
- 10. 如何開發原生的 JavaScript 插件(知識點+寫法)
- 更多相關文章...
- • JavaScript 指南 - 網站建設指南
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • ☆技術問答集錦（13）Java Instrument原理
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Javascript知識點
- 2. javascript知識點
- 3. JavaScript 知識點
- 4. JavaScript知識點
- 5. javaScript知識點
- 6. Javascript 知識點
- 7. JavaScript 知識點(二)
- 8. JavaScript 小知識點
- 9. JavaScript原理知識
- 10. 如何開發原生的 JavaScript 插件(知識點+寫法)