前端-Javascript

目錄

• JavaScript總結
  • JavaScript語言的基礎瞭解
  • JavaScript的引入方式
  • JavaScript的註釋和結束符
  • JavaScript的變量聲明
  • JavaScript的基礎數據類型
    • 數組(Number)
    • 字符串(String)
    • 布爾值(Boolean)
    • null與undefined
  • 對象(Object)
  • 複雜數據類型/引用數據類型
    • 數組(Array)
    • 自定義對象
  • 運算符
    • 算術運算符
    • 比較運算符
    • 賦值運算符
    • 邏輯運算符
  • 流程控制
    • if-else
    • switch-case
    • while與do-while
    • for
    • 三元運算
  • 函數
  • 面向對象
    • Date對象
    • Json對象
    • RegExp對象
    • Math對象
  • BOM+DOM

JavaScript總結

JavaScript語言的基礎瞭解

• JavaScript 是一種輕量級的編程語言，也是一門腳本語言，動態語言（不須要聲明數據類型），與python同樣。後來出現的node.js能夠做爲後端語言來開發項目，因此js是一個既能作前端又能作後端的語言

• 1996年11月，JavaScript的創造者--Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，1997年，ECMA發佈262號標準文件（ECMA-262）初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲ECMAScript

• ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現

  年份	名稱	描述
  1997	ECMAScript 1	第一個版本
  1998	ECMAScript 2	版本變動
  1999	ECMAScript 3	添加正則表達式 添加try/catch
  	ECMAScript 4	沒有發佈
  2009	ECMAScript 5	添加"strict mode"嚴格模式 添加JSON支持
  2011	ECMAScript 5.1	版本變動
  2015	ECMAScript 6	添加類和模塊
  2016	ECMAScript 7	增長指數運算符（**） 增長Array.prototype.includes

• 一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：

  • 核心（ECMAScript）

  • 文檔對象模型（DOM） Document object model (整合js，css，html)

  • 瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）

JavaScript的引入方式

• 第一種方式：放在< html >標籤中（< head>標籤、 body>標籤、 body>標籤外都行，但必定要在html標籤中）

  • 放在在< head>標籤中可能會存在錯誤：如找不到對應標籤，能夠經過onload事件解決，但麻煩
  • 因此，最後的辦法就是將< script >放在body標籤的最下面或者body標籤外

  <script>
    alert('第一個js代碼')  
  </script>

• 第二種方式：先建立一個.js文檔，而後經過外部引入的方式使用

  <script src='目標js文檔'></script>

• 還有一種能夠直接在瀏覽器下直接調試javascript代碼：f12打開瀏覽器的調試窗口，而後在console運行這個調試臺

  console.log('第一個js代碼')  /console.log表示打印內容，至關於python的print/

JavaScript的註釋和結束符

JavaScript單行註釋符:/ 內容 /      -----python的單行註釋符：#
JavaScript多行註釋符：/*多行內容*/  -----python的多行註釋符：'''多行內容'''或者"""多行內容"""
JavaScript結束符：;				  -----python沒有結束符，一行就是結束

JavaScript的變量聲明

• JavaScript的變量能夠由數字，字母，下劃線，$組成，但不能以數字開頭

  • 變量名區分大小寫
  • 變量名推薦使用駝峯命名法
  • 變量名不能使用保留字

  /保留字/
  abstract
  boolean
  byte
  char
  class
  const
  debugger
  double
  enum
  export
  extends
  final
  float
  goto
  implements
  import
  int
  interface
  long
  native
  package
  private
  protected
  public
  short
  static
  super
  synchronized
  throws
  transient
  volatile

• JavaScript變量聲明使用 var 變量名 進行聲明

  var id = 1;  /能夠分兩步，聲明變量var id;而後賦值id = 1，通常一步寫完/

JavaScript的基礎數據類型

數組(Number)

