天天看點
傳回

前端JavaScript學習筆記前端JavaScript學習筆記

前端JavaScript學習筆記

1、認識JavaScript

​ JavaScript ( JS ) 是一種具有函數優先的輕量級，解釋型或即時編譯型的程式設計語言。JavaScript 是一種基于原型程式設計、多範式的動态腳本語言，并且支援面向對象、指令式和聲明式（如函數式程式設計）風格。

JavaScript的組成部分

  • ECMAScript，描述了該語言的文法和基本對象
  • 文檔對象模型(DOM)，描述處理網頁内容的方法和接口
  • 浏覽器對象模型(BOM)，描述與浏覽器進行互動的方法和接口

2、JavaScript組成

1、ECMAScript

​ 注釋 //、

​ 變量 var let const

​ 操作符

​ 流程控制語句

​ 數組

​ 對象

​ 函數

​ 正規表達式

​ …

2、DOM：Document Object Model文檔對象模型

​ js操作html的api

​ 是針對XTML但經過擴充用于HTML的應用程式程式設計接口。DOM将整個頁面映射成為一個多節點結構。

​ var dom=document.getElementsByTagName(“input”);

​ var dom=document.getElementById(“input_name”);

​ dom.οnclick=function(){}

​ js語言：基礎語言、基礎庫、擴充庫(jQuery DOM庫)

3、BOM:Borwser Object Model浏覽器對象模型

​ js操作浏覽器的api

​ 開發人員可以使用BOM控制浏覽器顯示的頁面以外的部分。彈出新浏覽器視窗；移動、縮放、關閉浏覽器的功能；提供浏覽器詳情資訊的navigator對象；提供浏覽器所加載頁面的詳情資訊的location對象；提供使用者顯示器分辨率詳情資訊的screen對象；對cookies的支援；支援XMLHttpRequest,IE中的ActiveXObject自定義對象。

​ alert()/prompt()/confirm()

​ setInterval(),setTimeout()

​ XMLHttpRequest(用于在背景與伺服器交換資料)

​ Ajax

4、js的特點

​ 1、解釋型語言

​ js->nodejs(js解釋器)

​ 2、弱類型語言

​ 變量的類型取決于值的資料類型

​ 3、順序解釋執行 自上而下

​ 4、既可以作為前端腳本語言，也可以作為後端語言，去決議應用平台(浏覽器/作業系統)和使用的架構(dom、jquery/http、mysql、flie)

5、在網頁上使用JavaScript

​ 内部JavaScript

​ 編寫好HTML，在标簽體中添加

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="hello.js"></script>
</head>
<body>
</body>
</html>

​ 外部JavaScript

​ 單獨建立一個字尾名為.js的js檔案，編寫好HTML檔案，在标簽體内添加元素，使用script标簽的src屬性将js檔案導入進來。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="hello.js"></script>
</head>
<body>
</body>
</html>

6、在body和head中使用JavaScript的差別

​ 在body部分中的JavaScript會在頁面加載的時候被執行，在head部分中的JavaScript會在被調用 的時候才執行

​ 因為浏覽器解析html是自上而下的，如果把JavaScript放在head裡的話，則先被解析，但這時候body還沒解析，是以會傳回空值，一般都會綁定一個監聽，當全部的html文檔解析完之後在執行代碼

windows.onload = function(){
	// 這裡放執行的代碼
}

​ 這就說明了，如果我們想定義一個全局對象，而且這個對象是頁面中的某個按鈕時，我們必須将其放在body中，道理很明顯：如果放入head，當你定義的時候，那個按鈕都沒有被加載，可能獲得的是一個undefined。一般習慣将JaveScirpt放在body的後面。

3、關鍵字和保留字

關鍵字:(在js中有特殊功能)

break do try typeof

case else new var

catch finally return void

continue for switch while

debugger this function with

default if throw instanceof

delete in

保留字：(将來可能成為關鍵字)

abstract enum int short

boolean export interface static

byte extends long super

char final native synchronized

class float package throws

const goto private transient

debugger double implements protected

volatile import public

1、區分大小寫

typeof關鍵字 ，typeOf非關鍵字

2、辨別符

指變量，函數，屬性的名字或者函數的參數。辨別符是按照以下規則組合起來的一或多個字元：

​ 1、字母，數字，下劃線，$組成

​ 2、隻能以字母，下劃線，$開頭

​ 3、不能将關鍵字作為辨別符。

​ 4、語句：每個語句以分号結尾，如果省略分号，有解析器确定語句的結尾

4、變量

