天天看點

JavaScript基本資料類型

JavaScript基本資料類型

一、JavaScript2種引入方式

1.script内部引入

2.引入外部 JS 檔案

二、JavaScript語言規範

1.注釋(代碼之母)

2.結束符

三、變量

1.聲明變量

聲明變量的關鍵字: var

動态語言

弱類型

使用var變量的聲明被提前到作用域頂部,指派則保留在原地(重點

2.變量的命名規範

3.ES6 新增 let 聲明

4.常量

5.t和var定義變量的差別(重點)

四、變量的5種基本資料類型

1.Number : 數值類型

2.String : 字元串類型

2.1 基本用法:

2.2 字元串類型常用方法:

2.3 數值和字元串轉換

數值轉字元串:

隐式轉換

調用`.toString()`方法

字元串轉數值:

調用函數`Number()`方法

3.Boolean : 布爾類型

4.Undefined : 未定義變量

5.Null : 空對象

null和undefined:

五、運算符

1.算數運算符

2.指派運算符

3.比較運算符

4.邏輯運算符

5.三目運算符

六、流程控制

1.if判斷

2.switch文法: 提前列舉好可能出現的條件和解決方式

3.for循環

4.while 循環

5.do...while 循環

6.三元表達式

7.小結

七、 對象(Object): 數組

1. 數組對象的常用方法:

2.forEach, map, seqlice

3.JS中Map和ForEach的差別

4.小結

JavaScript對換行、縮進、空格不敏感

變量的初始化: <code>var x = 2;</code>

變量的聲明: <code>var y;</code>

變量的指派: <code>y = 2</code>

ES5文法,我們采用var關鍵詞定義變量,并且沒有常量的概念 ES6文法,我們采用let關鍵詞定義變量,用const關鍵詞定義常量
JavaScript基本資料類型
JavaScript基本資料類型

JS變量的聲明被提前到作用域頂部,指派保留在原地;(不要小看這句總結)請看下面這個例子:

可能你已經掌握了局部作用域會覆寫上一級作用域的同名變量。然後Line4的color先使用上一級作用域的color,是以誤認為值是blue。其實不是,原因就在于,JS變量的聲明(var修飾)會被提前到函數作用域的開始處,即相當于Line5的var color=“red”;被分解成var color; color=“red”;而var color先被JS引擎解析,覆寫了上一級的color,接着執行Line4的輸出,此時color沒有被指派,指派color=“red”;依然保留在Line5處。以上代碼了解如下:

這個細節,告訴我們,不能隻知其一不知其二。特别是函數:

總結: 在執行JS代碼之前,所有的全局變量(包括函數和變量),都會綁定到window對象上,隻是函數會包含函數體,變量僅僅是一個undefined。

變量名必須使用字母、下劃線(_) $開始

多個英文字母進行拼接:駝峰體

不能使用js的關鍵字、保留字來命名

變量名要嚴格區分大小寫

ES6之前js沒有塊級作用域,ES6新增了let指令,用于聲明變量(聲明的變量屬于塊級作用域)

流程控制語句的{ }就是塊級作用域, 其用法類似于var,但是所聲明的變量隻在let指令所在的代碼塊内有效

例如:for循環的計數器就很适合使用let指令

ES6新增const用來聲明常量。一旦聲明,其值就不能改變。

JavaScript基本資料類型

作用域不一樣,var是函數作用域,而let是塊作用域,也就是說,在函數内聲明了var,整個函數内都是有效的,比如說在for循環内定義了一個var變量,實際上其在for循環以外也是可以通路的,而let由于是塊作用域,是以如果在塊作用域内(比如說for循環内)定義的變量,在其外面是不可被通路的,是以let用在<code>or (let i; i &lt; n; i++)</code>一種很推薦的寫法

let不能在定義之前通路該變量,但是var是可以得。也就是說,let必須是先定義,再使用,而var先使用後聲明也行,隻不過直接使用但是沒有卻沒有定義的時候,其值為undefined,這塊要注意,這一塊很容易出問題,這也是個人認為的let比var更好的地方,至于為啥會有這種差別呢,實際上var有一個變量提升的過程。也就是說,當這個函數的作用域被建立的時候,實際上var定義的變量都會被建立,并且如果此時沒有初始化的話,則預設會初始化一個undefined。

let不能被重新定義,但是var是可以的。這個呢,我個人認為,從規範化的角度來說,是更推薦的,比如說,你在前面聲明了一個變量,後來寫代碼,因為忘了之前的代碼邏輯,又聲明了一個同名的變量,如果這倆變量邏輯不一樣,并且後面都要用的話,很容易出問題,且不容易維護。

總之呢,let從規範化的角度來說,要比var要進步了很大一步。是以一般情況下的話,推薦用let,const這些。

5種基本資料類型: <code>number, string, boolean, undefined, null</code>

列印資料類型: <code>alert(聲明的變量名);</code>

檢視屬性類型: <code>alert(typeof 聲明的變量名);</code>

整數,負數,浮點數

JavaScript不區分整型和浮點型,就隻有一種數字類型。

ps : typeof 用來檢查目前變量的資料類型

單引号或雙引号表示方式

功能

js

python

mysql

差別

傳回長度

.length

len()

char_length()

移除兩邊空白

.trim()

.strip()

python中除了移除空白, 還可以指定要移除的字元, js隻能單純的移除空白

移除左邊的空白

.trimLeft()

.lstrip()

移除右邊的空白

.trimRight()

.rstrip()

傳回第n個字元

.charAt(n)

list[n]

拼接

.concat(value,…)

.join(), +

concat(), concat_ws(), group_concat()

python中使用+,join實作字元串的拼接, +号數值不能直接和字元串進行拼接, join中清單中元素必須是字元串類型(推薦用join). 而js中使用+, 或者.concat()實作字元串的拼接,當進行拼接時遇見數值類型會先換成字元串類型再進行拼接

子序列位置

.indexOf(substring, start)

.index(), rindex(), .find(), .rfind()

根據索引擷取子序列

.substring(start , end)

list[start, end, step]

python中可以識别負數, js中substring不識别, 而slice則支援負數(推薦)

切片

.slice(start, end)

小寫

.toLowerCase()

.lower()

大寫

.toupperCase(0

.upper()

分割

.split(delimiter, limit)

.split(sep, maxsplit), rsplit(sep, maxsplit)

python中第二個參數是限制分隔字元的個數, js中式擷取切割之後的元素個數

2種轉換方式: 隐式轉換,或者調用<code>.toString()</code>方法

第一步: <code>var num = 123;</code>

轉換成字元串: <code>var str = 123 + "abc";</code>

調用<code>.toString()</code>方法

轉換成字元串: <code>var str = num.toString();</code>

調用函數<code>Number()</code>方法

字元串中不是全是數值類型的情況下:

報錯, alert列印出現NaN: Not a number, 類型列印為number

第一步: <code>var str = 'abc';</code>

轉換成數值: <code>var num = Number(str);</code>

字元串中全是數字類型的情況:

正确轉換

第一步: <code>var str = '123.123';</code>

成立傳回: true

不成立傳回: false

alert列印傳回值: undefined

alert+typeof列印資料類型傳回值: undefined

alert列印傳回值: null

alert+typeof列印資料類型傳回值: object

null表示值是空,一般在需要指定或清空一個變量時才會使用,如 name=null;

undefined表示當聲明一個變量但未初始化時,該變量的預設值是undefined。還有就是函數無明确的傳回值時,傳回的也是undefined。

null表示變量的值是空(null可以手動清空一個變量的值,使得該變量變為object類型,值為null),undefined則表示隻聲明了變量,但還沒有指派。

還不明白,上圖吧!

JavaScript基本資料類型
JavaScript基本資料類型

前提:n = 5

運算符

描述

例子

x結果

n結果

+

加法

x=n+2

7

5

-

減法

x=n-2

3

*

乘法

x=n*2

10

/

除法

x=n/2

2.5

%

取模(餘數)

1

++

自增

x=++n

6

x=n++

自減

x=–n

4

x=n–

前提:x=5,y=5

等同于

運算結果

=

x=y

+=

x+=y

x=x+y

-=

x-=y

x=x-y

*=

x*=y

x=x*y

25

/=

x/=y

x=x/y

%=

x%=y

x=x%y

前提:x=5

比較

結果

==

等于

x==”5”

true

===

絕對等于

x===”5”

false

!=

不等于

x!=”5”

fales

!==

不絕對等于

x!==”5”

&gt;

大于

x&gt;5

&lt;

小于

x&lt;5

&gt;=

大于等于

x&gt;=5

&lt;=

小于等于

x&lt;=5

前提:n=5

&amp;&amp;

x=n&gt;10&amp;&amp;++n

x=false,n=5(短路)

||

x=n&lt;10||n–

x=true,n=5(短路)

!

x=!n

x=false,x=5

文法 : <code>var [變量名] = [條件] ? [真的執行這個] : [假的執行這個]</code>

switch中的case子句通常都會加break語句,否則程式會繼續執行後續case中的語句

文法:

文法

示例:列印1~100

while 是先進行判斷, 再進行循環

do…while 是先進行一次循環, 再進行判斷

先進行 do 的測試

數組的大小

擷取數組中的元素

array[index]

list[index]

python中支援負數, js中不支援負數索引

尾部追加元素

.push(ele)

.append(ele)

彈出尾部的元素

.pop()

頭部插入元素

.unshift(ele)

.insert(0, ele), list[0]=ele

頭部移除元素

.shift()

.remove(頭ele), pop(0), del list[0]

.selice(start, end)

list[start, end]

反轉

.reverse()

将數組元素連接配接成字元串

.join(seq)

'.join()

python中join中’'中放的是連接配接的字元括号中放的是每個元素都是字元串類型的索引類型元素, 而js中點前面是數組後面是連接配接的字元.

連接配接數組

.concat(val, …)

.extend, +

排序

.sort()

将數組的每個元素傳遞給回調函數

forEach(function(currentValue, index, arr), thisValue)

删除元素,并向數組添加新元素。

splice(index,howmany,item1,…,itemX)

傳回一個數組元素調用函數處理後的值的新數組

map(function(currentValue,index,arr), thisValue)

繼續閱讀