• JavaScript不區分整數和浮點數，統稱爲數組

  var a=1;		/必定要先var聲明再賦值/
  	undefined
  var b=3.1		/能夠不在末尾加;結束符，console會自動加上，但要養成加;的習慣/
  	undefined
  typeof(a);		/typeof用於查看類型/
  	"number"    
  typeof(b);
  	"number"

• 數組還包括還一個特殊的值NaN(Not a Number)：它表示不是一個數字，可是一個值

  parseInt('A');
  	NaN
  typeof(NaN)
  	"number"

字符串(String)

• 字符串的表示跟python有點相似，JS要var聲明

  var s='隨便什麼';
  	undefined
  s;
  	"隨便什麼"
  typeof(s);
  	"string"
  var s1='Hello';
  	undefined
  var s2=' World';
  	undefined
  s1+s2;				/可使用+對字符串進行拼接/
  	"Hello World"

• 類型轉換

  /字符串轉數值/
  parseInt('111');
  	111
  parseFloat('111.11');
  	111.11
  parseInt('AAA');
  	NaN

• 字符串經常使用方法

  .length     	  #獲取字符串的長度(不加括號的就是屬性，加括號的纔是方法)
  .trim()			  #刪除空白
  .trimLeft()       #刪除左邊空白
  .trimRight()      #刪除右邊空白
  .charAt(n)		  #經過索引找對應的值，n爲索引
  .indexOf('字符',n) #經過字符找對應的索引，n爲開始尋找的索引值，找不到就返回-1
  .concat('字符串')	#拼接字符串
  .slice(m,n)		  #對字符串進行切片，範圍爲[m,n)
  .toUpperCase()	  #將字符串字母所有變爲大寫
  .toLowerCase()	  #將字符串中字母所有變爲小寫
  .split('字符',m)   #將字符串從指定字符進行切分，m爲切分後顯示的字符串個數
  
  var s='hello world ';
  	undefined
  s.length;
  	12
  s.trim();
  	"hello world"
  s.trimRight();
  	"hello world"
  s.trimLeft();
  	"hello world "
  s.charAt(1);
  	"e"
  s.indexOf('o',5);
  	7
  s.concat('！！！');
  	"hello world ！！！"
  s.slice(0,5);
  	"hello"
  s.toUpperCase();
  	"HELLO WORLD "
  s.toLowerCase();
  	"hello world "
  s.split('o',1);
  	["hell"]
  s.split('o',2);
  	(2) ["hell", " w"]

布爾值(Boolean)

• JS的布爾值區別於python的布爾值，JS的布爾值爲true和false，python爲True和False

  var a=true;
  	undefined
  typeof(a);
  	"boolean"
  #注意：''、0、null、undefined、NaN都是false

null與undefined

#null表示值爲空，undefined表示只聲明瞭變量但未對變量賦值
//null通常用於指定或者清除某個變量時使用。
//undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有當函數無明確的返回值時，	return的也是undefined。通常var 變量名後都會顯示undefined，哪怕對變量賦了值

對象(Object)

• JavaScript一切皆對象，與python很類似，如數值、字符串、數組、函數等等，此外，JavaScript還容許自定義對象--{}

• JavaScript 提供多個內建對象，好比 Number、String、Date、Array 等等，經過new實例化的對象都是object類型，數組不須要new聲明，其自己類型就是object類型。

• 對象只是帶有屬性和方法的特殊數據類型。

  var a=new Number(1);   /經過new實現對象的聲明/
  	undefined
  typeof(a);
  	"object"
  #注意：null實際上是一種空的對象引用
  typeof(null);
  	"object"
  typeof(undefined);
  	"undefined"

複雜數據類型/引用數據類型

數組(Array)

• 建立數組有兩種方式

  #第一種方式
  var a=[1,2,3]
  	undefined
  typeof(a);
  	"object"	
  #第二種方式
  var b=new Array([1,2,3])
  	undefined
  typeof(a);
  	"object"

