首页 > 基础资料博客日记

JavaScript 入门指南（二）JavaScript 的数据类型和 JSON 数据

2024-04-05 12:00:05基础资料围观347次

这篇文章介绍了JavaScript 入门指南（二）JavaScript 的数据类型和 JSON 数据，分享给大家做个参考，收藏Java资料网收获更多编程知识

JavaScript 的数据类型

基本数据类型

undefined 类型：只有一个值 undefined（未定义），它是一个保留字。表示变量虽然已经声明，但却没有赋值
number 类型：所有的整数和小数

注：NaN 是一个特殊的数字值（typeof NaN的结果为number），是not a number的缩写，表示不是一个合法的数字。不是数字的字符串通过函数进行数据类型转换为数字，结果就是 NaN
string 类型：所有被单引号和双引号包裹的字符串
boolean 类型：布尔值，只有两个值 true 和 false
object 类型：所有对象的数据类型

注：

可以使用关键字 typeof 可以查看变量的数据类型
null 类型：只有一个值 null（空），它是一个保留字。表示没有值，用于定义空的或不存在的引用。

注意：
- 空值不等同于空字符串 “” 或 0
- undefined 类型就是使用 null 演化而来，所以 undefined == null 为 true
- undefined 的数据类型是 undefined，null 的数据类型是 object，所以 undefined === null 为 false

引用数据类型（对象）

js 语言是基于对象的编程语言。在 js 中没有类，里边使用的对象都是使用函数模拟出来的，包含了一些内置对象
传址：在赋值过程中，引用数据类型的变量实际上存储的是数据的地址（对数据的引用），而不是原始数据或者数据的拷贝。
注意：所有的对象都是 object 对象，包括 NaN、null

JavaScript 创建对象的 3 种方式：

方式1：通过对象字面量构造，其 prototype（原型、蓝本）指向 Object.prototype

var 对象变量名={
	属性名:属性值,
	方法名:function([参数列表]){
		方法体
	}
}

var person = {
    name: "Tom",
    age: 18
}
console.log(person)		//{name: 'Tom', age: 18}

方式2：通过构造函数构造，其 prototype（原型、蓝本）指向其构造函数的 prototype 属性指向的对象

var 对象变量名 = new Object();
对象变量名.属性名 = 属性值;
对象变量名.方法名 = function([参数列表]){
	方法体
}

var person = new Object();
person.name = "张三";
person.age = 18;
console.log(person)		//{name: 'Tom', age: 18}

自定义构造函数构造

// 方式1：
function 构造函数([参数列表]){
	this.属性名=属性值（或参数列表中参数）;
	this.方法名=function([参数列表]){
		方法体
	};
}
var 对象名 = new 构造函数([参数列表]);

// 方式2：原型法
function 对象创建器(){};
对象创建器.prototype.属性=属性值;
对象创建器.prototype.方法=function([参数列表]){
	方法体
};
var 对象名 = new 对象创建器([参数列表]);

// 方式1与方式2混合
function 构造函数([参数列表]){
	this.属性1=属性值;
	...;
	this.属性N=属性值;
	};
}
对象创建器.prototype.方法=function([参数列表]){
	方法体
};
var 对象名 = new 构造函数([参数列表]);

方式3：通过 Object.create 构造，其 prototype（原型、蓝本）指向 Object.create 的参数

var person = {
    name: "Tom",
    age: 18
}
var person = Object.create(person)
console.log(person)				//{}
console.log(person.__proto__)	//{name: 'Tom', age: 18}

总结：第 1 种创建方式其实就是第 2 种的语法糖，过程一致。第 3 种方式通过 Object.create 来创建的对象并不会继承其父对象的属性和方法，只能通过原型链来访问

常用内置对象

String：字符串

String 对象用于处理文本（字符串）

String 对象中定义了一些处理字符串的函数

创建 String 对象的方式（4 种方式）：

var str = new String("字符串");
var str = "字符串";
var str = '字符串';
var str = `字符串`;

注：

使用反向单引号创建字符串，可以使用 ${} 引用其他字符串对象
```
var str1 = 'a-b-c';
var str2 = `hello${str1}`;	// helloa-b-c
```

String 对象常用属性：
- length ：字符串的长度
```
'aaa'.length	// 3
```
String 对象常用函数：
- charAt() ：返回在指定索引的字符
```
// 使用length属性和charAt方法遍历字符串
for(let i=0; i<str2.length; i++){
    alert(str2.charAt(i));
}
```
- concat() ：连接字符串
- indexOf() ：在字符串中从前往后查找另一个字符串的索引，若找到了，返回对应的索引，若找不到,返回 -1
- lastIndexOf() ：在字符串中从后往前查找另一个字符串的索引，若找到了，返回对应的索引，若找不到,返回 -1
- toLowerCase() ：把字符串转换为小写
- toUpperCase() ：把字符串转换为大写
- substring(开始索引, 结束索引) ：截取两个索引之间的字符，包含头，不包含尾
- substr(开始索引) ：从开始索引截取到字符串末尾
- substr(开始索引, 字符个数) ：截取从开始索引到指定字符个数内容

