前言

• 感覺最近IT圈子有點嗨啊，996.icu大火，也是我們it從業者的心聲，活著!=活著。其實無論是在公司，還是回家，技術都融入了我自己的生活吧，只是資本家的操作，不予評論，安心做技術。
• 話扯遠了，言歸正傳，這個文件，是一個分享自己重新學習前端的筆記，這些本來是紙質版的筆記，現在貼出來，分享給大家，篇幅較長
• 計劃：
  • 首先是js篇，主要結合紅寶書和一系列文件和自己的理解，會寫到封裝ajax，後續看時間。
  • 然後是es6，主要結合阮一峰老師的es6指南，和深入理解es6兩本書來寫
  • 其次是typescript,主要結合官方文件和自己的理解來寫
• 為什麼要寫這些東西，我也不知道，主要是感覺，寫東西能讓自己安下心來。
• 框架篇可以參考樓主之前的博文，vue,react，都比較的基礎，傳送門[github.com/whylisa/vue…]
• 話不多說，開始學習，如有錯誤歡迎指出！ stepbystep。
• js系列傳送門[github.com/whylisa/jav…]

JavaScript入門

JavaScript書寫位置

• 第一種 : 寫在script標籤中

<script>
  alert('Hello World!');
</script>
複製程式碼

• 第二種 : 引入一個js檔案

<script src="main.js"></script>
複製程式碼

注意：

1. script 可以放在很多地方,,但是我們一般規範些在body裡面,放在 html 下面; . 使用src 引入的標籤 不能再在標籤內寫js程式碼裡

註釋

註釋程式碼不會被執行，僅僅起到一個提示的作用。註釋可以對複雜的程式碼進行解釋，方便後期的維護和開發。

• 單行註釋 :

  // 這是單行註釋， 單行註釋只能寫一行程式碼
  //  快捷鍵： ctrl + /  
  複製程式碼

