JavaScript 自學筆記(一)-有解無憂

JavaScript學習

1. 簡介

JavaScript是世界上最流行的語言之一，是一種運行在客戶端的腳本語言
腳本語言：不需要編譯，運行程序中由js決議器(js引擎)逐行來進行解釋并運行
現在也可以基于Node.js技術進行服務器端編程

2. 瀏覽器執行JS簡介

瀏覽器分成兩個部分，渲染引擎和JS引擎

渲染引擎：用來決議HTML與CSS，俗稱內核，比如chrome瀏覽器的blink,老版本的webkit
JS引擎：也稱為JS解釋器，用來讀取網頁中的JavaScript代碼，對其處理后運行，比如chrome瀏覽器的V8

Notes: 瀏覽器本身并不會執行JS代碼，而是通過內置JavaScript引擎(解釋器)來執行JS代碼，JS引擎執行代碼時逐行解釋每一句原始碼(轉換成機器語言)，然后由計算機去執行，所以JavaScript語言歸為腳本語言，會逐行解釋執行，

3. JS的組成

graph TD A[JavaScript]-->B[ECMAScript] A[JavaScript]-->C[DOM] A[JavaScript]-->D[BOM]

ECMAScript:JavaScript語法
DOM:頁面檔案物件模型

檔案物件模型(Document Object Model),是W3C組織推薦的處理可擴展標記語言的標準編程介面，通過DOM提供的介面可以對頁面的各種元素進行操作(大小，位置，顏色等)
瀏覽器物件模型

BOM(Browser Object Model)是指瀏覽器物件模型，它提供了獨立于內容的，可以與瀏覽器視窗進行互動的物件結構，通過BOM可以操作瀏覽器視窗，比如彈出框，控制瀏覽器的跳轉，獲取解析度等

4. JS位置

JS有3種書寫位置，分別為行內，內嵌和外部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 2.內嵌式的js -->
    <script>
        alert('Completed');
    </script>
    <!-- 3.外部js script雙標簽 -->
    <script src=https://www.cnblogs.com/ingram03/p/"test.js"></script>

<body>
    
    </script>


5. JavaScript輸入輸出陳述句



方法
說明
歸屬




alert(msg)
瀏覽器彈出警示框
瀏覽器


console.log(msg)
瀏覽器控制臺列印輸出資訊
瀏覽器


prompt(info)
瀏覽器彈出輸入框，用戶可以輸入
瀏覽器



5.1 JavaScript顯示資料

使用window.alert()彈出警告框
使用document.write()方法將內容寫道HTML檔案中
使用innerHTML寫入到HTML元素中
使用console.log()寫入到瀏覽器的控制臺

6. 變數
6.1 本質：變數是程式在記憶體中申請的一塊用來存放資料的空間
使用變數的時候，一定要宣告變數，然后賦值，宣告變數本質是去記憶體申請空間
6.2 宣告一個變數并賦值，稱之為變數的初始化
//<script>
  //1. 用戶輸入姓名
  var myname = prompt('請輸入你的名字')
  //2. 輸出這個用戶名
  alert(myname)
//</script>

6.3 同時宣告多個變數
同時宣告多個變數時，只需要寫一個var，多個變數名之間使用英文逗號隔開
var age = 10,name = 'zs',sex = 'male';  
6.4 變數宣告特殊情況



情況
說明
結果




var age;console.log(age);
只宣告 不賦值
undenfined


console.log(age)
不申明 不賦值 直接使用
報錯


age = 10;console.log(age);
不宣告 只賦值
10



6.5 變數的資料型別
變數是用來存盤值的所在處，它們有名字和資料型別，變數的資料型別決定了如何將代表這些值的位存盤到計算機的記憶體中.JavaScript是一種弱型別或者說動態語言.這意味著不用提前宣告變數的型別，在程式運行程序中，型別會被自動確定，
var age = 10;             //這是一個數字型
var address = "Guangzhou" //這是一個字串

在代碼運行時，變數的資料型別是由JS引擎根據=右邊變數值的資料型別來判斷的，運行完畢之后，變數就確定了資料型別，
JavaScript擁有動態型別，同時也意味著相同的變數可用作不同的型別:
var x = 6;      //x為數字
var x = "Bill"; //x為字串

6.6 資料型別的分類
JS把資料型別分為兩類:

