Js基礎知識總結

JavaScript總結

1.JavaScript基于對象和事件驅動，并且具有安全性能的用戶端腳本語言。它的組成由三部分組成：ECMAScript、DOM、BOM；

2.Java與JavaScript是兩種不同的語言，不論在概念還是設計上，Java由Sun發明，是更複雜的程式設計語言；ECMA-262是JavaScript标準的官方名稱，它由Brendan Eich發明；

3.JavaScript的使用：

**Html中的腳本必須放在`<script></script>`之間。** 
<1>:<script  type=“text/JavaScript”></script>；
<2>:<script  src="hello.js"></script>；
<3>:<input  type="text"  id="btu"  onclick="alert(Hello)"  />

補充：

JavaScript輸出：

JavaScript麼有任何列印或輸出的函數，但是可以通過不同的方法來輸出資料：

①使用window.alert() 彈出警告框

②使用document.write()方法将内容寫到HTML文檔中

③使用innerHTML寫入到HTML元素

④使用console.log()寫入到浏覽器的控制台

<head> 與 <body> 中的JavaScript：

可在Html文檔中放入不限數量的腳本；腳本可以位于 <body> 或者 <head>
中，或者同時存在于兩部分中。

JavaScript盡量在底部寫，防止擷取不到頁面上的元素。

變量的聲明和定義

var a=10；
（var表示關鍵字；a表示變量名；“=”表示指派符号；）

變量的命名規則：1>.變量是由數字、字母、下劃先(_)、和"$"的一種或者幾種組成，且不能以數字開頭，嚴格區分大小寫。2>.當變量賦的值為數值時，不要使用雙引号
“” ，若用引号包圍值，則該值會被作為文本來處理。3>.一條語句，多個變量，該語句用var開頭，并使用逗号隔開變量。 var name=“jhon”，age=20，job=“CEO”；聲明也可以跨行： var name=“jhon”， age=20， job=“CEO”； 關鍵字：ＥＣＭＡscript描述了一組特定用途的關鍵字，不能用作變量名，例如：if、else、do、while、for、in等。

6.Javascript資料類型：Number、Boolean、string、undefined、null、對象、數組。

JavaScript對象:對象有花括号{ }分隔，在括号内部，對象的屬性以名稱和數值對的形式來定義，屬性由逗号分隔。 var person={name=”bill“，lastname=”Gates“，id=5566}

7.undefined和null：

undefined 這個值表示不含有值，可通過将變量的值設為null來清空變量.(當聲明了一個變量，但未對其指派時，其資料類型為undefined) var un；alert（un）；//undefined

8.對字元串和數字進行加法運算：

若将數字和字元串相加，結果将成為字元串。

9.檢查資料類型的方式：typeof

typeof null //object

typeof Array //object

typeof new Date //object

typeof NaN //Number

10.parseInt與parseFloat：

parseInt() 解析一個字元串，傳回一個整數；

parseFloat() 解析一個字元串，傳回一個浮點數（整數部分+小數部分）；

11，将布爾值轉換為數字：

Number（false） //傳回0

Number（true） //傳回1

12.分支結構

if（條件）{

循環體（需要執行的代碼）

}

if（條件）{

循環體（需要執行的代碼）

}else{

條件不滿足時，需要執行的代碼

}

if（條件）{

}else if（條件）{

}else if（條件）{

}

else{

}

switch（n）{

case 1:

執行代碼塊1

break；

case 2:

執行代碼塊1

break；

default：

n與case1和case2不同時執行的代碼

}

13.循環結構：

循環：重複執行同一條代碼。得到相同或者不同的結果。

for（語句1，語句2，語句3）{

被執行的代碼塊

}

語句1：（代碼塊）開始前執行《可為多個值》；語句2：循環條件；語句3：增加初始變量的值的增量(在循環代碼塊已被執行之後執行)

while（條件）{

需要執行的代碼

}

do/while：是while的循環變體，該循環會在檢查條件是否為真之前執行一次代碼塊，然後若條件為真，就會重複這個循環。

文法：

do

{

需要執行的代碼塊

}