• 多行註釋 :

  /*
  	這是多行註釋，在多行註釋中可以
  	換行
  	sublime Text :  快捷鍵  ctrl + shift + /
  	vscode : 選中多行直接註釋,即可,但是這種多行註釋 如果需要得自己手寫
  /*
  複製程式碼

• 在寫程式碼的時候，需要寫註釋，這是一個良好的習慣,

• 大家初學,一定多寫註釋 ! 把理解的知識再寫一遍,效果會更好!!

輸出語句 (5種)

• alert : 警告框

  //alert會彈出一個警告框
  alert("hello world");
  複製程式碼

• confirm : 確認框

  //confirm彈出一個確定框
  confirm("我帥嗎？");
  複製程式碼

• prompt : 輸入框

  //prompt:彈出一個輸入框，可以輸入值
  prompt("請輸入你的真是年齡");
  複製程式碼

• document.write : 網頁中寫入內容

  //可以識別標籤
  document.write("hello world");
  document.write("<h1>hello world</h1>");
  複製程式碼

• 控制檯輸出

  //F12開啟控制檯，在console中可以看到列印的資訊
  console.log("hello word");
  複製程式碼

  ​

  總結：alert、comfirm、prompt 三個使用者體驗太差，只有在學習的時候會用到。console.log經常用來列印日誌，專案除錯的時候非常有用。

  ​

變數

變數 : 可以變化的量

變數的作用 : 儲存資料

宣告 : 用 var 來宣告

如何使用變數

• 直接宣告變數

  //  var 來宣告變數的
  //  age : 變數名
  //  結構 : var + 變數名 ; 
   var age;
   console.log
  複製程式碼

  ​

• 先宣告,後賦值

  var name;  // 宣告一個變數 name
  name = 'why'; // 一個等號 是賦值,,後面的值賦值給前面的
   console.log
  複製程式碼

  ​

• 同時宣告+賦值

  var name = 'why' 
   console.log
  複製程式碼

  ​

• 同時宣告多個變數並賦值

  var age = 10,name= 'zs' 
  // 相當於
  var age = 10;
  var name = 'zs';
  複製程式碼

  ​

• 不宣告變數，直接賦值(不會報錯，但是不推薦)

  //  沒有用 var 修飾的不管程式碼在哪裡都是全域性的
  // 不推薦 
  height=100;
  console.log(height);
  複製程式碼

  ​

• 不宣告變數，也不賦值變數，直接使用（會報錯）

   //   weight is not defined 要知道是沒有定義,,估計是變數名寫錯了
   console.log(heightt);
  複製程式碼

結論：

• 變數需要宣告之後，才能使用，養成一個良好的程式設計習慣。
• javascript程式碼一旦報錯了，後面的程式碼就不再執行了。

變數的命名規則和規範

• 規則 : ( 必須遵守的,不遵守會報錯 )

  • 由字母、數字、下劃線、$符號組成 ;

  • 不能以數字開頭

  • 區分大小寫

  • 不能是關鍵字和保留字 (不用死記 , 慢慢就見多了)

      //關鍵字：對於js來說有特殊意義的一些單詞
      //保留字：js保留了一些單詞，這些單詞現在不用，但是以後要用。
    複製程式碼

    ​

• 規範 : (建議遵守的 不遵守不會報錯)

  • 變數名必須有意義

  • 遵守駝峰命名法。 首字母小寫,後面單詞的首字母需要大寫!

    myName, userPassword

• 下面哪些變數名不合法

  a	    
  1
  age18
  18age
  2b
  name
  $name
  _sex
  &sex
  theworld
  a b
  class
  複製程式碼

變數的demo

1. 交換兩個變數的值

    var temp = a;
           a = b;
           b = temp;
   複製程式碼

   ​

2. 不使用臨時變數，交換兩個數值變數的值

   			//    a      b
   var a = a+b; //    33     21
       b = a-b; //    33      12
       a = a-b; //    21     12
   複製程式碼

   ​

   ​

資料型別

javascript中資料型別分為簡單資料型別和複雜資料型別，今天只學簡單資料型別 ( 5個 )

number、string、boolean、undefined、null

數值 字串 布林 宣告未賦值 空型別

number-數字型別

數字： 11 255 333 1024

進位制

在javascript中表示一個數字，除了有我們常用的十進位制11, 22,33等，還可以使用八進位制、十六進位制表示等。

• 十進位制

//我們最常用的進位制，進行算術運算的時候，八進位制和十六進位制最終都要轉換成二進位制,計算機只識別二進位制
//逢10進1
var num = 9;
var num = 29;
複製程式碼

• 八進位制

// 0開頭的數字， 逢8進1
var num1 = 010;
var num2 = 0121;

// 八進位制 0-7  逢八進一 , 10
var ba = 0321; 
// 12 = 2*8^0 + 1*8^1 = 10
// 321 = 1*8^0 + 2*8^1 + 3*8^2 = 1+16+ 192 = 209
console.log(ba);
複製程式碼

• 十六進位制

// 0x開頭的數字，逢16進1，  數字範圍1-9A-F
var num = 0xA;
var num = 0x12;
複製程式碼

​ tips : 關於二進位制，計算機在只認識二進位制，所以所有的程式碼最終都會轉換成二進位制資料。

浮點數

浮點數就是小數,，比如0.1

• 浮點數

var num = 0.1;
複製程式碼

• 科學計數法

//當一次數字很大的時候，可以用科學計數法來表示
var num = 5e+5;  //5乘以10的5次方
var num = 3e-3;//3乘以10的-3次方

複製程式碼

• 浮點數精度丟失問題

//在進行浮點數運算的時候，可能會出現精度丟失的問題
0.1 + 0.2 = 0.30000000000000004;
0.2 + 0.2 = 0.4;
//儘量少用浮點數進行運算，不要讓浮點數進行比較。

解決辦法 : 根據小數點後面的位數量 乘以對應的整數;
0.1 + 0.2  ==> (0.1*10+0.2*10) / 10 = 0.3
0.01 + 0.02 呢?
複製程式碼

數值範圍

最小值：Number.MIN_VALUE，這個值為： 5e-324
最大值：Number.MAX_VALUE，這個值為： 1.7976931348623157e+308
無窮大：Infinity    1/0
無窮小：-Infinity
複製程式碼

字串型別

字串型別，使用雙引號 " 或者 ' 包裹起來的字元

//雙引號和單引號必須成對出現
var str = 'hello world';
var str = "hello world";

var num1 = 12;
var num2 = '12';
可以通過顏色
複製程式碼

字串長度

每一個字串都有一個length屬性，可以獲取到字串中字串的個數

var str = "akdjflksjdflk";
console.log(str.length);
複製程式碼

轉義字元

思考，如何列印?

• 引號可以巢狀,但是隻能相互巢狀,不能巢狀自己 (單雙號相互巢狀)
• 通過轉義符

// 大家好,我姓"薰",我叫孫悟空
//選擇"好看"的外表，還\是'有趣'的靈魂
複製程式碼

字串拼接

• +號具有字串拼接功能，它能將兩個字串拼接成一個字串。
• +號同時具有算術加法的功能，它能將兩個數字進行相加
• 如果+號兩邊有一個是字串，那麼就是拼串的功能，如果都是數字，那麼就是算數的功能。

// 第一種情況 : 字串 + 字串
var a = "hello";
var b = "world";
console.log(a + b);//字串拼接功能

// 第二種情況 : 數值 + 數值
var a = 100;
var b = 100;
console.log(a + b);//加法

// 第三種情況 : 字串 + 數值
var a = 'abc';
var b = 100;
console.log(a + b);//字串拼接功能
複製程式碼

---

思考練習 :

'我是'
var name = 'why';
拼接成一句話 : 我是why
console.log ( '我是'+name)  還是  console.log ( '我是name');
複製程式碼

布林型別

布林型別：true 和 false

//布林型別只有兩個值
true:表示真
false:表示假
複製程式碼

注意：

​ 1. 區分大小寫，不要寫成True或者是False了

​ 2. 'true' 和 true , 前者是字串型別

undefined和null

他們都屬於獲取非正常值的型別

• undefined表示一個沒有賦值的變數
• null表示一個空的值, ( 例如 : 獲取一個元素,id寫錯了,獲取不到,返回一個null)

字面量賦值 與 變數賦值

• 字面量賦值，字面量也叫直接量，一眼能夠識別是什麼型別的變數，比如11, "abc", true, false, undefined, null等都是字面量，可以直接會使用。
• 變數賦值：瀏覽器必須要經過宣告之後，才認識變數，如果沒有宣告，直接使用變數是會報錯的。

操作符

變數可以儲存資料，我們還需要學習操作符來操作這些資料

1、 算術運算子

2、 賦值運算子

3、 一元運算子

4、 邏輯運算子

5、 比較運算子

算術運算子

//快速的說出以下的結果？
console.log(123 + 123);
console.log("123" + 123);
console.log(123 - 123);
console.log(123 - "123");
console.log(12 * "12");
console.log(12 / 12);
console.log(10 % 2);
複製程式碼

注意 :

​ 整除 => 餘數==0 例如: 能被7整除 : i%7==0

賦值運算子

賦值運算子有： = , +=, -=, *=, /=, %=

var num = 10;
num += 1;   //num = num + 1;
num -= 1;   //num = num - 1;
num *= 2;   //num = num * 2;
num /= 2;   //num = num / 2;
num % = 2;  //num = num % 2;
複製程式碼

一元運算子

一元運算子：只有一個運算元的運算子

二元運算子：有兩個運算元的運算子，比如算術運算子、賦值運算子

自增運算子：++

• 先自增： ++i
• 後自增：i++

異同點 :
1. 相同點 : 程式碼執行之後, 數值都會 + 1
2. 不同點 : 就是在自增的時候使用就會出現不同

//先自增：
var num = 1;
console.log(++num); //先自增：表示先加1，後返回值

//後自增：
var num = 1;
console.log(num++);// 後自增：表示先返回值，後+1
複製程式碼

自減運算子：--

• 先自減：--i
• 後自減：i--

demo：

//1. 思考思考
var num = 5;
console.log(num++);
console.log(++num);

//2. 猜猜看
var a = 1; var b = ++a + ++a; console.log(b);    
var a = 1; var b = a++ + ++a; console.log(b);    
var a = 1; var b = a++ + a++; console.log(b);    
var a = 1; var b = ++a + a++; console.log(b);  
複製程式碼

邏輯運算子

• &&：與運算子，表示且，只有當兩個運算元都為true的時候，結果才是true
• ||：或運算子，表示或，只要有其中一個運算元是true,結果就是true
• !：非運算子，取反

console.log( true && true );
console.log( false && true );
console.log( true && false );
console.log( false && false );

console.log( true || true );
console.log( false || true );
console.log( true || false );
console.log( false || false );

console.log(!true);
console.log(!false);

總結 : 
&&  翻譯 : 一個為真,且,,另外一個也為真  => 才為真
1. 兩者都為true,才為true
2. 前者為true,,決定權在後者

||  翻譯 : 一個為真,或者另外一個為真 => 真
1. 兩者有一個為true,結果就為true
2. 前者為false,,決定權在後者

複製程式碼

比較運算子

比較運算子也叫關係運算子， < > >= <= == != === !==， 關係運算子的 結果是布林型別

var a = 5;
var b = 6;
console.log(a > b);//大於
console.log(a < b);//小於
console.log(a >= b);//大於等於
console.log(a <= b);//小於等於

console.log(a == b); //相等，只比較值，不比較型別
console.log(a === b); //全等，比較型別和值
console.log(a != b); // 不等， 只判斷值，不判斷型別
console.log(a !== b); // 不全等 判斷值，且判斷型別

注意 : 
 數字型別比較和字串比較是由區別的 
 1. 數字比較 : 24>3;   比較數字大小
 2. 字串比較 : '24' < '3'   比較首字母大小
 3. 字串和數字混合比較 : 比較數字內容大小
複製程式碼

運算子優先順序

• ()的優先順序最高
• 一元運算子(++, --, !)
• 算術運算子（先*/%, 後+-）
• 比較運算子 (先> < >= <=， 後== === != !==)
• 邏輯運算子（先&&後||）

