安心學習，重學前端之（js基礎篇（1））

時間  2019-12-05
標籤 安心 學習 前端 基礎 欄目 JavaScript 简体版
原文   原文鏈接

前言

  • 感受最近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>
複製代碼

注意：javascript

  1. script 能夠放在不少地方,,可是咱們通常規範些在body裏面,放在 html 下面; . 使用src 引入的標籤 不能再在標籤內寫js代碼裏

註釋

註釋代碼不會被執行，僅僅起到一個提示的做用。註釋能夠對複雜的代碼進行解釋，方便後期的維護和開發。html

  • 單行註釋 :前端

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

  • 多行註釋 :vue

    /* 這是多行註釋，在多行註釋中能夠 換行 sublime Text : 快捷鍵 ctrl + shift + / vscode : 選中多行直接註釋,便可,可是這種多行註釋 若是須要得本身手寫 /* 複製代碼

  • 在寫代碼的時候，須要寫註釋，這是一個良好的習慣,java

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

輸出語句 (5種)

  • alert : 警告框git

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

  • confirm : 確認框es6

    //confirm彈出一個肯定框
confirm("我帥嗎？");
複製代碼

  • prompt : 輸入框github

    //prompt:彈出一個輸入框，能夠輸入值
prompt("請輸入你的真是年齡");
複製代碼

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

    //能夠識別標籤
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等都是字面量，能夠直接會使用。
  • 變量賦值：瀏覽器必需要通過聲明以後，才認識變量，若是沒有聲明，直接使用變量是會報錯的。

操做符

變量能夠存儲數據，咱們還須要學習操做符來操做這些數據

一、 算術運算符

二、 賦值運算符

三、 一元運算符

四、 邏輯運算符

五、 比較運算符

算術運算符

//快速的說出如下的結果？
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));
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程