web前端入門(mén)到實(shí)戰(zhàn)：JS的組成、變量、數(shù)據(jù)類(lèi)型

Js做客戶(hù)端語(yǔ)言

按照相關(guān)的Js語(yǔ)法，去操作頁(yè)面中的元素，有時(shí)還要操作瀏覽器里面的一些功能

Js由三部分組成：

• ECMAScript（ES）：描述了該語(yǔ)言的語(yǔ)法和基本對(duì)象
• DOM（Document Object Model）：文檔對(duì)象模型，描述處理網(wǎng)頁(yè)內(nèi)容的方法和接口，通過(guò)一些Js的屬性和方法，用來(lái)操作頁(yè)面中的DOM元素
• BOM（Browser Object Model）：瀏覽器對(duì)象模型，描述與瀏覽器進(jìn)行交互的方法和接口，用來(lái)操作瀏覽器的。

Js中的變量 Variable

JS中數(shù)據(jù)分為兩大類(lèi)：一是基本數(shù)據(jù)類(lèi)型:Undefined、Null、Boolean、Number、String、Symbol，二是復(fù)雜數(shù)據(jù)類(lèi)型：Object,Object本質(zhì)上是由一組無(wú)序的名子對(duì)組成的。

變量：可變的量，在編程語(yǔ)言中，變量其實(shí)就是一個(gè)名字，用來(lái)存儲(chǔ)和代表不同值的東西。

// ES3
var a = 123;
// ES6
let b = 100;
b = 200 //報(bào)錯(cuò)
const c = 1000;

// 創(chuàng)建函數(shù)也相當(dāng)于在創(chuàng)建變量
function fn() {}

// 創(chuàng)建類(lèi)也相當(dāng)于創(chuàng)建變量
class A{}

// ES6的模塊島嶼也可以創(chuàng)建變量
import a from './a.js'

// Symbol創(chuàng)建唯一值
let n = Symbol(100)
let m = Symbol(100)

總結(jié)：

用var聲明的變量，可以重復(fù)聲明，后聲明的會(huì)覆蓋前面的

用let聲明的變量具有作用域，在同一作用域下不可重復(fù)聲明變量，但是可以修改變量的值，例如let a = 1;，不能再次聲明a，let a = 2;會(huì)報(bào)錯(cuò)，提示：Uncaught SyntaxError: Identifier ‘a(chǎn)‘ has already been declared

用const聲明的變量為常量，不能修改該變量的值，但是像Object這樣的復(fù)雜數(shù)據(jù)類(lèi)型，在內(nèi)存中存放的是一個(gè)指向該對(duì)象的指針，也就是說(shuō)，用const聲明的對(duì)象仍然可以修改該對(duì)象的值，但不可再次聲明該對(duì)象

JS中的數(shù)據(jù)類(lèi)型

基本數(shù)據(jù)類(lèi)型

• 數(shù)字Number (常規(guī)數(shù)字和 NaN)
• 字符串 String
• 布爾值 Boolean
• 空指針 Null
• 未定義 Undefined
• 唯一值（獨(dú)一無(wú)二的值）Symbol

引用數(shù)據(jù)類(lèi)型 Object對(duì)象類(lèi)型

• {} 普通對(duì)象
• [] 數(shù)組對(duì)象
• RegExp 正則對(duì)象
• Function 函數(shù)數(shù)據(jù)類(lèi)型
• Math 數(shù)學(xué)函數(shù)對(duì)象
• Date 日期對(duì)象

數(shù)據(jù)類(lèi)型應(yīng)用場(chǎng)景：

當(dāng)我們通過(guò)Ajax請(qǐng)求拿到數(shù)據(jù)之前，先在本地初始化數(shù)據(jù)，一般都會(huì)先給一個(gè)默認(rèn)的數(shù)據(jù)，請(qǐng)求數(shù)據(jù)后再把數(shù)據(jù)放入到我們定義好的數(shù)據(jù)結(jié)構(gòu)里面，比如:

var data = {
    count: 0,
    isActive: true,
    goods: [],
    model: null,
    message: ''
}
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（從零基礎(chǔ)開(kāi)始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，職業(yè)規(guī)劃）

驗(yàn)證數(shù)據(jù)類(lèi)型 typeof操作符

typeof操作符用于檢測(cè)給定變量的數(shù)據(jù)類(lèi)型。typeof操作符可以檢測(cè)的數(shù)據(jù)類(lèi)型有：

• undefined
• boolean
• string
• number
• object
• function

var message = 'some string'
console.log(typeof(message) // "string"

var arr = [1,2,3,4]
console.log(typeof(arr) // "object"
console.log(typeof(null) // "object"

在上面的例子中調(diào)用 typeof null會(huì)返回"object",因?yàn)樘厥庵祅ull被認(rèn)為是一個(gè)空的對(duì)象引用。用typeof檢測(cè)一個(gè)變量是否是數(shù)組并不準(zhǔn)確，會(huì)返回"object"