前端基礎之JavaScript的資料型別

Xiao0101發表於2024-03-19
前端JavaScript資料型別

一、常用的除錯語句

方法 說明 示例 歸屬
alert(msg); 警告，在瀏覽器中彈出一個警告框，內容為alert裡面的內容 alert("Surprise"); 瀏覽器
closole.log(msg); 控制檯，在控制檯內輸出一些內容 console.log("Surprise"); 瀏覽器
prompt(問題,值); 對話方塊，第一個引數是詢問內容，第二個引數是提示攤入的例項值 prompt("你的年齡是",18); 瀏覽器

二、變數與常量

（1）變數

變數命名規範
1、由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號( $ )組成，
2、嚴格區分大小寫。
3、不能 以數字開頭。
4、不能 是關鍵字、保留字。
5、變數名必須有意義。
6、遵守駝峰命名法。首字母小寫，後面單詞的首字母需要大寫。

變數命名

// 關鍵字 var
var 變數名=變數值;
var name = "xiao";

// es6新語法
let 變數名=變數值;
let name = "xiao";
  • 如果編譯器版本是 5.1 則無法使用let
  • 如果是6.0 則向下相容，二者都可以

var和let的區別

  • var 在迴圈內定義也會影響到全域性
  • let 在區域性定義只會在區域性生效

變數賦值

  • 定義完變數後，初始沒有進行賦值，內部會有一個預設的儲存值叫做 undefined
var name; 
console.log(name);  // undefined
  • 變數賦值透過 = 賦值 等號左邊是變數名 右邊是變數值
var name="xiao";
  • 書寫時習慣在等於號兩邊各加一個空格
  • 變數可以在定義時直接賦值
  • 變數可以賦值給另一個變數，只是把變數的值賦值給另一個變數
  • 變數可以多次賦值
  • 多個變數可以同時宣告中間用，號分隔
var name="xiao",age=18;

（2）常量

  • 在Python中沒有真正意義上的常量，預設全大寫就是常量

  • 在js中有真正意義上的常量

const pi=x;

const關鍵字是用來宣告一個只讀的變數，一旦宣告，常量的值就不能改變

const i =10;
var i =11;
// VM296:1 Uncaught SyntaxError: Identifier 'i' has already been declared

ps : js也是一門物件導向的程式語言，一切皆物件

三、資料型別

（1）概述

在JavaScript中，資料型別可以分為以下幾種：

  1. 基本資料型別（Primitive Data Types）：

    • String（字串）：表示文字資料，用引號（單引號或雙引號）括起來。
    • Number（數字）：表示數值，可以是整數或浮點數。
    • Boolean（布林值）：表示邏輯值，只有兩個值：true（真）和false（假）。
    • Null（空值）：表示空值或不存在的值。
    • Undefined（未定義）：表示未定義的值。
    • Symbol（符號）：表示唯一的、不可變的值，通常用於物件屬性的識別符號。

  2. 複雜資料型別（Complex Data Types）：

    • Object（物件）：表示複合值，可以包含多個屬性。

  3. 特殊資料型別：

    • Function（函式）：函式也是物件，但由於其具有可呼叫行為，因此通常被視為一種特殊的資料型別。

在JavaScript中，使用typeof運算子可以用來檢測資料型別，例如：

typeof "Hello" // "string"
typeof 42 // "number"
typeof true // "boolean"
typeof undefined // "undefined"
typeof null // "object" （這是 JavaScript 中的一個歷史遺留問題）
typeof {} // "object"
typeof function() {} // "function"

（2）數值型別(number)

演示

var a = 11;
var b = 11.11;
// 如何檢視當前資料型別
typeof a;

注意

  • 特殊的 NaN ：數值型別
  • 表示的意思是不是一個數字， Not A Number
  • NaN===NaN 這個與所有的值都不會相等，包括自己
  • 只能通 isNaN(NaN) 來判斷

型別轉換

var a = parseInt("11.11");
var b = parseFloat("11");           
console.log(e); 
// 11
console.log(f); 
// 11
console.log(typeof(e)); 
// number
console.log(typeof(f)); 
// number