簡單資料型別(Number,String,Boolean,Undefined,Null)
復雜資料型別(object)

簡單資料型別說明如下:



簡單資料型別
說明
默認值




Number
數字型，包含整型值和浮點值，如21，0.21
0


Boolean
布林值型別，如true,false,等價于1和0



String
字串型別，如"張三"，注意JS里面，字串都帶引號
""


Undefined
var a;宣告了變數a 但是沒有給值，此時a = undefined
undefined


Null
var a = null;宣告了變數a為空值




6.6.1 JS中八進制在數字前面加0，十六進制在資料前面加0x
數字型的三個特殊值:

Infinity,代表無窮大，大于任何數值
-Infinity,代表無窮小，小于任何數值
NaN,Not a number,代表一個非數值

console.log(Number.MAX_VALUE * 2);  //Infinity無窮大
console.log(-Number.MAX_VALUE * 2); //Infinity無窮小
console.log('老師' - 100);          //NaN

isNan()用來判斷一個變數是否為非數字的型別，回傳true或者false
6.6.2 字串型別String
字串型可以是引號中的任意文本，其語法為單引號' '和雙引號""
JS可以用單引號嵌套雙引號，或者用雙引號嵌套單引號(外雙內單，外單內雙)

多個字串之間可以使用+進行拼接，其拼接方式為字串+任何型別 = 拼接之后的新字串
6.6.3 布爾型Boolean
布爾型和數字型相加的時候，true的值為1，false的值為0
console.log(true+1)  //2
console.log(false+1) //1

6.6.4 Undefied和Null
一個宣告后沒有被賦值的變數會有一個默認值undefined(如果經行相連或者相加時，注意結果)
undefied 和數字型相加，最后結果是NaN
6.6.5 字面量
字面量是在源代碼中一個固定值的表示方法

數字字面量：8,9,10
字串字面量:'黑馬程式員',"大前端"
布爾字面量:true,false

7.資料型別轉換
7.1 通常使用的型別轉換


轉換為字串



方式
說明
案例




toString()
轉成字串
var num=1;alert(num.toString());


String()強制轉換
轉成字串
var num=1;alert(String(num));


加號拼接字串
和字串拼接的結果都是字串
var num=1;alert(num+"I am string");





轉換為數字型



方式
說明
案例




parselnt(string)函式
將string型別轉換成整數數值型
parselnt('78')


parseFloat(string)函式
將string型別轉換成浮點數數值型
parseFloat('78.21')


Number()強制轉換函式
將string型別轉換成數值型
Number('12')


js隱式轉換(- * / )減法，乘法，除法
利用算術運算隱式轉換為數值型
'12' - 0





轉換為布爾型



方式
說明
案例




Boolean()函式
其他型別轉換成布林值
Boolean('true')



A. 代表空，否定的值會被轉換為false,如' ' ,0,NaN,null,undefined
B. 其余值都會被轉換為true
console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
console.log(Boolean('小白'));//false
console.log(Boolean(12));//false



8.運算子
運算子(operator)也被稱為運算子，是用于實作賦值，比較和執行算數運算等功能的符號


算術運算子
(不能直接判斷兩個浮點數是否相等)
運算式:是由數字，運算子，變數等以能求得數值的有意義排列方法所得的組合


遞增遞減運算子
前置自增和后置自增如果單獨使用 效果是一樣的
后置自增的區別，先回傳原值 后自增


比較運算子
注意的是 ==默認轉換資料型別，會把字串型別的資料轉換成數字型
===和!==全等 要求值和資料型別都一致



符號
作用
用法




=
賦值
把右邊給左邊


==
判斷
判斷兩邊值是否相等(注意此時有隱式轉換)


===
全等
判斷兩邊的值和資料型別是否完全相同





邏輯運算子



運算子
描述
例子




&&
and
(x<10 && y>1) //true


||
or
(x==5||y==5) //false


!
not
(x==y) //false



短路運算(邏輯中斷)：當有多個運算式(值)時，左邊的運算式值可以確定結果時，就不再繼續運算右邊的運算式的值


賦值運算子



賦值運算子
說明
案例




=
直接賦值
var userName='Name';


+=,-=
加，減一個數后再賦值
var age = 10;age+=5; //15


*=,/=,%=
乘，除，取模后再賦值
var age = 2; age *= 5; //10





