WEB前端JavaScript—高级数据类型

最新推荐文章于 2026-01-08 16:54:07 发布

原创最新推荐文章于 2026-01-08 16:54:07 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

前端专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了JSON的基本概念、键值对结构、字符串和数字处理，以及如何通过JSON.parse和JSON.stringify进行数据转换。讲解了JavaScript中对象的遍历方法，并剖析了基本包装类型和数据类型分类，包括内存模型。此外，还涵盖了Math、Date、String和RegExp对象的使用方法和全局对象特性。

json

语法

json是由键值对构成的
value的取值类型：
1. 字符串：在引号中，"林美君"
2. 数字：整数或浮点数，2022
3. 布尔值：true或false
4. 数组(方括号)：{"persons": [{},{}]}
5. 对象(花括号)： {"address": {"province": "陕西"....}}
6. null
定义：let json = {"name": "林在超"};
获取value:
- json对象.键名：user.username
- json对象[“键名”]：user['username']
- 对象数组[索引]：users[2].username

遍历：

var user = {"name": "张三", age: 23, 'gender': true};
var userList = [
    {"name": "张三", "age": 23, "gender": true},
    {"name": "李四", "age": 24, "gender": true},
    {"name": "王五", "age": 25, "gender": false}
];
// 获取user对象中所有的键和值
for(let key in user){
    // 这样不行,相当于  person."name"
    // alert(key+":" + user.key);
    alert(key + " -> " + user[key]);
}
// 获取userList中的所有值
for (let i = 0; i < userList.length; i++) {
    let u = userList[i];
    for(let key in u){
        alert(key + " -> " + u[key]);
    }
}

和js对象的转换

JSON.parse(str): 将字符串转化为json格式数据。
JSON.stringify(arr): 将数组转化为字符串。

注意

遍历对象(json)不能使用for循环，因为它只能遍历有序数据但可使用for...in...
访问json中不存在的键，得到的数据为undefined
遍历获取值只能用json[key]取而不能json.key取，因为key是带双引号的键，而json.key代表json里面有个"key"的键即json={"key":"值"}。

基本包装类型

概述：普通变量不能直接调用属性或方法，对象可以
定义：本身是基本类型，但在代码执行过程中，如果它调用了属性或方法，那么这种类型不再是基本类型，而是基本包装类型，则个变量也就是基本包装类型对象。最常见的有number,string,boolean

注意：如果是对象&&true，结果为true；如果是 true&&对象，结果为对象。

var num0 = Number('10');  		// 【基本类型】,只是转换
var num1 = new Number('10'); 	// 包装类型
var flag0 = Boolean('1'); 		// 基本类型
var flag1 = new Boolean('1'); 	// 包装类型

数据类型分类

分类：

原始数据类型：number,string,bollean,undefined,null,object
基本类型(简单类型、值类型)：number,string,boolean
复杂类型(引用类型)：object
空类型：undefined,null

内存模型：

值类型：只在栈中存储。
引用类型：在栈和堆存储。栈存放指针(地址)，堆存放对象。
值传递：传递的是值。
引用传递：传递的是地址(引用)。

对象分类

内置对象：
- 内置对象：js自带，如Math,Date,String,Array,Object。
- 自定义对象：自己定义的构造函数创建的对象
- 浏览器对象：BOM内容
实例对象：通过构造函数创建出来、实例化的对象。
静态对象：不需要创建，直接就是一个对象，方法(静态方法)直接通过这个对象名字调用。
实例方法：必须通过new出的实例的对象调用(Date)。
静态方法：必须通过大写的对象名字调用(Math)。

内置对象

Math

创建：Math对象不用创建，直接使用。可以理解为方法都是static的工具类
属性：
Math.PI：获取PI的值。为3.1415926…
Math.E：获取自然底数e，约为2.7…
方法：
Math.abs()：求绝对值。-1 -> 1;null -> 0; “str” -> NaN。
Math.ceil()：向上取整
Math.floor()：向下取整
Math.round(x)：把数四舍五入为最接近的整数
Math.fround()：将任意数字转化成离他最近的单精度浮点的数字。
Math.max(1,2,3,4,5),Math.min(1,2,3,4,5)：求一些数的最大/最小值。
Math.pow(x,n)：求x的n次方；
Math.sqrt(x,n)：求x的开n次方。
Math.random()：返回 $[0, 1)$ 浮点数。随机数 parseInt(Math.random()*5)

Date

创建对象：var date = new Date();
注意：使用之前必须通过构造函数创建对象，如果不传参就是服务器当前时间；可传入str值改变时间，如"2020-10-01"或"2020/01/10"
方法：
年：date.getFullYear()
月：date.getMonth(),从0开始的月份。真实月份需要+1。
日：date.getDate()
时：date.getHours()
分：date.getMinutes()
秒：date.getSeconds()
date.getTime()：获取时间戳，返回当前如期对象描述的时间到1970年1月1日零点的毫秒值
星期：date.getDay()：从0开始的周几，即一周的第几天。
时间戳：date.valueOf(),Date.now()
date.toString()：日期数据 -> str类型。
date.toDateString()：英文日期，如"Wed Sep 13 2020"
date.toLocalDateString()：数字日期，如"2020/04/30"
date.toTimeString()：英文时间，如"13:42:59 GMT+0800"
date.toLocalTimeString()：数字时间，如"下午13:43:17"

String

注意

string类型是【不可变】类型。如str[3]='w’是无效的，如果重新对str赋值，看起来str的值改变了，其实是改变了指向，另外开辟了内存而已
string可以看作一个数组，可用for循环遍历

属性

str.length：长度。

方法

str.charAt(i)：返回str指定索引的字符，超出索引返回空字符串。
String.fromCharCode(num):返回指定num对应的ASCII码。可以传入多个num。如(83,79,83) -> “SOS” -> “救我!”。
str.concat(str1,str2...)：在str后面拼接参数中的多个字符串。
str.indexOf(sep[,i])：查找指定sep字符串的索引并返回，找不到返回-1。参数i可选，从那个索引开始查找。
【技巧】：判断str中有无指定字符：str.indexOf(c)!=-1;
str.lastIndexOf(sep,i)：和indexOf()类似，只是从后往前找，但索引还是从前往后。
str.replace(from,to)：替换指定字符
str.slice(s,e)：截取从索引s到e的部分。不包含结束索引。
str.split(seq,num)：拆分，num是指返回前几个。
str.substr/str.substring(is,ie)：截取从索引is开始到ie结束的字符串，不包含结束索引。
str.toLocalLowerCase()/toLowerCase()：把str的大写字母全部转化为小写。
str.toLocalUpperCase()/toUpperCase()：把str的小写字母全部转化为大写。
str.trim()：去掉str左右的空格。

RegExp

创建

// 法1
var reg = new RegExp("正则表达式");
// 法2
var reg = /正则表达式/;

reg.test(text):验证指定的字符串text是否符合正则定义的规范，返回boolean

Global

特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用
方法：
- encodeURI():url编码，传智播客 => %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
- decodeURI(): url解码
- encodeURIComponent(): url编码，编码的字符更多
- decodeURIComponent(): url解码
- parseInt(): 将字符串转为数字
  - 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
- isNaN(): 判断一个值是否是NaN
  - NaN六亲不认，连自己都不认。NaN参与的==比较全部问false
- eval(): 将 JavaScript 字符串作为脚本代码来执行。