個人javascript
JavaScript的簡介：javascript
一、定義：javascript是一門動態弱類型的解釋型編程語言，加強頁面動態效果，實現頁面與用戶之間的實時動態的交互。html
javascript是由三部分組成：ECMAScript、DOM、BOMjava
- ECMAScript由ECMA-262定義，提供核心語言功能（ECMA是歐洲計算機制造商協會）
- DOM(Document Object Model)文檔對象模型，提供訪問和操做網頁內容的方法和接口
- BOM(Browser Object Model)瀏覽器對象模型，提供與瀏覽器交互的方法和接口
二、文件的引入：python
外部文件引入：正則表達式
<script type"text/javascript" src="JS文件"></script>
存在於html的<head>或者<body>標籤中。編程
<script type"text/javascript">
Js代碼內容
</script>
三、javascript通常放在<body>標籤的底部數組
- HTML代碼從上到下執行，先加載CSS，避免html出現無樣式狀態；
- 將JavaScript代碼塊放在<body>最後，可讓網頁儘快的呈現給用戶，減小瀏覽者的等待時間，避免由於JS代碼塊阻塞網頁的呈現。
變量：瀏覽器
須要注意的是：局部變量必須以 var 開頭申明，若是不寫 var 則爲全局變量。閉包
<script type="text/javascript">
// 全局變量
name = 'mk';
function func(){
// 局部變量
var age = 18;
// 全局變量
gender = "man"
}
</script>
注：須要注意變量提高，就是把變量位置放到函數體的最上方。dom
運算符：
一、算術運算：
須要注意的是
"i++" == " i = i + 1" 先運算再賦值
"++i" == " " 先賦值再計算
1> 若是其中一個操做數是對象，則對象會轉換爲原始值：日期對象經過toString()方法執行轉換，其餘對象經過valueOf()方法執行轉換。若是結果還不是原始值，則再使用toString()方法轉換 2> 在進行了對象到原始值的轉換後，若是其中一個操做數是字符串的話，另外一個操做數也會轉換成字符串，進行字符串拼接 3> 兩個操做數都將轉換成數字或NaN，進行加法操做
===：表示不光是內容相等，並且類型也相等。
數據類型：
特殊值：
null 表示一個空的對象指針，長用來描述空值。
undefined 表示變量沒有被定義
一、數字
JavaScript中不區分整數和浮點數，全部數字均用浮點數值表示。
轉換：
- parseInt(..) 將某值轉換成整數，不成功則NaN
- parseFloat(..) 將某值轉換成浮點數，不成功則NaN
特殊值：
- NaN，非數字。可使用 isNaN(num) 來判斷。
- Infinity，無窮大。可使用 isFinite(num) 來判斷。
二、字符串：
轉移字符
\0 空字節 \n 換行 \t 製表 \b 空格 \r 回車 \f 進紙 \\ 斜槓 \' 單引號 \" 雙引號
三、布爾值：true || false
四、數組：相似於python中的列表
五、math
Math對象是一個靜態對象，而不是構造函數。實際上，Math只是一個由Javascript設置的對象命名空間，用於存儲數學函數。
做用是執行普通的算數任務。
常量 Math.E 常量e，天然對數的底數。 Math.LN10 10的天然對數。 Math.LN2 2的天然對數。 Math.LOG10E 以10爲底的e的對數。 Math.LOG2E 以2爲底的e的對數。 Math.PI 常量figs/U03C0.gif。 Math.SQRT1_2 2的平方根除以1。 Math.SQRT2 2的平方根。 靜態函數 Math.abs( ) 計算絕對值。 Math.acos( ) 計算反餘弦值。 Math.asin( ) 計算反正弦值。 Math.atan( ) 計算反正切值。 Math.atan2( ) 計算從X軸到一個點的角度。 Math.ceil( ) 對一個數上舍入。 Math.cos( ) 計算餘弦值。 Math.exp( ) 計算e的指數。 Math.floor( ) 對一個數下舍人。 Math.log( ) 計算天然對數。 Math.max( ) 返回兩個數中較大的一個。 Math.min( ) 返回兩個數中較小的一個。 Math.pow( ) 計算xy。 Math.random( ) 計算一個隨機數。 Math.round( ) 舍入爲最接近的整數。 Math.sin( ) 計算正弦值。 Math.sqrt( ) 計算平方根。 Math.tan( ) 計算正切值。
語句：
一、條件語句：
if：語句
if(條件){
}else if(條件){
}else{
}
switch語句：
switch(name){
case 'nick':
age = 18;
break;
case 'jenny':
age = 21;
break;
default :
age = 0;
}
二、循環語句：for、for in、while、do-while
for循環：
var names = ["nick", "jenny"];
for(var i=0;i<names.length;i++){
console.log(i); //索引
console.log(names[i]);
}
for in循環：
var names = ["nick", "jenny"];
for(var index in names){
console.log(index);
console.log(names[index]);
}
while循環：
while(條件){
// break;
// continue;
}
do while循環：
//循環的代碼至少執行一次，結果爲1
var num = 0;
do {
num++;
}while (num>10);
三、lable語句：
label 語句能夠理解爲跳出任意循環
//輸出結果爲95 <script> var num = 0; for (var i=0;i<10;i++) { for (var j=0;j<10;j++) { if (i==5 && j==5) { break; } num++; } } console.log(num); </script>
//輸出結果爲55 //i和j都循環爲到5時，跳出了兩層循環 <script> var num = 0; outPoint: for (var i=0;i<10;i++) { for (var j=0;j<10;j++) { if (i==5 && j==5) { break outPoint; } num++; } } console.log(num); </script>
四、異常處理：主動跑出異常 throw Error('xxxx')
try {
//這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
// 若是try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
//e是一個局部變量，用來指向Error對象或者其餘拋出的對象
}
finally {
//不管上述代碼怎麼，finally代碼塊始終會執行
}
函數：
在Javascript中函數有三種定義方式：
// 普通函數
function func(arg){
return true;
}
// 匿名函數
var func = function(arg){
return "nick";
}
// 自執行函數
(function(arg){
console.log(arg);
})('nick')
函數的參數：
函數傳參的個數能夠小於實際需傳參的個數，沒傳參的默認爲undefined
參數傳多默認不起做用
function man(name,age) {
console.log(name,age);
}
man("nk",18); //nk 18
man("nk"); //nk undefined
man("nk",18,19); //nk 18
arguments 可接收全部參數，返回一個數組
function man() {
console.log(arguments);
}
man("nk",18); //["nk", 18]
man("nk"); //["nk"]
man("nk",18,19); //["nk", 18, 19]
函數的做用域與做用域鏈：
注意：
在javascript中，沒有塊級做用域：
var name = 'nk';
(function Main(){
console.log(name);//undefined
if(1){
var name = 'jenny';
}
console.log(name);//jenny
})();
console.log(name);//nk
//輸出結果第一個爲undefined
//聲明需提早（Hoisting），在JavaScript引擎「預編譯」時進行，函數在被執行以前，會將其中的變量所有聲明,而不賦值
做用域鏈：
每一個構造函數都有一個內部對象指針，指向原型對象，而原型對象也包含一個指向構造函數的指針。如此層層遞進，造成做用域鏈條
var name = 'nk';
function Main() {
function F1(){
var name = 'jenny';
console.log(name);//jenny
}
function F2() {
console.log(name);//nk
}
F1();
F2();
}
Main();
// 從內到外的優先級尋找
// F2() 的做用域鏈爲 F2()-->Main()
閉包：
閉包就是可以讀取其餘函數內部變量的函數
function f1(){
var n=1;
Add=function(){
n++;
};
function f2(){
console.log(n);
}
return f2;
}
var result=f1();
result(); //1
Add();
result(); //2
//result就是閉包f2函數
//函數f1中的局部變量n一直保存在內存中，並無在f1調用後被自動清
閉包使函數中的變量都被保存在內存中，內存消耗大，因此少用閉包，不然會形成網頁的性能低，在IE中可能致使內存泄露。
因此在退出函數以前，將不使用的局部變量所有刪除
面向對象：
面向對象的三大特性:
封裝：隱藏代碼實現的細節，實現代碼的模塊化
繼承：擴展已經存在的代碼模塊，實現代碼重用
多態：接口的不一樣實現方式，實現接口重用
關鍵字：
this 代指此時的對象
new 建立對象時必須使用
構造函數模式：
function Foo (name,age) {
this.Name = name;
this.age = age;
this.Func = function () {
return this.Name + this.age
}
}
var obj = new Foo("nick",18);
var ret = obj.Func();
console.log(ret);
var obj2 = new Foo("jenny",21);
上述模式把一樣的函數封裝到了不一樣對象，形成了內存浪費。
原型模式（prototype）：
function Foo(name,age) {
this.Name = name;
this.Age = age;
}
Foo.prototype = {
GetInfo: function () {
var str = " is good";
return this.Name + str;
},
Func: function () {
return this.Name + this.Age;
}
};
var obj = new Foo("nick",18);
console.log(obj.Name);//nick
console.log(obj.Age);//18
var ret = obj.GetInfo();
console.log(ret);//nick is good
var ret2 = obj.Func();
console.log(ret2);//nick18
var obj2 = new Foo("nick",18);
全部的構造函數的prototype屬性都指向另外一個對象（同一塊內存地址），這個對象的全部屬性和方法，都會被構造函數的實例繼承。
Prototype模式的驗證方法：
1. isPrototypeOf()
用來判斷一個對象是否存在於另外一個對象的原型鏈中
Foo.prototype.isPrototypeOf(obj) true Foo.prototype.isPrototypeOf(obj2) true
2. hasOwnProperty()
用來判斷某一個對象(不包括原型鏈)是否具備指定屬性。
obj.hasOwnProperty('Name')
true
obj.hasOwnProperty('Age')
true
3. in運算符
判斷某個實例是否具備某個屬性
'Name' in obj true 'Age' in obj true
其餘：
一、序列化
- JSON.stringify(obj) 序列化
- JSON.parse(str) 反序列化
二、轉義
- decodeURI( ) URl中未轉義的字符
- decodeURIComponent( ) URI組件中的未轉義字符
- encodeURI( ) URI中的轉義字符
- encodeURIComponent( ) 轉義URI組件中的字符
- escape( ) 對字符串轉義
- unescape( ) 給轉義字符串解碼
- URIError 由URl的編碼和解碼方法拋出
三、eval
JavaScript中的eval既能夠運行代碼也能夠獲取返回值
a = eval('1+1');
console.log(a); //2
- eval()
- EvalError 執行字符串中的JavaScript代碼
四、正則表達式
var p = /nk/g;
console.log(p.test('nkjennynk')); // true
console.log(p.exec('nkjennynk')); // ["nk", index: 0, input: "nkjennynk"]
JavaScript中支持正則表達式，其主要提供了兩個功能：
- test(string) 用於檢測正則是否匹配
- exec(string) 用於獲取正則匹配的內容
匹配模式：
g:表示全局(global)模式，匹配全部字符串，不會匹配到第一項時中止
i:表示不區分大小寫(case-insensitive)模式
m:表示多行(multiline)模式，到達一行文本末尾時還會繼續查找下一行中是否存在匹配的項
括號分組：
console.log(/(n)k/.exec('nkjenny')); // console.log(/(n)k/.exec('nkjenny'))
console.log(/(n)k{2}/.exec('nkkjenny')); // ["nkk", "n", "i", index: 0, input: "nkkjenny"]
元字符 名稱 匹配對象
. 點號 單個任意字符(除回車\r、換行\n、行分隔符\u2028和段分隔符\u2029外)
[] 字符組 列出的單個任意字符
[^] 排除型字符組 未列出的單個任意字符
? 問號 匹配0次或1次
* 星號 匹配0交或屢次
+ 加號 匹配1次或屢次
{min,max} 區間量詞 匹配至少min次，最多max次
^ 脫字符 行的起始位置
$ 美圓符 行的結束位置
| 豎線 分隔兩邊的任意一個表達式
() 括號 限制多選結構的範圍，標註量詞做用的元素，爲反向引用捕獲文本
\1,\2... 反向引用 匹配以前的第1、第二...組括號內的表達式匹配的文本
匹配規則
\d 數字，等同於[0-9] \D 非數字，等同於[^0-9] \s 空白字符 \S 非空白字符 \w 字母、數字、下劃線，等同於[0-9A-Za-z_](漢字不屬於\w) \W 非字母、數字、下劃線，等同於[^0-9A-Za-z_]
五、時間處理：
時間操做中有兩種時間：
- 時間統一時間
- 本地時間（東8區）
Date 操做日期和時間的對象 Date.getDate( ) 返回一個月中的某一天 Date.getDay( ) 返回一週中的某一天 Date.getFullYear( ) 返回Date對象的年份字段 Date.getHours( ) 返回Date對象的小時字段 Date.getMilliseconds( ) 返回Date對象的毫秒字段 Date.getMinutes( ) 返回Date對象的分鐘字段 Date.getMonth( ) 返回Date對象的月份字段 Date.getSeconds( ) 返回Date對象的秒字段 Date.getTime( ) 返回Date對象的毫秒錶示 Date.getTimezoneOffset( ) 判斷與GMT的時間差 Date.getUTCDate( ) 返回該天是一個月的哪一天(世界時) Date.getUTCDay( ) 返回該天是星期幾(世界時) Date.getUTCFullYear( ) 返回年份(世界時) Date.getUTCHours( ) 返回Date對象的小時字段(世界時) Date.getUTCMilliseconds( ) 返回Date對象的毫秒字段(世界時) Date.getUTCMinutes( ) 返回Date對象的分鐘字段(世界時) Date.getUTCMonth( ) 返回Date對象的月份(世界時) Date.getUTCSeconds( ) 返回Date對象的秒字段(世界時) Date.getYear( ) 返回Date對象的年份字段(世界時) Date.parse( ) 解析日期/時間字符串 Date.setDate( ) 設置一個月的某一天 Date.setFullYear( ) 設置年份，也能夠設置月份和天 Date.setHours( ) 設置Date對象的小時字段、分鐘字段、秒字段和毫秒字段 Date.setMilliseconds( ) 設置Date對象的毫秒字段 Date.setMinutes( ) 設置Date對象的分鐘字段和秒字段 Date.setMonth( ) 設置Date對象的月份字段和天字段 Date.setSeconds( ) 設置Date對象的秒字段和毫秒字段 Date.setTime( ) 以毫秒設置Date對象 Date.setUTCDate( ) 設置一個月中的某一天(世界時) Date.setUTCFullYear( ) 設置年份、月份和天(世界時) Date.setUTCHours( ) 設置Date對象的小時字段、分鐘字段、秒字段和毫秒字段(世界時) Date.setUTCMilliseconds( ) 設置Date對象的毫秒字段(世界時) Date.setUTCMinutes( ) 設置Date對象的分鐘字段和秒字段(世界時) Date.setUTCMonth( ) 設置Date對象的月份字段和天數字段(世界時) Date.setUTCSeconds( ) 設置Date對象的秒字段和毫秒字段(世界時) Date.setYear( ) 設置Date對象的年份字段 Date.toDateString( ) 返回Date對象日期部分做爲字符串 Date.toGMTString( ) 將Date轉換爲世界時字符串 Date.toLocaleDateString( ) 回Date對象的日期部分做爲本地已格式化的字符串 Date.toLocaleString( ) 將Date轉換爲本地已格式化的字符串 Date.toLocaleTimeString( ) 返回Date對象的時間部分做爲本地已格式化的字符串 Date.toString( ) 將Date轉換爲字符串 Date.toTimeString( ) 返回Date對象日期部分做爲字符串 Date.toUTCString( ) 將Date轉換爲字符串(世界時) Date.UTC( ) 將Date規範轉換成毫秒數 Date.valueOf( ) 將Date轉換成毫秒錶示
相關文章
- 1. （五）個人JavaScript系列：JavaScript的糟粕
- 2. 個人javascript心跳機
- 3. 個人javascript學習路線圖
- 4. 7 個使人驚訝的 JavaScript 「特性」
- 5. JavaScript函數的個人筆記
- 6. 譯：如何構造個人JavaScript文件?
- 7. 個人第一篇博客 Javascript繼承
- 8. （四）個人JavaScript系列：原型鏈
- 9. 【JS迷你書】個人 JavaScript 世界觀
- 10. 細談JavaScript dom編程----個人筆記
- 更多相關文章...
- • JavaScript 指南 - 網站建設指南
- • 第一個MyBatis程序 - MyBatis教程
- • 再有人問你分佈式事務，把這篇扔給他
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. python的安裝和Hello，World編寫
- 2. 重磅解讀：K8s Cluster Autoscaler模塊及對應華爲雲插件Deep Dive
- 3. 鴻蒙學習筆記2（永不斷更）
- 4. static關鍵字 和構造代碼塊
- 5. JVM筆記
- 6. 無法啓動 C/C++ 語言服務器。IntelliSense 功能將被禁用。錯誤: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回碼狀態含義
- 8. Java樹形結構遞歸（以時間換空間）和非遞歸（以空間換時間）
- 9. 數據預處理---缺失值
- 10. 都要2021年了，現代C++有什麼值得我們學習的？
歡迎關注本站公眾號,獲取更多信息
