詳細的JavaScript基礎語法-上-簡單數據類型、運算符、流程控制、循環、數組、

JS簡介

JS與標記語言的區別

js是有邏輯性的、是有指令的、是主動的。
標記語言(html)不需要向計算機發出指令、標記語言的存在是用來被讀取的, 是被動的。

瀏覽器的執行

渲染引擎：用於解析html與css
ja引擎：又稱js解釋器、用於讀取網頁中的JS代碼

注：瀏覽器本身並不會執行JS代碼，而是通過內置 JavaScript 引擎(解釋器) 來執行 JS 代碼。JS 引擎執行代碼時逐行解釋每一句源碼（轉換爲機器語言），然後由計算機去執行，所以 JavaScript 語言歸爲腳本語言，會逐行解釋執行。

JS的組成：
ECMAScript、dom、bom

JS的輸出語句

alert(‘msg’) 彈出框
console.log（） 控制檯打印
prompt(‘msg’) 彈出輸入框

js的變量

變量就是內存中用於存放數據的空間、
變量的使用: 聲明與賦值

age爲聲明、18爲賦值
var age = 18;

變量的規範
規則：

由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號( $ )組成，如：usrAge, num01, _name
嚴格區分大小寫。var app; 和 var App; 是兩個變量
不能以數字開頭。 18age 是錯誤的
不能是關鍵字、保留字。例如：var、for、while
變量名必須有意義。 MMD BBD nl → age
遵守駝峯命名法。首字母小寫，後面單詞的首字母需要大寫。myFirstName

變量總結：
變量是一個容器、用於存放數據、使用變量時一個要先聲明變量、然後賦值。變量的本質就是去內存中申請空間

js的數據類型

爲什麼需要數據類型？
爲了方便數據分成所需內存大小不同的數據、充分利用空間

javascript不用提前聲明變量的類型、在程序運行過程中、類型會被自動確定（根據等於號右邊的值確定的）
js是弱類型的語言、數據類型是可變化的

簡單數據類型

Number

不管整數還是小數都叫數字型
8進制前面要加0
用16進制要加0x

var num = 10;
var PI = 3.14;

// 數字前加0爲8進制
// 8進制轉化爲10進制/逢8進1
var num1 = 010;
console.log(num1);//8

// 16進制 0-9  a-f 0x表示16進制 逢16進1
//19的時候是25、20的時候就是32、因爲一個10是16、逢16進1
var num2 = 0x20;
console.log(num2);

// 數字類的最大值
console.log(Number.MAX_VALUE);
// 數字類的最小值
console.log(Number.MIN_VALUE);
//無窮大
console.log(Number.MAX_VALUE * 2);//表示無窮大、Infinity
// 無窮小
console.log(- Number.MAX_VALUE * 2);

// NaN非數值
console.log('PINK'-100);

boolean布爾型

isNaN
用於判斷是爲非數字的類型
非數字不是返回true、是數字返回false、

string字符串類型

字符串型可以是引號中的任意文本，
其語法爲雙引號 “” 和單引號’’
在js中推薦使用單引號
推薦外單內雙

字符串轉義符

轉義符	解釋說明
\n	換行符，n 是 newline 的意思
\ \	斜槓 \
\’	'單引號
\"	"雙引號
\t	tab 縮進
	空格，b 是 blank 的意思

通過length獲取字符串的長度

   var strMsg = "我是帥氣多金的程序猿!";
        alert(strMsg.length); // 顯示 11
        // 字符串拼接

字符串拼接

    <script>
        // 1. 檢測獲取字符串的長度 length 
        var str = 'my name is andy';
        console.log(str.length); // 15
        // 2. 字符串的拼接 +  只要有字符串和其他類型相拼接 最終的結果是字符串類型
        console.log('沙漠' + '駱駝'); // 字符串的 沙漠駱駝
        console.log('小李' + 18); // '小李18'
        console.log('小李' + true); // 小李true
        console.log(12 + 12); // 24
        console.log('12' + 12); // '1212'
    </script>

總結：只要有字符串和其他類型相拼接、最終結果就是字符串類型

變量與字符串拼接

      // 變量與字符串相連
      var age=18;
      console.log('小明'+age+'歲');

boolean與Undefined和 Null

boolean true 算數運算中是1、false是0、
Undefined表示未定義的類型、沒有賦值

Undefined和數字相加是NaN、不是一個數字

null表示空的類型

