javascript
JS每日笔记
js 簡介
JS是什么
- JS是一種運行在客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能
- 瀏覽器就是一種運行JS腳本語言的客戶端，JS的解釋器被稱為JS引擎，為瀏覽器的一部分
JS 的組成
- JavaScript 是由 ECMAScript，DOM 和 BOM 三者組成的。
- ECMAScript: 定義了JavaScript 的語法規范,描述了語言的基本語法和數據類型
- DOM (Document Object Model): 文檔對象模型
- BOM (Browser Object Model): 瀏覽器對象模型
js 的三種書寫方式
- 行內式（強烈不推薦）
? ? =>a 標簽
? ? =>書寫在 href 屬性上，一定要書寫一個 javascript；一段js 代碼；
=>非a標簽
? ?-> 書寫一個行為屬性，例如：onclick（當點擊在標簽身上的時候）
? ?->直接在屬性值的位置書寫 js 代碼即可?
- 內嵌式（不太推薦）
- 外鏈式（推薦）
? ? ? =>把 js 代碼書寫在一個 .js后綴的文件內，在當前 html 文件內以 script 標簽的script 標簽的 src 屬性引入頁面
? ? ? =>注意： 1.script 標簽引入的 js 文件會直接執行，不需要依賴行為
?2.script 標簽書寫在 body 的末尾或者 head 的末尾
?3.一個標簽被當作外鏈式引入js文件后 ，就不能被當作 內嵌式使用了
js 定義變量
?什么是變量？
?變量是計算機內存中存儲數據的標識符，根據變量名稱可以獲取到內存中存儲的數據；
?變量其實就相當于一個容器，內部可以存儲任意類型的數據，使用變量時，用的是內部存儲的數據。
為什么要定義變量？
使用變量可以方便的獲取或者修改內存中的數據
如何定義變量
使用一個 var 的關鍵字進行定義，后面必須加一個空格，空格后面自定義變量名
var a; var b; var c;變量賦值
- 變量定義之后，初始時沒有進行賦值，內部有一個默認存儲的值叫 undefined(未定義) 表示內部未賦值，但可以存儲數據了
- 變量賦值的方式：通過等號 = 賦值，等號右邊的值賦值給左邊的變量 ==（等號在 JS 中叫做 賦值號；書寫時，等號 = 兩側習慣書寫一個空格）==
使用變量
直接寫變量名即可使用變量；變量在使用前，必須先有定義，如果沒有定義，會出現引用錯誤
變量命名規則（必須遵守，不遵守會報錯）
- 由字母、數字、下劃線、$符號組成，不能以數字開頭
- 字母區分大小寫
- 不能是關鍵字和保留字
- 關鍵字指的是js中有特殊功能的小詞語，比如var、for等
- 保留字指的是現在沒有特殊功能，但是將來新語法中有可能作為關鍵字使用
變量命名規范（建議遵守的，不遵守不會報錯）
- 變量名必須有意義
- 遵守駝峰命名法
js 數據類型
JS中的值，無論是字面量還是變量，都有明確的類型
- 數據類型分類(以基本數據類型為主)
- Number 數字類型
- 不區分整數、浮點數、特殊值，都是 Number 類型
- String 字符串類型
- 所有的字符串都是 String 類型
- undefined undefined類型
- ndefined本身就是一個數據，表示未定義，變量只聲明不賦值的時候，值默認是 undefined
- Boolean 布爾類型
- Boolean 字面量：只有 true 和 false 兩個字面量的值，必須是小寫字母
- 計算機內部存儲：true 為 1，false 為 0
- null null類型
- null 本身就是一個數據
- 從邏輯角度，null 值表示一個空對象指針
- 如果定義的變量準備在將來用于保存對象，最好該變量初始化為 null
- Object 對象類型（后續課程詳細講解）
- Number 數字類型
數據類型檢測
- 為什么要有數據類型檢測？
- JS語言是一門動態類型的語言，變量并沒有一個單獨的數據類型，而是會隨著內部存儲數據的變化，數據類型也會發生變化
- 變量的數據類型，與內部存儲數據有關
- 將來使用變量時，需要知道內部存儲的數據是什么類型，避免程序出錯
- 使用 typeof 的方法進行數據檢測
- 檢測方式：在 typeof 后面加小括號執行，將要檢測的數據放在小括號內部
數據類型轉換(轉數值 / 轉字符串 / 轉布爾)
轉數值
- 轉型函數Number()可以用于任何數據類型，將其他數據類型轉為數字
- 字符串：純數字字符串轉為對應數字，空字符串和空白字符串轉為0，非空非純數字字符串轉為NaN
- 布爾值：true轉為1，false轉為0
- undefined：轉為NaN
- null：轉為0
- 對浮點數進行取整操作
- 對數字取整直接舍棄小數部分，只保留整數
- 將字符串轉為整數數字
- 將字符串轉為整數數字，也包含取整功能
- 字符串中，必須是純數字字符串或者數字字符開頭的字符串，才能轉換為正常數字，且只取整數部分
- 如果不是數字打頭的字符串，會轉換為NaN
- 將字符串轉為浮點數數字
- 滿足浮點數數字字符必須在字符串開始，如果不在開始返回值都是NaN
轉字符串
- num + “” ,當 + 兩邊一個操作符是字符串類型，一個操作符是其他類型的時候，會先把其他類型轉換成字符串在進行字符串拼接，返回字符串
轉布爾
- 轉型函數Boolean()可以用于任何數據類型，將其他數據類型轉為布爾類型的值
- 轉為false：NaN、0、“”空字符串、null、undefined
- 轉為true：非0 非NaN數字、非空字符串
js 運算符
- 什么是運算符？
- 也叫操作符，是 JS 中發起運算最簡單的方式，例如： 5 + 6
- 表達式的組成包含操作數和操作符，表達式會得到一個結果，然后用結果參與程序
JS 運算符分類
- 算數運算符(?+?/?-?/?*?/?/?/?%?)
- 運算順序與數學中的運算順序一致，先乘除取余，后加減，有小括號先算小括號
- 賦值運算符(?=?/?+=?/?-=?/?*=?/?/=?/?%=?)
- 比較運算符(?>?/?<?/?>=?/?<=?/?==?/?===?/?!=?/?!==?)
- 比較結果只會返回一個布爾類型值，true 或者 false
- 邏輯運算符(?&&?/?||?/?!?)
- 自增自減運算符(?++?/?--?)
運算符優先級從高到低
- 自增自減運算符++ -- !
- 算術運算符 先* / % 后+ -
- 比較運算符中的 > >= < <=
- 比較運算符中的 == != === !==
- 邏輯運算符 先&& 后||
- 賦值運算符
JS分支語句
- JS 代碼是從上往下按照順序依次執行的, 從第一行代碼一直執行到最后一行
- 如果有一種情況是我有兩段代碼, 我只需要執行其中一個即可, 那么就可以用到分支語句
- 簡單來說: 分支語句就是根據我們設定好的條件來決定要不要執行某些代碼
if 分支語句
- if 分支語句的基本書寫
- 語法:?if (條件) { 想要執行的代碼 }
- if ... else 語句的基本書寫
- 語法:?if (條件) { 條件為真時 執行的代碼 } else { 條件為假時 執行的代碼 }
- if 嵌套語句的基本書寫
- 可以通過?if?和?else if?來設置多個條件進行判斷
- 語法:?if(條件1){條件1為true時執行} else if (條件2){條件2為true時執行}
- 會從頭開始依次判斷條件
- 如果第一個條件為 true 了, 那么就會執行后面的 {} 的內容
- 如果第一個條件為 false, 那么就會判斷第二個條件
- 如果第二個條件也為 false, 那么會依次往后執行
- 注意
- 多個 {} 只會有一個被執行, 一旦有一個條件為 true 了, 后面的就不再判斷了
- 如果所有的 條件都為 false, 那么會執行最后的 else {} 分支
- 如果所有的條件都為 false, 且沒有最后的 else {} 分支, 那么當前 if 分支不會有任何代碼段會被執行
switch 分支語句
- switch 也是 條件判斷語句的一種, 是對于某一個變量的判斷(三個等于號全等的判斷,數據類型不一致時會導致判斷失敗)
- switch 分支語句的基本書寫
- switch 通常是判斷某一個變量等于某一個值的時候使用, 比如用戶輸入一個數字顯示今天周幾, 輸入一個數字顯示今天是幾月
- switch 穿透語句的基本書寫
-
從第一個滿足條件的 case 開始
-
如果沒有 break, 一直執行代碼直到遇到一個 break 或者 switch 結束
-
三元表達式
- 三元表達式(三元運算/三目運算/三目/問號冒號表達式)
- 語法： 條件 ？ 條件正確時執行的代碼 ：條件不正確時執行的代碼
// 給變量賦值 var num = 1 // 我們暫且規定 num == 1 時代表為男性,
num == 2 時代表為女性
var gender = num == 1 ? '男' : '女' console.log(gender)
# 循環語句
- 什么是循環語句
- 根據某些給出的條件,重復執行同一段代碼
- 循環必須要有某些固定的內容組成
- 初始化
- 條件判斷
- 要執行的代碼
- 自身改變
while 循環語句
- while，中文叫 當…時，其實就是當條件滿足時就執行代碼，一旦不滿足了就不執行了
- 語法?while (條件) { 滿足條件就會執行 }
- 因為滿足條件就執行, 所以我們寫的時候一定要注意, 就是設定一個邊界值, 不然就一直循環下去了, 簡稱: 死循環, 電腦卡死的時間根據電腦性能有所不同, 建議不要嘗試
do...while 循環語句
- 是一個和 while 循環類似的循環
- while 會先進行條件判斷, 滿足就執行, 不滿足就直接不執行了
- do...while 的循環是 先不管條件, 先執行一次, 然后再開始進行條件判斷
- 語法:?do { 要執行的代碼 } while (條件)
for 循環語句
- 和 while do while 循環都不太一樣的一種循環結構
- 但道理是和其他兩種一樣的, 都是循環執行代碼的
- 語法:?for (var i = 0; i < 10; i++) { 要執行的代碼 }
流程控制語句
- break 關鍵字的應用
- 在循環沒有進行完畢的時候, 因為我設置的條件滿足了, 就直接提前終止循環
- 舉個例子: 我要吃五個包子, 我吃了三個了, 這時候吃飽了吃不下去了, 我就停止了繼續吃包子這件事
- 那么此時要停止循環, 就可以直接使用 break 關鍵字
- continue 關鍵字的應用
- 在循環中, 把循環的本次跳過去, 繼續執行后續的循環
- 舉個例子: 還是吃五個包子, 要吃第三個的時候, 第三個掉地上了, 所以就不吃第三個了, 繼續吃第四個和第五個
- 跳過本次循環, 就可以使用 continue 關鍵字
循環嵌套的書寫
- 循環嵌套其實就是一個循環內部又寫了一個循環
函數
- 什么是函數？
- 在 JS 中，函數可以理解為將一段在程序中多次出現的代碼封裝起來的盒子，以便在多個地方調用執行
- 換句話說：函數就是一個內部封裝了部分代碼的盒子，可以在多個位置被調用
- 函數的使用
- 創建函數（定義函數）
- 調用函數
函數的定義
- 聲明式定義
- 賦值式定義
函數的調用
function fn1() {} var fn2 = function () {}fn1() fn2() 復制代碼聲明式與賦值式的區別
- 書寫區別
- 調用區別(賦值式只可以在定義后調用，聲明式定義前后都可以)
函數的參數
- 函數的參數有形參和實參（他們是從左到右的順序一一對應的）
- 形參：在函數聲明時 function 后邊的（）內書寫，每寫一個參數，就相當于在函數內部創建一個變量，其值為函數調用時傳遞的值，只能在函數內部使用，不能在外部使用
- 實參：顧名思義，實際的參數，也就是函數在調用時傳遞的參數
- 傳參的多與少
函數的返回值
- 返回值是什么？有什么作用
- 函數內部默認有一個 return 他的值就是函數的返回值，如果函數內部不寫 return 那么函數默認在函數體內部最底部返回一個 undefined
- 如果不想返回 undefined 需要手動在函數內部寫上 return 并且跟上需要返回的值
- 可以中斷函數(返回1 2 3return后面的代碼會終止)
函數的預解析
- 什么是預解析
- 在代碼運行前，先全部分析一遍代碼，這個行為叫做預解析（預解釋）
- 預解析的內容
- 聲明式函數定義
- var 聲明變量
??作用域(就是變量可以起作用的范圍)
- ? ? ? ? ?作用域分為兩個
- ? ? ? ? 1.全局作用域（直接在script 標簽內部書寫的代碼）
? ? ? ? 在此作用域創建的變量，我們叫做全局變量，在當前 script 標簽內的哪里都能使用
? ? ? ? ?在 JS中，全局作用域中有一個 ?提前給我們準備好的 對象（一種數據格式，）
? ? ? ? ?這個對象叫做window
? ? ? ? ?我們創建的全局變量，只能在當前作用域中使用，超出這個作用域（也就是在函數外邊）去使用， 就會找不到變量
? ? ? ? ?
?作用域鏈
- ? ? ? ? ?作用域鏈就是在訪問一個變量的時候, 如果當前作用域內沒有
- ? ? ? ? ?會去自己的父級作用域, 也就是上一層作用域內查找, 如果找到就直接使用, 如果沒有找到繼續向上層查找
- ? ? ? ? ?直到查找到 最頂層的全局作用域, 如果找到了直接使用, 如果沒找到 報錯提示變量不存在(未定義)
- ? ? ? ? ?我們將這個一層一層向上查找的規律, 叫做作用域鏈
遞歸函數（還是一個函數，在函數內部調用和使用自身）
? ? 和循環差不多
?
?對象
對象是JS中的一種數據格式，對象在 JS 中的數據類型數據為: 引用數據類型(復雜數據類型)<br>
? ? ? ? 鍵值對 -> key: value
? ? ? 如果對象內部有多個 鍵值對, 那么需要使用 逗號 間隔 <br> ?
? ? ??
? ? ? ? 語法1: var obj = {鍵值對}
? ? ? ? ?
創建對象
? ? ?創建對象 ? 分為兩種方式：
? ? ? ? ? 1.字面量的形式（使用頻率比較高）
? ? ? ? ? 語法;var obj={鍵值對}
? ? ? ? ? 2.內部構造函數的創建
? ? ? ? ? ? ? ? 語法1： var obj1=new Object（）//創建空對象
? ? ? ? ? ? ? ? 語法2： ?var obj2=new ?Object({a : 1, b : 2}) //創建一個具有屬性或者說具有鍵值對的 對象
? ? ? ? ? ? ?
? ? ? ?
??
對象的操作 （增刪改查）
?
?一般大部分情況下，點語法與中括號語法，作用相同，怎么選擇都可以
? ? ? ? 特殊情況下我們需要中括號語法
? ? ? ? ?1.對象的屬性名，有純數字或者特殊符號(100,'!','@')，這個時候，就只能使用中括號語法
? ? ? ? ?2.如果涉及變量相關的時候，也需要中括號語法
? ?
? ? ?
?for...in 循環遍歷對象
? ? ? ? ? 語法: for (var i in 要遍歷的對象) { 循環要執行的代碼 }
? ? ? ? ? '遍歷對象' 想辦法拿到對象內部所有的 屬性名與屬性值? ? ? ?
?
? ??
?創建數組的方法
? ?分兩種方式
? ? ? ? ? 1.字面量方式
? ? ? ? ? ?語法：var arr =[1, 2, 3, 'qwe', true]
? ? ? ? ? 2.構造函數的方式
? ? ? ? ? ?語法1：var arr = new Array() ?創建一個空對象
? ? ? ? ? ?語法2：var arr = new Array(5)創建一個有長度的數組
? ? ? ? ? ?語法3; ? var arr = new Array(1,2,3)創建一個有內容的數組?
? ? ?
? ? ? ?
? ? ? ??
? ? ? ??
? 數組的length 屬性
? ? ? ? ? length翻譯過來就是長度的意思
? ? ? ? ? ? ? ?代表這個數組內，有多少個成員
? ? ? ? ? ? ? 語法： ? 數組名.length
? ?
? ? ? ??
??
?數組的索引(下標)
? ? ? ? 就是指一個數據，在這個數組內排列在第幾個 ?位置上
? ? ? ? 注意： ?在JS 中，索引(下標)是從0開始計如果想要獲取到數組指定位置的值，可以通過下標來獲取
? ? ? ? 語法：數組名[下標] --> 能夠獲取到這個數組中對應下標的成員具體的值
? ?
? ??遍歷數組
? ? ? ? ? 想辦法 ?拿到 ?數組每一個成員
? ? ? ? ? 想拿到數組的所有成員，需要先想辦法拿到數組所有的下標
? ? ? ? ? 規律： ?所有數組的下標都是從0開始的， ?然后 到 ?數組 .length - 1 結束
? ? ? ??
? ? ?
? ? ? ??
?冒泡排序：
? ? ?屬于數組排序的算法之一（通過一種算法將一個亂序的數組，調整為指定的排序的數組，從大到小或者從小到大）
選擇排序：
? ? 原理 首先從原始數組中找到最小的元素，并把該元素放在數組的最前面，然后再從剩下的元素中尋找最小的元素，放在之前最小元素的后面，直到排序完畢。
數據類型之間的區別（分為兩種）
?1.基本數據類型（簡單數據類型）
?2. 引用數據類型（復雜數據類型）
##### 1. 存儲
? ? ? ? ? ?變量的數據存儲的地方是 內存中, 內存分為兩個 棧內存, 堆內存
? ? ? ? ? ? 基本數據類型：存儲在 棧內存中, 比如: string number undefined null ?boolean
? ? ? ? ? ? 復雜數據類型： 將數據本體存放在堆內存中, 比如對象或者數組或者函數
? ? ? ? ? ? 然后將指向該內存的地址, 存放在數組名或者對象名或者函數名中
? ? ? ? ? ? 數組/對象/函數 ?名 ?存放在 棧內存中
? 面試題: 數據類型之間有什么區別?
? ? ? ? ? 基本數據類型有哪些, 然后他們存儲的地方是 棧內存中
? ? ? ? ? 引用數據類型有哪些, 然后他們數據本體存放的地方是 堆內存中, 然后變量名存儲的位置是 棧內存中
? ? ? ? ? 基本數據類型內部存儲的是值; 引用數據類型內部存儲的是地址
? ? ? ? ?
##### 2. 賦值
? ? ? ? ? ? ? ? ? ? 基本數據類型: 賦值以后, 兩個變量之間沒有任何關系, 相當于將我自己的某一個東西, 復制一份給你, 然后你的就是你的, 我的就是我的（你的和我的之間沒有任何關系） ? ? ? ? ?
? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? 復雜數據類型: 因為變量內部存儲的是指向堆內存的地址, 所以在賦值的時候, 其實是將 這個地址給到了另外一個變量（兩個地址一樣是你的也是我的）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 那么相當于這兩個變量存儲的是 ?同一個 鑰匙, 所以操作其中一個變量的時候, 會影響另外一個變量
##### 3. 比較
? ? ? ? ? ? ? ? ? ? 基本數據類型: 就是 值 的比較
? ? ? ? ? ? ? ? ? ? 引用數據類型: 比較的時候 比較的是 存儲地址
##### 4. 傳參
? ? ? ? ? ? ? ? ? ? 基本數據類型: 將值拷貝一份傳遞給形參, 在函數內修改不會影響外界
? ? ? ? ? ? ? ? ? ? 引用數據類型: 將存儲地址賦值給形參, 在函數內修改會影響外界
? ? ? ? ? ? ? ? ?
數組的常用方法
? 1、push?
? ? ? ?語法：數組.push（數據）
? ? ? ?作用：向數組末尾添加數據
? ? ? ?返回值：追加數據后，數組最新長度（length）
? 2.pop
? ? ? ?語法：數組.pop()
? ? ? ?作用：刪除數組最后一條數據
? ? ? ?返回值：被刪除的數據
? 3.unshift
? ? ? ?語法：數組.unshift(數據)
? ? ? ?作用：像數組開頭添加數據
? ? ? ?返回值：添加數組后，數組最新長度(length)
? 4.shift ?
? ? ? ?語法：數組.shift()
? ? ? ?作用：刪除數組開頭數據
? ? ? ?返回值：被刪除的數據
?5.reverse
? ? ? ?語法：數組.reverse()
? ? ? ?作用：反轉數組
? ? ? ?返回值：反轉后的數組
?6.sort
? ? ? ? 語法1：數組.sort()
? ? ? ? 作用：會將數組轉換為字符串后 ，一位一位的對比
? ? ? ? 語法2：.sort(function(a,b){return a - b})
? ? ? ? 作用：會按照數組大小升序排列
? ? ? ? ?語法3： ?.sort(function(a,b){return b - a})?
? ? ? ? 作用：會按照數組大小降序排列(不能轉的按照原始數組排列)
? ? ? ? 返回值：排序后的數組
?7.splice
? ? ? ? ?語法1：數組.splice(開始索引，多少個)
? ? ? ? ?作用：截取數組部分內容 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?語法2：數組.splice(開始索引，多少個,插入的數據1，插入的數據2，插入的數據3.......)
? ? ? ? ?作用：截取數組部分內容，并插入新的數據
? ? ? ? ?返回值：截取出來的部分內容 ?組成的 數組
?8.slice
? ? ? ? 語法：數組.slice(開始索引，結束索引) ??
? ? ? ? 參數：
? ? ? ? ? ?+包前不包后：包含開始索引位置的數據不包含結束索引的位置的數據 ??
? ? ? ? ? ?+不寫開始索引：默認從0開始；不寫結束索引默認 是 數組的length
? ? ? ? ? ?+ 參數支持寫負數，表示倒數幾個 ，其實就是 ?length + 負數
? ? ? ? ?作用：截取數組部分索引
? ? ? ? ?返回值：截取出來的部分 內容組成的新數組
? ??
? ? ? ? ?* 面試題：數組中有兩個方法，splice ?和slice，你能描述一下他們兩個的區別嗎？
? ? ? ? ?1.參數含義不同 ? ?介紹一下 參數哪里不同
? ? ? ? ?2.splice 會改變原數組，而slice不會
?
?9.concat
? ? ? ? ?語法：原始數組.concat(數組1，數組2，數組3，......，數據1，數據2，.......)
? ? ? ? ?作用：進行數組拼接，把數組...數據之類的小括號內的內容，拼接在原始數組中
? ? ? ? 返回值：拼接好的數組
?10.join
? ? ? ? ?語法：數組.join('連接符')
? ? ? ? ?作用：使用"連接符"，把數組內的每一個數據連接成一個字符串(不寫連接符默認使用，連接)
? ? ? ? ?返回值：連接好的字符串
11.indexOf
? ? ? ? ?語法1：數組.indexOf(要檢查的數據)
? ? ? ? ?作用：從前到后(從左到右)檢查該數據第一次在該數組內出現 索引
? ? ? ? ?語法2：數組.indexOf(要檢查的數據，開始索引)
? ? ? ? ?作用：在開始索引的位置，按照從左到右的順序，檢查該數據第一次在該數組內出現的索引
? ? ? ? ?返回值：找到數據的情況下，會將數據第一次出現下標[索引]返回
? ? ? ? ?沒找到的情況下，會直接返回一個 ?-1
? ? ? ? ?備注：開始索引不寫默認是 0
12.lastIndexOf
? ? ? ? 語法1：數組.lastIndexOf (要檢查的數據)?
? ? ? ? 作用：從后向前(從右向左)檢查該數據第一次在該數組內出現 索引
? ? ? ? 語法2：數組.lastIndexOf(要檢查的數據，開始索引)
? ? ? ? 作用：在開始索引的位置，按照從右向左的順序，檢查該數據第一次在該數組內出現的索引
? ? ? ? 返回值：找到數據的情況下，返回第一次出現的下標[索引]
? ? ? ??
? ? ? ? 沒找到的情況下，會直接返回一個 ?-1
遍歷數組的常用方法
? 1.forEach
? ? ? ? ? ? ? ?語法：數組.forEach(function(item,index,origin){})
? ? ? ? ? ? ? ?item:數組的每一項 ?的值
? ? ? ? ? ? ? ?index：數組的每一項 對應的下標
? ? ? ? ? ? ? ? origin：原始數組(了解即可，一般不會用)
? ? ? ? ? ? ? ? 作用：遍歷數組
? ? ? ? ? ? ? ? 返回值：該方法永遠沒有返回值(undefined)
? ? ? ? ? ? ?2.map
? ? ? ? ? ? ? ? 語法：數組.map(function(item,index,origin){ }) 三個參數的意義與foreach 一樣
? ? ? ? ? ? ?作用：映射數組
? ? ? ? ? ? ? ?返回值：返回一個和原數組長度相同的數組，但是內部數據可以經過我們的映射加工
? ? ? ? ? ? ? ?映射加工：就是在函數內 以 return 的形式 書寫
? ? ? ? ??
? ? ? ? ? ? ?有一道面試題：數組常用的遍歷方法有一個 forEach和map ，這兩個方法有什么區別？
? ? ? ? ? ? ? ? ? ? ?1.forEach 的作用是來遍歷數組，而map 的作用是用來映射數組
? ? ? ? ? ? ? ? ? ? ?2.forEach沒有返回值，而map是可以有返回值的
? ? ? ? ??
? ? ? ? ? ? ? 3 . filter
? ? ? ? ? ? ? ? ? ?語法：數組.filter(function(item,index,origin){}) ? ? ? ? ? ? 三個參數的意義與foreach 一樣
? ? ? ? ? ? ? ? ? ? 作用：過濾數組
? ? ? ? ? ? ? ? ? ? 返回值：返回一個新數組，內部存儲的值是原始數組過濾出來的部分內容
? ? ? ? ? ? ? ? ? ?過濾條件：過濾條件以return 的形式書寫
? ? ? ? ??
? ? ? ? ? ? ?4.find
? ? ? ? ? ? ? ? ? ?語法：數組.find(function(item,index,origin){}) ? ? ? ? ? ? ? ? ?三個參數的意義與foreach 一樣
? ? ? ? ? ? ? ? ? ?作用：在數組內查找滿足條件的第一項
? ? ? ? ? ? ? ? ? ?返回值：找到的數據，如果沒有找到返回undefined
? ? ? ? ? ? ? ? ? ?查找條件以 return 的形式書寫
? ? ? ? ? ? 5.findIndex
? ? ? ? ? ? ? ? ? ?語法：數組.findIndex(function(item,index,origin){}) ? ? ? ? ? ? ? ? ?三個參數的意義與foreach 一樣
? ? ? ? ? ? ? ? ? ?作用：在數組內查找滿足條件的第一項 的下標
? ? ? ? ? ? ? ? ? ?返回值：找到的數據 的下標 ，如果沒有找到返回 的是 ?-1
? ? ? ? ? ? ? ? ? ?查找條件以 return 的形式書寫
? ? ? ? ??
? ? ? ? ? ? ? ? 6.some
? ? ? ? ? ? ? ? ? 語法：數組.some(function(item,index,origin){}) ? ? ? ? ? ? ? ? ?三個參數的意義與foreach 一樣
? ? ? ? ? ? ? ? ? ?作用：判斷數組內是否有一個滿足條件
? ? ? ? ? ? ? ? ? ?返回值：一個布爾值 ? true/false
? ? ? ? ? ? ? ? ? ?判斷條件以 return ?形式書寫
? ? ? ? ?
? ? ? ? ? ? ? ?7.every
? ? ? ? ? ? ? ? ? ? 語法：數組.every(function(item,index,origin){}) ? ? ? ? ? ? ? ? ?三個參數的意義與foreach 一樣
? ? ? ? ? ? ? ? ? ? 作用：判斷數組內是否全部滿足條件
? ? ? ? ? ? ? ? ? ? 返回值： 一個布爾值 ? true/false
? ? ? ? ? ? ? ? ? ? 判斷條件以 return ?形式書寫
? ? ? ? ? ? ??
? ? ? ? ? ? ? ? 8.reduce
? ? ? ? ? ? ? ? ? ?語法：數組.reduce(function(prev,item,index,origin){},init) ??
? ? ? ? ? ? ? ? ? ? prev:表示初始值或上一次運算的值
? ? ? ? ? ? ? ? ? ? item：表述數組每一項的值
? ? ? ? ? ? ? ? ? ? index：表示數組每一項 的下標 [索引] ?
? ? ? ? ? ? ? ? ? ? origin：原始數組
? ? ? ? ? ? ? ? ? ? 作用：用來實現疊加效果
? ? ? ? ? ? ? ? ? ? 返回值：最終疊加的結果
? ? ? ? ? ? ? ? ? 注意：
? ? ? ? ? ? ? ? ? ? ? ?+疊加條件以return 的形式書寫
? ? ? ? ? ? ? ? ? ? ? ?+prev 第一次的值，如果你傳遞了 init，就是init的值，如果沒有傳遞init，那么就是數組[0]的值
? ? ? ? ? ? ? ? ? ? ? ?+如果傳遞了init，循環執行數組.length次，如果沒有傳遞init，循環執行數組.length-1次
? ? ? ??
? ? ? ??
? ?數組塌陷
? ?數組塌陷現象：在對數組進行操作的時候，會使數組的長度產生變化，同時操作的數組那個項的下一個索引會被跳過，從而造成數組的某項會被跳過，這種叫做數組塌陷現象。
? ?解決辦法：就是在對數組某項進行操作之后，手動將索引值 i --,保持數組每一項都被遍歷。
? ?
數學的方法
? ? ? ? ? ?
? ? ? ? ? ? ?在JS 中Math 對象給我們提供了操作數據的一些方法（數學方法）
? ? ? ? ? ? ?1.random
? ? ? ? ? ? ?語法：math.random()
? ? ? ? ? ? ?作用：得到一個隨機數，每次生成的數字都不一樣，但一定是0~1之間的，包含0不包含1，也就是說最大值可能是0.999999999999999
? ? ? ? ??
? ? ? ? ? ? ? 2.round
? ? ? ? ? ? ?語法：Math.round(數字)
? ? ? ? ? ? ?作用：將這個數字(小數)，按照四舍五入變成整數
? ? ? ? ??
? ? ? ? ? ? ? 3.ceil
? ? ? ? ? ? ?語法：Math.ceil(數字)
? ? ? ? ? ? ? 作用：將這個數字(小數)向上取整
? ? ? ? ??
? ? ? ? ? ? ? 4.floor
? ? ? ? ? ? ? ?語法：Math.floor(數字)
? ? ? ? ? ? ? ?作用：將這個數字(小數)向下取整
? ? ? ? ??
? ? ? ? ? ? ? ? 5.abs
? ? ? ? ? ? ? ?語法：Math.abs(數字)
? ? ? ? ? ? ? ?作用：返回這個數字的絕對值
? ? ? ? ??
? ? ? ? ? ? ? ? 6.sqrt
? ? ? ? ? ? ? ? 語法：Math.sqrt(數字)
? ? ? ? ? ? ? ? 作用：求 平方根
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ?7.pow
? ? ? ? ? ? ? ? 語法：Math.pow(基數，冪)
? ? ? ? ? ? ? ? 作用：返回基數的幾次冪（幾的幾次方乘積）
? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ?8.max
? ? ? ? ? ? ? ? ? 語法：Math.max(數字1，數字2，數字3.......)
? ? ? ? ? ? ? ? ?作用:返回傳入數字中最大的那一個
? ? ? ? ??
? ? ? ? ? ? ? ? ?9.min
? ? ? ? ? ? ? 語法：Math.min(數字1，數字2，數字3.......)
? ? ? ? ? ? ? ? 作用:返回傳入數字中最小的那一個
? ? ? ? ??
? ? ? ? ? ? ? ? ?10.pI（i是大寫）
? ? ? ? ? ? ? ? 語法：Math.pI
? ? ? ? ? ? ? ? ? 作用：返回π ? //3.1415926
? ? ? ? ?js嚴格模式
? ? ? ? ? 1.聲明變量必須要 var 關鍵字
? ? ? ? ? 2.函數的形參不可以重復
? ? ? ? ? ?對自己書寫的代碼做一個要求
? ? ? ? ? ?寫在script代碼最開始的第一行，寫字符串形式'use strict'
?字符串
創建字符串的方式
? ? ? ? ? ? ?1.字面量的形式創建字符串
? ? ? ? ? ? ? ? ? ? ?var str = '123'
? ? ? ? ? ? ?2.內置構造函數的形式創建字符串
? ? ? ? ? ? ? ? ? ? ?var str = new String() ?
?字符串的length與下標
? ? ? ? ? ? ? ?length與下標的含義與數組中的一樣
? ? ? ? ? ? ? ?length：長度
? ? ? ? ? ? ? ?索引(下標)：獲取到字符串中指定位置的
? ? ? ? ? ? ? ?注意：字符串中通過索引能夠獲取到指定位置的值，只不過獲取到的值是 ?只讀的 (能看不能改)
?字符串的常用方法
? ? ? ? ? ? 1.charAt
? ? ? ? ? ? ? 語法：字符串.charAt(索引)
? ? ? ? ? ? ? 作用：查詢指定下標的值
? ? ? ? ? ? ? 返回值：查詢到的值，如果沒有查詢到就是一個 空字符串
? ? ? ? ? ? 2.charCodeAt
? ? ? ? ? ? ? ?語法：字符串.charCodeAt (索引)
? ? ? ? ? ? ? ?作用：查詢指定下標的值 ?對應的十進制碼
? ? ? ? ? ? ? ?返回值：查詢到的值對應的十進制碼，如果沒有查詢到會返回一個NaN
? ? ? ? ? ? 3.toLowerCase ?
? ? ? ? ? ? ? ?語法：字符串.toLowerCase () ?
? ? ? ? ? ? ? ?作用：將這個字符串轉換為小寫
? ? ? ? ? ? ? ?返回值：轉換后的字符串
? ? ? ? ? ? 4.toUpperCase
? ? ? ? ? ? ? ?語法：字符串.toUpperCase ()
? ? ? ? ? ? ? ?作用：將這個字符串轉換為大寫
? ? ? ? ? ? ? ?返回值：轉換后的字符串
? ? ? ? ? ?1.substr
? ? ? ? ? ? ? ? 語法：字符串.substr(開始索引，多少個)
? ? ? ? ? ? ? ? 作用：截取指定的字符串
? ? ? ? ? ? ? ? 返回值：截取到的字符串
? ? ? ? ? ? ? ? 注意：官方說明這個方法將來某一天可能會刪除，所以建議我們使用 ?substring
? ? ? ? ? ? ?2.substring
? ? ? ? ? ? ? ? 語法：字符串.substring(開始索引，結束索引)
? ? ? ? ? ? ? ? 作用：截取指定的字符串
? ? ? ? ? ? ? ? 返回值：截取到的字符串
? ? ? ? ? ? ? ? 注意：
? ? ? ? ? ? ? ? ? ? ? 1.參數包前不包后
? ? ? ? ? ? ? ? ? ? ? 2.結束索引可以不寫，相當于寫了length
? ? ? ? ? ? ?3.slice（建議使用）
? ? ? ? ? ? ? ?語法：字符串.slice(開始索引，結束索引)
? ? ? ? ? ? ? ?作用：截取指定的字符串
? ? ? ? ? ? ? ?返回值：截取到的字符串
? ? ? ? ? ? ? ?注意：
? ? ? ? ? ? ? ? ? ? ? 1.參數包前不包后
? ? ? ? ? ? ? ? ? ? ? 2.結束索引可以不寫 相當于寫了length
? ? ? ? ? ? ? ? ? ? ? 3.開始索引可以不寫 相當于寫了0
? ? ? ? ? ? ? ? ? ? ? 4.結束索引支持寫負數，相當于length + 負數
? ? ? ? ? ? 1.concat
? ? ? ? ? ? ? ? ?語法：字符串.concat(數據1，數據2，數據3......)
? ? ? ? ? ? ? ? ?作用：將字符串和 參數傳遞數據 進行拼接
? ? ? ? ? ? ? ? ?返回值：拼接后的字符串
? ? ? ? ? ? 2.indexOf
? ? ? ? ? ? ? ? ? 語法：字符串.indexOf(數據，開始下標)
? ? ? ? ? ? ? ? ? 作用：尋找數據在字符串中的位置
? ? ? ? ? ? ? ? ? 返回值：找到的時候返回下標，找不到返回-1
? ? ? ? ? ? ? ? ? 注意：第二個參數可以不傳遞，默認為0
? ? ? ? ? ? 3.lastIndexOf
? ? ? ? ? ? ? ? 語法：字符串.lastIndexOf(數據，開始索引) ?
? ? ? ? ? ? ? ? 作用：尋找數據在字符串中的位置(從后往前/從右向左) ? ?
? ? ? ? ? ? ? ? 返回值：找到的時候返回下標，找不到返回-1
? ? ? ? ? ? ? ? 注意： 第二個參數可以不傳遞，默認為 length-1(字符串最后一個位置) ?
? ? ? ? ? ? 4.split
? ? ? ? ? ? 語法：字符串.split('符號')
? ? ? ? ? ? 作用：在字符串中找到'符號' 然后將這個字符串分割，并放在一個數組內
? ? ? ? ? ? 返回值：一個數組
? ? ? ? ? ? 注意：參數如果傳遞的是 空字符串('')會將字符串全部分隔開
1.trim(重點)
? ? ? ? ? ? 語法：字符串.trim()
? ? ? ? ? ? 作用：去掉字符串兩側的空格
? ? ? ? ? ? 返回值：去掉空格后的字符串
? ? ? ? ? ? 2.trimStart ?/trimLeft
? ? ? ? ? ? 語法：字符串.trimStart() ?字符串.trimLeft
? ? ? ? ? ? 作用：去掉字符串開始（左側）的空格
? ? ? ? ? ? 返回值：去掉空格后的字符串
? ? ? ? ? ? 3.trimEnd /trimRight
? ? ? ? ? ? 語法：字符串.trimEnd() ?字符串.trimRight()
? ? ? ? ? ? 作用：去掉字符串結束（右側）的空格
? ? ? ? ? ? 返回值：去掉空格后的字符串
1.includes
? ? ? ? ? 語法：字符串.includes(字符串片段)
? ? ? ? ? 作用：判斷 當前字符串中，是否擁有指定字符串片段
? ? ? ? ? 返回值：一個布爾值
? ? ? ? ? ? ? ? ? true --- > 擁有
? ? ? ? ? ? ? ? ? false --- > 沒有
? ? ? ? ?2.startsWith
? ? ? ? ? ?語法：字符串.startsWith(字符串片段) ? ?
? ? ? ? ? ?作用：判斷字符串開頭 是不是指定的 字符串片段
? ? ? ? ? ?返回值：一個布爾值
? ? ? ? ? ? ? ? ? true --- > 是開頭
? ? ? ? ? ? ? ? ? false --- >不是開頭
? ? ? ? 3.endsWith
? ? ? ? ? ? ?語法：字符串.endsWith(字符串片段)
? ? ? ? ? ? ?作用：判斷字符串結尾 是不是指定的 字符串片段 ?
? ? ? ? ? ? ?返回值：一個布爾值
? ? ? ? ? ? ? ? ? true --- > 是結尾
? ? ? ? ? ? ? ? ? false --- >不是結尾
? ? ? ? ? ? ? ? ? 163郵箱 ? 以@163.com結尾
? ? ? ? ? 4.replace
? ? ? ? ? ? ? ?語法：字符串.replace('要被替換的字符'，'替換的字符') ?
? ? ? ? ? ? ? ?作用：找到當前字符串中的第一個參數的值，然后將其替換為第二個參數
? ? ? ? ? ? ? ?返回值：替換完成的參數 ? ?
進制轉換與保留小數
1.進制轉換(了解)
? ? ? ? ? ? 1.十進制轉換為其他進制
? ? ? ? ? ? 語法：十進制數字.toString(幾進制)
? ? ? ? ? ? 2.其他進制轉換為十進制
? ? ? ? ? ? 語法：parseInt(數字，將數字視為幾進制的數字然后轉換為10進制的數字)
? ? ? ? 2. 保留小數(掌握)
? ? ? ? ?語法：toFixed(保留幾位小數)，保留小數的時候四舍五入，并且返回的是字符串 ?
?定時器（兩種）
? ? ? ? 1.setInterval ?計時器，每間隔固定的時間執行一次
? ? ? ? ? ? ? ?語法：setInterval(函數，數字/時間)
? ? ? ? ? ? ? ? ? ?函數：每間隔固定的時間要執行的代碼
? ? ? ? ? ? ? ? ? ?數字：間隔的時間，注意單位是毫秒，最小值為4~20
? ? ? ? ?2.setTimeout ?倒計時器，在指定時間到達后，執行一次
? ? ? ? ? ? ? ? ? 語法;setTimeout(函數，數字) ?
? ? ? ? ? ? ? ? ? 函數：在指定時間結束后執行要執行的代碼
? ? ? ? ? ? ? ? ? 數字：間隔的時間，單位也是毫秒 ? ?
? ? ? ? 兩個定時器的返回值與意義
? ? ? ? ? ? ? ?+返回值不區分定時器種類，用于表示你這個定時器是頁面中第幾個定時器
? ? ? ? ? ? ? ?+作用：用來關閉定時器
異步代碼
?簡單的代碼異步執行(這里并不是詳細的，后面會講)
? ? ? ? 這是一道面試題，熟讀并背誦全文
? ? ? ? ? 什么是非異步代碼
? ? ? ? ? ? ? 按照從上往下的順序，從左到右的順序，依次執行每一行代碼
? ? ? ? ? ? ? 如果上一行代碼沒有執行完畢，不會執行下一行代碼
? ? ? ? ?什么是異步代碼
? ? ? ? ? ? ?當代碼遇到異步任務的時候，會把這個代碼放在'異步隊列’ 內等待
? ? ? ? ? ? ?所有的同步代碼執行完畢后，開始執行"異步隊列"內的代碼
? ? ? ? ?簡單來說：代碼在執行的時候，會把這個代碼放在‘異步隊列’內等著，讓后繼續執行直到把所有的同步代碼執行完畢后，再開始執行異步任務
? ? ? ? ? ? 什么是異步任務
? ? ? ? ? ? 兩種定時器都是異步任務
? ? ? ? ? ? 可以理解為：先執行定時器外面的代碼，然后執行定時器里面的
?
時間對象?
? ? ? 時間對象?
? ? ? ? ? ? ? ? 在JS鐘 Date 給我們提供了操作時間的一些方法，是JS 內置的一個對象
?var str = new Date()console.log(str)? ?時間對象的參數
? ?創建對象的時候，看可以選擇傳遞函數，也可以不傳遞函數
? ? ? ? ? ? ? ? ?如果需要傳遞參數，分為兩種形式
? ? ? ? ? ? ? ? ? ?1.數字
? ? ? ? ? ? ? ? ? ? ?最少傳遞兩個值，年 ?和 月(JS中0-11 代表了 1-12月)
? ? ? ? ? ? ? ? ? ? ?2.字符串
? ? ? ? ? ? ? ? ? ? ?最少值需要傳遞一個參數年份即可（字符串的形式傳遞時月份從 1 開始）
? ? ? ? ? ? ? ? ?不寫參數會返回本地時間的年月日
?
?獲取時間對象
var time = new Date()
? ? ? ? console.log(time)
? ? ?1.得到時間對象的 年份
? ? ? ? var year = time.getFullYear()
? ? ? ? console.log(year)?
? ? ??2.得到時間對象的 月份
? ? ? ? var month = time.getMonth()
? ? ? ? console.log(month) //1月-->0
? ? ?3.得到時間對象的 日
? ? ? ? var day = time.getDate()
? ? ? ? console.log(day)?
? ? ? 4..得到時間對象的 小時
? ? ? ? var hours = time.getHours()
? ? ? ? console.log(hours)
? ? ? 5..得到時間對象的 分鐘
? ? ? ? var minutes = time.getMinutes()
? ? ? ? console.log(minutes)
? ? ? 6..得到時間對象的 秒數
? ? ? ? var seconds = time.getSeconds()
? ? ? ? console.log(seconds)// 0-59
? ? ? 7.得到時間對象中的 ?一周的第幾天(周日為0，周六為6)
? ? ? ? var days = timer.getDay()
? ? ? ? console.log(days)
? ? ? 8. getTime ?按照 ?格林威治時間來計算 從 1970年1月1日0時0分0秒 到現在（或指定日期）的毫秒數
? ? ? ? var getTimes = timer.getTime()
? ? ? ? console.log(getTimes)
設置時間對象?
? ? var timer = new Date()
? ? ? ? //設置 年
? ? ? ? timer.setFullYear(2001)
? ? ? ? console.log(timer.getFullYear())
? ? ? ? //設置 月
? ? ? ? timer.setMonth(3)
? ? ? ? console.log(timer.getMonth())
? ? ? ? //設置 日當月第幾天
? ? ? ? timer.setDate(15)
? ? ? ? console.log(timer.getDay())
? ? ? ? // 注意，沒有設置 本周的第幾天
? ? ? ? //設置 時
? ? ? ? timer.setHours(15)
? ? ? ? console.log(timer.getHours())
? ? ? ? //設置 分
? ? ? ? timer.setMinutes(25)
? ? ? ? console.log(timer.getMinutes())
? ? ? ? //設置 秒
? ? ? ? timer.setSeconds(35)
? ? ? ? console.log(timer.getSeconds())
? ? ? ? //設置 豪秒
? ? ? ? timer.setMilliseconds(999)
? ? ? ? console.log(timer.getMilliseconds())
? ? ? ? //設置到 1970 的總毫秒數
? ? ? ? timer.setTime(12345667)
? ? ? ? console.log(timer.getTime())
?
認識BOM
?用JS 操作瀏覽器 和頁面中的 HTML 元素
? ? ? ? ?BOM
? ? ? ? ?瀏覽器對象模型，其實就是操作瀏覽器的一些能力
? ? ? ? ? ?我們可以操作哪些內容？
? ? ? ? ? ? ?+獲取瀏覽器的相關信息(窗口大小) ? ?
? ? ? ? ? ? ?+操作瀏覽器進行頁面的跳轉
? ? ? ? ? ? ?+獲取瀏覽器的地址欄信息
? ? ? ? ? ? ?+操作瀏覽器的滾動條
? ? ? ? ? ? ?+獲取瀏覽器的版本
? ? ? ? ? ? ?+讓瀏覽器出現一個彈出框
? ? ? ? ? ? ?+........
? ? ? ? ? ? ?BOM 的核心就是 window 對象
? ? ? ? ? ? ? ? ?window 時 JS 內置的一個對象，里面包含著操作瀏覽器的方法
?體驗BOM
?獲取瀏覽器窗口的尺寸
? ? ? ? innerHeight/innerWidth
? ? ? ? ? +作用：獲取到瀏覽器窗口的高度和寬度(包含滾動條)
? ? ? ? ? +語法：window.innerHeight /window.innerWidth
console.log('高度', window.innerHeight)console.log('寬度', window.innerWidth)? ? ? ? 2.瀏覽器的彈出層（學習的時候會用，實際工作中不會使用）
? ? ? ? ? ? alert
? ? ? ? ? ? prompt
? ? ? ? ? ? confirm
? ? ? ? ? ? ? ? 有一個詢問信息和兩個按鈕
? ? ? ? ? ? ? ? 點擊確定按鈕返回 true
? ? ? ? ? ? ? ? 點擊取消按鈕返回 false ?
var str = confirm('請問你確定進入頁面嗎')console.log(str)總結
- 上一篇： 深度学习的可解释性——Striving
- 下一篇： 凡科网JS逆向后跳出的滑块验证（base