• 數組的方法和屬性

  .length       #獲取數組長度
  .push(x)	  #從數組尾部插入數據
  .pop()		  #從尾部刪數據
  .unshift(x)	  #從頭部插入數據
  .shift()	  #從頭部刪除數據
  .slice(m,n)	  #切片，[m,n)
  .reverse()	  #數組翻轉，會改變原數組
  .split('字符') #將數組按照字符進行拼接成一個字符串
  .concat(s1)	  #數組拼接，不改變原數組
  .sort()		  #數組按照大小排序，有坑，會改變原數組
  .splice(i,n,x)#對數組進行刪除和插值操做，i爲要刪除的位置，n爲日後刪除的個數，x爲插入的值
  #示例演示
  var a=[1,4,3,2];
  	undefined
  a.length;
  	4
  a.push(10);
  	5
  a.pop();
  	10
  a.unshift(0);
  	5
  a.shift();
  	0
  a.slice(1,3);
  	(2) [4, 3]
  a.reverse();
  	(4) [2, 3, 4, 1]
  a.join(',');
  	"1,4,3,2"
  a.concat([5,8,6]);
  	(7) [1, 4, 3, 2, 5, 8, 6]
  a.sort();
  	(4) [1, 2, 3, 4]
  a.splice(1,2,[5,6,7,8]);
  	(2) [2, 3]
  a;
  	(3) [1, Array(4), 4]

  #關於sort()的坑
  var a=[4,11,84,73]
  a.sort()
  	(4) [11, 4, 73, 84]
  function sortNumber(a,b){	#從小到大排列
      	return a - b;
  	}
  a.sort(sortNumber)
  	(4) [4, 11, 73, 84]
  function sortNumber(a,b){     #從大到小排列
      	return b - a
  	}
  a.sort(sortNumber)
  	(4) [84, 73, 11, 4]
  #解釋:
     若是想按照其餘標準進行排序，就須要提供比較函數，也就是本身提供一個函數提供排序規則，該函數要比較兩個值，而後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具備兩個參數 a 和 b，其返回值以下：
  　　若 a 小於 b，在排序後的數組中 a 應該出如今 b 以前，則返回一個小於 0 的值。
  　　若 a 等於 b，則返回 0。
  　　若 a 大於 b，則返回一個大於 0 的值。

  //注意
   var a=[1,2,3]
          for (var i in a)    //這裏的i只是取得索引
          {
              console.log(i)
          }

自定義對象

• 自定義對象相似於python中的字典

  建立一個自定義對象
  var a={"name":"tom","age":4};
  var a={name:"tom",age:4};  		 #JavaScript支持鍵不加引號，系統會默認補上
  
  遍歷自定義對象
  for (var i in d) {console.log(i,d[i]);}
  	name tom
  	age 4
  d.name;					#能夠經過.鍵的方式取值
  	"tom"

運算符

算術運算符

#算術運算符有+、-、*、/、%、++、- -
++：自增長，a=i++表示先a=i,而後再i=i+1，a=++i則是先i=i+1,而後再a=i
--：自增減，a=i--表示先a=i,而後再i=i-1，a=--i則是先i=i-1,而後再a=i

比較運算符

#比較運算符有<、<=、>、>=、==、!=、===、!===
==:弱等於，這種很差，不用，使用===
#1 == 「1」  // true 它會將將1轉換爲字符串'1',在=號兩個數據類型不一樣的時候，會自動給你變成相同的
！=：弱不等於，儘可能不用，使用！==
===：強等於
！==：強不等於

賦值運算符

#賦值運算符有=、+=、-=、*=、/=

邏輯運算符

#邏輯運算符有&&(與)、||(或)、！(非)

流程控制

if-else

var a=6;
if (a>6){
    console.log('大於六')
}else if(a<6){
    console.log("小於六")
}else{console.log('等於六')};
	等於六

switch-case

var a=90;
switch (a/10) 	#switch裏面能夠加變量或者表達式
{      
    case 6:console.log('成績爲60-69分'); break;
    case 7:console.log('成績爲70-79分'); break;  
    case 8:console.log('成績爲80-89分'); break;
    case 9:console.log('成績爲90-99分'); break;
    case 10:console.log('成績爲100分'); break;
    default:console.log('成績不及格'); break; 	#全部條件都不知足就執行default
};
	成績爲90-99分
