JavaScript 變數,資料型別基礎例項詳解【變數、字串、陣列、物件等】

阿新 • • 發佈：2020-01-09

本文例項講述了JavaScript 變數,資料型別基礎。分享給大家供大家參考，具體如下：

這篇筆記呢，咱記錄下變數和資料型別的基礎知識，因為兩者有聯絡所以放在一起記錄

1 如何宣告變數

變數宣告使用var關鍵字，下面舉一些變數宣告的例子：

<!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 資料型別

js中的資料型別有：

Nunber：數字型別。
String：字串型別。
Boolean：布林型別。
Array：陣列。
Object：物件。
Null：空值。
Undefined：未定義值。

下面咱一個一個的宣告這些型別的變數。

2.1 數字型別

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);   // 這樣宣告的話 它會是一個物件
  document.write(typeof(num));  // Object
</script>

2.1.2 常用方法

NaN是一個非數字型別，用 isNaN 判斷是否是非數字型別：

<script>
  var num1 = new Number(3000);
  var num2 = 123;
  var noNum = NaN;
  document.write(isNaN(num1) + "<br />" + isNaN(num2) + "<br />" + isNaN(noNum))
</script>

當數字長度達到邊界時就會變成一個特殊的型別：無窮大（Infinity）/負無窮大（-Infinity）：

<script>
  var num1 = 2/0;
  if (num1 == Infinity){
    document.write("數字已溢位"+num1);
  }
</script>

用tostring方法來轉換成字串型別：

<script>
  var num1 = 122;
  var str1 = num1.toString();   // 沒有傳遞引數預設是10進位制。
  var str2 = num1.toString(8);  // 8進位制
  document.write(num1 + "<br />" + str1 + "<br />" + str2 + "<br />" + typeof(str1));
</script>

2.2 字串型別

2.2.1 宣告方法

<script>
  var str1 = "something";   // 用雙引號
  var str2 = 'something';   // 用單引號
  var str3 = "my name is 'K'";// 雙引號中展示單引號
  var str4 = 'my name is "K"';// 單引號中展示雙引號
  var str5 = 'my name is \'K\''; // 轉義單引號中的單引號
</script>

2.2.2 常用方法

通過索引獲取字元：

<script>
  var str1 = "something";   // 用雙引號
  var char = str1[11];     // char也是string型別，如果越界的話char的型別為undefined
  document.write(char);
</script>

通過length方法獲取字串長度：

<script>
  var str = "something";   // 用雙引號
  var strlen = str.length;  // 返回的strlen是數字型別。
  document.write(strlen);
</script>

通過indexof來查詢字串：

<script>
  var str = "something";   // 用雙引號
  var index1 = str.indexOf("thing");  // 返回4 從零計算
  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來匹配字串：

<script>
  var str = "something";   // 用雙引號
  var substr = str.match("sa");  // 如果能找到 返回查詢的字串 如果沒有找到 返回null
  document.write(substr);
</script>

替換一段字串：

<script>
  var str = "this is laravel";
  str = str.replace("laravel","javascript");   // 如果沒有替換成功 返回原來的字串。
  document.write(str);
</script>

大小寫的轉換：

<script>
  var str = "this is laravel";
  str = str.toLocaleUpperCase(); // 轉換為大寫。
  str = str.toLocaleLowerCase(); // 轉換為小寫。
</script>

轉為陣列：

<script>
  var str = "this is laravel";
  var array = str.split(" ");   // 通過空格分隔。
</script>

2.3 陣列

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 訪問陣列中的元素

<script>
  var array3 = ["alex",24];
  // 可以通過索引獲取
  for (i = 0; i < array3.length; i++){
    document.write(array3[i] + "<br />");
  }
  // 也可以通過索引來修改值
  for (i = 0; i < array3.length; i++){
    array3[i] = "value" + i;
  }
  document.write(array3);
</script>

2.4 物件

物件中可以包含屬性和方法，其實在js中所有事物都是物件這其中包括上面的數字、字串、陣列。

2.4.1 建立方法

<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訪問了物件中的元素，還有objectName.methodName訪問了物件中的方法。

<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>

↑ 這是第二種寫法，比較常用比第一種方法簡單。

<script>
  // 物件構造器
  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;
    }
  }
  // 使用物件構造器建立物件
  var myWife = new Person("*","haoyan",18);
  myWife.changeName("Yang");
  document.write(myWife.fullName());
</script>

↑ 這是第三種寫法，物件構造器。

2.4.2 遍歷物件

使用for in來遍歷物件：

<script>
  // 物件構造器
  function Person(firstName,18);
  for(variable in myWife){
    document.write(variable + "<br />");
  }
</script>

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查詢演算法技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript錯誤與除錯技巧總結》

希望本文所述對大家JavaScript程式設計有所幫助。