JavaScript 常用數據類型有：數字、字符串、布爾、Null、Undefined、對象

JavaScript 擁有動態類型

JavaScript 擁有動態類型。這意味著相同的變量可用作不同的類型

var x; // 此時x是undefined var x = 1; // 此時x是數字 var x = "Alex" // 此時x是字符串

一、數字(Number)

JavaScript不區分整型和浮點型（數字可以帶小數點，也可以不帶），就只有一種數字類型。

var a = 12.34; var b = 20; var c = 123e5; // 12300000 var d = 123e-5; // 0.00123

還有一種NaN，表示不是一個數字（Not a Number）。

常用方法

parseInt("123") // 轉化為數字類型 返回123 parseInt("ABC") // 返回NaN，NaN也是一個數字類型，是代表非數字值的特殊值。該屬性用于指示某個值不是數字。 parseFloat("123.456") // 返回123.456

二、字符串(String)

字符串是存儲字符（比如 "Bill Gates"）的變量。

• 字符串可以是引號中的任意文本。可以在字符串中使用引號，只要不匹配包圍字符串的引號即可。
• 可以使用單引號或雙引號。
• 拼接字符串一般使用“+”。

var a = "Hello" var b = "world; var c = a + b; console.log(c); // 得到Helloworld

常用方法

方法	說明
.length	返回長度
.trim()	移除空白
.trimLeft()	移除左邊的空白
.trimRight()	移除右邊的空白
.charAt(n)	返回第n個字符
.concat(value, …)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根據索引獲取子序列
.slice(start, end)	切片
.toLowerCase()	小寫
.toUpperCase()	大寫
.split(delimiter, limit)	分割

string.slice(start, stop)和string.substring(start, stop)：

兩者的相同點： 如果start等于end，返回空字符串 如果stop參數省略，則取到字符串末 如果某個參數超過string的長度，這個參數會被替換為string的長度substirng()的特點： 如果 start > stop ，start和stop將被交換 如果參數是負數或者不是數字，將會被0替換silce()的特點： 如果 start > stop 不會交換兩者 如果start小于0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符) 如果stop小于0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)

補充：ES6中引入了模板字符串。模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當做普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

// 普通字符串 `這是普通字符串！` // 多行文本 `這是多行的 文本` // 字符串中嵌入變量 var name = "q1mi", time = "today"; `Hello ${name}, how are you ${time}?`

注意：如果模板字符串中需要使用反引號，則在其前面要用反斜杠轉義。JSHint 啟用 ES6 語法支持:/* jshint esversion: 6 */

三、布爾值(Boolean)

區別于Python，true和false都是小寫。“”(空字符串)、0、null、undefined、NaN 都是 false 。

var a = true; var b = false;

四、null和undefined

• null 表示值是空，一般在需要指定或清空一個變量時才會使用，如 name=null;
• undefined 表示當聲明一個變量但未初始化時，該變量的默認值是 undefined 。還有就是函數無明確的返回值時，返回的也是undefined。

五、對象(Object)

JavaScript 中的所有事物都是對象：字符串、數值、數組、函數…此外，JavaScript 允許自定義對象。

JavaScript 提供多個內建對象，比如 String、Date、Array 等等。

對象只是帶有屬性和方法的特殊數據類型。

注意var s1 = “abc”和var s2 = new String(“abc”)的區別：typeof s1 –> string而 typeof s2 –> Object

訪問對象的屬性

屬性是與對象相關的值。訪問對象屬性的語法是：

objectName.propertyName var message="Hello World!"; var x=message.length; // 使用 String 對象的 length 屬性來獲得字符串的長度：結果 12

訪問對象的方法

方法是能夠在對象上執行的動作。您可以通過以下語法來調用方法：

objectName.methodName() var message="Hello world!"; var x=message.toUpperCase(); // 使用了 String 對象的 toUpperCase() 方法來將文本轉換為大寫，在以上代碼執行后，x 的值將是：HELLO WORLD!

創建 JavaScript 對象

通過 JavaScript，您能夠定義并創建自己的對象。創建新對象有兩種不同的方法：

• 使用 Object 定義并創建對象的實例。
• 使用函數來定義對象，然后創建新的對象實例。

使用 Object

在 JavaScript 中，幾乎所有的對象都是 Object 類型的實例，它們都會從 Object.prototype 繼承屬性和方法。

Object 構造函數創建一個對象包裝器。