while(條件）；

注：不論條件是否為真，循環至少執行一次。

死循環：

1.循環條件永遠不成立；

for（var i=10；i<10; i++）{

console.log(“A”);

}

2.循環條件一直成立

for（var i=10；i>0; i++）{

console.log(“A”);

}

break與continue：

break用于跳出循環（結束整個循環），continue用于跳出循環中的一個疊代（結束本次循環）；

14.函數：由事件驅動或者被調用時可重複執行的代碼塊。

優點：減少代碼備援，增強其靈活性…

基本文法：

<1> function functionname(){函數體 }

<2> var 函數名=function(){函數體 }

<3> var 函數名=new Function(){函數體 }

函數的執行有兩種：1>事件驅動；2>調用；

函數的參數:

形參：在定義函數時，小括号裡放的變量；

實參：在函數調用時，小括号裡放到變量或值；

注意：實參與形參一一對應；有實參無形參，實參利用不上；有形參無實參，形參取undefined；

arguments：取到所有實參的集合，這個集合是一個類數組對象（僞對象）

return：函數的傳回值，結束函數執行。

若一個函數沒有顯示寫出return或者return後沒有具體的值，console.log（foo（））；//均為undefined

函數的作用域：變量或者函數起作用的範圍（區域）——>能被通路到的區域

全局作用域：最外層函數和最外層函數通過var來定義的變量

局部作用域：變量在函數内聲明，變量為局部作用域，隻能在函數内部進行通路

js變量聲明周期：在它聲明時初始化

1.局部變量在函數執行完畢時初始化

2.全局變量在頁面關閉後銷毀

遞歸函數：函數可以調用自身（在一個函數内部調用自身），函數自己在執行過程中，調用自己本身。（原理：自己調用自己，從後往前倒推）

利用遞歸 f（n）求前n項和

function num(n){
				if(n==1){
				return 1;
			}
				if(n==2){
				return 3;
			}
			return num(n-1)+n;
		}
		console.log(num(100)); //5050

補充：“随機數生成器（0-1之間）：Math.random();”

alert與return差別：(兩者結果相同)

1>.

function Sum(a,b)                     
    {
         return a+b;
    }
    var c = Sum(10,5);
    alert(c);

2>.

function Sum(a,b)
    {

         alert(a+b);
    }

日期時間函數（需要用變量調用）：

var a = new Date(); //擷取目前時間
a.getTime() //擷取時間戳
a.getFullYear() //擷取年份
a.getMonth()+1; //擷取月份
a.getDate() //擷取天
a.getHours() //擷取小時
a.getMinutes() //擷取分鐘
a.getSeconds() //擷取秒數
a.getDay() //擷取星期幾
a.getMilliseconds() //擷取毫秒

數學函數（用Math來調用）: >>eg： alert（Math.abs(-2)）

abs(x)     //傳回數的絕對值
ceil(x)     //對小數進行上舍入
floor(x)   //對數進行下舍入
round(x)  //把數四舍五入為最接近的整數
max(x,y) //傳回 x 和 y 中的最高值
min(x,y)  //傳回 x 和 y 中的最低值
pow(x,y) //傳回 x 的 y 次幂
sqrt(x)    //傳回數的平方根
random() //傳回 0 ~ 1 之間的随機數

字元串函數（用變量來調用）

eg：
var a="ssdlld";
var index1 = a. indexOf("l");
alert(index1);

15.數組：所謂數組，是有序的元素序列（一組有序資料）；

注：一般來說，數組中的元素類型相同。

表現形式就是記憶體中的一段連續的記憶體位址

數組的建立

1，字面量

var arr = [1, 2];//數組中有兩個元素

arr.length ;//擷取數組的長度

arr[i]擷取數組中的第i個元素，i稱為數組的下标或者索引，下标從0開始

arr[0]//擷取數組中的第一個元素

arr[0] = 100;//修改數組中第一個元素的值為100

2，構造函數方式建立數組

Array是一個構造函數，可以用它生成新的數組

var arr = new Array(2);

arr.length // 2

arr[0]//undefined

上面代碼中，Array構造函數的參數2，表示生成一個兩個成員的數組。

Array構造函數有一個很大的缺陷，就是不同的參數，會導緻它的行為不一緻。

// 單個非數值（比如字元串、布爾值、對象等）作為參數，

// 則該參數是傳回的新數組的成員

new Array(‘abc’) // [‘abc’]

// 多參數時，所有參數都是傳回的新數組的成員

new Array(1, 2) // [1, 2]

new Array(‘a’, ‘b’, ‘c’) // [‘a’, ‘b’, ‘c’]

可以看到，Array作為構造函數，行為很不一緻。是以，不建議使用它生成新數組，直接使用數組字面量是更好的做法。

數組的方法

1.push

push方法用于在數組的末端添加一個或者多個元素，并傳回添加新元素後的數組長度。

var  arr=[  ];
arr.push(1);//1
arr.push('a'); //2
arr.push(true,{ }); //4
arr      //[1,'a',true,{}]

2.unshift

unshift方法用于在數組的第一個位置添加元素，并傳回添加新元素後的數組長度。注意：該方法會改變原數組。

var a=['a','b','c'];
a.unshift('x');  //4
a  //['x','a','b','c']

3.shift

shift方法用于删除數組的第一個元素，并傳回該元素。注意：該方法會改變原數組。

var a=['a','b','c'];
a.shift()  //'a'
a //['b','c']

4.pop

方法用于删除數組的最後一個元素，并傳回該元素。注意：該方法會改變原數組。

var a=['a','b','c'];
arr.pop(); //'c'
arr   //['a','c']
對空數組使用pop方法，不會報錯，而是傳回undefined。

5.slice

slice方法用于提取目标數組的一部分，傳回一個新數組，原數組不變。 arr.slice(strat,end) 它的第一個參數為起始位置（從0開始），第二個參數為終止位置（但該元素本身不包括在内），如果省略第二個參數，則一直傳回到原數組的最後一個成員。

var a=['a','b','c'];

a.slice(0);  //['a','b','c']
a.slice(1);  //['b','c']
a.slice(1,2）；//['b']
a.slice(2,6);  //['c']

a.slice();  //['a','b','c']
上面代碼中，最後一個例子slice沒有參數，實際上就等于傳回一個原數組的拷貝。

注意：

如果slice方法的參數是負數，則表示倒數計算是位置。

var a = [‘a’, ‘b’, ‘c’];

a.slice(-2) // [“b”, “c”]

a.slice(-2, -1) // [“b”]

上面代碼中，-2表示倒數計算的第二個位置，-1表示倒數計算的第一個位置。

如果第一個參數大于等于數組長度，或者第二個參數小于第一個參數，則傳回空數組。

var a = [‘a’, ‘b’, ‘c’];

a.slice(4) // []

a.slice(2, 1) // []

數組的操作：

reverse/sort:

reverse方法用于颠倒排列數組元素，傳回改變後的數組（還是原數組），注意，該方法會改變原數組。

var a=[‘a’,‘b’,‘c’];

a,reverse() //[‘c’,‘b’,‘a’]

a //[‘c’,‘b’,‘a’]

sort方法對數組成員進行排序，預設是按照字典順序排序，排序後，原數組将被改變。 ['d',c','b','a'].sort() //['a','b','c','d']

['4',3','2','1'].sort()
//['1','2','3','4']

[11,101].sort();
//[101,11](注意：sort方法不是按照大小排序，而是按照字典順序，也就是說，數值會被先轉換成字元，在按照字典順序進行比較，是以101排在11前面)

例：可以将數組從小到大或者從大到小排序
var arr=[2,9,6,55,11,8,99];
arr.sort(function(){
	return a-b;   //小-----大
	//return  b-a;  //大-----小
});
console.log(arr);

join方法: 以指定參數作為分隔符，将所有數組成員連接配接為以字元串傳回，若不提供參數，預設用逗号，分隔；

如果數組成員為undefined或者null或者空位，全會被轉換成空字元串；

concat方法：将參數放入原數組後傳回，原數組本身不變，若參數是數組，将值提出來；

var arr=[1,2,3];
var a=arr.concat([4,5,6]);
console.log(a);//[1,2,3,4,5,6]
console.log(arr);//[1,2,3]

ES5 && string

1.嚴格模式：采用更加嚴格的JavaScript文法；

設計目的：①明确禁止一些不合理，不嚴謹的文法，減少JavaScript語言的一些怪異行為；②增加更多報錯的場合，消除代碼運作的一些不安全之處，保證代碼運作的安全；③提高編譯器效率，增加運作速度；④為未來新版本的JavaScript文法做鋪墊；

啟用方法：進入嚴格模式的标志，是一行字元串 “use strict”，也可以不在第一行，比如在注釋或者跟在第一個空的分号後面；

2.ES5新增數組的方法：

①indexof（）通常判斷一個數組中有沒有某個元素

②map 将數組的所有成員依次傳入參數函數，然後把每一次的執行結果組成一個新數組傳回；

③forEach 也是對所有數組成員依次執行參數函數，但是foreach方法不傳回值，隻用來操作資料；

④filter() 用于過濾數組成員，滿足條件的成員組成一個新數組傳回；

⑤some（）、every（）

⑥reduce（）依次處理數組的每個成員，最終累計為一個值

Event

1.擷取事件源：

var _target=e.target || e.srcElement;

2. 阻止事件冒泡的方式：

①e.stopPropagation();②e.cancelBubble=true（相容IE）；

3. 阻止浏覽器預設行為方式：

①e.preventDefault();----> w3c

②returnValue=false；-----> ie

③return false；

4.通過判斷鍵碼确定使用者按下那個鍵：

event.keyCode || event.which(老IE不支援)

5.監聽器的添加和移除：

添加：

①ele.addEventListener（“click”，fn，false）—事件前不加on；

②IE8及以下 attachEvent（on+事件名，fn）

移除：

①ele.removeEventListener（“click”，fn，false）—事件前不加on；

②IE8及以下 detachEvent（on+事件名，fn）

浏覽器相容性問題

在擷取DOM節點時高版本浏覽器和低版本浏覽器之間存在相容問題；在高版本的浏覽器中隻是擷取節點，會忽略文本内容，而在低版本的浏覽器中在擷取節點時會包含文本節點；
事件對象：在IE浏覽器中事件對象是window對象的一個屬性event，并事件對象隻能在事件發生時被通路，所有事件處理完後，該對象就消失了。在标準的DOM中規定事件處理函數的第一個參數為事件對象；
在IE中，事件的對象包含在event的srcElement屬性中，在标準的DOM浏覽器中，對象包含在target屬性中
在IE中取消事件傳遞（阻止冒泡）的方法為：window.event.cancelBubble=true;在非IE中取消事件傳遞（停止捕捉）的方法為stopPropagation();
擷取style CSS内聯樣式屬性值

//var w = window.getComputedStyle(box,null).width; //标準

//var h = box.currentStyle[“height”]; //IE8及以下的處理方式

function getStyle(dom,propertyName){

if(dom.currentStyle){

return dom.currentStyle[propertyName];

}else{

return getComputedStyle(dom,null)[propertyName];

}

}
事件監聽

标準: addElementListener(“click”,function(){},false);

IE：attachEvent(“onclick”,function(){});

function addEvent(dom,type,fn){

if(dom.addEventListener){

dom.addEventListener(type,fn);

}else{

dom.attachEvent(“on” + type,fn);

}

}

offsetLeft和style.left、offsetWidth和style.width的差別：

offsetLeft:是擷取節點對象相對于父元素的左側的距離，隻讀屬性傳回值不包含px機關

style.left：擷取的是css樣式的屬性，傳回的屬性值有px機關

offsetWidth：擷取一個節點對象的寬度

style.width：擷取的是css樣式的屬性，傳回的屬性值有px機關

常見的幾種擷取DOM元素的方法以及相容：

1．擷取第一個子節點：firstElementChild||firstChild;

2．擷取最後一個子節點：lastElementChild||lastChild;

3．擷取所有的子節點：childNode(包含文本節點)；children（擷取所有子節點，不包含文本節點）根據需要自己選擇；

4．擷取兄弟節點的上一個子節點：previousElementSibling||previousSibling;

5．擷取兄弟節點的下一個子節點：nextElementSibling||nextSibling;

6．擷取父節點：parentNode;

Js基礎知識總結

JavaScript總結

數組的建立

數組的方法

數組的操作：

ES5 && string

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條