獲取變量的數據類型typeof()
typeof 可用來檢測變量的數據類型

  var num =10;
    console.log(typeof(num));//Number
    var str ='pink';
    console.log(typeof str);//string
    var  flag =true;
    console.log(typeof(flag));
    var vair =undefined;
    console.log(typeof(vair));
    var timer =null;
    console.log(typeof(timer));

數據類型的轉換
轉化爲字符串類型

更多使用加號拼接字符串轉換方式，這一種方式也稱之爲隱式轉換。

轉化爲數字類型(重要)

psrseInt()把string類型轉化爲整數、不會四捨五入(只要整數)
psrseFloat()把string類型轉化爲小數(浮點數)、（可以取小數）
使用number()
使用算數符號-(減號)、*(乘號)號來轉化

  var age= prompt('請輸入你的年齡');
    //parseInt()轉化爲數值類型  但是保留的是整數
    console.log(parseInt(age));
    console.log(parseInt('3.14'));//只要整數
   //小數
    console.log(parseFloat('3.14'));//可以小數

    console.log('123'*1);//值爲數字型

轉化爲Boolean類型
boolean()把其他類型轉化爲Boolean類型
代表空與否定的值會被轉爲false、比如 ‘’、0、NaN、null、undefined這五種
其他值爲true

運算符（操作符）

算數運算符
+、-、*、/、%(取餘)
注意：不要直接用小數進行運算
浮點數的精度不如整數

遞增與遞減運算符號
必須與變量搭配使用

前置遞增
原理：先自增、在返回值類似與n=n+1;

        var num = 1;
        num = num + 1;
        num = num + 1;
        console.log(num);//3
        //前置遞增運算符
        var age = 10;
        ++age;
        //類似於age=age+1
        console.log(age);//11

        var p = 10;
        //先自加、在返回值
        console.log(++p + 10);//21

後置遞增
原理：先返回原值、後自增；

  var num = 10;
        num++;//num=num+1
        console.log(num + 10);
        console.log(num);
        // 前置自增與後置自增如果單獨使用效果是一樣的
        //後置自增口訣：先返回原值、後自+1
        var num = 10;
        console.log(num++ + 10);//10+10
        console.log(num);//20

總結：

單獨使用時運行結果相同、
與其他代碼使用時、執行結果不同、
後置：先返回原值、後自增
前置：先自增、在返回值
開發推薦用後置遞增/遞減 num++/num–

比較運算符（關係運算符）

比較運算後，會返回一個布爾值（true / false）作爲比較運算的結果。

等於號的比較

        //值相等就可以、這兒有隱式轉換
        console.log(18=='18');
        //===數據類型完全一致纔可以
        console.log(18==='18');

				比較運算符返回的一定是true或false

邏輯運算符
邏輯運算符一般用於多個條件的判斷

&&邏輯與and:
** 有一個結果爲false、其結果就爲false、兩側都是true結果纔是true

     var num = 7;
        var str = '我愛你`中國`';
        // 邏輯與：有一個結果爲false其結果就是false
        console.log(num > 5 && str.length >= num);//true
        console.log(num < 5 && str.length >= num);//false

||邏輯或or:
**有一個結果爲true、其結果就是true 、兩側都是false結果纔是false

        var num = 7;
        var str = '我愛你`中國`';
        //邏輯或：有一個結果爲true其結果就是true
        console.log(!(num < 10 || str.length >= 8));//false

        // 取反
        console.log(!(num>10));//true

!邏輯非not：
** 用於取反符、如：true的相反值是false;

        var num = 7;
        var str = '我愛你`中國`';
        // 取反
        console.log(!(num>10));//true

短路運算
原理：當有多個表達式時、左邊的表達式可以確定結果時、就不再執行右邊的表達式

邏輯與
語法：表達式1 && 表達式2
** 如果第一個表達式的值爲真，則返回表達式2
** 如果第一個表達式的值爲假，則返回表達式1
邏輯或
語法：表達式1 || 表達式2
** 如果第一個表達式的值爲真，則返回表達式1
** 如果第一個表達式的值爲假，則返回表達式2

  // 短路運算邏輯與: 
  //如果表達式1的結果爲真返回表達式2、
  //如果表達式1爲假則返回表達式1
        console.log(123 && 456);//456
        console.log(0 && 456);//0

        //  邏輯或:
       // 如果表達式1的結果爲真則返回表達式1、
        //如果爲假則返回表達式二
        console.log(123 || 456);//123
        console.log(0 || 456);//456

        //邏輯中斷會影響程序的運行結果
        var num1 = 0;
        // 因爲表達式1爲真後直接返回結果、不執行後面的表達式了
        console.log(123 || num1++);
        console.log(num1);//0

