尚硅谷JavaScript基礎

1. 基本語法

1.嚴格區(qū)分大小寫

  1. 結(jié)尾,不寫瀏覽器會自動添加,就是會消耗系統(tǒng)資源,有時候還會加錯
  2. 忽略多個空格和換行

2. 字面量和變量

字面量
不可改變的值

變量
可以用來保持字面量

3. 標識符

所有的可以自主命名的都可以稱為標識符
例:變量名、函數(shù)名、屬性名

規(guī)則

  1. 不能數(shù)字開頭
  2. 不能是關(guān)鍵字和保留字
  3. 一般采用駝峰命名
  4. 可以含有 _、字母、數(shù)字、$
20190731163548834.png

20190731163602300.png

4. 數(shù)據(jù)類型

基本數(shù)據(jù)類型 存儲在棧中,有編譯器自動分配,自動釋放
String
Number
Boolean
Null
Undefined
Symbol(es6新增)
BigInt

引用數(shù)據(jù)類型 值存儲在堆中,在棧中存儲的是地址值,通過地址值找到
Object
Array
Function

typeof
檢查數(shù)據(jù)類型
注意:typeof null 返回object 這是一個BUG
(26條消息) 為什么typeof(null)返回的是object_flyabovegrass的博客-CSDN博客
以二進制存儲,低三位數(shù)表示數(shù)據(jù)類型,null 全是0 所以就判斷成 object
000 --- 對象
1 --- 整數(shù)
010 --- 雙精度浮點數(shù)
100 --- 字符串
110 ---布爾值

5. 強制類型轉(zhuǎn)換

1. 轉(zhuǎn)為String

方式一
調(diào)用 toString()方法
返回轉(zhuǎn)換的結(jié)果

方式二
調(diào)用對應的方法
例:轉(zhuǎn)換為String 就調(diào)用String(參數(shù))方法

方式三
+‘ ’,也可以轉(zhuǎn)換

2. 轉(zhuǎn)為Number

方式一

調(diào)用Number(參數(shù))方法
①String轉(zhuǎn)換成 數(shù)值(純數(shù)值)、NaN(包含非數(shù)值內(nèi)容)、0(為空或者空格)
②Boolean轉(zhuǎn)換成 1 、0
③Null 轉(zhuǎn)換成 0
④Undefined 轉(zhuǎn)換成 NaN

方式二
parseInt(參數(shù))整數(shù)
parseFloat(參數(shù))小數(shù)

方式三

可以使用運算符就行轉(zhuǎn)換。
任何值做 加減乘除 運算都會自動轉(zhuǎn)換成Number

3. 轉(zhuǎn)為Boolean

方式一
調(diào)用Boolean(參數(shù))方法
①Number 轉(zhuǎn)換
除了 0 和 NaN 其余都是true
②String 轉(zhuǎn)換
除了空字符串,其余都是true
③null / undefined 轉(zhuǎn)換
false
④對象
true

6. 運算符

可以對一個或多個值進行運算并獲取結(jié)果

1. 算數(shù)運算符

加 減 乘 除 取余 ...

對非number數(shù)值進行運算時,會先轉(zhuǎn)換成number 再運算。
任何值和NaN運算,都是NaN

2. 自增和自減

i++ :自增前的值
++i :自增后的值
i-- / --i :同上

3. 邏輯運算符

! 非
&& 與 都真 為true
|| 或 只要有一個真 為true

4. 賦值運算符

= 、+= 、 -= 、*= 、/= 、%=

5. 關(guān)系運算符

\ ( > 、 < 、>= 、<= )

6. 相等運算符

== :轉(zhuǎn)換類型
!= 轉(zhuǎn)換類型
=== :不轉(zhuǎn)換,全等才等
!== :不轉(zhuǎn)換

7. 三元運算符

條件表達式 ? 語句1 :語句二;

20190731164250717.png

7. 代碼塊

{ }

8. if語句