運算子的優先級



優先級
運算子
順序




1
小括號
()


2
一元運算子
++ -- !


3
算術運算子
先* / %后+ -


4
關系運算子
> >= < <=


5
相等運算子
== != === !==


6
邏輯運算子
先&&后||


7
賦值運算子
=


8
逗號運算子
,





9. 流程控制
流程結構主要有三種結構，分別是順序結構，分支結構和回圈結構
JS語言提供了兩種分支陳述句 1. if, 2.switch
9.1 if陳述句：
//if...else 陳述句
if (condition)
{
    當條件為 true 時執行的代碼
}
else
{
    當條件不為 true 時執行的代碼
}

//if...else if...else 陳述句
if (condition1)
{
    當條件 1 為 true 時執行的代碼
}
else if (condition2)
{
    當條件 2 為 true 時執行的代碼
}
else
{
  當條件 1 和 條件 2 都不為 true 時執行的代碼
}


9.2 三元運算式：
三元運算式也能做一些簡單的條件選擇，有三元運算子組成的式子稱為三元運算式
語法結構：
條件運算式？運算式1：運算式2
9.3 switch陳述句
switch(n)
{
    case 1:
        執行代碼塊 1
        break;
    case 2:
        執行代碼塊 2
        break;
    default:
        與 case 1 和 case 2 不同時執行的代碼
}

Note:n的值和case里面的值相匹配的時候是全等，必須是值和資料型別一致才可以
10. 回圈
10.1 for回圈
for (初始化變數; 條件運算式; 操作運算式)
{
   被執行的代碼塊
}

10.2 while回圈
while (條件)
{
   需要執行的代碼
}
// do while
do
{
   需要執行的代碼
}
while (條件);

11. 陣列
11.1 創建陣列
//1. 利用new創建陣列
var 陣列名 = new Array();
var arr = new Array();  //創建一個新的空陣列
//2.3 利用陣列字面量創建陣列
var 陣列名 = [];


陣列的字面量是方括號[]
宣告陣列并賦值稱為陣列的初始化
陣列中可以存放任意型別的資料，例如字串，數字，布林值等

11.2 陣列長度
陣列名.lenght
11.3 陣列中新增的元素


可以通過修改length長度來實作陣列擴容的目的.length屬性是可讀寫的
var arr = ['red','green','blue']
console.log(arr.length);
arr.length = 5;
console.log(arr);
console.log(arr[3]);//undefined
console.log(arr[4]);//undefined



新增陣列元素，修改索引號
var arr1 = ['red','green','blue']
arr1[3] = 'pink';



12. 函式
函式:封裝了一段可被重復呼叫執行的代碼塊，通過此代碼塊可以實作大量代碼的重復使用
函式宣告 - 方法1：
function functionName(parameters) {
  執行的代碼
}

函式宣告 - 方法2：
函式運算式
//例子
var x = function (a, b) {return a * b};

以上函式實際上是一個匿名函式(函式沒有名稱)，函式存盤在變數中，不需要函式名稱，通常通過變數名來呼叫，
形參用來接收實參
在宣告函式時，可以在函式名稱后面的小括號添加引數，這些引數稱為形參，而在呼叫該函式時，同樣需要傳遞相應的引數，這些引數稱為實參



引數
說明




形參
形式上的引數，函式定義的時候傳遞的引數，當前并不知道是什么


實參
實際上的引數，函式呼叫的時候傳遞的引數，實參是傳遞給形參的




1.如果實參的個數和形參的個數一致，則正常輸出結果
2.如果實參個數多于形參的個數，會取到形參的個數
3.如果實參的個數小于形參的個數，多出的形參定義為undefined,最終結果是NaN

12.1 函式回傳值
return終止函式.return陳述句之后的代碼不被執行
JS的return只能回傳一個值，如果用逗號隔開多個值，以最后一個為準
函式如果有return則回傳的是return后面的值，函式沒有return,則回傳undefined
12.2 arguments的使用
arguments是當前函式的一個內置物件，所有函式都內置了一個arguments物件，arguments物件中存盤了傳遞的所有實參，只有函式才有arguments
arguments展示形式是一個偽陣列，因此可以進行遍歷，偽陣列具有以下特點:

具有length屬性
按索引方式存盤資料
不具有陣列的push,pop等方法

