JavaScript 数据类型


目录

    显示目录

JavaScript 有 8 种数据类型

1. 字符串
2. 数量
3.Bigint
4. 布尔
5. 未定义
6. 空
7. 符号
8. 对象

对象数据类型

对象数据类型可以包含:

1. 一个对象
2. 数组
3. 约会

例子

// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

// Object:
const person = {firstName:"John", lastName:"Doe"};

// Array object:
const cars = ["Saab", "Volvo", "BMW"];

// Date object:
const date = new Date("2022-03-25"); 

笔记

JavaScript 变量可以保存任何类型的数据。

数据类型的概念

在编程中,数据类型是一个重要的概念。

为了能够对变量进行操作,了解以下内容很重要 方式。

如果没有数据类型,计算机就无法安全地解决这个问题:

let x = 16 + "Volvo";

把“沃尔沃”加到十六有什么意义吗?它会产生一个 错误还是会产生结果?

JavaScript 会将上面的示例视为:

let x = "16" + "Volvo";

笔记

当添加数字和字符串时,JavaScript 会将数字视为 细绳。

例子

let x = 16 + "Volvo";

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>When adding a number and a string, JavaScript will treat the number as a string.</p>

<p id="demo"></p>

<script>
let x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


例子

let x = "Volvo" + 16;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>When adding a string and a number, JavaScript will treat the number as a string.</p>

<p id="demo"></p>

<script>
let x = "Volvo" + 16;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


JavaScript 从左到右计算表达式。不同的顺序可以 产生不同的结果:

JavaScript:

let x = 16 + 4 + "Volvo";

结果 :

20Volvo

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>

<p id="demo"></p>

<script>
let x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


JavaScript:

let x = "Volvo" + 16 + 4;

结果 :

Volvo164

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>

<p id="demo"></p>

<script>
let x = "Volvo" + 16 + 4;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


在第一个示例中,JavaScript 将 16 和 4 视为数字,直到到达“Volvo”。

在第二个示例中,由于第一个操作数是字符串,因此所有操作数都是 被视为字符串。



JavaScript 类型是动态的

JavaScript 具有动态类型。这意味着可以使用相同的变量 持有 不同的数据类型:

例子

let x;       // Now x is undefined
x = 5;       // Now x is a Number
x = "John";  // Now x is a String

JavaScript 字符串

字符串(或文本字符串)是一系列字符,例如“John Doe”。

字符串是用引号书写的。您可以使用单引号或双引号:

例子

// Using double quotes:
let carName1 = "Volvo XC60";

// Using single quotes:
let carName2 = 'Volvo XC60';

您可以在字符串内使用引号,只要它们与引号不匹配即可 围绕字符串:

例子

// Single quote inside double quotes:
let answer1 = "It's alright";
 

// Single quotes inside double quotes:
let answer2 = "He is called 'Johnny'";

// Double quotes inside single quotes:
let answer3 = 'He is called "Johnny"';

您将在本教程后面了解有关字符串的更多信息。


JavaScript 数字

所有 JavaScript 数字都存储为十进制数字(浮点)。

数字可以带小数,也可以不带小数:

例子

// With decimals:
let x1 = 34.00;

 
// Without decimals:
let x2 = 34; 

指数表示法

特大或特小的数字可以用科学写法 (指数)符号:

例子

let y = 123e5;    // 12300000
let z = 123e-5;   // 0.00123

笔记

大多数编程语言都有多种数字类型:

整数(整数):
byte(8 位)、short(16 位)、int(32 位)、long(64 位)

实数(浮点):
浮点型(32 位)、双精度型(64 位)。

Javascript 数字始终是一种类型:
双精度(64 位浮点)。

您将在本教程后面了解有关数字的更多信息。


JavaScript 大整型

所有 JavaScript 数字都以 64 位浮点格式存储。

JavaScript BigInt 是一种新的数据类型(ES2020),可用于存储太大而无法表示的整数值 通过一个普通的 JavaScript 数字。

例子

let x = BigInt("123456789012345678901234567890");

您将在本教程后面了解有关 BigInt 的更多信息。


JavaScript 布尔值

布尔值只能有两个值:truefalse

例子

let x = 5;
let y = 5;
let z = 6;
(x == y)       
  // Returns true
(x == z)       // Returns 
  false

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Booleans</h2>

<p>Booleans can have two values: true or false:</p>

<p id="demo"></p>

<script>
let x = 5;
let y = 5;
let z = 6;

document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>

</body>
</html>

布尔值经常用于条件测试。

您将在本教程后面了解有关布尔值的更多信息。


JavaScript 数组

JavaScript 数组是用方括号编写的。

数组项以逗号分隔。

以下代码声明(创建)一个名为 cars 的数组,其中包含三个 项目(汽车名称):

例子

const cars = ["Saab", "Volvo", "BMW"];

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Array indexes are zero-based, which means the first item is [0].</p>

<p id="demo"></p>

<script>
const cars = ["Saab","Volvo","BMW"];

document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

数组索引从零开始,这意味着第一项是 [0],第二项是 [1]等。

您将在本教程后面了解有关数组的更多信息。


JavaScript 对象

JavaScript 对象是用大括号 {} 编写的。

目的 属性被写为名称:值对,以逗号分隔。

例子

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

上例中的对象(人)有 4 个属性:firstName、 姓氏、年龄和眼睛颜色。

您将在本教程后面了解有关对象的更多信息。


运算符类型

您可以使用 JavaScript typeof 运算符来查找类型 JavaScript 变量的。

typeof 运算符返回变量或表达式的类型:

例子

typeof ""             // Returns 
 "string"
typeof "John"         // Returns 
 "string"
typeof "John Doe"     // Returns 
 "string"

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
typeof "" + "<br>" +
typeof "John" + "<br>" + 
typeof "John Doe";
</script>
</body>
</html>


例子

typeof 0              // Returns 
 "number"
  typeof 314            // Returns 
 "number"
  typeof 3.14           // Returns 
 "number"
  typeof (3)            // Returns 
 "number"
typeof (3 + 4)        // Returns 
 "number"

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
typeof 0 + "<br>" + 
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4);
</script>

</body>
</html>


您将在本教程后面了解有关 typeof 的更多信息。


不明确的

在 JavaScript 中,没有值的变量的值为 undefined。 该类型也是未定义

例子

let car;    // Value is undefined, 
    type is undefined

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The value (and the data type) of a variable with no value is <b>undefined</b>.</p>

<p id="demo"></p>

<script>
let car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>

</body>
</html> 

通过将值设置为 undefined,可以清空任何变量。 该类型也将是未定义

例子

   car = undefined;    // Value is undefined, 
    type is undefined

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>Variables can be emptied if you set the value to <b>undefined</b>.</p>

<p id="demo"></p>

<script>
let car = "Volvo";
car = undefined;

document.getElementById("demo").innerHTML = car + "<br>" + typeof car;
</script>

</body>
</html> 

空值

空值与 undefined 无关。

空字符串同时具有合法值和类型。

例子

let car = "";    // The value is  "", the typeof is "string"

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>An empty string has both a legal value and a type:</p>

<p id="demo"></p>

<script>
let car = "";
document.getElementById("demo").innerHTML =
"The value is: " +
car + "<br>" +
"The type is: " + typeof car;
</script>

</body>
</html>