if(){
}

if(){
}else{
}

if(){
}else if(){
}else{
}

9. 條件分支語句

switch(){
    case  表達式1:
        語句
        break;
    case  表達式2:
        語句
        break;
    ......
    default :
        語句
        break;
}

10. while語句

while(條件){
}

do{
}while()
至少執(zhí)行一次

11. for循環(huán)

for ( ; ;){
}

12. break 和continue

不能在 if 中使用

break 用來退出switch和for
continue 跳出當前循環(huán),執(zhí)行下一次循環(huán)

13. 對象

①內(nèi)建對象
es中定義的對象
例:Math、String、Number、Boolean、Function、Object

②宿主對象
js運行環(huán)境提供的對象
例:BOM、DOM

③自定義對象
自己定義的對象

14.枚舉對象的屬性

for...in...
for( let 變量 in 對象 ){
}
返回鍵名

可以自己給for...of...添加迭代器實現(xiàn)遍歷對象

15. this

函數(shù)執(zhí)行的上下文對象

①以函數(shù)形式調(diào)用,this 是window
②以方法形式調(diào)用,this 是調(diào)用的對象
③以構(gòu)造函數(shù)調(diào)用,this 是新創(chuàng)建的對象
④call(obj),this 就是obj

16. 構(gòu)造函數(shù)

普通函數(shù)直接調(diào)用
構(gòu)造函數(shù)需要new之后調(diào)用
構(gòu)造函數(shù)中的方法,
function Person( name , age){
this . name = name;
this . age = age;
this . sayName = function(){}
}
sayName()可以定義在全局作用域中,可以避免在創(chuàng)建實例的時候多次創(chuàng)建函數(shù),但是會污染全局作用域命名空間
this . sayName = fun;
function fun(){}
因此可以改為。
在原型上定義
即:Person. prototype.sayName = function(){}

創(chuàng)建構(gòu)造函數(shù)(默認大寫)
function Person(){
}

17. 原型對象

原型對象

18. call() 和 apply()

對函數(shù)調(diào)用這個方法會調(diào)用函數(shù)
可以將一個對象指定為第一個參數(shù)
此時這個對象就是函數(shù)執(zhí)行時的this

call()可以將實參在對象之后依次傳遞
fun . call(obj , 參數(shù)1 ,參數(shù)2)
apply()需要將實參封裝到一個數(shù)組中
fun . apply(obj , [ 參數(shù)1 ,參數(shù)2 ])

19. arguments

一個類數(shù)組對象
arguments . length 可以獲取實參的長度

20. 垃圾回收

定義為 null 就行

21. 數(shù)組方法

數(shù)組末尾
①末尾添加一個或多個 push()返回新數(shù)組長度
②刪除最后一個元素pop()返回被刪除的元素

數(shù)組開頭
①開頭添加一個或多個 unshift()返回新數(shù)組長度
②刪除第一個元素 shift()返回被刪除的元素

slice
提取指定元素
slice(開始索引,結(jié)束索引),左閉右開,結(jié)束位置可選

splice
刪除指定元素
splice(開始索引,刪除數(shù)量,插入元素)
插入到開始位置之前,將插入元素替換被刪除的元素

concat()
合并兩個或多個數(shù)組 返回新數(shù)組
不影響原數(shù)組

join()
將數(shù)組轉(zhuǎn)換成字符串
不影響原數(shù)組
可以指定連接符,不指定默認使用 ,
. join(‘’)

sort()
排序,直接修改原數(shù)組

知識點.png

無標題.png

reverse()
反轉(zhuǎn)數(shù)組

22. Date對象

表示一個時間
var d = new Date()
var year = d . getFullYear()

方法
getFullYear()年份
getMonth()月份
getDate()日份
getDay()周幾,0--周一;1--周二 ......
getTime()時間戳
now()代碼執(zhí)行的當前時間戳

23. Math 對象

