JS:数据类型

Posted mouse-hao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS:数据类型相关的知识,希望对你有一定的参考价值。

JavaScript数据类型

1、javascript数据类型包括:字符串值,数值,布尔值,数组,对象

2、JavaScript变量能够保存多种数据类型:数值、字符串值、数组、对象等等

例1:

var length = 7; // 数字
var lastName = "Gates"; // 字符串
var cars = ["Porsche", "Volvo", "BMW"]; // 数组
var x = firstName:"Bill", lastName:"Gates"; // 对象

 

 

JS中的数据类型

1、当数值和字符串相加时,JavaScript 将把数值视作字符串(python中数字类型是不能与字符串直接相加的,但JS中可以)

2、JavaScript 从左向右计算表达式。不同的次序会产生不同的结果

例2:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript数据类型</h2>
<p id="demo"></p>
<p id="demo_1"></p>
<p id="demo_2"></p>

<script>
var x = 911 + "Porsche";
document.getElementById("demo").innerHTML = x;

var y = 911 + 7 + "Porsche";
document.getElementById("demo_1").innerHTML = y;

var z = "Porsche" + 911 + 7;
document.getElementById("demo_2").innerHTML = z;

</script>

</body>
</html>

技术图片

 

 注:

1、在第一个例子中,JavaScript把911和7视作数值,直到遇见 "Porsche"

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

 

 

JavaScript拥有动态类型

JavaScript拥有动态类型。这意味着相同变量可用作不同类型:重新赋值上不同的数据类型

例3:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数据类型</h2>
<p id="demo"></p>

<script>
var x; // 现在 x 是 undefined
var x = 7; // 现在 x 是数值
var x = "Bill"; // 现在 x 是字符串值

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

 

 

JavaScript字符串值

1、字符串(或文本字符串)是一串字符:字符串被引号包围,可使用单引号或双引号

2、可以在字符串内使用引号,只要这些引号与包围字符串的引号不匹配

例4:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<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>

 

 

JavaScript数值

1、JavaScript只有一种数值类型。写数值时用不用小数点均可(python中数值类型又分为整形、布尔型、浮点型)

2、超大或超小的数值可以用科学计数法来写

例5:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 数值</h2>
<p id="demo"></p>
<p id="demo_1"></p>

<script>
var x1 = 34.00;
var x2 = 34;
var x3 = 3.14;
document.getElementById("demo").innerHTML =
x1 + x2 + x3;

var y = 123e5;
var z = 123e-5;
document.getElementById("demo_1").innerHTML =
y + "<br>" + z;
</script>

</body>
</html>

 

 

JavaScript布尔值

布尔值只有两个值:true 或 false

例6:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<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>

技术图片

 

 

 

JavaScript数组

1、JavaScript数组用方括号书写,数组的项目由逗号分隔(python中的列表)

2、数组索引基于零,这意味着第一个项目是 [0],第二个项目是 [1],以此类推(python的索引也是从0开始的)

例7:

<!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[0];
</script>

</body>
</html>

技术图片

 

 

 

JavaScript对象

JavaScript对象用花括号来书写,对象属性是key:value对,由逗号分隔(感觉就是python的字典)

例8:

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

技术图片

注:

1、在JS中获得对象的值的方法是:对象名.key名;在python中获得字典的值的方法是:字典名[key名]

2、在JS中对象的key名可以无引号;但是在python中字典的键必须是不可变对象

 

 

typeof运算符

1、可使用JavaScript的typeof来确定JavaScript变量的类型:typeof运算符返回变量或表达式的类型

2、在Python中查看数据类型可以使用type()函数,JS中typeof是一个运算符

3、typeof运算符对数组返回 "object",因为在JavaScript中数组属于对象

例9:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>typeof 运算符返回变量或表达式的类型:</p>
<p id="demo_1"></p>
<p id="demo_2"></p>
<p id="demo_3"></p>

<script>
document.getElementById("demo_1").innerHTML = 
typeof 0

document.getElementById("demo_2").innerHTML = 
typeof "Bill"

var person = firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue";

document.getElementById("demo_3").innerHTML = 
typeof person

</script>

</body>
</html>

技术图片

 

 

 

Undefined

1、在JavaScript中,没有值的变量其值是undefined。typeof也返回undefined

2、任何变量均可通过设置值为undefined进行清空。其类型也将是undefined

例10:

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

技术图片

 

 

 

空值

空值与undefined不是一回事:空的字符串变量既有值也有类型(与python中的空字符串、空列表、空字典等一样)

例11:

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

技术图片

 

 

 

Null

1、在JavaScript中,null是 "nothing",它被看做不存在的事物。只是在JavaScript中,null的数据类型是对象(python中的None)

2、可以通过设置值为null清空对象

例12:

<!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的区别

Undefined与null的值相等,但类型不相

例13:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数据类型</h2>
<p id="demo"></p>

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

</body>
</html>

技术图片

 

 

 

原始数据

原始数据值是一种没有额外属性和方法的单一简单数据值。typeof运算符可返回以下原始类型之一:string、number、boolean、undefined

例14:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<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>

技术图片

 

 

 

复杂数据

1、typeof运算符可返回以下两种类型之一:function、object

2、typeof运算符把对象、数组或null返回object

3、typeof运算符不会把函数返回object

4、typeof运算符把数组返回为 "object",因为在JavaScript中数组即对象

例15:

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

技术图片

 

以上是关于JS:数据类型的主要内容,如果未能解决你的问题,请参考以下文章

js数据类型BigInt

JS-判断js数据类型的几种方式

js的数据类型有哪几种

01 JS的数据类型及如何判断数据类型

JS的基本数据类型

JS开发中基本数据类型都有哪些