一文读懂JavaScript(JS)基础知识大全

HTDiiii

于 2024-08-23 16:53:29 发布

阅读量1.6k

点赞数 5

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/HTDiiii/article/details/141469573

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简介

JavaScript 是世界上最流行的编程语言。
这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 与 Java 的区别

JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是在设计上。
Java 是更复杂的编程语言，由 Sun 公司发明，现在属于 Oracle 公司。
ECMAScript—ES,是 JavaScript 标准的官方名称。
JavaScript 由工作于 Netscape 的 Brendan Eich。

ES 简介

1997 年，JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会（ECMA）。第 39 技术委员会（TC39）被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”(http://www.ecma-international.org/memento/TC39.htm)。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262，该标准定义了名为 ECMAScript 的全新脚本语言。
在接下来的几年里，国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。
ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

如何编写 JS

1.1、页面嵌入

页面嵌入，一般情况下是在 head 标签中嵌入 script 标签，该标签可以直接在开始标签和结束标签之间编写 JS 代码，也可以导入/引入外部的 JS 文件；也可以在 body 标签中或 body 标签之后嵌入 script 标签，编写代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>helloworld</title>
		<script>
			/* 编写JS代码 */
			/* 声明一个helloworld函数 */
			function helloWorld()
			{
				//弹出对话框显示指定的字符串信息.
				alert("hello JS");
				//在控制台打印指定的字符串信息,相当于Java中System.out.println()
				console.log("Hello  JS");
			}
			
			//调用helloworld()函数
			helloWorld();
			
		</script>
	</head>
	<body>
		
	</body>
</html>

1.2、JS 注释

除了 javadoc 专用注释以外，和 Java 中的注释一样使用，此处省略。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>body js</title>
		<!-- 一般不用事先有document,去编写JS代码时,放在此处编写 -->
	</head>
	<body>
		<!-- 一般情况下,是在运行时,实现使用JS控制一些动态的数据,在body中编写 -->
		<script>
			function hello()
			{
				console.log("hello  JavaScript")
			}
			
			hello()
			
		</script>
	</body>
	<!-- 一般必须要现有document然后才能够去编写JS代码时,放在此处编写 -->
	<script>
		function world()
		{
			console.log("JS  World")
		}
		world()
	</script>
</html>

1.4、独立 js 文件使用

单独创建一个后缀为*.js 格式文档，在该文档中编写需要的 JS 代码，这种写法，一般是，该 js 代码是由多个 HTML 页面需要引用/共用，编写以后，通过

function hello()
{
	console.log("Hello World  JavaScript");
}

//调用函数hello()
hello()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部JS文档引入</title>
		<script src="../js/demo.js"></script>
	</head>
	<body>
	</body>
</html>

变量

变量的命名和声明与 Java 一样，也是区分大小写，编写规范和 Java 一样，此处省略。
和 Java 不一样的是如果变量声明后，没有给值，此时该变量的值为 undefined。
JS 中变量的声明格式:
var 变量名；全局变量推荐使用 var
let 变量名; 一般定义块级变量使用 let
const 变量名；这是定义/声明的常量，JS 中的常量定义后立刻初始化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变量</title>
		<script>
			//声明一个全局变量，由于初始化给的值是123数值,因此a变量是Number类型
			var  a = 123;
			//声明一个全局变量，由于初始化给的值是"hello"字符串,因此b变量是String类型
			let  b = "hello";
			//声明一个常量
			const c = false;
			var A = "world";
			
			let a1 = "123";
			let a2 = "3";
			
			let b1;
			
			//将指定变量的数据在当前页面中打印出来
			document.write(a);
			
			document.write(b);
			document.write(c,"<br/>");
			document.write(c+"<br/>");
			/* 票号中${表达式}这是调用,其他都是按照字符串去处理 */
			document.write(`a1 = ${a1}<br/>`);
			document.writeln(A)
			/*
			以前是按照a1和a2中的数据来确定是连接操作还是计算操作
			如果两个变量中是数值数据,变量是字符串类型的数值还是Number类型的
			数值都可以进行加法运行,也有可能进行链接运算
			*/
			document.write(a1+a2);
			console.log(a1+a2);
			//由于b1没有初始化,因此页面上打印了undefined
			document.write(b1);
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

数据类型

JS 中数据类型分为基本数据类型(数值类型)和引用数据类型(对象类型)。
在这里插入图片描述

1.1、基本数据类型

值类型(基本数据类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未
定义（Undefined）、Symbol。

1.1.1、String

字符串类型，在JS中单引号’ '、双引号" "、格式化`` 都是字符串类型，格式化符合和单引号双引号的区别是，单引号双引号中所有的数据都是字符串，并按照原来的样子进行输出，而格式化符号中可以包含变量的调用以及输出，调用的格式是${变量名}

1.1.2、Number数值类型

数值/数字类型包括整数型、浮点型。
typeof表示获取变量或数据的类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取数据类型</title>
	</head>
	<body>
		<script>
			
			var  a = 123;
			let  b = 'hello';
			const c = true;
			
			//通过typeof查看变量以及常数值的数据类型
			console.log(typeof a);//number类型
			console.log(typeof b);//string类型
			console.log(typeof c);//boolean类型
			console.log(typeof 3.14);//number类型
			console.log(typeof "world");//string类型
			console.log(typeof `abc`);//string类型
			
			
		</script>
	</body>
</html>

1.1.3、Undefined未定义的值

Undefined这个值表示变量不含有值/表示变量没有值。

1.1.4、Null空值

可用于判断某个变量是否为null

1.1.5、Symbol

符号型，标记型
前言:
ES5以及之前的对象的属性名都是字符串，容易造成命名冲突，即重名。
概述
ES6中添加了一种原始数据类型Symbol
特点:
1、Symbol属性对应的值是唯一的，解决了命名冲突的问题。
2、Symbol值不能与其他数据进行计算，包括同字符串拼接。
3、forin、forof遍历时，不会遍历Symbol属性。
注意：ES6引入了一种新的数据类型Symbol，该类型表示独一无二的值，最大的用法是用来定义对象的唯一性属性名，其永远不会重复。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>symbol</title>
	</head>
	<body>
		<script>
			
			//直接输出Symbol类型的变量
			console.log(Symbol());
			//声明一个变量a,并赋值为一个Symbol类型的值
			var a = Symbol();
			console.log(a);
			
			var b = "abc";
			var c = "abc";
			//判断变量b和变量c是否相等,只要内容一样就是相等的
			console.log(b == c);
			
			var d = Symbol("abc");
			var e = Symbol("abc");
			
			console.log(d === e);
			
			let a1 = 123;
			let a2 = "123";
			
			/*
			由于a1和a2的值一样,此处结果为true,==不会比较类型是否相等,只比较值是否相等，
			如果值相等,则结果为true,否则为false
			*/
			console.log(a1 == a2);//true
			/*
			由于a1和a2的值一样,但是类型不一样，因此此处结果为false, ===即比较值是否相等,还比较类型是否相等
			只有值和类型都相等,结果才为true,否则为false
			*/
			console.log(a1 === a2);//false
			
		</script>
	</body>
</html>

1.2、引用数据类型

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

1.2.1、Object对象

Object对象引用数据类型。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Object</title>
	</head>
	<body>
		<script>
			console.log(Object);
			//Object对象
			var a = new Object();
			console.log(a);
			//String字符串对象
			var b = new String();
			console.log(b);
			//数组对象
			var c = new Array();
			console.log(c);
		</script>
	</body>
</html>

1.2.2、数组Array

格式:
1、修饰符数组名 = new Array(小括号中元素根据自己的需求可有可无)；
2、修饰符数组名 = [元素1，…，元素N];
元素: 数组中存放的每一个数据
长度: 数组中存放的元素个数，可以通过数组名.length 获取数组长度。
索引/下标: 元素在数组中的存放位置，数组索引从0开始，到数组长度- 1 结束，即0 ~ 数组
名.length - 1

一维数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组</title>
	</head>
	<body>
		<script>
			//一维数组
			//相当于Java的数组静态初始化
			//声明一个数组
			var  a = new Array(123,321,true,"hello","world");
			
			console.log(a);
			
			//声明一个数组
			var  b = ["hello",3.14,false,Symbol()];
			
			console.log(b);
			
			//相当于Java中的数组动态初始化
			var c = new Array();
			c[0] = 678;
			c[1] = "hello";
			console.log(c);
			
			
			
			
			
		</script>
	</body>
</html>

二维数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>二维数组</title>
		<script>
			//定义一个二维数组
			var  a = [[123,"hello"],[true,"world",3.14]];
			
			//遍历二维数组
			for(let i = 0;i < a.length;i++)
			{
				for(let j = 0;j < a[i].length;j++)
				{
					console.log(a[i][j]);
				}
			}
			
			console.log("-----------");
			
			//forof
			for (let s of a)
			{
				for (let t of s)
				{
					console.log(t);
				}
			}
			
			console.log("-----------");
			
			//forin
			for (let i in a)
			{
				for (let j in a[i])
				{
					console.log(a[i][j]);
				}
			}
			
		</script>
	</head>
	<body>
	</body>
</html>

1.2.2.1、forof 循环

格式:
for(let 元素变量名 of 数组或集合对象)
{
循环体
}
如果元素变量名前面使用了 let，则表示该变量只能在当前的 for 语句中使用，是一个块级变量，否则是全局变量。
forof 相当于 Java 中的 foreach。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>forof</title>
	</head>
	<body>
		<script>
			var  a = new Array(123,"hello",true,6.78);
			//遍历数组a中的元素
			for(abc of a)
			{
				console.log(abc);
			}
		</script>
	</body>
</html>

1.2.2.2、forin 循环

格式:
for(let 下标变量名/索引变量名 in 数组或集合对象)
{
循环体
}
备注：
1、forin 中的下标/索引是 Number 类型。
2、如果下标变量名/索引变量名前面使用了 let，则表示该下标变量名/索引变量名只能在当前的 for 语句中使用，是一个块级变量，否则是全局变量。
forof 与 forin 的区别：
1、forof 小括号中 of 关键字前面是元素的变量名；而 forin 小括号中 in 关键字前面是元素的下标/索引。
2、forof 小括号中的关键字是 of；forin 小括号中的关键字是 in。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>forof</title>
	</head>
	<body>
		<script>
			var  a = new Array(123,"hello",true,6.78);
			//遍历数组a中的元素
			for(abc of a)
			{
				console.log(abc);
			}
			
			console.log("--------------");


			//使用forin遍历数组a中的元素
			for (let i in a) 
			{
				console.log(a[i]);
			}
			//使用let修饰i变量以后,此处运行出错
			//console.log("i---",i);
			
		</script>
	</body>
</html>

1.3、值类型(原始类型)和引用类型:

值类型(原始类型)数据:
类型包含: String、Number、Boolean、Undefined、Null
内存分布：栈内存中
值类型传递的是值。
引用类型数据:
类型包含: 除值类型以外
内存分布：堆内存区
引用类型数据传递的是引用地址，和 java 中一样。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>datatype</title>
	</head>
	<body>
		<script>
			var a = new Array(123,"hello");
			
			var b = 123;
			
			var c = b;
			
			var d = a;
			
			//重新为c赋值
			c = 678;
			
			//将d下标为0处的值修改为"world"
			d[0] = "world";
			
			console.log("a = ",a);
			console.log("b = ",b);
			console.log("c = ",c);
			console.log("d = ",d);
			
			
			var abc = 123;//abc是Number类型
			console.log("abc---",typeof abc);
			abc = "hello";//abc是String类型
			console.log("abc===",typeof abc);
			abc = true;//abc是boolean类型
			console.log("abc***",typeof abc);
			
			
		</script>
	</body>
</html>

函数

函数声明的格式：
function [ 函数名 ](形参 1,…,形参 N)
{
函数体
}
调用:
函数名([ 实参 1, …,实参 N]);
备注：在 JS 中实参和形参不是必须，可以传递也可以不传递。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数</title>
		<script>
			
			//声明hello函数
			function hello(a,b,c)
			{
				console.log("a = ",a);
				console.log("b = ",b);
				console.log("c = ",c);
				console.log("hello()---");
			}
			
			function hello(a,b)
			{
				console.log("a --- ",a);
				console.log("b --- ",b);
				console.log("hello()***");
			}
			
			function hello(a)
			{
				console.log("a --- ",a);
				console.log("hello()***");
			}
			
			//JS中不存在函数的重载,始终调用的是最后一个函数
			function hello()
			{
				console.log("hello()###");
			}
			
			//调用函数hello()
			hello(123,"hello",true,false);
			
			
			//声明一个匿名函数
			/*
			abc=123,haha="hello"表示设置形参的默认值,
			如果不传递值,则使用默认值,如果传递值则使用传递
			过来的值
			*/
			var ft = function(abc=123,haha="hello")
			{
				console.log("acb = ",abc);
				console.log("haha = ",haha);
				console.log("匿名函数");
			}
			
			//调用匿名函数ft()
			ft(678,"world");
			
			//Lambda表达式
			var world = (a,b) => {
				console.log("a = ",a);
				console.log("b = ",b);
			};
			
			world(123,678);
			
		</script>
	</head>
	<body>
	</body>
</html>

DOM 操作

HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。
在这里插入图片描述

1.1、获取 DOM 对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM</title>
		<style>
			span
			{
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<!-- οnclick="dj()"当id是btn的这个按钮点击时调用dj()这个函数 -->
		<button id="btn" onclick="dj()">按钮</button>
		<button id="btn1"><a href="">普通按钮</a></button>
		<button id="btn2">DOM按钮</button>
		<div id="dv">
			<span>span</span>
		</div>
	</body>
	<script>
		
		//获取id是btn的这个DOM对象
		var btn = document.getElementById("btn");
		console.log(btn);
		
		function dj()
		{
			//innerText只操作文本内容
			// document.getElementById("btn1").innerText="点击后的按钮";
			//document.getElementById("dv").innerHTML= "div--span";
			// let  doc = document.getElementById("btn1").innerText;
			let  doc = document.getElementById("btn1").innerHTML;
			// let  doc = document.getElementById("dv").innerText;
			// let  doc = document.getElementById("dv").innerHTML;
			console.log(doc);
		}
		
		
	</script>
</html>

JS 操作 CSS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS CSS  Dom</title>
	</head>
	<body>
		<button id="btn">点击处理DIV效果</button>
		<div id="dv">div</div>
	</body>
	<script>
		
		//使用编程式绑定事件
		let btn = document.getElementById("btn");
		btn.onclick = function()
		{
			let dv = document.getElementById("dv");
			//设置dv这个div的边框
			dv.style.border = "1px solid black";
			//设置dv这个div的宽
			dv.style.width = "200px";
			//设置dv这个div的高度
			dv.style.height = "200px";
			
		}
		
		
	</script>
</html>

1.2、JQuery 操作 DOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS CSS  Dom</title>
		<script src="../js/jquery-3.7.1.min.js"></script>
	</head>
	<body>
		<button id="btn">点击处理DIV效果</button>
		<div id="dv">div</div>
	</body>
	<script>
		
		//使用编程式绑定事件
		/* let btn = document.getElementById("btn");
		btn.onclick = function()
		{
			let dv = document.getElementById("dv");
			//设置dv这个div的边框
			dv.style.border = "1px solid black";
			//设置dv这个div的宽
			dv.style.width = "200px";
			//设置dv这个div的高度
			dv.style.height = "200px";
			
		} */
		
		$(function(){
			$("#btn").click(function(){
				$("#dv").css({"border":"1px solid black",
				"background-color":"green","width":"200px"}).height("200px");
			});
		});
		
		
		
	</script>
</html>

JSON

1.1、概念

JSON：JavaScript 对象表示法（JavaScript Object Notation）。
JSON 是存储和交换文本信息的语法。
什么是 JSON ？
● JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
● JSON 是轻量级的文本数据交换格式
● JSON 独立于语言 *
● JSON 具有自我描述性，更易理解

JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

1.2、JSON 分为

JSON 对象格式:
{key1:value,…,keyN:value}
JSON 数组:
[{key1:value,…,keyN:value},…,{key1:value,…,keyN:value}]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSON</title>
	</head>
	<body>
		<script>
			//定义JSON对象
			let  jn = {"username":"tom","userage":21,"usersex":"男"};
			
			//获取jn对象中的username的值
			console.log(jn.username);
			//获取jn对象中的userage的值
			console.log(jn.userage);
			//获取jn对象中的usersex的值
			console.log(jn.usersex);
			
			//定义JSON数组
			let  jnarray = [{"username":"tom","userage":21,"usersex":"男"},{"username":"jim","userage":26,"usersex":"man"}];
			//下面是获取下标为0处的JSON的值
			//获取jnarray对象中的username的值
			console.log(jnarray[1].username);
			//获取jnarray对象中的userage的值
			console.log(jnarray[1].userage);
			//获取jnarray对象中的usersex的值
			console.log(jnarray[1].usersex);
			
			//将JSON对象格式化成JSON字符串
			let jsonText = JSON.stringify(jn);
			console.log(jsonText);
			//将JSON字符串解析成JSON对象
			let jnobj = JSON.parse(jsonText);
			//获取jnobj对象中的username的值
			console.log(jnobj.username);
			//获取jnobj对象中的userage的值
			console.log(jnobj.userage);
			//获取jnobj对象中的usersex的值
			console.log(jnobj.usersex);
		</script>
	</body>
</html>