Object 構造函數，會根據給定的參數創建對象，具體有以下情況：

• 如果給定值是 null 或 undefined，將會創建并返回一個空對象。
• 如果傳進去的是一個基本類型的值，則會構造其包裝類型的對象。
• 如果傳進去的是引用類型的值，仍然會返回這個值，經他們復制的變量保有和源對象相同的引用地址。
• 當以非構造函數形式被調用時，Object 的行為等同于 new Object()。

語法格式：

// 以構造函數形式來調用, vaule 可以是任何值。 new Object([value])// 以下實例使用 Object 生成布爾對象： var o = new Object(true); // 等價于 o = new Boolean(true);

創建對象的一個新實例，并向其添加了四個屬性：

person=new Object(); person.firstname="John"; person.lastname="Doe"; person.age=50; person.eyecolor="blue";

也可以使用對象字面量來創建對象，語法格式如下：

{ name1 : value1, name2 : value2,...nameN : valueN } //其實就是大括號里面創建?name:value 對，然后?name:value?對之間以逗號?,?隔開。示例 person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

使用對象構造器

function person(firstname,lastname,age,eyecolor) {this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor; }

在JavaScript中，this通常指向的是我們正在執行的函數本身，或者是指向該函數所屬的對象（運行時）

創建 JavaScript 對象實例。

一旦您有了對象構造器，就可以創建新的對象實例，就像這樣：

var myFather=new person("John","Doe",50,"blue"); var myMother=new person("Sally","Rally",48,"green");

把屬性添加到 JavaScript 對象

您可以通過為對象賦值，向已有對象添加新屬性：假設 person 對象已存在 - 您可以為其添加這些新屬性：firstname、lastname、age 以及 eyecolor：

person.firstname="John"; person.lastname="Doe"; person.age=30; person.eyecolor="blue";x=person.firstname; // 在以上代碼執行后，x 的值將是：John

把方法添加到 JavaScript 對象

方法只不過是附加在對象上的函數。在構造器函數內部定義對象的方法：

function person(firstname,lastname,age,eyecolor) {this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;this.changeName=changeName;function changeName(name){this.lastname=name;} }

changeName() 函數 name 的值賦給 person 的 lastname 屬性。

JavaScript 類

JavaScript 是面向對象的語言，但 JavaScript 不使用類。

在 JavaScript 中，不會創建類，也不會通過類來創建對象（就像在其他面向對象的語言中那樣）。

JavaScript 基于 prototype，而不是基于類的。

把對象當作 Hash 看

JavaScript的對象（Object）本質上是鍵值對的集合（Hash結構），但是只能用字符串作為鍵。

var a = {"name": "Alex", "age": 18}; console.log(a.name); console.log(a["age"]);

刪除

//下面兩種方式都可以進行刪除 delete dic["r"]; delete dic.w;//但是不能通過下面的方式進行刪除，這種方式時錯誤的寫法 var newV = dic["r"]; delete newV;

遍歷

var a = {"name": "Alex", "age": 18}; for (var i in a){console.log(i, a[i]); }//可以通過上面這樣的方式進行遍歷，因為dic沒有length屬性為0因此不能使用下面方式進行遍歷了 for (var i = 0; i < dic.length; i++) {//這樣遍歷是錯誤的，因為length為0console.log(key + ":" + dic[key]); }

事情并沒有那么簡單…

創建對象：

var person=new Object(); // 創建一個person對象 person.name="lp"; // person對象的name屬性 person.age=18; // person對象的age屬性

注意：ES6中提供了Map數據結構。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當做鍵。也就是說，Object結構提供了“字符串–值”的對應，Map結構提供了“值–值”的對應，是一種更完善的Hash結構實現。

var m = new Map(); var o = {p: "Hello World"}m.set(o, "content"} m.get(o) // "content"m.has(o) // true m.delete(o) // true m.has(o) // false

?擴展：

// 繼承 // 父類構造函數 var Car = function (loc) {this.loc = loc; };// 父類方法 Car.prototype.move = function () {this.loc ++; };// 子類構造函數 var Van = function (loc) {Car.call(this, loc); };// 繼承父類的方法 Van.prototype = Object.create(Car.prototype); // 修復 constructor Van.prototype.constructor = Van; // 擴展方法 Van.prototype.grab = function () {/* ... */ };

數組對象

數組對象的作用是：使用單獨的變量名來存儲一系列的值。類似于Python中的列表。