不用死記，如果不確定的時候，使用()增加優先順序

//猜猜看
var result = ((4 >= 6) || ("人" != "狗")) && !(((12 * 2) == 144) && true);
console.log(result);

複製程式碼

型別轉換

為什麼要進行型別轉換???

伺服器拿回來的資料,有可能是字串,比如age='18', 
 var age = '18';
 console.log(age+1);
複製程式碼

檢視變數的型別

typeof關鍵字可以檢視資料的型別

var num = 11;
console.log(typeof num);
num = "abc";
console.log(typeof num);
複製程式碼

**小技巧：在控制檯可以根據顏色來判斷資料的型別哦(^__^) **

轉換成 數值 -number

• 1 Number()

console.log(Number('55'));
Number()可以把任意值轉換成數值型別，但是如果字串中有不是數字的字元，返回NaN
複製程式碼

• 2 parseInt() 和 parseFloat()

- parseInt()  把整數或者小數都轉化為整數;
- parseFloat() 把整數轉化整數,把小數轉化為小數
var num1 = parseInt("12");  // 12
var num1 = parseInt("12.3"); //12
var num1 = parseFloat("12"); //12
var num1 = parseFloat("12.3");//12.3

var num1 = parseInt("12.3abc");  // 返回12，如果第一個字元是數字會解析知道遇到非數字結束
var num2 = parseInt("abc123");   // 返回NaN，如果第一個字元不是數字或者符號就返回NaN