#注意：break很重要，若是不加程序會繼續往下走，直到碰到一個break纔會中止

while與do-while

#while
var a=3;
while (a>0)    #符合條件則進入循環
{
    console.log(a);
    a--
};
#do-while
var a=3;
do
{
    console.log(a);
    a--
}
while (a>0);   #不知足條件就退出
#while與do-while的區別：當一開始就條件不知足的=時，while循環一次都不會執行，而do-while會先執行一次循環再結束

for

#for用於遍歷循環
#第一種方式
var a=[22,33,44];
for (var i in a)    
{
    console.log(i);
    console.log(a[i]);
};
#第二種方式
var a=[22,33,44];
for (var i=0;i<a.length;i++)
{
    console.log(i);
    console.log(a[i]);
};

三元運算

#三元運算 var c=a>b?a:b;  當a>b時將:前的值賦值給c，當a<b時將:前的值賦值給c
var a=1;
var b=2;
var c=a>b?a:b;
console.log(c);

函數

• JavaScript的函數與python中的函數很類似，在聲明時有區別

  #建立一個函數
  function func(a,b)    #使用function來進行函數聲明
  {
      return [a+b,a-b]  #當返回值爲多個值時必定要使用數組，不然只會返回第一個值
  };
  func(1,2);
  	(2) [3, -1]
  #沒有返回值時默認爲undefined
  function func1(a,b) {
      a=a+b;
  };
  var ret=func1(1,2)
  typeof(ret)
  	"undefined"
  #匿名函數，至關於python中的lambda函數
  var func1=function (a,b)
  {
      return a+b;
  }
  func1(1,2);
  #在ES6中匿名函數能夠寫成以下形式
  var func1=(a,b)=>a+b;   =>後面就是return的值

• 函數的全局變量與局部變量

  #局部變量：在JavaScript函數內部聲明的變量（使用 var）是局部變量，因此只能在函數內部訪問它（該變量的做用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。
  
  #全局變量：在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它。
  
  #變量生存週期：
  	JavaScript變量的生命期從它們被聲明的時間開始。
  	局部變量會在函數運行之後被刪除。
  	全局變量只有在頁面關閉後被刪除。

• 做用域

  #函數會首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。

• 閉包

  #與python中的閉包一致，內層函數對外層非全局變量的使用
  var a=1;
  function f(){
      var a=2;
      function inner(){
          console.log(a);
      }
      return inner;
  }
  var ret = f();
  ret();

面向對象

• 與python的類相似，ES5沒有類的概念，只有在ES6才引入了類的概念

• ES5的封裝方法

  function Person(name) {
      this.name=name;					  #定義對象的屬性，this至關於python的self
  }
  Person.prototype.max=function (a,b)   #定義對象的方法，pro
  {
      return c=a>b?a:b;
  };
      ƒ (a,b) 
      {
          return c=a>b?a:b;
      }
  var p=new Person('大黃');
  	undefined
  p.name;
  	"大黃"
  p.max(1,2);
  	2

Date對象

• date對象的基本操做

  var d1 = new Date(); //獲取當前時間
  console.log(d1.toLocaleString());  //當前時間日期的字符串表示
  	2020/6/12 下午5:03:29
  #方法2：參數爲日期字符串
  var d2 = new Date("2004/3/20 11:12");
  console.log(d2.toLocaleString());
  var d3 = new Date("04/03/20 11:12");  #月/日/年(能夠寫成04/03/2020)
  console.log(d3.toLocaleString());
  #方法3：參數爲毫秒數
  var d3 = new Date(5000);  
  console.log(d3.toLocaleString());   #輸出爲時間戳，從格林威治時間經歷了5000ms的時間
  console.log(d3.toUTCString());      #UTC與Locale相差8h 
  #方法4：參數爲年月日小時分鐘秒毫秒
  var d4 = new Date(2004,2,20,11,12,0,300);
  console.log(d4.toLocaleString());   #毫秒並不直接顯示