總結

邏輯與 && 只要找到一個false、那麼就返回這個false
邏輯或 || 只要找到一個true 那麼就返回這個true

賦值運算符
概念：用於把數據賦值給變量的運算符

		var age = 10;
		age += 5;  // 相當於 age = age + 5;
		age -= 5;  // 相當於 age = age - 5;
		age *= 10; // 相當於 age = age * 10;

運算符優先級

一元運算符裏面的邏輯非優先級很高
邏輯與比邏輯或優先級高

流程控制

流程概念
順序結構：程序會按照代碼的先後順序，依次執行
分支結構：根據不同的情況執行不同的代碼
循環結構：重複做一件事

分支流程控制

if語句

// 條件成立執行代碼，否則什麼也不做
if (條件表達式) {
    // 條件成立執行的代碼語句
}

if else語句（雙分支語句）

// 條件成立  執行 if 裏面代碼，否則執行else 裏面的代碼
if (條件表達式) {
    // [如果] 條件成立執行的代碼
} else {
    // [否則] 執行的代碼
}

多分支
** 就是利用多個條件來選擇不同的語句來執行、得到不同的結果、多個條件只選擇一個的過程

// 適合於檢查多重條件。
//如果條件表達式爲真、執行語句1、不滿足繼續執行下面的語句
if (條件表達式1) {
    語句1;
} else if (條件表達式2)  {
    語句2;
} else if (條件表達式3)  {
   語句3;
 ....
} else {
    // 上述條件都不成立執行此處代碼
}

總結
**多分支語句就是一個多選一的過程、
**else if 裏面的條件理論上是可以任意多個的
**else if 中間有個空格

三元表達式

語法結構
**條件表達式? 表達式1 : 表達式2;
執行思路
**如果條件表達式爲 true ，返回表達式1的值，條件表達式爲 false，則返回表達式2的值

        var num = 10;
        //條件表達式爲真返回表達式1、爲false返回表達式2
        var result = num > 5 ? '是的' : '不對的';
        console.log(result);

** 簡單理解：屬於簡化版的if else

類似於以下if else

		if(num>5){
		result='是的';
		}else{
		result='不是的';
		}

switch

switch 更加適合特定的值的判斷
switch 語句也是多分支語句，它用於基於不同的條件來執行不同的代碼、也是多選一的過程

  switch( 表達式 ){ 
      case value1:
          // 表達式 等於 value1 時要執行的代碼
          break;
      case value2:
          // 表達式 等於 value2 時要執行的代碼
          break;
      default:
          // 表達式 不等於任何一個 value 時要執行的代碼
  }

注：執行case 裏面的語句時，如果沒有break，則繼續執行下一個case裏面的語句。

循環
目的:爲了重複執行某些代碼

for循環
**語法結構

		for(初始化變量; 條件表達式; 操作表達式 ){
		    //循環體
		}

		 for (i = 1; i <= 10; i++) {
		            console.log('你好嗎');//循環體
		        }
		1、首先執行裏面的計算器變量、i=1;只執行一次
		2、在i<= 10中判斷是否滿足條件、滿足條件、執行循環體、不滿足跳出循環
		3、滿足條件執行i++、遞增變量、第一輪循環結束
		4、然後去執行i<=10是否滿足條件、滿足條件執行循環體、不滿足退出循環

斷點調試
目的:幫助我們觀察程序的運行過程

斷點調試的流程：
1、瀏覽器中按 F12–> sources -->找到需要調試的文件–>在程序的某一行設置斷點
2、Watch: 監視，通過watch可以監視變量的值的變化，非常的常用。
3、摁下F11，程序單步執行，讓程序一行一行的執行，這個時候，觀察watch中變量的值的變化。

雙重for循環
循環嵌套是指在一個循環語句中再定義一個循環語句的語法結構

for (外循環的初始; 外循環的條件; 外循環的操作表達式) {
    for (內循環的初始; 內循環的條件; 內循環的操作表達式) {  
       需執行的代碼;
   }
}

內層循環可以看做外層循環的循環體語句
內層循環執行的順序也要遵循 for 循環的執行順序
外層循環執行一次，內層循環要執行全部次數

while

		while (條件表達式) {
		    // 循環體代碼 
		}

執行思路：

1 先執行條件表達式，如果結果爲 true，則執行循環體代碼；如果爲 false，則退出循環，執行後面代碼
2 執行循環體代碼
3 循環體代碼執行完畢後，程序會繼續判斷執行條件表達式，如條件仍爲true，則會繼續執行循環體，直到循環條件爲 false 時，整個循環過程纔會結束