創建數組

創建一個數組，有三種方法。

// 1 常規方式: var myCars=new Array(); myCars[0]="Saab";?????? myCars[1]="Volvo"; myCars[2]="BMW";// 2 簡潔方式: var myCars=new Array("Saab","Volvo","BMW");// 3 字面 var myCars=["Saab","Volvo","BMW"];

訪問數組

通過指定數組名以及索引號碼，你可以訪問某個特定的元素。

// 以下實例可以訪問myCars數組的第一個值： var name=myCars[0];

遍歷數組

var a = [10, 20, 30, 40]; for (var i=0;i<a.length;i++) {console.log(a[i]); }

修改數組

// 以下實例修改了數組 myCars 的第一個元素: myCars[0]="Opel";

常用方法

方法	說明
.length	數組的大小
.push(ele)	尾部追加元素
.pop()	獲取尾部的元素
.unshift(ele)	頭部插入元素
.shift()	頭部移除元素
.slice(start, end)	切片
.reverse()	反轉
.join(seq)	將數組元素連接成字符串
.concat(val, …)	連接數組
.sort()	排序
.forEach()	將數組的每個元素傳遞給回調函數
.splice()	刪除元素，并向數組添加新元素。
.map()	返回一個數組元素調用函數處理后的值的新數組

關于sort()需要注意：

如果調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（如有必要），以便進行比較。

如果想按照其他標準進行排序，就需要提供比較函數，該函數要比較兩個值，然后返回一個用于說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其返回值如下：

• 若 a 小于 b，在排序后的數組中 a 應該出現在 b 之前，則返回一個小于 0 的值。
• 若 a 等于 b，則返回 0。
• 若 a 大于 b，則返回一個大于 0 的值。

function sortNumber(a,b){return a - b } var arr1 = [11, 100, 22, 55, 33, 44] arr1.sort(sortNumber)

關于遍歷數組中的元素，還可以使用下面的方式：

forEach()。語法：forEach(function(currentValue, index, arr), thisValue)

參數描述

function(currentValue, index, arr)	必需。 數組中每個元素需要調用的函數。 函數參數: ? 參數描述 currentValue 必需。當前元素 index 可選。當前元素的索引值。 arr 可選。當前元素所屬的數組對象。
thisValue	可選。傳遞給函數的值一般用 “this” 值。 如果這個參數為空， “undefined” 會傳遞給 “this” 值

splice()。語法：splice(index,howmany,item1,…..,itemX)

參數描述

index	必需。規定從何處添加/刪除元素。 該參數是開始插入和（或）刪除的數組元素的下標，必須是數字。
howmany	必需。規定應該刪除多少元素。必須是數字，但可以是 “0”。 如果未規定此參數，則刪除從 index 開始到原數組結尾的所有元素。
item1, …,?itemX	可選。要添加到數組的新元素

map()。語法：map(function(currentValue,index,arr), thisValue)

參數描述

function(currentValue, index,arr)	必須。函數，數組中的每個元素都會執行這個函數 函數參數: ? 參數描述 currentValue 必須。當前元素的值 index 可選。當期元素的索引值 arr 可選。當期元素屬于的數組對象
thisValue	可選。對象作為該執行回調時使用，傳遞給函數，用作 “this” 的值。 如果省略了 thisValue ，”this” 的值為 “undefined”

補充：ES6新引入了一種新的原始數據類型（Symbol），表示獨一無二的值。它是JavaScript語言的第7種數據類型。

Date對象

創建Date對象

//方法1：不指定參數 var d1 = new Date(); console.log(d1.toLocaleString());//方法2：參數為日期字符串 var d2 = new Date("2004/3/20 11:12"); console.log(d2.toLocaleString()); var d3 = new Date("04/03/20 11:12"); console.log(d3.toLocaleString());//方法3：參數為毫秒數 var d3 = new Date(5000); console.log(d3.toLocaleString()); console.log(d3.toUTCString());//方法4：參數為年月日小時分鐘秒毫秒 var d4 = new Date(2004,2,20,11,12,0,300); console.log(d4.toLocaleString()); //毫秒并不直接顯示

Date對象的方法

var d = new Date(); //getDate() 獲取日 //getDay () 獲取星期 //getMonth () 獲取月（0-11） //getFullYear () 獲取完整年份 //getHours () 獲取小時 //getMinutes () 獲取分鐘 //getSeconds () 獲取秒 //getMilliseconds () 獲取毫秒 //getTime () 返回累計毫秒數(從1970/1/1午夜)