• date對象的其餘方法

  var d = new Date(); 
  #getDate()                 獲取日
  #getDay ()                 獲取星期 ，數字表示（0-6），週日數字是0
  #getMonth ()               獲取月（0-11,0表示1月,依次類推）
  #getFullYear ()            獲取完全年份
  #getHours ()               獲取小時
  #getMinutes ()             獲取分鐘
  #getSeconds ()             獲取秒
  #getMilliseconds ()        獲取毫秒
  #getTime ()                返回累計毫秒數(從1970/1/1午夜),時間戳

Json對象

• Json對象有兩個方法，JSON.parse( ) 與JSON.stringify( )

  var obj = {"name": "大黃", "age": 10};
  #對象轉換成JSON字符串  序列化
  var str = JSON.stringify(obj);
  str;
  	"{"name":"chao","age":18}"
  #JSON字符串轉換成對象  反序列化
  var obj1 = JSON.parse(str); 
  obj1;
  	{name: "chao", age: 18}   #返回的自定義對象{}的鍵不帶""

RegExp對象

• 使用正則表達式取尋找符合要求的字段，經常使用於用戶輸入時匹配，與python的re模塊相似

  #建立正則對象的方法
  	var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
  #簡寫方式:
  	var reg1 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
  
  
  #test方法.測試某個字符串是否符合正則規則
  	var s = 'hello'
  	reg1.test(s)            #符合返回True,不符合返回false
  	
  #一個坑:
  	reg1.test()             #裏面什麼也不寫,會默認放一個"undefined"字符串
  	reg1.test("undefined")  #返回true，由於undefined符合正則規則

• 正則方法

  var s = "Ao hello ";
  
  s.match(/o/g);
  	//(2) ["o", "o"]    查找字符串中符合正則的內容，/o/g後面這個g的意思是匹配全部的o
  s.search(/h/g);  
  	//1    查找字符串中符合正則表達式的內容位置，返回第一個配到的元素的索引位置，加不加g效果相同
  s.split(/o/g);
  	//["A", " hell", ""]    按照正則表達式對字符串進行切割，獲得一個新值，原數據不變
  
  #s.replace()的四種形式
  var s='A man is here a';
  s.replace(/a/i, "啦啦");    //"啦啦 man is here"          不區分大小寫替換一次
  s.replace(/a/, "啦啦");     //"A m啦啦n is here"          只替換一次
  s.replace(/a/g, "啦啦");    //"A m啦啦n is here 哈哈"      全局替換
  s.replace(/a/gi, "啦啦");   //"啦啦 m啦啦n is here 哈哈"    不區分大小寫全局替換
  
  #坑:
  	var reg = /a/g;
  	var s = 'a man is here';
  	reg.test(s);   	    //true
  	reg.lastIndex; 		// 1
  	reg.test(s);   		//true
  	reg.lastIndex; 		// 4
  	reg.test(s); 		//false
  	reg.lastIndex = 0;  #從新賦值,讓其歸零

Math對象

• math對象相似於python中的內置模塊math

  Math.abs(x)      返回數的絕對值
      .exp(x)      返回 e 的指數
  	.floor(x)    小數部分進行直接捨去
  	.log(x)      返回數的天然對數（底爲e）
  	.max(x,y)    返回 x 和 y 中的最高值
  	.min(x,y)    返回 x 和 y 中的最低值
  	.pow(x,y)    返回 x 的 y 次冪
  	.random()    返回 0 ~ 1 之間的隨機數
  	.round(x)    把數四捨五入爲最接近的整數
  	.sin(x)      返回數的正弦
  	.sqrt(x)     返回數的平方根
  	.tan(x)      返回角的正切

BOM+DOM

BOM和DOM總結 https://www.cnblogs.com/Programmatic-yuan/articles/13166861.html