​ 變量是一個值的容器，該容器的值可以随時改變。ECMAScript的變量是弱類型(松散類型)，可以用來儲存任何類型的資料，定義變量時使用var關鍵字。

  • 變量的使用

​ 變量的使用一般經過聲明，初始化，使用三個步驟

// 變量聲明
var a ;
// 變量初始化
a = 3;
// 變量調用
console.log(a);

  • js是弱類型語言

    弱類型語言具有如下特點：

    ​ 1、變量的資料類型在初始化的時候确定

    ​ 2、變量的資料類型可以随時發生改變

    ​ 3、類型細分不明顯

  • var

​ 1、變量可以重複聲明

var a = b = c = 3;
var d = 10,e = 20,f,g;
//弱類型語言，變量容器可以混合使用
var a = "hello world";//變量的重複指派（相同的資料類型、不同的資料類型）  
function a(){}

​ 2、變量聲明會被提升(函數的聲明也會提升)

//console.log(b);//報錯
console.log(a);//不會報錯
var a = 3;
//等價于：
var a;//在所有代碼執行之前，js解釋器會将js中所有的var聲明的變量提升。
console.log(a);
a=3;

​ 3、var聲明的變量的作用域

function foo(){
  if(true){
    var a = 3;  
    console.log("inner",a);//inner 3
  }
  console.log("outer",a);//outer 3  //沒有塊級作用域
}
foo();
console.log(a);//error!  函數作用域：局部作用域
// var 的變量聲明提前知會提升到目前作用域的最前面

5、資料類型

JavaScript的基本資料類型：

值類型(基本類型)：字元串(String)、數字（Number)、布爾(Boolean)、對空(Null)、未定義(Undefined)、Symbol。

引用資料類型：對象(Object)、數組(Array)、函數(Function)

注意：Symbol是ES6引入了一種新的原始資料類型，表示獨一無二的值。

JavaScript擁有動态類型

JavaScript擁有動态類型。這意味着相同的變量可用作不同的類型

var x;               // x 為 undefined
var x = 5;           // 現在 x 為數字
var x = "John";      // 現在 x 為字元串
字元串String

字元串是可以存儲字元的變量

字元串可以是引号中的任意文本，可以使用單引号或雙引号：

var carname="Volvo XC60";
var carname='Volvo XC60';

可以在字元中使用引号，隻要不比對包圍字元串的引号即可：

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

可以使用字元字面量，轉義字元

\n 換行 \t 制表 \b 倒退

\r 回車 \ 斜杠 ’ 單引号

" 雙引号

字元長度可以通過length屬性擷取字元長度

數字Number

JavaScript 隻有一種數字類型。數字有很多類型，按照數字精度可以分為整數(int),單精度(float),雙精度(double )，按照數字的表示方法可以分為二進制(Binary)，八進制(Octal)，十進制(decimal system)，十六進制(Hexadecimal)。但是在js中，所有的數字統一使用Number來表示。

整數

​ 十進制 55 由0~9組成

​ 八進制 070 首位為0 其他位由0~7組成

​ 十六進制 0x11 首位為0x 其他位由0~9 A~F組成

浮點數

​ 浮點數值，就是該數值中必須包含一個小數點，并且小數點後面必須至少有一位數字。浮點數的最高精度是17位小數。

​ 普通浮點數 3.1415926

​ 科學計數法 3.125e7 即31250000

非數值

​ 該數值表示一個本來要傳回的數值的操作數未傳回資料的情況

布爾Boolean

​ 布爾(邏輯) 隻有兩個值：true或false

Null

​ 該類型的取值隻有一個，即null。null可以表示一個空指針。

​ 如果一個變量準備将來儲存對象，可以将該變量初始化null而不是其他，這樣可以通過檢查null值就可以知道

相應的變量是否已經儲存了一個對象的引用。

undefined

​ undefined這個值表示變量不含有值。未定義的。

var a;
console.log(a,typeof a);//undefined 'undefined'
var a = undefined;
console.log(a,typeof a);//undefined 'undefined'
undefined和null關系

​ undefined繼承null，是以undefined==null的結果為true，但是null表示空對象，undefined表示未定義。

​ null與undefined用途不同，null可以用來表示一個空對象，但是沒有必要把一個變量的值顯式設定為undefined。

//null vs undefined
console.log(undefined == null); //true  //undefined派生自null
console.log(undefined === null);//false
if(null == undefined){console.log('相等的')}
if(null === undefined){console.log('完全相等')}
// ==， 等同  的意思， 兩邊值類型不同的時候，要先進行類型轉換為同一類型後，再比較值是否相等。 
// ===，恒等  的意思， 不做類型轉換，類型不同的結果一定不等。
// "=="表示隻要值相等即可為真，而"==="則要求不僅值相等，而且也要求類型相同。
// 建議：盡量使用嚴格運算符 ===。因為"=="不嚴謹，可能會帶來一些違反直覺的後果。