不是一個構(gòu)造函數(shù),屬于一個工具類,不用創(chuàng)建對象,直接使用就行

方法
abs() 取絕對值
ceil()向上取整
floor()向下取整
round()四舍五入取整

random()生成 0 - 1 之間的隨機數(shù)
①生成一個 0 - X之間的隨機數(shù):Math . round(Math . random()+X)
②生成一個 X - Y 之間的隨機數(shù):Math . round(Math . random()* (Y-X)+X)

max()最大值
min()最小值
pow(X,Y) X的Y次冪
sqet()開方

24. 包裝類

數(shù)據(jù)類型轉(zhuǎn)換

String
Number
Boolean

25. 字符串方法

在底層,字符串以字符數(shù)組的形式保存的
例:‘Hello’ —> [ ‘H’,‘e’,‘l’,‘l’,‘o’ ]

屬性和方法

length 屬性
charAt() 返回字符串中指定索引的字符
charCodeAt() 返回指定位置的字符的編碼(unicode)
fromCharCode() 根據(jù)字符編碼獲取字符
concat() 鏈接兩個或多個字符串
indexOf(指定內(nèi)容,開始位置) 返回第一次出現(xiàn)的index,開始位置可省略
lastIndexOf() 同 indexOf(),從后往前找
slice(開始索引,結(jié)束索引) 結(jié)束索引可以省略,結(jié)束可以是負數(shù),倒數(shù)第幾個,左閉右開
substring(開始,結(jié)束) 同上,但是結(jié)束索引不可以是負數(shù)
substr(開始索引,截取長度) 包括開始位置
split(字符串) 根據(jù)字符串截取,空串每個字符截取下來
toUpperCase() 大寫并返回
toLowerCase() 小寫并返回
replace(被替換的內(nèi)容,替換內(nèi)容) 默認替換第一個

26. 正則表達式

1. 簡介

20190731172444698.png

2. 語法

20190731172500758.png

3. 量詞

20190731172512449.png
20190731172522161.png
20190731172531201.png
20190731172540345.png
20190731172549854.png

27. DOM

文檔對象模型

文檔 --- 整個HTML網(wǎng)頁文檔
對象 --- 將網(wǎng)頁中的每個部分都轉(zhuǎn)換成一個對象
模型 --- 使用模型表示對象之間的關(guān)系,以便獲取對象

20190731172619603.png

節(jié)點node

無標題.png

元素節(jié)點 --- HTML文檔中的標簽,--> Element

屬性節(jié)點 --- 元素的屬性,--> Attr

文本節(jié)點 --- HTML標簽中的文本內(nèi)容,--> Text

文檔節(jié)點 --- 整個HTML文檔,--> document
網(wǎng)頁中所有的節(jié)點都是它的子節(jié)點
document對象作為window對象的屬性存在,可以直接使用。

事件簡介

用戶和瀏覽器之間的交互行為

文檔的加載

瀏覽器加載一個頁面,按照自上向下的順序加載
onload事件會在整個頁面加載完成后才出發(fā)

27.1 DOM查詢

NodeList都是類數(shù)組對象

getElementById()
getElementsByTagName() 返回類數(shù)組對象
getElementsByClassName()
getElementsByName()
childNodes 注意這里沒有括號,當前節(jié)點的所有子節(jié)點
firstChild 第一個子節(jié)點
lastChild 最后一個子節(jié)點
parentNode 當前節(jié)點的父節(jié)點
previousSibling 前一個兄弟節(jié)點
nextSibling 后一個兄弟節(jié)點

documentElement屬性 保存的是HTML根標簽
document . all 頁面中所有元素,類數(shù)組對象

querySelector(‘ 選擇器 ’)
querySelectorAll( ) 返回數(shù)組