13. JavaScript作用域
一段程式代碼中所用到的名字并不總是有效和可用的，而限定這個名字的可用性的代碼范圍就是這個名字的作用域.作用域的使用提高了程式邏輯的區域性，增強了程式的可靠性，較少了名字沖突.


全域作用域


區域作用域


全域變數：在全域作用域下宣告的變數(在函式外部定義的變數)


全域變數在代碼的任何位置都可以使用


在全域作用域下var宣告的變數是全域變數


特殊情況下，在函式內不使用var宣告的變數也是全域變數(不建議使用)
//案例4
f1();
console.log(a);
console.log(b);
console.log(c);
function f1(){
    var a = b = c =9;
    console.log(a);
    console.log(b);
    console.log(c);
}

//分析
//變數提升 函式提升 代碼如下
function f1(){
    var a = b = c =9;
    //相當于 var a = 9;b = 9;c = 9; b和c 是直接賦值 沒有var宣告,當作全域變數
    //集體宣告的寫法 var a = 9,b = 9,c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);

//輸出結果
9
9
9
9
9
undefined





區域變數：在區域作用域下宣告的變數，

區域變數只能在該函式內部使用
在函式內部var宣告的變數是區域變數
函式的形參實際上就是區域變數



作用域鏈：內部函式訪問外部函式的變數，采取的是鏈式查找的方式來決定取那個值，這種結構我們稱為作用域鏈.
14. 預決議
JS決議器運行JS分為兩步:(1)預決議(2)代碼執行

預決議 JS引擎會把JS里面所有var還有function提升到當前作用域的最前面
代碼執行 按照代碼書寫的順序從上往下執行

預決議分為變數預決議(變數提升)和函式預決議(函式提升)

變數提升 就是把所有的變數宣告提升到當前的作用域最前面,不提升賦值操作
函式提升 就是把所有的函式宣告提升到當前作用域的最前面 不呼叫函式

15. 物件
在JavaScript中，物件是一組無序的相關屬性和方法的集合，所有的事物都是物件，例如字串，數值，陣列，函式等.

屬性:事物的特征，在物件中用屬性來表示
方法:事物的行為，在物件中用方法來表示

15.1 創建物件
創建物件的三種方式:

利用字面量創建物件
利用new Object創建物件
利用建構式創建物件

15.1.1 字面量創建物件
物件字面量:就是{}里面包含了表達這個具體事物(物件)的屬性和方法
var obj = {};//創建了一個空物件

//
var obj = {
    uname:'William',
    age:18,
    sex:'Male',
    sayHi:function(){
        console.log('hi~');
}shux
//1.里面的屬性或者方法采取鍵值對的形式.鍵(屬性名):值(屬性值)
//2.多個屬性或者方法中間用逗號隔開的
//3.方法冒號后面跟的是一個匿名函式

15.1.2  利用new Object創建物件
var obj = new Object();//創建一個空的物件

obj.uname = 'William';
obj.age = 18
obj.sayHi = function(){
    console.log('hi~');
}
//1.利用等號 = 賦值的方法 添加物件的屬性和方法
//2.每個屬性和方法之間愛用分號結束

15.1.3 建構式
建構式:是一個特殊的函式，主要用來初始化物件，即為物件成員變數賦初始值，它總與new運算子一起使用，可以把物件中的一些公共的屬性和方法抽取出來，然后封裝到這個函式里面.
建構式里面不是普通代碼，而是物件
//建構式的語法格式
function 建構式名(){
    this.屬性 = 值；
    this.方法 = function(){
        
    }
}
//例子
function Star(uname,age,sex){
    this.name =  uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang){
        console.log(sang)
    }
}
var ldh = new Star('William',18,'Male');
//1.建構式名字首字母要大寫
//2.建構式不需要return,就可以回傳結果
//3.呼叫建構式 必須使用new
//4.只要new Star()呼叫函式就創建一個物件ldh()
//5.屬性和方法前面必須添加this

利用建構式創建物件的程序稱為物件的實體化.
15.1.4 new關鍵字執行程序


在記憶體中創建一個新的空物件


讓this指向這個新的物件


執行建構式里面的代碼，給這個新物件添加屬性和方法


回傳這個新物件(所以建構式里面不需要return)


15.2 物件的呼叫：
（1）.呼叫物件的屬性，采取 物件名.屬性名
（2）.呼叫物件的另一種方法，物件名['屬性名']
（3）.呼叫物件的方法 物件名.方法名()
console.log(star.name)
console.log(star['name'])
star.sayHi();

變數、屬性、函式、方法總結

變數：單獨宣告賦值，單獨存在
屬性：物件里面的變數稱為屬性，不需要宣告，用來描述該物件的特征
函式：單獨存在的，通過函式名()的方式就可以呼叫
方法：物件里面的函式稱為方法，方法不需要宣告，使用物件.方法名()的方式就可以呼叫，方法用來描述該物件的行為和功能

15.3 遍歷物件屬性
for....in...陳述句對于陣列或者物件的屬性進行回圈操作
var obj = {
    name:'William',
    age:18,
    sex:'Male'
    fn:function(){}
}

for (var k in obj){
    console.log(k);       // k 變數 輸出 得到的是 屬性名
    console.log(obj[k]); //  obj[k] 得到是 屬性值
}

15.4 內置物件
JavaScript中的物件分為3種：自定義物件，內置物件，瀏覽器物件
內置物件就是指JS語言自帶的一些物件，這些物件供開發者使用，并提供了一些常用的或是最基本而必要的功能(屬性和方法)
MDN檔案：https://developer.mozilla.org/zh-CN/






        
      轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/5448.html
      標籤：JavaScript 
      上一篇：echart 踩坑記錄
下一篇：[Go] GO語言實戰-為博客園增加gofly在線客服功能

方式	說明	案例
`parselnt(string)`函式	將`string`型別轉換成整數數值型	`parselnt('78')`
`parseFloat(string)`函式	將`string`型別轉換成浮點數數值型	`parseFloat('78.21')`
`Number()`強制轉換函式	將`string`型別轉換成數值型	`Number('12')`
js隱式轉換`(- * / )`減法，乘法，除法	利用算術運算隱式轉換為數值型	`'12' - 0`

方法	說明	歸屬
alert(msg)	瀏覽器彈出警示框	瀏覽器
console.log(msg)	瀏覽器控制臺列印輸出資訊	瀏覽器
prompt(info)	瀏覽器彈出輸入框，用戶可以輸入	瀏覽器

情況	說明	結果
var age;console.log(age);	只宣告不賦值	undenfined
console.log(age)	不申明不賦值直接使用	報錯
age = 10;console.log(age);	不宣告只賦值	10

簡單資料型別	說明	默認值
Number	數字型，包含整型值和浮點值，如`21`，`0.21`	0
Boolean	布林值型別，如`true`,`false`,等價于1和0
String	字串型別，如"張三"，注意JS里面，字串都帶引號	""
Undefined	`var a;`宣告了變數`a` 但是沒有給值，此時`a = undefined`	undefined
Null	`var a = null;`宣告了變數`a`為空值

方式	說明	案例
`toString()`	轉成字串	`var num=1;alert(num.toString());`
`String()`強制轉換	轉成字串	`var num=1;alert(String(num));`
加號拼接字串	和字串拼接的結果都是字串	`var num=1;alert(num+"I am string");`

符號	作用	用法
`=`	賦值	把右邊給左邊
`==`	判斷	判斷兩邊值是否相等(注意此時有隱式轉換)
`===`	全等	判斷兩邊的值和資料型別是否完全相同

運算子	描述	例子
`&&`	and	`(x<10 && y>1) //true`
`\|\|`	or	`(x==5\|\|y==5) //false`
`!`	not	`(x==y) //false`

賦值運算子	說明	案例
`=`	直接賦值	`var userName='Name';`
`+=`,`-=`	加，減一個數后再賦值	`var age = 10;age+=5; //15`
`*=`,`/=`,`%=`	乘，除，取模后再賦值	`var age = 2; age *= 5; //10`

優先級	運算子	順序
1	小括號	`()`
2	一元運算子	`++ -- !`
3	算術運算子	先`* / %`后`+ -`
4	關系運算子	`> >= < <=`
5	相等運算子	`== != === !==`
6	邏輯運算子	先`&&`后`\|\|`
7	賦值運算子	`=`
8	逗號運算子	`,`

引數	說明
形參	形式上的引數，函式定義的時候傳遞的引數，當前并不知道是什么
實參	實際上的引數，函式呼叫的時候傳遞的引數，實參是傳遞給形參的