JavaScript 變量,數(shù)據(jù)類型基礎(chǔ)實(shí)例詳解【變量、字符串、數(shù)組、對(duì)象等】
本文實(shí)例講述了JavaScript 變量,數(shù)據(jù)類型基礎(chǔ)。分享給大家供大家參考,具體如下:
這篇筆記呢,咱記錄下變量和數(shù)據(jù)類型的基礎(chǔ)知識(shí),因?yàn)閮烧哂新?lián)系 所以放在一起記錄
1 如何聲明變量
變量聲明使用var關(guān)鍵字,下面舉一些變量聲明的例子:
<!DOCTYPE html> <html> <head> <title>learn javascript</title> </head> <body> </body> {{--js--}} <script> var name = "larger"; var age = 24, desire = "become web developers"; document.write(name + "<br />" + "age" + ":" + age + "<br />" + "desire" + ":" + desire); </script> </html>
2 數(shù)據(jù)類型
js中的數(shù)據(jù)類型有:
- Nunber:數(shù)字類型。
- String:字符串類型。
- Boolean:布爾類型。
- Array:數(shù)組。
- Object:對(duì)象。
- Null:空值。
- Undefined:未定義值。
下面咱一個(gè)一個(gè)的聲明這些類型的變量。
2.1 數(shù)字類型
2.1.1 聲明方式
<script> var number1 = 5; var number2 = (5 - 9) * 3; var numberSum = number1 + number2; document.write(number1 + "<br />" + number2 + "<br />" + numberSum + "<br />"); </script> <script> var Num = 3.88; document.write(Num); </script> <script> var num = new Number(3000); // 這樣聲明的話 它會(huì)是一個(gè)對(duì)象 document.write(typeof(num)); // Object </script>
2.1.2 常用方法
NaN是一個(gè)非數(shù)字類型,用 isNaN 判斷是否是非數(shù)字類型:
<script> var num1 = new Number(3000); var num2 = 123; var noNum = NaN; document.write(isNaN(num1) + "<br />" + isNaN(num2) + "<br />" + isNaN(noNum)) </script>
當(dāng)數(shù)字長(zhǎng)度達(dá)到邊界時(shí) 就會(huì)變成一個(gè)特殊的類型:無(wú)窮大(Infinity)/負(fù)無(wú)窮大(-Infinity):
<script> var num1 = 2/0; if (num1 == Infinity){ document.write("數(shù)字已溢出"+num1); } </script>
用tostring方法來(lái)轉(zhuǎn)換成字符串類型:
<script> var num1 = 122; var str1 = num1.toString(); // 沒有傳遞參數(shù)默認(rèn)是10進(jìn)制。 var str2 = num1.toString(8); // 8進(jìn)制 document.write(num1 + "<br />" + str1 + "<br />" + str2 + "<br />" + typeof(str1)); </script>
2.2 字符串類型
2.2.1 聲明方法
<script> var str1 = "something"; // 用雙引號(hào) var str2 = 'something'; // 用單引號(hào) var str3 = "my name is 'K'";// 雙引號(hào)中展示單引號(hào) var str4 = 'my name is "K"';// 單引號(hào)中展示雙引號(hào) var str5 = 'my name is \'K\''; // 轉(zhuǎn)義單引號(hào)中的單引號(hào) </script>
2.2.2 常用方法
通過索引獲取字符:
<script> var str1 = "something"; // 用雙引號(hào) var char = str1[11]; // char也是string類型,如果越界的話char的類型為undefined document.write(char); </script>
通過length方法獲取字符串長(zhǎng)度:
<script> var str = "something"; // 用雙引號(hào) var strlen = str.length; // 返回的strlen是數(shù)字類型。 document.write(strlen); </script>
通過indexof來(lái)查找字符串:
<script> var str = "something"; // 用雙引號(hào) var index1 = str.indexOf("thing"); // 返回4 從零計(jì)算 var index2 = str.indexOf("same"); // 返回-1 代表沒找到 var str2 = "my name is k my age is 24"; var index3 = str2.indexOf("is"); // 返回8 var index4 = str2.lastIndexOf('is');// lastindexof是從后面開始找的 所以返回20 </script>
通過macth來(lái)匹配字符串:
<script> var str = "something"; // 用雙引號(hào) var substr = str.match("sa"); // 如果能找到 返回查找的字符串 如果沒有找到 返回null document.write(substr); </script>
替換一段字符串:
<script> var str = "this is laravel"; str = str.replace("laravel", "javascript"); // 如果沒有替換成功 返回原來(lái)的字符串。 document.write(str); </script>
大小寫的轉(zhuǎn)換:
<script> var str = "this is laravel"; str = str.toLocaleUpperCase(); // 轉(zhuǎn)換為大寫。 str = str.toLocaleLowerCase(); // 轉(zhuǎn)換為小寫。 </script>
轉(zhuǎn)為數(shù)組:
<script> var str = "this is laravel"; var array = str.split(" "); // 通過空格分隔。 </script>
2.3 數(shù)組
2.3.1 聲明方法
<script> var array1 = new Array(); array1[0] = "string type"; array1[1] = 55; array1[2] = true; var array2 = new Array("alex", "k", 24); var array3 = ["alex", "K", 24]; </script>
2.3.2 訪問數(shù)組中的元素
<script> var array3 = ["alex", "K", 24]; // 可以通過索引獲取 for (i = 0; i < array3.length; i++){ document.write(array3[i] + "<br />"); } // 也可以通過索引來(lái)修改值 for (i = 0; i < array3.length; i++){ array3[i] = "value" + i; } document.write(array3); </script>
2.4 對(duì)象
對(duì)象中可以包含屬性和方法,其實(shí)在js中 所有事物都是對(duì)象這其中包括上面的數(shù)字、字符串、數(shù)組。
2.4.1 創(chuàng)建方法
<script> var object1 = new Object(); object1.name = "alex"; object1.skinColor = "white"; object1.sayHello = function() { return "yo bro what's up"; }; document.write(object1.name + "<br >" + object1.skinColor + "<br >"); document.write(object1.sayHello()); </script>
↑ 這是第一種聲明方法 在其中 我們使用objectName.valueName訪問了對(duì)象中的元素,還有objectName.methodName訪問了對(duì)象中的方法。
<script> var object1 = { name : "alex", skinColor : "white", sayHello : function() { return "yo bro what's up"; } }; document.write(object1.name + "<br >" + object1.skinColor + "<br >"); document.write(object1.sayHello()); </script>
↑ 這是第二種寫法,比較常用 比第一種方法簡(jiǎn)單。
<script> // 對(duì)象構(gòu)造器 function Person(firstName, lastName, age){ this.firstName = firstName; this.lastName = lastName; this.age = age; this.changeName = changeName; function changeName(name){ this.firstName = name; } this.fullName = fullName; function fullName(){ return this.firstName + this.lastName; } } // 使用對(duì)象構(gòu)造器創(chuàng)建對(duì)象 var myWife = new Person("*","haoyan",18); myWife.changeName("Yang"); document.write(myWife.fullName()); </script>
↑ 這是第三種寫法,對(duì)象構(gòu)造器。
2.4.2 遍歷對(duì)象
使用for in來(lái)遍歷對(duì)象:
<script> // 對(duì)象構(gòu)造器 function Person(firstName, lastName, age){ this.firstName = firstName; this.lastName = lastName; this.age = age; this.changeName = changeName; function changeName(name){ this.firstName = name; } this.fullName = fullName; function fullName(){ return this.firstName + this.lastName; } } // 使用對(duì)象構(gòu)造器創(chuàng)建對(duì)象 var myWife = new Person("*","haoyan",18); for(variable in myWife){ document.write(variable + "<br />"); } </script>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- javascript數(shù)據(jù)類型基礎(chǔ)示例教程
- JavaScript基礎(chǔ)語(yǔ)法與數(shù)據(jù)類型介紹
- js中基礎(chǔ)的數(shù)據(jù)類型詳解
- javascript基礎(chǔ)之?dāng)?shù)據(jù)類型詳解
- JavaScript的基礎(chǔ)語(yǔ)法和數(shù)據(jù)類型詳解
- JavaScript基礎(chǔ)心法 數(shù)據(jù)類型
- 淺談js基礎(chǔ)數(shù)據(jù)類型和引用類型,深淺拷貝問題,以及內(nèi)存分配問題
- Javascript基礎(chǔ)教程之?dāng)?shù)據(jù)類型轉(zhuǎn)換
- Javascript基礎(chǔ)教程之?dāng)?shù)據(jù)類型 (布爾型 Boolean)
- Javascript基礎(chǔ)教程之?dāng)?shù)據(jù)類型 (數(shù)值 Number)
- Javascript基礎(chǔ)教程之?dāng)?shù)據(jù)類型 (字符串 String)
- JavaScript基礎(chǔ)知識(shí)之?dāng)?shù)據(jù)類型
- javascript 基礎(chǔ)篇2 數(shù)據(jù)類型,語(yǔ)句,函數(shù)
- javascript基礎(chǔ)數(shù)據(jù)類型轉(zhuǎn)換教程示例
相關(guān)文章
JavaScript實(shí)現(xiàn)頁(yè)面一鍵全選或反選
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)頁(yè)面一鍵全選或反選,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07淺談html轉(zhuǎn)義及防止javascript注入攻擊的方法
下面小編就為大家?guī)?lái)一篇淺談html轉(zhuǎn)義及防止javascript注入攻擊的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-12-12js判斷某個(gè)字符出現(xiàn)的次數(shù)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js判斷某個(gè)字符出現(xiàn)的次數(shù)的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-06-06JS鮮為人知的問題之[] == ![]結(jié)果為true、而{} == !{}卻為false
這篇文章主要給大家介紹了關(guān)于JS鮮為人知的問題之[] == ![]結(jié)果為true、而{} == !{}卻為false的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05javascript 四則運(yùn)算精度修正函數(shù)代碼
JS預(yù)算精度問題確實(shí)很麻煩,這個(gè)能解決一些問題,雖然有bug.2010-05-05微信小程序生成海報(bào)分享朋友圈的實(shí)現(xiàn)方法
利用微信強(qiáng)大的社交能力通過小程序達(dá)到裂變的目的,拉取新用戶。下面小編給大家?guī)?lái)了微信小程序生成海報(bào)分享朋友圈的實(shí)現(xiàn)方法,感興趣的朋友跟隨小編一起看看吧2019-05-05JavaScript中工廠函數(shù)與構(gòu)造函數(shù)示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中工廠函數(shù)與構(gòu)造函數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05關(guān)于javascript中的promise的用法和注意事項(xiàng)(推薦)
這篇文章主要介紹了關(guān)于javascript中的promise的用法和注意事項(xiàng),需要的朋友可以參考下2021-01-01