常用的JavaScript数据类型有12种 刚入门的小白可以复习下

JavaScript数据类型
JavaScript变量能够保存多种数据类型:数值、字符串值、数组、对象等等。为了能够操作变量,了解数据类型是很重要的。如果没有数据类型,计算机就无法安全地解决这道题。
1.JavaScript拥有动态类型
JavaScript拥有动态类型。这意味着相同变量可用作不同类型。
2.JavaScript字符串值
字符串(或文本字符串)是一串字符(比如 "Bill Gates")。字符串被引号包围。您可使用单引号或双引号;您可以在字符串内使用引号,只要这些引号与包围字符串的引号不匹配。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p>您可以在字符串内使用引号,只要这些引号与包围字符串的引号不匹配:</p>
<p id="demo"></p>
<script>
var answer1 = "It's alright";             // 双引号内的单引号
var answer2 = "He is called 'Bill'";    // 双引号内的单引号
var answer3 = 'He is called "Bill"';    // 单引号内的双引号
document.getElementById("demo").innerHTML =
answer1 + "<br>" + 
answer2 + "<br>" + 
answer3;
</script>
</body>
</html>
3.JavaScript数值
JavaScript只有一种数值类型。写数值时用不用小数点均可。超大或超小的数值可以用科学计数法来写:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数值</h2>
<p>超大或超小的数值可以用科学计数法来写:</p>
<p id="demo"></p>
<script>
var y = 123e5;
var z = 123e-5;
document.getElementById("demo").innerHTML =
y + "<br>" + z;
</script>
</body>
</html>
4.JavaScript布尔值
布尔值只有两个值:true 或 false。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>布尔值只有两个值:true 或 false。</p>
<p id="demo"></p>
<script>
var x = 7;
var y = 7;
var z = 8;
document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>
</body>
</html>
5.JavaScript数组
JavaScript数组用方括号书写。数组的项目由逗号分隔。下面的代码声明(创建)了名为 cars 的数组,包含三个项目(汽车品牌),数组索引基于零,这意味着第一个项目是 [0],第二个项目是 [1],以此类推。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数组</h2>
<p>数组索引基于零,这意味着第一个项目是 [0],第二个项目是 [1],以此类推。</p>
<p id="demo"></p>
<script>
var cars = ["Porsche", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[2];
</script>
</body>
</html>
6.JavaScript对象
JavaScript对象用花括号来书写。对象属性是 name:value对,由逗号分隔。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 对象</h2>
<p id="demo"></p>
<script>
var person = {
    firstName : "Bill",
    lastName  : "Gates",
    age       : 62,
    eyeColor  : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
7.typeof运算符
您可使用JavaScript的typeof来确定JavaScript变量的类型:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>typeof 运算符返回变量或表达式的类型:</p>
<p id="demo"></p>
<script>
var cars = ["Porsche", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = 
typeof "" + "<br>" +
typeof "Bill" + "<br>" + 
typeof "Bill Gates"+ "<br>" +
typeof 0 + "<br>" + 
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4)+ "<br>" +
typeof cars;
</script>
</body>
</html>
8.Undefined
在JavaScript中,没有值的变量,其值是undefined。typeof也返回undefined。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数据类型</h2>
<p>无值变量的值和数据类型是 <b>undefined</b>。</p>
<p id="demo"></p>
<script>
var car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>
</body>
</html>
任何变量均可通过设置值为undefined进行清空。其类型也将是undefined。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数据类型</h2>
<p>任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。</p>
<p id="demo"></p>
<script>
var car = "Porsche";
car = undefined;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>
</body>
</html>
9.空值
空值与undefined不是一回事。空的字符串变量既有值也有类型。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数据类型</h2>
<p>空的字符串变量既有值也有类型。</p>
<p id="demo"></p>
<script>
var car = "";
document.getElementById("demo").innerHTML =
"其值是:" +
car + "<br>" +
"类型是:" + typeof car;
</script>
</body>
</html>
10.Null
在JavaScript中,null是"nothing"。它被看做不存在的事物。不幸的是在 JavaScript中,null的数据类型是对象。您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。您可以通过设置值为 null 清空对象:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数据类型</h2>
<p>您可以通过设置值为 null 来清空对象:</p>
<p id="demo"></p>
<script>
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
person = null;
document.getElementById("demo").innerHTML = typeof person;
</script>
</body>
</html>
Undefined与Null的区别
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数据类型</h2>
<p>Undefined and null are equal in value but different in type:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof undefined + "<br>" +
typeof null + "<br><br>" +
(null === undefined) + "<br>" +
(null == undefined);
</script>
</body>
</html>
11.原始数据
原始数据值是一种没有额外属性和方法的单一简单数据值。typeof运算符可返回以下原始类型之一:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>typeof 运算符返回变量或表达式的类型:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
typeof "Bill" + "<br>" + 
typeof 3.14 + "<br>" +
typeof true + "<br>" +
typeof false + "<br>" +
typeof x;
</script>
</body>
</html>
12.复杂数据
typeof 运算符可返回以下两种类型之一:
function
object
typeof运算符把对象、数组或null返回 object。
typeof 运算符不会把函数返回object。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>typeof 运算符把对象、数组或 null 返回 object。</p>
<p>typeof 运算符不会把函数返回 object。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
typeof {name:'Bill', age:62} + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof null + "<br>" +
typeof function myFunc(){};
</script>
</body>
</html>