JavaScript学习笔记3

68 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第13天,点击查看活动详情

5、数组

①使用new关键字创建数组

// 1.创建数组对象
var arr01 = new Array();

// 2.压入数据
arr01.push("apple");
arr01.push("orange");
arr01.push("banana");
arr01.push("grape");

// 3.遍历数组
for (var i = 0; i < arr01.length; i++) {
	console.log(arr01[i]);
}

// 4.数组元素反序
arr01.reverse();
for (var i = 0; i < arr01.length; i++) {
	console.log(arr01[i]);
}

// 5.数组元素拼接成字符串
var arrStr = arr01.join(",");
console.log(arrStr);

// 6.字符串拆分成数组
var arr02 = arrStr.split(",");
for (var i = 0; i < arr02.length; i++) {
	console.log(arr02[i]);
}

// 7.弹出数组中最后一个元素
var ele = arr01.pop();
console.log(ele);

②使用[]创建数组

// 8.使用[]创建数组
var arr03 = ["cat","dog","tiger"];
console.log(arr03);

6、JSON

①JSON格式的用途

在开发中凡是涉及到 『跨平台数据传输』,JSON格式一定是首选。

②JSON格式的说明

  • JSON数据两端要么是 {},要么是 []
  • {} 定义JSON对象
  • [] 定义JSON数组
  • JSON对象的格式是:
{key:value,key:value,...,key:value}
  • JOSN数组的格式是:
[value,value,...,value]
  • key的类型固定是字符串
  • value的类型可以是:
    • 基本数据类型
    • 引用类型:JSON对象或JSON数组

正因为JSON格式中value部分还可以继续使用JSON对象或JSON数组,所以JSON格式是可以 『多层嵌套』 的,所以JSON格式不论多么复杂的数据类型都可以表达。

{
	"stuId":556,
	"stuName":"carl",
	"school":{
		"schoolId":339,
		"schoolName":"atguigu"
	},
	"subjectList":[
		{
			"subjectName":"java",
			"subjectScore":50
		},
		{
			"subjectName":"PHP",
			"subjectScore":35
		},
		{
			"subjectName":"python",
			"subjectScore":24
		}
	],
	"teacherMap":{
		"aaa":{
			"teacherName":"zhangsan",
			"teacherAge":20
		},
		"bbb":{
			"teacherName":"zhangsanfeng",
			"teacherAge":108
		},
		"ccc":{
			"teacherName":"zhangwuji",
			"teacherAge":25
		}
	}
}

③JSON对象和JSON字符串互转

[1]JSON对象转JSON字符串
var jsonObj = {"stuName":"tom","stuAge":20};
var jsonStr = JSON.stringify(jsonObj);

console.log(typeof jsonObj); // object
console.log(typeof jsonStr); // string
[2]JSON字符串转JSON对象
jsonObj = JSON.parse(jsonStr);
console.log(jsonObj); // {stuName: "tom", stuAge: 20}

四、DOM

1、概念

①名词解释

DOM是Document Object Model的缩写,意思是 『文档对象模型』——将HTML文档抽象成模型,再封装成对象方便用程序操作。

这是一种非常常用的编程思想:将现实世界的事物抽象成模型,这样就非常容易使用对象来量化的描述现实事物,从而把生活中的问题转化成一个程序问题,最终实现用应用软件协助解决现实问题。而在这其中**『模型』**就是那个连通现实世界和代码世界的桥梁。

②DOM树

浏览器把HTML文档从服务器上下载下来之后就开始按照 『从上到下』的顺序『读取HTML标签』。每一个标签都会被封装成一个 『对象』

而第一个读取到的肯定是根标签html,然后是它的子标签head,再然后是head标签里的子标签……所以从html标签开始,整个文档中的所有标签都会根据它们之间的 『父子关系』 被放到一个 『树形结构』 的对象中。

在这里插入图片描述

这个包含了所有标签对象的整个树形结构对象就是JavaScript中的一个可以直接使用的内置对象document

例如,下面的标签结构:

./images

会被解析为: 在这里插入图片描述