注意：

使用 while 循環時一定要注意，它必須要有退出條件，否則會成爲死循環

do-while循環

		do {
		    // 循環體代碼 - 條件表達式爲 true 時重複執行循環體代碼
		} while(條件表達式);

執行思路

1 先執行一次循環體代碼
2 再執行條件表達式，如果結果爲 true，則繼續執行循環體代碼，如果爲 false，則退出循環，繼續執行後面代碼
注意：先再執行循環體，再判斷，do…while循環語句至少會執行一次循環體代碼

continue、break
continue 關鍵字用於立即跳出本次循環

 for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         console.log('這個包子有蟲子，扔掉');
         continue; // 跳出本次循環，跳出的是第3次循環 
         //會繼續吃第4、5個包子
      }
      console.log('我正在吃第' + i + '個包子呢');
 }

break 關鍵字用於立即跳出整個循環（循環結束）

 for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         break; // 直接退出整個for 循環，跳到整個for下面的語句
         //break、發現包子裏有蟲子直接都不吃了
     }
     console.log('我正在吃第' + i + '個包子呢');
   }

數組

概念：

數組可以把一組相關的數據一起存放、

數組是指一組數據的集合，其中的每個數據被稱作數組元素，

在數組中可以存放任意類型的元素。

數組是一種將一組數據存儲在單個變量名下的優雅方式。

總結：數組就是一組數據的集合、儲存在單個變量下

創建數組的方式

利用 new 創建數組

	var 數組名 = new Array() ；
	var arr = new Array();   // 創建一個新的空數組
	//注意 Array () ，A 要大寫

利用數組字面量創建數組

//1. 使用數組字面量方式創建空的數組
	var  數組名 = []；
	//2. 使用數組字面量方式創建帶初始值的數組
	var  數組名 = ['小白','小黑','大黃','瑞奇'];

數組的字面量是方括號 [ ]
聲明數組並賦值稱爲數組的初始化
這種字面量方式也是我們以後最多使用的方式

數組元素的類型
數組中可以存放任意類型的數據，例如字符串，數字，布爾值等。

	var arrStus = ['小白',12,true,28.9];//不推薦這樣用、對代碼不友好

獲取數組中的元素

索引 (下標) ：用來訪問數組元素的序號（數組下標從 0 開始）。
爲什麼數組的下標是0？

// 定義數組
	var arrStus = [1,2,3];
	// 獲取數組中的第2個元素
	alert(arrStus[1]);  //數組下標從0開始

注意：如果訪問時數組沒有和索引值對應的元素，則得到的值是undefined

遍歷數組

數組遍歷
** 通過for循環把數組中的每個元素從頭到尾都訪問一次（類似學生的點名）

	var arr = ['red','green', 'blue'];
	for(var i = 0; i < arr.length; i++){
	    console.log(arr[i]);//依次arr中的元素
	}

數組的長度
** 數組的長度：默認情況下表示數組中元素的個數
** 使用“數組名.length”可以訪問數組元素的數量（數組長度）

      var arrStus = [1, 2, 3];
      alert(arrStus.length);  // arrStus的長度爲3

數組的長度是數組元素的個數、與數組的索引號不一樣
數組裏面的元素個數發生變化，這個 length 屬性跟着一起變化（length可以被修改）
設置的length屬性值大於數組的元素個數，則會在數組末尾出現空白元素
++設置的length屬性值小於數組的元素個數，則會把超過該值的數組元素刪除

數組新增元素
數組中可以通過以下方式在數組的末尾插入新元素：

  	數組[ 數組.length ] = 新數據;
  	  var aArr = ['pink', 'deeppink', 'aqua'];
        //新增數組
        aArr[3] = 'yellow';
        //打印數組
        console.log(aArr);

詳細的JavaScript基礎語法-上-簡單數據類型、運算符、流程控制、循環、數組、

JS簡介

JS與標記語言的區別

瀏覽器的執行

js的變量

js的數據類型

簡單數據類型

運算符（操作符）

流程控制

數組

Wireshark 安裝+使用（一）

Vue-基本使用、模板語法(插值表達式、指令、事件綁定、屬性綁定、樣式綁定、分支循環結構)

git與gitHub的使用

JS高級-類與對象

Javascript-API-DOM-操作元素對象的屬性、文本內容、子元素、樣式、事件

JS高級-函數定義與調用、函數內的this指向、改變this指向方法、閉包、遞歸、嚴格模式

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結