javascript
前端之 JavaScript 常用数据类型和操作
JavaScript 常用數(shù)據(jù)類型有:數(shù)字、字符串、布爾、Null、Undefined、對(duì)象
JavaScript 擁有動(dòng)態(tài)類型
JavaScript 擁有動(dòng)態(tài)類型。這意味著相同的變量可用作不同的類型
var x; // 此時(shí)x是undefined var x = 1; // 此時(shí)x是數(shù)字 var x = "Alex" // 此時(shí)x是字符串一、數(shù)字(Number)
JavaScript不區(qū)分整型和浮點(diǎn)型(數(shù)字可以帶小數(shù)點(diǎn),也可以不帶),就只有一種數(shù)字類型。
var a = 12.34; var b = 20; var c = 123e5; // 12300000 var d = 123e-5; // 0.00123還有一種NaN,表示不是一個(gè)數(shù)字(Not a Number)。
常用方法
parseInt("123") // 轉(zhuǎn)化為數(shù)字類型 返回123 parseInt("ABC") // 返回NaN,NaN也是一個(gè)數(shù)字類型,是代表非數(shù)字值的特殊值。該屬性用于指示某個(gè)值不是數(shù)字。 parseFloat("123.456") // 返回123.456二、字符串(String)
字符串是存儲(chǔ)字符(比如 "Bill Gates")的變量。
- 字符串可以是引號(hào)中的任意文本。可以在字符串中使用引號(hào),只要不匹配包圍字符串的引號(hào)即可。
- 可以使用單引號(hào)或雙引號(hào)。
- 拼接字符串一般使用“+”。
常用方法
| 方法 | 說明 |
| .length | 返回長(zhǎng)度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左邊的空白 |
| .trimRight() | 移除右邊的空白 |
| .charAt(n) | 返回第n個(gè)字符 |
| .concat(value, …) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根據(jù)索引獲取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小寫 |
| .toUpperCase() | 大寫 |
| .split(delimiter, limit) | 分割 |
string.slice(start, stop)和string.substring(start, stop):
兩者的相同點(diǎn): 如果start等于end,返回空字符串 如果stop參數(shù)省略,則取到字符串末 如果某個(gè)參數(shù)超過string的長(zhǎng)度,這個(gè)參數(shù)會(huì)被替換為string的長(zhǎng)度substirng()的特點(diǎn): 如果 start > stop ,start和stop將被交換 如果參數(shù)是負(fù)數(shù)或者不是數(shù)字,將會(huì)被0替換silce()的特點(diǎn): 如果 start > stop 不會(huì)交換兩者 如果start小于0,則切割從字符串末尾往前數(shù)的第abs(start)個(gè)的字符開始(包括該位置的字符) 如果stop小于0,則切割在從字符串末尾往前數(shù)的第abs(stop)個(gè)字符結(jié)束(不包含該位置字符)補(bǔ)充:ES6中引入了模板字符串。模板字符串(template string)是增強(qiáng)版的字符串,用反引號(hào)(`)標(biāo)識(shí)。它可以當(dāng)做普通字符串使用,也可以用來定義多行字符串,或者在字符串中嵌入變量。
// 普通字符串 `這是普通字符串!` // 多行文本 `這是多行的 文本` // 字符串中嵌入變量 var name = "q1mi", time = "today"; `Hello ${name}, how are you ${time}?`注意:如果模板字符串中需要使用反引號(hào),則在其前面要用反斜杠轉(zhuǎn)義。JSHint 啟用 ES6 語法支持:/* jshint esversion: 6 */
三、布爾值(Boolean)
區(qū)別于Python,true和false都是小寫。“”(空字符串)、0、null、undefined、NaN 都是 false 。
var a = true; var b = false;四、null和undefined
- null 表示值是空,一般在需要指定或清空一個(gè)變量時(shí)才會(huì)使用,如 name=null;
- undefined 表示當(dāng)聲明一個(gè)變量但未初始化時(shí),該變量的默認(rèn)值是 undefined 。還有就是函數(shù)無明確的返回值時(shí),返回的也是undefined。
五、對(duì)象(Object)
JavaScript 中的所有事物都是對(duì)象:字符串、數(shù)值、數(shù)組、函數(shù)…此外,JavaScript 允許自定義對(duì)象。
JavaScript 提供多個(gè)內(nèi)建對(duì)象,比如 String、Date、Array 等等。
對(duì)象只是帶有屬性和方法的特殊數(shù)據(jù)類型。
注意var s1 = “abc”和var s2 = new String(“abc”)的區(qū)別:typeof s1 –> string而 typeof s2 –> Object
訪問對(duì)象的屬性
屬性是與對(duì)象相關(guān)的值。訪問對(duì)象屬性的語法是:
objectName.propertyName var message="Hello World!"; var x=message.length; // 使用 String 對(duì)象的 length 屬性來獲得字符串的長(zhǎng)度:結(jié)果 12訪問對(duì)象的方法
方法是能夠在對(duì)象上執(zhí)行的動(dòng)作。您可以通過以下語法來調(diào)用方法:
objectName.methodName() var message="Hello world!"; var x=message.toUpperCase(); // 使用了 String 對(duì)象的 toUpperCase() 方法來將文本轉(zhuǎn)換為大寫,在以上代碼執(zhí)行后,x 的值將是:HELLO WORLD!創(chuàng)建 JavaScript 對(duì)象
通過 JavaScript,您能夠定義并創(chuàng)建自己的對(duì)象。創(chuàng)建新對(duì)象有兩種不同的方法:
- 使用 Object 定義并創(chuàng)建對(duì)象的實(shí)例。
- 使用函數(shù)來定義對(duì)象,然后創(chuàng)建新的對(duì)象實(shí)例。
使用 Object
在 JavaScript 中,幾乎所有的對(duì)象都是 Object 類型的實(shí)例,它們都會(huì)從 Object.prototype 繼承屬性和方法。
Object 構(gòu)造函數(shù)創(chuàng)建一個(gè)對(duì)象包裝器。
Object 構(gòu)造函數(shù),會(huì)根據(jù)給定的參數(shù)創(chuàng)建對(duì)象,具體有以下情況:
- 如果給定值是 null 或 undefined,將會(huì)創(chuàng)建并返回一個(gè)空對(duì)象。
- 如果傳進(jìn)去的是一個(gè)基本類型的值,則會(huì)構(gòu)造其包裝類型的對(duì)象。
- 如果傳進(jìn)去的是引用類型的值,仍然會(huì)返回這個(gè)值,經(jīng)他們復(fù)制的變量保有和源對(duì)象相同的引用地址。
- 當(dāng)以非構(gòu)造函數(shù)形式被調(diào)用時(shí),Object 的行為等同于 new Object()。
語法格式:
// 以構(gòu)造函數(shù)形式來調(diào)用, vaule 可以是任何值。 new Object([value])// 以下實(shí)例使用 Object 生成布爾對(duì)象: var o = new Object(true); // 等價(jià)于 o = new Boolean(true);創(chuàng)建對(duì)象的一個(gè)新實(shí)例,并向其添加了四個(gè)屬性:
person=new Object(); person.firstname="John"; person.lastname="Doe"; person.age=50; person.eyecolor="blue";也可以使用對(duì)象字面量來創(chuàng)建對(duì)象,語法格式如下:
{ name1 : value1, name2 : value2,...nameN : valueN } //其實(shí)就是大括號(hào)里面創(chuàng)建?name:value 對(duì),然后?name:value?對(duì)之間以逗號(hào)?,?隔開。示例 person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};使用對(duì)象構(gòu)造器
function person(firstname,lastname,age,eyecolor) {this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor; }在JavaScript中,this通常指向的是我們正在執(zhí)行的函數(shù)本身,或者是指向該函數(shù)所屬的對(duì)象(運(yùn)行時(shí))
創(chuàng)建 JavaScript 對(duì)象實(shí)例。
一旦您有了對(duì)象構(gòu)造器,就可以創(chuàng)建新的對(duì)象實(shí)例,就像這樣:
var myFather=new person("John","Doe",50,"blue"); var myMother=new person("Sally","Rally",48,"green");把屬性添加到 JavaScript 對(duì)象
您可以通過為對(duì)象賦值,向已有對(duì)象添加新屬性:假設(shè) person 對(duì)象已存在 - 您可以為其添加這些新屬性:firstname、lastname、age 以及 eyecolor:
person.firstname="John"; person.lastname="Doe"; person.age=30; person.eyecolor="blue";x=person.firstname; // 在以上代碼執(zhí)行后,x 的值將是:John把方法添加到 JavaScript 對(duì)象
方法只不過是附加在對(duì)象上的函數(shù)。在構(gòu)造器函數(shù)內(nèi)部定義對(duì)象的方法:
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() 函數(shù) name 的值賦給 person 的 lastname 屬性。
JavaScript 類
JavaScript 是面向?qū)ο蟮恼Z言,但 JavaScript 不使用類。
在 JavaScript 中,不會(huì)創(chuàng)建類,也不會(huì)通過類來創(chuàng)建對(duì)象(就像在其他面向?qū)ο蟮恼Z言中那樣)。
JavaScript 基于 prototype,而不是基于類的。
把對(duì)象當(dāng)作 Hash 看
JavaScript的對(duì)象(Object)本質(zhì)上是鍵值對(duì)的集合(Hash結(jié)構(gòu)),但是只能用字符串作為鍵。
var a = {"name": "Alex", "age": 18}; console.log(a.name); console.log(a["age"]);刪除
//下面兩種方式都可以進(jìn)行刪除 delete dic["r"]; delete dic.w;//但是不能通過下面的方式進(jìn)行刪除,這種方式時(shí)錯(cuò)誤的寫法 var newV = dic["r"]; delete newV;遍歷
var a = {"name": "Alex", "age": 18}; for (var i in a){console.log(i, a[i]); }//可以通過上面這樣的方式進(jìn)行遍歷,因?yàn)閐ic沒有l(wèi)ength屬性為0因此不能使用下面方式進(jìn)行遍歷了 for (var i = 0; i < dic.length; i++) {//這樣遍歷是錯(cuò)誤的,因?yàn)閘ength為0console.log(key + ":" + dic[key]); }事情并沒有那么簡(jiǎn)單…
創(chuàng)建對(duì)象:
var person=new Object(); // 創(chuàng)建一個(gè)person對(duì)象 person.name="lp"; // person對(duì)象的name屬性 person.age=18; // person對(duì)象的age屬性注意:ES6中提供了Map數(shù)據(jù)結(jié)構(gòu)。它類似于對(duì)象,也是鍵值對(duì)的集合,但是“鍵”的范圍不限于字符串,各種類型的值(包括對(duì)象)都可以當(dāng)做鍵。也就是說,Object結(jié)構(gòu)提供了“字符串–值”的對(duì)應(yīng),Map結(jié)構(gòu)提供了“值–值”的對(duì)應(yīng),是一種更完善的Hash結(jié)構(gòu)實(shí)現(xiàn)。
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?擴(kuò)展:
// 繼承 // 父類構(gòu)造函數(shù) var Car = function (loc) {this.loc = loc; };// 父類方法 Car.prototype.move = function () {this.loc ++; };// 子類構(gòu)造函數(shù) var Van = function (loc) {Car.call(this, loc); };// 繼承父類的方法 Van.prototype = Object.create(Car.prototype); // 修復(fù) constructor Van.prototype.constructor = Van; // 擴(kuò)展方法 Van.prototype.grab = function () {/* ... */ };數(shù)組對(duì)象
數(shù)組對(duì)象的作用是:使用單獨(dú)的變量名來存儲(chǔ)一系列的值。類似于Python中的列表。
創(chuàng)建數(shù)組
創(chuàng)建一個(gè)數(shù)組,有三種方法。
// 1 常規(guī)方式: var myCars=new Array(); myCars[0]="Saab";?????? myCars[1]="Volvo"; myCars[2]="BMW";// 2 簡(jiǎn)潔方式: var myCars=new Array("Saab","Volvo","BMW");// 3 字面 var myCars=["Saab","Volvo","BMW"];訪問數(shù)組
通過指定數(shù)組名以及索引號(hào)碼,你可以訪問某個(gè)特定的元素。
// 以下實(shí)例可以訪問myCars數(shù)組的第一個(gè)值: var name=myCars[0];遍歷數(shù)組
var a = [10, 20, 30, 40]; for (var i=0;i<a.length;i++) {console.log(a[i]); }修改數(shù)組
// 以下實(shí)例修改了數(shù)組 myCars 的第一個(gè)元素: myCars[0]="Opel";常用方法
| 方法 | 說明 |
| .length | 數(shù)組的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 獲取尾部的元素 |
| .unshift(ele) | 頭部插入元素 |
| .shift() | 頭部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反轉(zhuǎn) |
| .join(seq) | 將數(shù)組元素連接成字符串 |
| .concat(val, …) | 連接數(shù)組 |
| .sort() | 排序 |
| .forEach() | 將數(shù)組的每個(gè)元素傳遞給回調(diào)函數(shù) |
| .splice() | 刪除元素,并向數(shù)組添加新元素。 |
| .map() | 返回一個(gè)數(shù)組元素調(diào)用函數(shù)處理后的值的新數(shù)組 |
關(guān)于sort()需要注意:
如果調(diào)用該方法時(shí)沒有使用參數(shù),將按字母順序?qū)?shù)組中的元素進(jìn)行排序,說得更精確點(diǎn),是按照字符編碼的順序進(jìn)行排序。要實(shí)現(xiàn)這一點(diǎn),首先應(yīng)把數(shù)組的元素都轉(zhuǎn)換成字符串(如有必要),以便進(jìn)行比較。
如果想按照其他標(biāo)準(zhǔn)進(jìn)行排序,就需要提供比較函數(shù),該函數(shù)要比較兩個(gè)值,然后返回一個(gè)用于說明這兩個(gè)值的相對(duì)順序的數(shù)字。比較函數(shù)應(yīng)該具有兩個(gè)參數(shù) a 和 b,其返回值如下:
- 若 a 小于 b,在排序后的數(shù)組中 a 應(yīng)該出現(xiàn)在 b 之前,則返回一個(gè)小于 0 的值。
- 若 a 等于 b,則返回 0。
- 若 a 大于 b,則返回一個(gè)大于 0 的值。
關(guān)于遍歷數(shù)組中的元素,還可以使用下面的方式:
forEach()。語法:forEach(function(currentValue, index, arr), thisValue)
| function(currentValue, index, arr) | 必需。 數(shù)組中每個(gè)元素需要調(diào)用的函數(shù)。 函數(shù)參數(shù): ?
| ||||||
| thisValue | 可選。傳遞給函數(shù)的值一般用 “this” 值。 如果這個(gè)參數(shù)為空, “undefined” 會(huì)傳遞給 “this” 值 |
splice()。語法:splice(index,howmany,item1,…..,itemX)
| index | 必需。規(guī)定從何處添加/刪除元素。 該參數(shù)是開始插入和(或)刪除的數(shù)組元素的下標(biāo),必須是數(shù)字。 |
| howmany | 必需。規(guī)定應(yīng)該刪除多少元素。必須是數(shù)字,但可以是 “0”。 如果未規(guī)定此參數(shù),則刪除從 index 開始到原數(shù)組結(jié)尾的所有元素。 |
| item1, …,?itemX | 可選。要添加到數(shù)組的新元素 |
map()。語法:map(function(currentValue,index,arr), thisValue)
| function(currentValue, index,arr) | 必須。函數(shù),數(shù)組中的每個(gè)元素都會(huì)執(zhí)行這個(gè)函數(shù) 函數(shù)參數(shù): ?
| ||||||
| thisValue | 可選。對(duì)象作為該執(zhí)行回調(diào)時(shí)使用,傳遞給函數(shù),用作 “this” 的值。 如果省略了 thisValue ,”this” 的值為 “undefined” |
補(bǔ)充:ES6新引入了一種新的原始數(shù)據(jù)類型(Symbol),表示獨(dú)一無二的值。它是JavaScript語言的第7種數(shù)據(jù)類型。
Date對(duì)象
創(chuàng)建Date對(duì)象
//方法1:不指定參數(shù) var d1 = new Date(); console.log(d1.toLocaleString());//方法2:參數(shù)為日期字符串 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:參數(shù)為毫秒數(shù) var d3 = new Date(5000); console.log(d3.toLocaleString()); console.log(d3.toUTCString());//方法4:參數(shù)為年月日小時(shí)分鐘秒毫秒 var d4 = new Date(2004,2,20,11,12,0,300); console.log(d4.toLocaleString()); //毫秒并不直接顯示Date對(duì)象的方法
var d = new Date(); //getDate() 獲取日 //getDay () 獲取星期 //getMonth () 獲取月(0-11) //getFullYear () 獲取完整年份 //getHours () 獲取小時(shí) //getMinutes () 獲取分鐘 //getSeconds () 獲取秒 //getMilliseconds () 獲取毫秒 //getTime () 返回累計(jì)毫秒數(shù)(從1970/1/1午夜)詳細(xì)Date對(duì)象方法:點(diǎn)我
JSON對(duì)象
var str1 = '{"name": "lp", "age": 18}'; var obj1 = {"name": "lp", "age": 18}; // JSON字符串轉(zhuǎn)換成對(duì)象 var obj = JSON.parse(str1); // 對(duì)象轉(zhuǎn)換成JSON字符串 var str = JSON.stringify(obj1);RegExp對(duì)象
//RegExp對(duì)象//創(chuàng)建正則對(duì)象方式1 // 參數(shù)1 正則表達(dá)式(不能有空格) // 參數(shù)2 匹配模式:常用g(全局匹配;找到所有匹配,而不是在第一個(gè)匹配后停止)和i(忽略大小寫)// 用戶名只能是英文字母、數(shù)字和_,并且首字母必須是英文字母。長(zhǎng)度最短不能少于6位 最長(zhǎng)不能超過12位。// 創(chuàng)建RegExp對(duì)象方式(逗號(hào)后面不要加空格) var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");// 匹配響應(yīng)的字符串 var s1 = "bc123";//RegExp對(duì)象的test方法,測(cè)試一個(gè)字符串是否符合對(duì)應(yīng)的正則規(guī)則,返回值是true或false。 reg1.test(s1); // true// 創(chuàng)建方式2 // /填寫正則表達(dá)式/匹配模式(逗號(hào)后面不要加空格) var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; reg2.test(s1); // true// String對(duì)象與正則結(jié)合的4個(gè)方法 var s2 = "hello world";s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正則 的內(nèi)容 s2.search(/h/g); // 0 查找字符串中符合正則表達(dá)式的內(nèi)容位置 s2.split(/o/g); // ["hell", " w", "rld"] 按照正則表達(dá)式對(duì)字符串進(jìn)行切割 s2.replace(/o/g, "s"); // "hells wsrld" 對(duì)字符串按照正則進(jìn)行替換// 關(guān)于匹配模式:g和i的簡(jiǎn)單示例 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" 不區(qū)分大小寫// 注意事項(xiàng)1: // 如果regExpObject帶有全局標(biāo)志g,test()函數(shù)不是從字符串的開頭開始查找,而是從屬性regExpObject.lastIndex所指定的索引處開始查找。 // 該屬性值默認(rèn)為0,所以第一次仍然是從字符串的開頭查找。 // 當(dāng)找到一個(gè)匹配時(shí),test()函數(shù)會(huì)將regExpObject.lastIndex的值改為字符串中本次匹配內(nèi)容的最后一個(gè)字符的下一個(gè)索引位置。 // 當(dāng)再次執(zhí)行test()函數(shù)時(shí),將會(huì)從該索引位置處開始查找,從而找到下一個(gè)匹配。 // 因此,當(dāng)我們使用test()函數(shù)執(zhí)行了一次匹配之后,如果想要重新使用test()函數(shù)從頭開始查找,則需要手動(dòng)將regExpObject.lastIndex的值重置為 0。 // 如果test()函數(shù)再也找不到可以匹配的文本時(shí),該函數(shù)會(huì)自動(dòng)把regExpObject.lastIndex屬性重置為 0。var reg3 = /foo/g; // 此時(shí) regex.lastIndex=0 reg3.test('foo'); // 返回true // 此時(shí) regex.lastIndex=3 reg3.test('xxxfoo'); // 還是返回true // 所以我們?cè)谑褂胻est()方法校驗(yàn)一個(gè)字符串是否完全匹配時(shí),一定要加上^和$符號(hào)。// 注意事項(xiàng)2(說出來你可能不信系列): // 當(dāng)我們不加參數(shù)調(diào)用RegExpObj.test()方法時(shí), 相當(dāng)于執(zhí)行RegExpObj.test("undefined"), 并且/undefined/.test()默認(rèn)返回true。 var reg4 = /^undefined$/; reg4.test(); // 返回true reg4.test(undefined); // 返回true reg4.test("undefined"); // 返回true擴(kuò)展閱讀
Math對(duì)象
abs(x) 返回?cái)?shù)的絕對(duì)值。 exp(x) 返回 e 的指數(shù)。 floor(x) 對(duì)數(shù)進(jìn)行下舍入。 log(x) 返回?cái)?shù)的自然對(duì)數(shù)(底為e)。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次冪。 random() 返回 0 ~ 1 之間的隨機(jī)數(shù)。 round(x) 把數(shù)四舍五入為最接近的整數(shù)。 sin(x) 返回?cái)?shù)的正弦。 sqrt(x) 返回?cái)?shù)的平方根。 tan(x) 返回角的正切。聲明變量類型
當(dāng)您聲明新變量時(shí),可以使用關(guān)鍵詞 "new" 來聲明其類型:
var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object;JavaScript 變量均為對(duì)象。當(dāng)您聲明一個(gè)變量時(shí),就創(chuàng)建了一個(gè)新的對(duì)象。
類型查詢
typeof "abc" // "string" typeof null // "object" typeof true // "boolean" typeof 123 // "number"typeof是一個(gè)一元運(yùn)算符(就像++,–,!,- 等一元運(yùn)算符),不是一個(gè)函數(shù),也不是一個(gè)語句。
對(duì)變量或值調(diào)用 typeof 運(yùn)算符將返回下列值之一:
- undefined – 如果變量是 Undefined 類型的
- boolean – 如果變量是 Boolean 類型的
- number – 如果變量是 Number 類型的
- string – 如果變量是 String 類型的
- object – 如果變量是一種引用類型或 Null 類型的
總結(jié)
以上是生活随笔為你收集整理的前端之 JavaScript 常用数据类型和操作的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 盲盒商城app开发需要具备哪些核心功能,
- 下一篇: blender_(uv应用)......