初步瞭解JaveSctript
| 標題 |
內容 |
說明 |
| 結構 |
HTML |
網頁元素的結構和內容 |
| 表現 |
CSS |
網頁元素的外觀和位置，包括版式和顏色、大小 |
| 行爲 |
js |
網頁模型的定義和交互 |
- Javascript是一種編程語言，能夠用來建立動態更新的內容，控制多媒體，製做圖像動畫等等實現人機交互效果，簡單來講，能夠經過簡短的代碼來實現神奇的功能。
- JavaScript的書寫方式，規範是script標籤寫在body上面
- 行內JavaScript
- 內部JavaScript
- 外部JavaScript
- 結束符
- 表明語句的結束，用英文的
;表示。
- 可寫可不寫。
- 換行符（回車） 會被識別成結束符，所以在實際開發中有許多人主張書寫JavaScript代碼時，省略結束符。
- 可是爲了統一風格，要寫結束符就每句都寫，要麼就每句都不寫。
- JavaScript輸入輸出語句
- 輸出和出入能夠理解爲人和計算機的交互，用戶經過鍵盤、鼠標等向計算機輸入信息，計算機處理後再展現給用戶，這即是一個輸入和輸出的過程。
- 輸出語句
ducoment.write("要輸出的內容")
- 向body內輸出內容
- 若是輸出的內容是標籤，也會被解析成網頁元素
alert(要輸出的內容)
- console.log(要輸出的內容)
- 輸入語句
變量
- 目標：理解變量是計算機存儲數據的容器，掌握變量的聲明方式
變量是什麼
- 白話：變量就是一個盒子。
- 通俗：變量就是計算機存儲數據的容器，它可讓計算機有記憶。
變量的基本使用
變量的聲明方式
變量的本質
- 內存：計算機中存儲數據的地方，至關於一個空間。
- 變量：是程序在內存中申請的一塊拿來存放數據的小空間。
變量的命名規則與規範
規則：必須遵照，不遵照會爆錯
- 不能使用關鍵字。
- 關鍵字：有特殊含義的字符，JavaScript內置的一些英語詞彙。例如：let var if for等等。
- 只能用下劃線、字母、數字、$組成，且數字不能開頭。
- 字母嚴格區分大小寫，如Age和age是不一樣的變量。
規範：建議，不遵照不會報錯，可是不符合業內通識
- 起名要有意義。
- 遵照駝峯式命名
- 第一個單詞的首字符小寫，後面每一個單詞首字母大寫。例如userName
數據類型
- 計算機世界完事成物都是數據。
- 計算機程序能夠處理大量的數據，爲了方便數據的管理（用途不一樣），將數據分紅了不一樣的類型
| 數據類型 |
做用 |
表示形式 |
例 |
| String（字符串） |
表示文字內容 |
英文的單引號或者雙引號包起來 |
'hello'、「world」 |
| Number（數字） |
表示數字內容 |
直接寫數字 |
10，20 |
| Boolean（布爾） |
表示對立的兩種狀態，真或者假，對或者錯等等 |
true 和 false |
ture、false |
| undefined（未定義） |
表示未定義 |
undefined |
undefined |
| Object（對象） |
表示普通對象 |
用大括號包起來的鍵值對 |
{name:nihao} |
| Null（空值） |
表示空對象 |
null |
null |
| Array（數組） |
表示數組對象 |
用中括號包起來 |
[1,2,3] |
| Regex（正則） |
表述正則對象 |
用反斜槓包起來 |
/^[+-]?/ |
數字類型（Number）
- 即咱們數學中學習到的數字，能夠是整數、小數、正數、負數、NaN（非數字）。
NaN
- NaN:not a number;意思是否是一個數，可是它屬於數字類型。
- NaN和任何一個值都不相等，包括本身。
isNaN()
- 檢測一個值是否爲有效數字，若是不是有效數字返回true，若是是有效數字返回false。
- 再使用isNaN這個方法時，首先會檢測檢測值是否爲數字，若是不是，它會進行隱式轉換，用
Number()這個方法將值先轉爲數字類型而後在進行檢測。
Number()轉化
- 將字符串轉爲數字，只要字符串中包含任意一個非有效數字字符結果都是
NAN，空字符串會返回0
- 把引用數據類型轉爲數字，是先把他基於
toString()方法轉換爲字符串
pareseInt()和parseFloat()
- parseInt()將其餘數據轉爲數字整數
- parseFloat()將其餘數據轉爲數字，取到小數點。
var a = '12px'
console.log(parseInt(a))
let ary = [13,14]
console.log(parseInt(ary))
複製代碼
字符串類型（String）
- 經過單引號
''、雙引號""或者反引號``包裹的數據都叫字符串，單引號和雙引號本質上沒有區別，推薦使用單引號。
- 一個字符串是由零到多個字符組成，每個字符都有本身位置的索引，由一個length存儲字符串的長度。
- 注意
- 不管是單引號仍是雙引號都必須是成對的使用
- 單引號/雙引號均可以互相嵌套，可是不能嵌套本身，外雙內單或者外單內雙均可以。
- 必要時可使用轉義符
\輸出單引號或者雙引號
字符串拼接
ES6新增的模板字符串
${}中存放的是js表達式，能夠是變量以及變量運算，三元運算符等等。
var x = 15
console.log(`${x}px`)
let b = 3
console.log(`${x*b}px`)
複製代碼
利用+拼接
+號左右兩邊有一邊出現字符串，結果就是字符串拼接+號左右兩邊有一個邊出現對象（目的是把對象轉爲數字，進行數學運算）
- 系統首先會獲取對象的
[Synbol.toPrimitive]屬性值
- 若是沒有這個屬性，其次獲取他的
valueOf()；原始值都是基本數據類型。
- 若是尚未原始值，最後就會把它轉爲字符串toString，最後就變成字符串拼接了。
let a = 46
console.log(a+'歲')
let ary = [12,13]
ary[Symbol.toPrimitive]
ary.valueOf()
let num = new Number(10)
console.log(num[Symbol.toPrimitive],num.valueOf)
console.log(num+10)
複製代碼
+號只出現一邊，這樣這一邊即便是字符串/對象,也是數字運算
字符串的方法
獲取字符串中的字符
let str = 'fhcsj'
console.log(str[2])
console.log(str[str.legnth-1])
console.log(str.charAt(2))
複製代碼
把其餘數據類型轉化爲字符串類型
- 利用
變量.toString()方法
- 利用
String(變量)
- 注意：
- 數組轉字符轉，返回值是將數組中的每一項用逗號分隔
- 對於普通對象轉爲字符串，不論對象中包含的值是什麼，最終的返回值都是
"[object Object]"
let num = 15,
ary = [11,13]
num.toString()
String(num)
ary.toString()
let obj = {}
obj.toString()
複製代碼
charCodeAt()
substr(start,end)
slice(start,end)
- 返回新的字符串，截取從start索引到end，可是不包括end索引。
split(separator,howmany)
replace(regexp/substr,replacement)
- 用（replacement字符）替換 字符串中的（substr字符）或者替換一個與正則匹配的字符。
let str = 'fsfsdhfsdfs'
console.log(str.replace('fs','i'))
console.log(str.replace(/fs/),i)
console.log(str.replace(/fs/g),i)
複製代碼
indexOf(searchValue,fromIndex)/lastIndexOf(searchValue,fromIndex)
indexOf()
- 返回規定檢索的字符串值（searchValue，必寫）的索引，fromIndex(規定從哪一個索引值開始檢索,可選)
- 若是在字符串中沒有檢索到規定的字符串值，則會返回-1。
lastIndexOf()
- 返回規定檢索的字符串值從右往左第一次出現的索引，fromIndex規定從第幾個字符開始（其中這個字符是從後面往前數的）。注意：它的0索引仍是最左邊的第一個字符。
- 若是字符串中檢索不到規定的字符值則返回-1
let str = 'fsdhkhds'
console.log(str.indexOf('d'))
console.log(str.indexOf('d',3))
console.log(str.lastIndexOf('d'))
console.log(str.lastIndexOf('d',2))
複製代碼
includes(searchValue,fromIndex)
- 判斷字符串中是否包含規定的字符值（searchValue），從規定的索引開始（fromIndex）,返回值爲true或者false
let str = 'fdsds'
console.log(str.includes('a'))
console.log(str.includes('s'))
複製代碼
布爾類型（Boolean）
- 表示確定或者否認時，在計算機中對應的就是布爾類型，它有兩個固定的值true或者false。
- 把其餘數據類型轉化爲布爾類型的兩種方式
- 注：只有0、NaN、空字符串、undefined變爲布爾類型的值爲false，其餘的都是true。
未定義類型（undefined）
- 未定義類型是一種比較特殊的類型，只有一個值undefined。
- 什麼狀況出現未定義類型？
- 只聲明變量沒有賦值的狀況下，變量的默認值爲undefined，通常不多爲某個變量賦值undefined。
Symbol（表示惟一值，屬於基本數據類型）
let a = Symbol(0)
let b = Symbol(0)
console.log(a==b)
複製代碼
對象數據類型
普通對象
- 用
{}包着鍵值對錶示，類數組、實例、原型對象......
數組對象
正則對象
日期對象
函數Function
| 經常使用的動詞 |
含義 |
| can |
判斷是否可執行某個動做 |
| has |
判斷是否含義某個值 |
| is |
判斷是否爲某個值 |
| get |
獲取某個值 |
| set |
設置某個值 |
| load |
加載某些數據 |
檢測數據類型
typeof
- 語法
let age = 18;console.log(type age)
- 注意
- typeof能能檢測基本數據類型。
typeof undefined的返回值是undefined。type null的返回值是一個object。
JS算數運算符
- 數學運算符也叫運算符，主要包括假、減、乘、除、取餘（求模）。
| 描述 |
符號 |
| 求和 |
+ |
| 求差 |
- |
| 求積 |
* |
| 求商 |
/ |
| 取餘數（求模） |
% |
-
- 運算符比較特殊
- +運算符在數字型中是求和運算
- +運算符在字符串型中是拼接。
數據類型轉換
隱式轉換
- 某些運算符被執行時，系統內部自動將數據類型進行轉換，這種類型稱爲隱式轉換。
- 規則
- +號兩邊只要有一個是字符串類型，就會自動把另外一個轉爲字符串。
- 除了+號之外的全部算術運算符都會把數據轉成數值類型。
顯式轉換
- 編寫程序時過分依靠系統內部的隱式轉換是不嚴謹的，最好是經過顯式轉換比較好。
- Number(數據)
- 轉成數字類型
- 若是字符串內容裏有非數字，轉換失敗時結果爲NaN(Not a Number)即不是一個數字。
- NaN也是number類型的數據，表明非數字
- Boolean(數據)
- 轉成布爾類型
- 0、空字符串、NaN、undefined、null轉成false，其餘的都是true。
- 變量.toString()
ES6知識點
解構賦值
- ES6中的解構賦值，主要是針對對象和數組，左側定義和右側值相似的結構，這樣聲明幾個變量，快速獲取到每一部分的信息。
數組結構賦值
let arr = [1, 2, 3, 4]
let [x, y] = arr
console.log(x, y)
let[y,...x] = arr
let [a,...b] = arr
console.log(a, b)
let[, , , x, y] = arr
console.log(x, y)
let [, , , , b = 0] = arr
console.log(b)
複製代碼
對象的解構賦值
let obj = {
name:'珠峯培訓',
age:11,
teacher:'fc',
0:100
}
let {name,age} = obj
console.log(name, age)
let {name: x} = obj
let { x = 0 } = obj
console.log(x)
let {0} = obj
let {[0]} = obj
let{0: x} = obj
console.log(x)
let {hostname:domain, pathname:path} = location;
let ary = [100,'你好',{name: 'hello',score:[12, 13]}]
let [, y, {score:[, math]}]
console.log(y,math)
複製代碼