詳細Date對象方法：點我

JSON對象

var str1 = '{"name": "lp", "age": 18}'; var obj1 = {"name": "lp", "age": 18}; // JSON字符串轉換成對象 var obj = JSON.parse(str1); // 對象轉換成JSON字符串 var str = JSON.stringify(obj1);

RegExp對象

//RegExp對象//創建正則對象方式1 // 參數1 正則表達式(不能有空格) // 參數2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一個匹配后停止)和i(忽略大小寫)// 用戶名只能是英文字母、數字和_，并且首字母必須是英文字母。長度最短不能少于6位 最長不能超過12位。// 創建RegExp對象方式（逗號后面不要加空格） var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");// 匹配響應的字符串 var s1 = "bc123";//RegExp對象的test方法，測試一個字符串是否符合對應的正則規則，返回值是true或false。 reg1.test(s1); // true// 創建方式2 // /填寫正則表達式/匹配模式（逗號后面不要加空格） var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; reg2.test(s1); // true// String對象與正則結合的4個方法 var s2 = "hello world";s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正則 的內容 s2.search(/h/g); // 0 查找字符串中符合正則表達式的內容位置 s2.split(/o/g); // ["hell", " w", "rld"] 按照正則表達式對字符串進行切割 s2.replace(/o/g, "s"); // "hells wsrld" 對字符串按照正則進行替換// 關于匹配模式：g和i的簡單示例 var s1 = "name:Alex age:18";s1.replace(/a/, "哈哈哈"); // "n哈哈哈me:Alex age:18" s1.replace(/a/g, "哈哈哈"); // "n哈哈哈me:Alex 哈哈哈ge:18" 全局匹配 s1.replace(/a/gi, "哈哈哈"); // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18" 不區分大小寫// 注意事項1： // 如果regExpObject帶有全局標志g，test()函數不是從字符串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。 // 該屬性值默認為0，所以第一次仍然是從字符串的開頭查找。 // 當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改為字符串中本次匹配內容的最后一個字符的下一個索引位置。 // 當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配。 // 因此，當我們使用test()函數執行了一次匹配之后，如果想要重新使用test()函數從頭開始查找，則需要手動將regExpObject.lastIndex的值重置為 0。 // 如果test()函數再也找不到可以匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置為 0。var reg3 = /foo/g; // 此時 regex.lastIndex=0 reg3.test('foo'); // 返回true // 此時 regex.lastIndex=3 reg3.test('xxxfoo'); // 還是返回true // 所以我們在使用test()方法校驗一個字符串是否完全匹配時，一定要加上^和$符號。// 注意事項2(說出來你可能不信系列)： // 當我們不加參數調用RegExpObj.test()方法時, 相當于執行RegExpObj.test("undefined"), 并且/undefined/.test()默認返回true。 var reg4 = /^undefined$/; reg4.test(); // 返回true reg4.test(undefined); // 返回true reg4.test("undefined"); // 返回true

擴展閱讀

Math對象

abs(x) 返回數的絕對值。 exp(x) 返回 e 的指數。 floor(x) 對數進行下舍入。 log(x) 返回數的自然對數（底為e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次冪。 random() 返回 0 ~ 1 之間的隨機數。 round(x) 把數四舍五入為最接近的整數。 sin(x) 返回數的正弦。 sqrt(x) 返回數的平方根。 tan(x) 返回角的正切。

聲明變量類型

當您聲明新變量時，可以使用關鍵詞 "new" 來聲明其類型：

var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object;

JavaScript 變量均為對象。當您聲明一個變量時，就創建了一個新的對象。

類型查詢

typeof "abc" // "string" typeof null // "object" typeof true // "boolean" typeof 123 // "number"

typeof是一個一元運算符（就像++，–，！，- 等一元運算符），不是一個函數，也不是一個語句。

對變量或值調用 typeof 運算符將返回下列值之一：

• undefined – 如果變量是 Undefined 類型的
• boolean – 如果變量是 Boolean 類型的
• number – 如果變量是 Number 類型的
• string – 如果變量是 String 類型的
• object – 如果變量是一種引用類型或 Null 類型的

總結

以上是生活随笔為你收集整理的前端之 JavaScript 常用数据类型和操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。