複製程式碼

• 3 算術運算 (最常用)

var str = '500';
console.log(+str);		// 取正
console.log(-str);		// 取負
console.log(str - 0);  +0呢???拼接
複製程式碼

轉換成 字串型別 - string

• 1. String ( )

var num = 5;
num = String(num);
console.log(num);
複製程式碼

• 2. toString ( )

var num = 5;
console.log(num.toString());// 把數值5變成字串5
//將來所有的資料都會有toString()方法，除了null和undefined
複製程式碼

• 3. 拼串，(最常用)

var num = 5;
num = num + "";
console.log(num);
複製程式碼

轉換成布林型別

所有的值都可以轉換成布林型別

其中 0, "", undefined，null， NaN，這幾個值會轉換成false，其他值都會轉換成true

這個代表的五大基本型別

// 沒有值 => false
// 有值 => true
// number string undefined null 
//  0      ''    

注意 : 
   1. 'false' 它是字串 
   2.  NaN  => false 
複製程式碼

• Boolean()

console.log(Boolean(1));
console.log(Boolean(0));
複製程式碼

• !!

var a = "abc";
console.log(!!a);
複製程式碼

NaN

NaN: not a number, 表示一個非數字

在js中，NaN用來表示一個非數字的特殊值，當發現無法進行運算時，js不會報錯，而是會返回一個NaN

NaN的注意事項：

• NaN的型別是number型別的，表示一個非數字
• NaN不等於任何值，包括NaN本身
• 通過isNaN()可以判斷是否是一個數字，返回false的時候，表示是一個數字。

var num = +'abc'
 console.log(num);  //NAN

// 判斷是不是文字
var a = 123;
var b = '123';
//  Nan 不是數字 
// true 不是文字
// false 不是不是文字 = 是文字
console.log(isNaN(c));
複製程式碼