image

  • parseInt方法：只要開頭有數字就可以轉，如果開頭不是數字則是NoN
  • parseFloat方法：只要開頭有數字就可以轉，如果開頭不是數字則是NoN

（3）字串型別(string)

演示

var s = 'xiao'
typeof s
'string'
var s1 = "xiao"
typeof s1
'string'
var s2 = '''xiao'''  //不支援三引號
VM457:1 Uncaught SyntaxError: Unexpected string

模版字串(重點)

  • 書寫多行字串
var s3 = `
adfcsac
csacaf
asfada
`
typeof s3
'string'
  • 模版字串除了可以定義多行文字之外還可以實現格式化字串操作
    • 書寫${} 會自動去前面找大括號裡面的變數名對應的值，如果沒有定義會直接報錯
var name = 'xiao'
var age = 18
var sss = `
my name is ${name} and my age is ${age}
`
sss
'\nmy name is xiao and my age is 18\n'
var s4 = `my name is ${fneowanfo}`
VM755:1 Uncaught ReferenceError: fneowanfo is not defined
    at <anonymous>:1:24

字串的拼接

  • 在python中不推薦你使用+做拼接，而是使用join
  • 在js中推薦你直接使用+做拼接

字串型別常用方法

方法 說明 對比python
.length 返回長度 len()
.trim() 移除空白 strip()
.trimLeft() 移除左邊的空白 lstrip()
.trimRight() 移除右邊的空白 rstrip()
.charAt(n) 返回第n個字元
.concat(value,...) 拼接 join()
.indexOf(substring,start) 子序列位置
.substring(from,to) 根據索引獲取子序列 []索引取值
.slice(start,end) 切片
.toLowerCase() 小寫 lower()
.toUpperCase() 大寫 upper()
.split(delimiter,limit) 分割 split()

示例

var name = 'quanhaodsb'

name.length
// 10

var name1 = '   quanhaodsb   '

name1
// '   quanhaodsb   '
name1.trim()
// 'quanhaodsb'
name1.trimLeft()
// 'quanhaodsb   '
name1.trimRight()
// '   quanhaodsb'

var name2 = '$$xiao$'

name2.trim('$')   // 不能加括號指定去除的內容
// '$$xiao$'

name2.charAt(2)
// 'x'
name2.indexOf('ia')
// 3

name2.substring(0,5)
// '$$xia'
name2.slice(0,5)
// '$$xia'
name2.substring(0,-1)  //不識別負數
// ''
name2.slice(0,-1)  //後面推薦就使用slice就可以
// '$$xiao'

var name3 = 'QuanHaoDsB123HahA'

name3.toLocaleLowerCase()
// 'quanhaodsb123haha'
name3.toLocaleUpperCase()
// 'QUANHAODSB123HAHA'

var name4 = 'xiao|run|swim|sing|...'

name4.split('|')
// (5) ['xiao', 'run', 'swim', 'sing', '...']
name4.split('|',2)
// (2) ['xiao', 'run']
name4.split('|',10)  //第二個引數不是限制切割字元的個數而是獲取切割之後元素的個數
// (5) ['xiao', 'run', 'swim', 'sing', '...']
name4.concat(name,name1)
// 'xiao|run|swim|sing|...quanhaodsb   quanhaodsb   '

var p = 111

name4.concat(p)  // js是弱型別，內部會自動轉換成相同的資料型別做操作
// 'xiao|run|swim|sing|...111'

python 是強型別，資料型別必須一致
l = [1,2,3,4,5,6]
res = '|'.join(l)  // 直接報錯
print(res)

（4）布林值

（1）與python比較

  • 在python中布林值是首字母大寫的

    • True

    • False

  • 但是在js中布林值是全小寫的

    • true

    • flase

（2）布林值是false的有哪些

  • 空字串
  • 0
  • null
  • undefined
  • NaN

除了上述為 false 的情況，其他情況均為 true

（5）null與undefined

  • null表示值為空，一般都是指定或者清空一個變數時使用
    • name = null
  • undefined表示宣告瞭一個變數，但是沒有做初始化操作（沒有給值）

image

相關文章