引用資料類型

在js中除了以上的基本資料類型，其他的所有資料類型都可以歸結為引用資料類型

對象Object

​ 對象是模拟現實生活的對象，對象有鍵值對組成，通過使用大括号将所有的鍵值對括起來。

var dog = {
	name: 'momo',
	age: 4
}

可以通過點文法擷取對象的屬性

dog.name; //momo
dog.age;	//age
數組Array

​ 數組是一個特殊的對象，包含了多個值，值與值之間使用逗号隔開，所有的值通過中括号括起來。

var classArr = ['web2104','web2105','web2106']
var studentArr = ['zhangsan','lisi','wangwu']

​ 可以通過數組下标擷取對應的資料

函數Function

​ 函數是代碼執行單元，用于實作某些特殊的功能。

function sum(a, b) {
  return a + b;
}
//執行函數
sum(1,2); // 3

基本資料類型和引用資料類型在記憶體中如何存儲

  • 基本資料類型

基本資料類型變量都維護在棧區，基本資料類型的值儲存在棧區。

例如：

var a = 123;
b = a;
a = 456;

1、var a=123;b=a;基本資料類型是在棧記憶體中存儲的，如下圖，b=a的時候，b直接把a的值存進去

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-pWUGrkcz-1631098228215)(images/image-20210825185435874.png)]

2、a=456;會把a的值改為456，但對b沒有任何影響，是以最後會輸出a=456;b=123;

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-Om1AgEJ5-1631098228218)(images/image-20210825185626995.png)]

結論：基本資料類型的值存在棧，值與值之間獨立存在，修改一個值不會影響其他變量
  • 引入資料類型

​ 引入資料類型的引用位址儲存在棧區，值儲存在堆區。

var obj = {
  name: 'zhangsan'
}
var obj1 = obj; //将對象obj指派給對象obj1
console.log(obj.name);  //zhangsan
console.log(obj1.name); //zhangsan

// 修改obj的name
// 當obj屬性name變為"lisi"時，obj1屬性name也變為"lisi"
obj.name = 'lisi';
console.log(obj.name);  //lisi
console.log(obj1.name); //lisi

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-lfTofQJb-1631098228222)(images/image-20210825190249108.png)]

結論：當棧存放引用類型時，值為對象的位址，obj與obj1指向同一個位址，是以當obj的name值變為“lisi”,obj1也會發生變化
  • 深拷貝與淺拷貝

主要針對引用資料類型參數說的，淺拷貝表示僅拷貝引用位址，深拷貝表示對于對象的克隆。

實作深拷貝的方法
  • 通過json對象實作深拷貝(JSON.stringify,JSON.parse)
  • Object.assign()拷貝
  • lodash函數庫實作深拷貝
  • 遞歸的方式實作深拷貝

6、類型判斷

  • typeof

​ 使用typeof判斷資料類型

​ 傳回該變量名所指向資料的類型

​ 文法： typeof 變量名

​ 傳回值如下：

​ “undefined” 未定義

​ “boolean” 布爾類型

​ “string” 字元串

​ “number” 數值

​ “object” 對象或者null或者數組

​ “function” 函數

​ 通過typeof可以判斷一個變量的類型

var a = 3;
typeof a;  // number
if((typeof a) == "string"){}
if(a == "null"){}
if(a == null){}
  • isNaN

​ 判斷是否 不是一個數字

var a = 10/'a';
isNaN(a);    //true
  • isFinite

​ 判斷是否是一個有效值

var a = 10/0 ;
isFinite(a)   // false

據類型

​ 傳回該變量名所指向資料的類型

​ 文法： typeof 變量名

​ 傳回值如下：

​ “undefined” 未定義

​ “boolean” 布爾類型

​ “string” 字元串

​ “number” 數值

​ “object” 對象或者null或者數組

​ “function” 函數

​ 通過typeof可以判斷一個變量的類型

var a = 3;
typeof a;  // number
if((typeof a) == "string"){}
if(a == "null"){}
if(a == null){}
  • isNaN

​ 判斷是否 不是一個數字

var a = 10/'a';
isNaN(a);    //true
  • isFinite

​ 判斷是否是一個有效值

var a = 10/0 ;
isFinite(a)   // false
javascript html5 html
上一篇: linux普通使用者取得root,如何讓普通使用者擷取root使用者的權限
下一篇: linux設定普通使用者的root權限

繼續閱讀