Array：数组

Array 对象用于在单个的变量中存储多个值

在 js 中是没有集合的,，可以使用数组作为集合使用，Array 数组长度是可以变化的，可以存储任意数据类型的数据

创建 Array 对象的语法（4 种方式）：

// 创建一个长度为 0 的数组
var arr = new Array(); 
// 创建指定长度的数组，数组中的元素有默认值 undefined
var arr = new Array(size); 
// 创建包含指定元素的数组
var arr = new Array(element0, element0, ..., elementn); 
// 创建包含指定元素的数组
var arr = [element0, element0, ..., elementn];

二维数组：数组中的元素仍是一个数组

// 示例
var arrArr = [
    [1,2,3],
    ["a","b","c"],
    [true,false]
];

Array 对象常用函数：

concat(数组) ：数组合并
unshift(元素) ：数组头添加元素
push(元素) ：数组尾添加元素
shift() ：数组头删除一个元素
pop() ：数组尾删除一个元素
join(分隔符) ：数组元素拼接为字符串，参数为指定分隔符
```
var arr1 = ['a', 'b', 'c']
console.log(arr1.join("-"));	// a-b-c
```

sort() ：对数组的元素进行排序，默认是升序排序

可以传参一个自定义排序规则的匿名函数

var arr3 = [1,5,4,3,2];
// 排序数组元素 sort() 对数组的元素进行排序,默认是升序排序
console.log("排序后: " + arr3.sort());		//排序后：1,2,3,4,5

// sort(函数()) 根据函数中写的规则排序
console.log("排序后: " + arr3.sort(function (a, b) {
    // 升序
    return a-b;
}));	// 排序后：1,2,3,4,5

console.log("排序后: " + arr3.sort(function (a, b) {
    // 降序
    return b-a;
}));	//排序后：5,4,3,2,1

Date：日期

Date 对象用于处理日期和时间。

创建 Date 对象的语法：var myDate=new Date();
常用的方法:
- getFullYear() ：从 Date 对象以四位数字返回年份
- getMonth() ：从 Date 对象返回月份（0 ~ 11）
- getDate() ：从 Date 对象返回一个月中的某一天（1 ~ 31）
- getHours() ：返回 Date 对象的小时（0 ~ 23）
- getMinutes() ：返回 Date 对象的分钟（0 ~ 59）
- getSeconds() ：返回 Date 对象的秒数（0 ~ 59）
- getMilliseconds() ：返回 Date 对象的毫秒（0 ~ 999）
- getTime() ：返回 1970 年 1 月 1 日至今的毫秒数
- toLocaleString() ：根据本地时间格式，把 Date 对象转换为字符串

Math：数学运算

Math 对象用于执行数学任务。

Math 类中的属性和方法可以直接通过 Math.属性 或 Math.方法名(参数) 直接使用，类似于 java 中静态的成员

常用属性：
- PI 返回圆周率（约等于3.14159）。
常用方法：
- ceil(x) ：向上取整
- floor(x) ：向下取整
- round(x) ：四舍五入
- pow(x, y) ：返回 x 的 y 次幂
- random() ：返回 0 ~ 1 之间的随机数

RegExp：正则表达式

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具

正则表达式本质就是一个包含了某些规则的字符串，用于对其他的字符串进行校验

创建 RegExp 对象的语法：

var reg = new RegExp("^正则表达式的规则$");
var reg = /^正则表达式的规则$/;

RegExp 对象常用方法：

test(“要校验的字符串”) ：判断字符串是否满足正则表达式的规则。满足：返回 true；不满足：返回 false

var reg = /^1[345789][0-9]{9}$/;
//调用正则表达式中的方法test,对手机号进行校验
console.log(reg.test("13888888888"));//true
console.log(reg.test("138888888881"));//false

match(正则表达式) ：判断字符串是否匹配正则表达式的规则。匹配成功：返回字符串本身；匹配失败：返回 null

var reg = /^1[345789][0-9]{9}$/;
console.log("13888888888".match(reg));//Array [ "13888888888" ]
console.log("138888888a8".match(reg));//null

全局函数

全局函数：在 script 标签中可以直接使用的函数