createElement()創(chuàng)建元素節(jié)點對象
createTextNode()
appendChild(子節(jié)點)向父節(jié)點中添加一個新的子節(jié)點
insertBefore(新節(jié)點,舊節(jié)點)在指定子節(jié)點前插入新的子節(jié)點
replaceChild(新節(jié)點,舊節(jié)點)替換
removeChild()刪除節(jié)點

28. for循環(huán)與響應函數(shù)的執(zhí)行順序

20190731173307824.png

29. 事件

1. 事件對象

當事件的響應函數(shù)被觸發(fā)時,瀏覽器每次都會將一個事件對象作為參數(shù)傳遞進響應函數(shù)

2. 事件的冒泡

事件的向上傳導,當后代元素的事件被觸發(fā)時,其祖先元素的相同事件也被觸發(fā)。

取消冒泡
event . cancelBubble = true

3. 事件的委派

btn . onclick = function(){}

將事件統(tǒng)一綁定給元素的共同的祖先元素,這樣后代元素上的事件被觸發(fā)時,就會冒泡到祖先元素

4. 事件的綁定

綁定方式
方式一:
addEventListener()
參數(shù):

  1. 事件的字符串,不需要寫on
  2. 回調(diào)函數(shù),當事件觸發(fā)時函數(shù)被調(diào)用
  3. 是否在捕獲階段觸發(fā),布爾值,一般為false
    可以綁定多個響應函數(shù),按照綁定順序執(zhí)行,即從上到下
    支持ie9及以上
    this 是綁定事件的對象
btn . addEventListener('click', function(){}, false)

方式二:
直接添加
對象 . 事件 = 函數(shù)
的形式綁定響應函數(shù)
只能同時為一個元素的一個事件綁定一個響應函數(shù)
如果綁定多個函數(shù)就會被后面的覆蓋

btn . onclick = function(){}

方式三:
attachEvent()
參數(shù):

  1. 事件的字符串,需要寫on
  2. 回調(diào)函數(shù)
    實行順序和addEventListener()相反
    this 是window
btn . attachEvent('onclick' , function(){})

支持ie8及一下

5. 自定義響應函數(shù)

20190731173648368.png

6. 事件的傳播

無標題.png
20190731173715390.png

7. 事件

鼠標事件
onclick 點擊事件
onmousemove 移動事件
onwheel 滾輪事件

鍵盤事件
onkeydown 按鍵被按下 ,一直按著不松手,事件就會一直被觸發(fā)
onkeyup 按鍵被松開,不會連續(xù)觸發(fā)

30. BOM

瀏覽器對象模型
BOM對象
Window:代表整個瀏覽器的窗口,同事也是網(wǎng)頁中的全局對象,全局中的變量 / 函數(shù)都作為window的屬性 / 方法保存
Navigator:當前瀏覽器的信息,可以借此識別不同的瀏覽器
Location:當前瀏覽器的地址欄信息,或操作瀏覽器跳轉(zhuǎn)頁面
History:瀏覽器歷史記錄,可以操作歷史記錄。但是由于隱私問題,只能操作前后翻頁,不能獲取到具體的歷史記錄
Screen:用戶的屏幕信息??梢垣@取用戶的顯示器的相關(guān)信息,主要用于移動端。

1. Navigator

2. Location

方法
assign()跳轉(zhuǎn)頁面
reload()重新加載頁面,刷新
replace()替換頁面,調(diào)用后跳轉(zhuǎn)頁面

3. History

屬性和方法
length 屬性,可以獲取當前訪問的鏈接數(shù)量
back()
forward()
go()

4. Screen

31.定時調(diào)用

var timer = setInterval(function(){},時間)
參數(shù)

  1. 回調(diào)函數(shù),每隔一段時間就會調(diào)用一次
  2. 間隔時間
    clearInterval(timer)關(guān)閉定時器
    參數(shù): 定時器變量

32. 延時調(diào)用

var timer = setTimeout(function(){},時間間隔)
只執(zhí)行一次
參數(shù)
回調(diào)函數(shù),延時后被調(diào)用
延長時間

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容