菜单 搜索
首页 前端知识 JavaScript 入门指南（二）JavaScript 的数据类型和 JSON 数据

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

2024-04-19 21:04:44 前端知识 前端哥 370 180 我要收藏

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://www.qianduange.cn//article/5360.html
标签
原型模式
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

vue3绘制内容自动无缝滚动表格

2024-04-25 16:04:07

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

vue里使用样式color: var(--Editor-text)，已经定义了--Editor-text，但是却显示变量--Editor-text未定义，为啥

2024-04-25 08:04:19

wangEditor设置初始文字颜色

2024-04-23 15:04:38

Golang 使用 Gin 框架接收 HTTP Post 请求体中的 JSON 数据

2024-04-23 22:04:53

Python读写Json文件

2024-04-23 22:04:19

【头歌】——数据分析与实践-python-网络爬虫-Scrapy爬虫基础-网页数据解析-requests 爬虫-JSON基础

2024-04-23 22:04:19

ObjectMapper转化对象常用方法(转LIst、Map，以及Type、JavaType、constructType的学习)

2024-04-23 22:04:02

大家推荐的文章
1

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
2

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
3

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
4

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
5

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
6

移动端css布局大全

2024-02-06 15:02:421000
7

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
8

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
9

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
10

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！