字符串转为数字：
- parseInt(字符串) ：将字符串转为整数数字，从左到右遇到非数字停止
- parseFloat(字符串) ：将字符串字符转为小数数字，从左到右遇到非数字停止
- Number(字符串) ：将字符串转换为数字
  - 正常的数字字符串转换为相应的数字（类型从 string 转换为 number）
  - 空字符串（包括含空格的空字符串）转换为 0
  - 非空且不是数字的字符串会转换为 NaN（不是各数字）
    
    注意：NaN是唯一一个和自身不相等的值。NaN 的数据类型是 number
```
var a = parseInt("11a11");
console.log(a + 1);		// 12

var b= parseFloat("1.1afdsaf22");
console.log(b + 100);	// 101.1

var b = Number("111")
console.log(b)			// 111
console.log(typeof b)	// number
```
isNaN(字符串) ：判断非数字。非数字返回 true，是数字返回 false
encodeURI(字符串) ：使用 ASCII 码对字符串编码为 URI 字符串
decodeURI(字符串) ：使用 ASCII 码对 URI 字符串解码为 UTF-8 编码的字符串
eval(字符串) ：计算 JavaScript 字符串，即把字符串当做 js 表达式来执行
```
var aaa = "1+5*10-20";
var bbb = eval(aaa);	// 31
```

数据类型转换

JavaScript 变量可以进行数据类型转换：

方式1：通过使用 JavaScript 函数
方式2：通过 JavaScript 自身自动转换

常见类型转换：

其他类型转换为字符串：

方法1：全局方法 String()

new String(任意数字)
new String(false)
new String(Date())

方式2：自动隐形转换
```
"" + 任意数字
"" + false
```

方式3：各自数据包装对象的 toString() 方法

var num = 任意数字
num.toString()
false.toString()
Date().toString()

将字符串转换为数字：

全局函数 parseInt()、parseFloat()、Number() 都可以将字符串转换为数字。详见全局函数

JSON 数据

JSON 简介

JSON（JavaScript Object Notation，JS 对象标记）是一种轻量级的数据交换格式。它基于 ECMAScript 的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。就是说不同的编程语言 JSON 数据是一致的。JS 原生支持 JSON，简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

JSON 的语法格式

json对象有三种数据格式，分别如下：

类型	语法	解释
对象类型	{“key1”:value, “key2”:value, “key3”:value…}	其中 key 是字符串类型，而 value 是任意类型
数组/集合类型	[value, value, value…]	其中 value 是任意类型
混合类型	[{},{}… …] 或 {“key”:[]… …}	对象格式和数组格式可以互相嵌套

json 本质是一个对象

key：字符串类型，value：可以是任意类型

对象中包含了多个键值对

示例：

[{"key1":value,"key2":value,"key3":value...},{"key1":value,"key2":value,"key3":value...}]

{"key1":value,"key2":[value,value,value...],"key3":value...}

{"key1":value,"key2":[{"key1":value,"key2":value,"key3":value...},value,value...],"key3":value...}

JSON 格式转换

js 中 JSON 对象与字符串转换的相关函数

JSON.stringify(object) ：把 json 对象转为字符串
JSON.parse(string) ：把字符串转为 json 对象

//创建json格式的数据
var json = {"name":"柳岩","age":18};
//alert(typeof json);//object

//JSON.stringify(object) 把json对象转为字符串
var str = JSON.stringify(json);
//alert(str);//{"name":"柳岩","age":18}
//alert(typeof str);//string
//alert(str.name);//undefined

//JSON.parse(string) 把字符串转为json对象
var obj = JSON.parse(str);
alert(typeof obj);			//object
alert(obj.name+"\t"+obj.age);//柳岩	18

文章来源:https://blog.csdn.net/footless_bird/article/details/137002414
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！

标签：

上一篇：Java在线租车汽车租赁系统设计与实现(Idea+Springboot+mysql)
下一篇：“帮助“Java成长的世界级大师不简单！

首页 > 基础资料博客日记

JavaScript 入门指南（二）JavaScript 的数据类型和 JSON 数据

JavaScript 的数据类型

基本数据类型

引用数据类型（对象）

常用内置对象

String：字符串

Array：数组

Date：日期

Math：数学运算

RegExp：正则表达式

全局函数

数据类型转换

JSON 数据

JSON 简介

JSON 的语法格式

JSON 格式转换

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > 基础资料 博客日记

JavaScript 入门指南（二）JavaScript 的数据类型和 JSON 数据

JavaScript 的数据类型

基本数据类型

引用数据类型（对象）

常用内置对象

String：字符串

Array：数组

Date：日期

Math：数学运算

RegExp：正则表达式

全局函数

数据类型转换

JSON 数据

JSON 简介

JSON 的语法格式

JSON 格式转换

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > 基础资料博客日记