天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
------《将进酒》
文章目录
- 一、JS简介
- 二、JavaScript引用方式
- 三、JavaScript基本用法
- 四、核心语法
- 五、复合类型
- 六、示例代码下载
一、JS简介
js全程JavaScript，由Netscape开发的客户端脚本语言，不需要编译，可以直接运行
1. Web前端三层架构的作用
| 名称 | 层名 | 作用 |
|---|---|---|
| HTML | 结构层 | 定义页面的结构 |
| CSS | 样式层 | 定义页面的样式 |
| JavaScript | 行为层 | 实现交互，提升用户体验 |
2. JavaScript的作用
在客户端动态的操作页面
在客户端做数据的校验
在客户端发送异步请求
二、JavaScript引用方式
js引用方式有以下三种：内联方式、行内方式、外部方式
工具准备：推荐使用vscode，可参考VsCode的下载和使用
1. 内联方式
在页面中使用script标签，在script标签的标签体中编写js代码
script标签可以放在页面的任意位置，一般放在head标签中
1.1 举例
js内联方式的写法一般如下，type属性可省略
<script type="text/javascript">
JavaScript代码
</script>
1.2 示例完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript引入方式</title>
<!-- JavaScript引入方式-内联引入 -->
<script>
//弹出一个窗口
alert("长恨歌")
</script>
</head>
<body>
这是一个JavaScript程序
</body>
</html>
右键使用插件打开浏览器页面（如未安装插件可参考：如何在VSCode中将html文件打开到浏览器）
1.3 浏览器效果
浏览器打开后会弹出一个窗口，这就是alert弹出的内容
2. 行内方式
在普通标签中编写js代码，一般需结合事件属性，如onclick、onmouseover等
2.1 举例
行内方式引入js一般写法如下
<input type="button" value="点一下" onclick="alert('hello')"/>
<!-- 使用超链接的href属性执行js时，必须加上javascript前缀 -->
<a href="javascript:alert('world')">超链接执行js代码</a>
2.2 示例完整代码
完整的html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript引入方式</title>
<!-- JavaScript引入方式-行内引入-->
<!-- 定义div块的长度和宽度以及背景颜色 -->
<style>
div{
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<br>
<!-- 定义一个输入框并加入弹窗 -->
<input type="button" value="点一下" onclick="alert('点一下，叉出去')">
<br> <br> <br>
<!-- 定义一个div块，并加入鼠标移动到上面就出发弹窗 -->
<div onmouseover="alert('有地雷，请撤离')">请将鼠标移动到此区域</div>
<br> <br> <br>
<!-- 定义一个超链接，并加入js弹窗 -->
<a href="javascript:alert('js超链接')">js超链接，请点击尝试</a>
</body>
</html>
2.3 浏览器效果
使用浏览器打开示例完整代码后可以看到如下效果
鼠标点击"点一下"后的效果
鼠标移入紫色块区域后的效果
鼠标点击js超链接后的效果
3. 外部方式
使用单独的.js文件定义，然后在页面中使用script标签引入外部脚本文件
3.1 举例
<script typr="text/javascript" scr="js文件的路径"></script>
注意：如果某个script标签用于引入外部js文件，则该script标签的标签体中不能再写js代码
3.2 js脚本代码
需要先写一个js脚本，后续在代码中引入
新建test.js
alert("这是一个用于测试外部引入js的js脚本文件")
3.3 示例完整代码
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript引入方式</title>
<!-- JavaScript引入方式-外部引入-->
<!-- 标准写法是要加type=text/javascript -->
<!-- <script type="text/javascript" src="./test.js"></script> -->
<!-- 但是不写type=text/javascript也没关系，不影响，所以一般都不写 -->
<script src="./test.js"></script>
</head>
<body>
这是一个JavaScript程序
</body>
</html>
3.4 浏览器效果
使用浏览器打开后的效果如下
三、JavaScript基本用法
1. 变量
js是一门弱类型的语言，声明变量时使用var关键字，不需要指定变量的类型
1.1 语法
var 变量名=变量值;
在ECMAScript 6（ES6）规范中新增了let关键字，也用于声明变量
使用let声明变量支持块级作用域，使用var声明变量则不支持块级作用域，作用域就是花括号
在idea中配置es版本的方法（低于es6的版本不支持let的使用）
Setting-->Languages & FrameWorks-->JavaScript-->JavaScript Language version
1.2 示例代码
示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js变量</title>
<!-- js基本用法-变量 -->
<script>
var name;
name = "libai";
var age;
age = 28;
//可以不使用关键字声明变量，但这样会以为该变量在之前定义了，故不推荐使用这种用法
addr = 'tang';
//同时声明多个变量并赋值
var a=1,b=2,c=3;
//作用域的使用
{
//var声明的变量不区分作用域，即无视花括号
var m = 10;
//let声明的变量区分作用域，花括号内的变量在花括号外部无法使用
let n = 20;
}
//正常弹窗，并显示数字10
alert(m);
//无弹窗显示，无法获取n的值
alert(n);
</script>
</head>
<body>
</body>
</html>
1.3 浏览器效果
浏览器打开后的效果如下
2. 输入和输出
2.1 输出
输出内容的方式有三种
2.1.1 输出到浏览器的控制台
通过console.log()函数将内容输出到浏览器控制台
<script>
console.log("浏览器控制台输出");
</script>
浏览器控制台的位置：浏览器页面右键--->检查--->Console
2.1.2 警告框输出
通过alert()弹出警告框
<script>
alert("警告框输出");
</script>
2.1.3 输出到页面
通过document.write();输出到页面
<script>
document.write("页面输出");
</script>
2.2 输入
弹出输入框，获取用户输入的数据
通过prompt();输入内容
<script>
var name = promt("请输入内容：");
console.log(name);
</script>
2.3 字符转数值Number()
使用 Number(变量) 将字符串转为数值
var age = Number("19");
字符串转换后的结果为数值
2.4 获取变量类型typeof
使用 typeof 变量 判断变量的类型
var name = "libai";
console.log(typeof name);
打印后的结果是name变量的类型string
2.5 完整示例代码
以上内容的示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js的输入输出</title>
<!-- js的基本用法-输入输出 -->
<script>
//输出
//警告框输出
alert("警告框输出");
//浏览器控制台输出
console.log("浏览器控制台输出");
//页面输出
document.write("页面输出");
//输入
//输入姓名
var name = prompt("请输入姓名：");
//控制台打印姓名
console.log(name);
//输入年龄
var age = prompt("请输入年龄：");
//控制台打印年龄
console.log(age);
//控制台打印输入年龄的值的类型
console.log(typeof age);
//打印年龄+1后的结果
console.log(age+1);
//将输入的年龄值转为数字类型
age = Number(age);
//打印转换后的年龄值类型
console.log(typeof age);
//打印年龄+1后的结果
console.log(age+1);
</script>
</head>
<body>
</body>
</html>
3. 转义符
在js代码中有些特殊字符想要显示需要使用转义符
3.1 常用符号
常用的符号转义如下
| 符号 | 效果 |
|---|---|
| \n | 换行符 |
| \t | 缩进符 |
| \" | 双引号 |
| \' | 单引号 |
3.2 示例代码
完整示例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js转义符</title>
<!-- js基础用法-js转义符 -->
<script>
console.log("hello world");
console.log("hello \n world");
console.log("hello \" world");
console.log("hello \' world");
</script>
</head>
<body>
</body>
</html>
3.3 转义效果
浏览器控制台查看转义效果
4. 注释
在js中注释符和java中的很像
4.1 语法
单行注释
//
多行注释
/* */
4.2 示例代码
实力代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js注释</title>
<!-- js基础用法-js注释 -->
<script>
console.log("注释");
//单行注释 console.log("注释1");
/*
多行注释
console.log("注释1");
console.log("注释1");
console.log("注释1");
*/
</script>
</head>
<body>
</body>
</html>
4.3 注释效果
浏览器控制台查看注释后的效果
5. 编码规范
js代码区分大小写
代码缩进
每条语句以分号结尾
不以分号结尾也可以用，不会报错，程序读取代码时以换行符结束这一行的代码
但一般会加上分号，作为一个规范写法
四、核心语法
1. 数据类型
1.1 基础数据类型
js中基础的数据类型有以下几种
| 中文名称 | 类型名称 | 备注 |
|---|---|---|
| 字符串类型 | string | |
| 数字类型 | number | NaN表示非数字，Not a Number，但NaN本身是number类型，表示数值异常 |
| 布尔类型 | boolean | |
| 空类型 | null | |
| 未定义类型 | undefined |
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>核心语法-数据类型</title>
<script>
/*
数据类型
*/
//字符串
var name = "libai";
//数值
var age = 20;
//浮点数
var height = 174.1;
//bool值
var isHaves = false;
//空值null
var wifeList = null;
//日期类型值
var date = new Date;
//数组类型值
var arr = new Array();
//未定义的值undefined
var achievement;
//NaN的值，这里使用字符与数字作减法，会得到一个异常值，NaN
var ass = "libai"-2;
/*
控制台打印
*/
//字符串string类型
console.log(typeof name);
//数值number类型
console.log(typeof age);
//数值number类型
console.log(typeof height);
//布尔boolean类型
console.log(typeof isHaves);
//空值null会打印为object类型
console.log(typeof wifeList);
//日期值会打印为object类型
console.log(typeof date);
//数组值会打印为object类型
console.log(typeof arr);
//未定义类型undefined
console.log(typeof achievement);
//异常数值结果打印为NaN
console.log(typeof "libai"-2);
//异常数值NaN的类型为Number
console.log(typeof ass);
console.log(typeof NaN);
</script>
</head>
<body>
</body>
</html>
打印结果
1.2 数据类型转换
不同的数据类型可以相互转换，以下介绍几种常见的类型转换
1.2.1 转为number类型
将值转为number数字类型有三种方法Number()、parseInt()、parseFloat()
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>核心语法-类型转换</title>
<script>
/*
类型转换-转换为number
*/
var n = '12';
console.log(typeof n);
console.log(n, typeof n);
console.log('--------------------------------------');
//使用Number()转换----------------------------------------
var n1 = Number('12');
//返回数值12，类型number
console.log(n1, typeof n1);
var n2 = Number('12.2');
//返回数值12.2，类型number
console.log(n2, typeof n2);
var n3 = Number('12bbs');
//返回NaN，类型number
console.log(n3, typeof n3);
var n4 = Number('bbs12');
//返回返回NaN，类型number
console.log(n4, typeof n4);
var n5 = Number(false);
//返回返回0，类型number，注意：在boolean类型的值转换位number时ture会转为1，false会转为0
console.log(n5, typeof n5);
console.log('--------------------------------------');
//使用parseInt()转换--------------------------------------
var pI1 = parseInt('12');
//返回数值12，类型number
console.log(pI1, typeof pI1);
var pI2 = parseInt('12.2');
//返回数值12，只保留了整数部分，类型number
console.log(pI2, typeof pI2);
var pI3 = parseInt('12bbs');
//返回数值12，类型number，parseInt方法将字符串从左到右解析，将12解析为数值
console.log(pI3, typeof pI3);
var pI4 = parseInt('bbs12');
//返回返回NaN，类型number，parseInt方法将字符串从左到右解析，开始就不是数值故解析不出数值，转为异常数值NaN
console.log(pI4, typeof pI4);
console.log('--------------------------------------');
//使用parseFloat转换--------------------------------------
var pF1 = parseFloat('12');
//返回数值12，类型number
console.log(pF1, typeof pF1);
var pF2 = parseFloat('12.2');
//返回数值12.2，类型number
console.log(pF2, typeof pF2);
var pF3 = parseFloat('12.2bbs');
//返回数值12.2，类型number，parseFloat方法将字符串从左到右解析，将12.2解析为数值
console.log(pF3, typeof pF3);
var pF4 = parseFloat('bbs12');
//返回返回NaN，类型number，parseFloat方法将字符串从左到右解析，开始就不是数值故解析不出数值，转为异常数值NaN
console.log(pF4, typeof pF4);
</script>
</head>
<body>
</body>
</html>
打印结果
1.2.2 值转为字符串string类型
拼接空字符串即可将现有类型的值转为字符串类型
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>核心语法-类型转换</title>
<script>
/*
类型转换-转换为string
*/
//number数值转为字符串
var n = 12;
console.log(n, typeof n);
n = n + "";
console.log(n, typeof n);
console.log('--------------------------------------');
//boolean布尔值转为字符串
var b = false;
console.log(b, typeof b);
b = b + "";
console.log(b, typeof b);
</script>
</head>
<body>
</body>
</html>
打印结果
1.2.3 值转为布尔类型
使用Boolean()方法将值转为布尔类型
注：0、空字符串、null、undefined、NaN都会被转成false，其他值会被转换为ture
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>核心语法-类型转换</title>
<script>
/*
类型转换-转换为布尔值（boolean）
*/
//number数值转为布尔值
var n = Boolean(11);
//转换结果为true，类型boolean
console.log(n, typeof n);
console.log('--------------------------------------');
//number数值转为布尔值
var n0 = Boolean(0);
//转换结果为true，类型boolean
console.log(n0, typeof n0);
console.log('--------------------------------------');
//字符串值转为布尔值
var str = Boolean("libai");
//转换结果为true，类型boolean
console.log(str, typeof str);
console.log('--------------------------------------');
//空值null转为布尔值
var nu = Boolean(null);
//转换结果为false，类型boolean
console.log(nu, typeof nu);
console.log('--------------------------------------');
//未定义的值转为布尔值
var unded = Boolean(undefined);
//转换结果为false，类型boolean
console.log(unded, typeof unded);
console.log('--------------------------------------');
//异常数值NaN转为布尔值
var na = Boolean(NaN);
//转换结果为false，类型boolean
console.log(na, typeof na);
console.log('--------------------------------------');
//综上，0、空字符串、null、undefined、NaN都会被转成false，其他值会被转换为ture
//那么在if语句中的条件，不仅可以使用条件语句或者true值，也可以直接使用数字或者字符串作为true
if("libai"){
//条件为true则打印
console.log(10086);
}
if(null){
//条件为false，不会打印
console.log(10010);
}
</script>
</head>
<body>
</body>
</html>
打印结果
2. 运算符
js中的运算符有以下几种：算术运算符、比较运算符、赋值运算符、逻辑运算符、条件运算符
2.1 算术运算符
算术运算符：包含了数据的加、减、乘、除、取模和次方等
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>核心语法-运算符</title>
<script>
/*
算术运算符
*/
//定义变量并赋值
var a = 3;
var b = 2;
var c = '4';
//使用算数运算符进行计算并打印结果
//加法
console.log('a + b = ', a + b);
//减法
console.log('a - b = ', a - b);
//乘法
console.log('a * b = ', a * b);
//除法
console.log('a / b = ', a / b);
//取余
console.log('a % b = ', a % b);
//次方，表示a的b次方的值
console.log('a ** b = ', a ** b);
//数值与数字字符串计算，会自动将字符串转为数值
console.log('a - c = ', a - c);
console.log('--------------------------------------');
//前缀的自增自减和后缀的自增自减与Java中的用法相同
console.log('a = ', a);
console.log(a);
console.log('++a = ', ++a);
console.log(a);
console.log('a++ = ', a++);
console.log(a);
console.log('--a = ', --a);
console.log(a);
console.log('a-- = ', a--);
console.log(a);
console.log('--------------------------------------');
</script>
</head>
<body>
</body>
</html>
浏览器控制台打印结果
2.2 比较运算符
比较运算符：大于、小于、大于等于、小于等于、等于、全等于、不等于
用于比较数据，返回的结果为布尔值
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>核心语法-运算符</title>
<script>
/*
比较运算符
*/
//定义变量并赋值
var a = 3;
var b = 2;
var c = 3;
var d = '3';
var e = 1;
var f = true;
//使用比较运算符进行比较并打印结果
//大于，结果为true
console.log('a > b = ', a > b);
//小于，结果为false
console.log('a < b = ', a < b);
//大于等于，结果为true
console.log('a >= b = ', a >= b);
//小于等于，结果为false
console.log('a <= b = ', a <= b);
//等等于，结果为true
console.log('a == c = ', a == c);
//三等于，结果为true
console.log('a === c = ', a === c);
//等等于，结果为true
console.log('a == d = ', a == d);
//全等于，结果为false
console.log('a === d = ', a === d);
//不等于，结果为false
console.log('a != c = ', a != c);
//布尔值true和数值1比较，结果为true
console.log('e == f = ', e == f);
//布尔值true与数值3比较，结果为false
console.log('a == f = ', a == f);
//注意1：两个等号==只判断内容是否相等，三个等号===全等于既判断内容，又判断数据类型
//注意2：布尔值true对应的数值为1，false对应的数值为0
console.log('--------------------------------------');
</script>
</head>
<body>
</body>
</html>
浏览器控制台打印结果
2.3 赋值运算符
赋值运算符：加等于、减等于、乘等于、除等于
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>核心语法-运算符</title>
<script>
/*
赋值运算符
*/
//定义变量并赋值
var a = 3;
console.log('a : ', a);
a+=2;
console.log('a+=2 : ', a);
a-=2;
console.log('a-=2 : ', a);
a*=2;
console.log('a*= : ', a);
a/=2;
console.log('a/= : ', a);
console.log('--------------------------------------');
</script>
</head>
<body>
</body>
</html>
浏览器控制台打印结果
2.4 逻辑运算符
逻辑运算符：与&&、或||、非!
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>核心语法-运算符</title>
<script>
/*
逻辑运算符
*/
//定义变量并赋值
var a = true;
var b = false;
//与&&
console.log('a && b : ', a && b);
//或||
console.log('a || b : ', a || b);
//非！
console.log('a || 3/0 : ', a || 3/0);
console.log('--------------------------------------');
</script>
</head>
<body>
</body>
</html>
浏览器控制台打印结果
2.5 条件运算符
条件运算符：用于条件判断并执行语句
语法如下：
条件?执行语句1:执行语句2
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>核心语法-运算符</title>
<script>
/*
条件运算符
*/
//定义变量并赋值
var a = 3;
var b = 1;
//条件运算符语法：条件?执行语句1:执行语句2
//a大于b则输出a-b的值，否则输出a+b的值
console.log(a > b ? a-b : a+b);
console.log('--------------------------------------');
</script>
</head>
<body>
</body>
</html>
浏览器控制台打印结果
2.6 Math方法
在JS中和java一样有一个可以调用的数学运算的函数Math()
可以对对象进行基础的数学运算
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>核心语法-Math方法对对象数学运算</title>
<script>
/*
Math方法的数学运算
*/
//1绝对值，正负值的绝对值是提出正负号，0的绝对值是0
console.log('---1绝对值---Math.abs(-1)--------------------------------');
console.log(Math.abs(-1));
//2计算次方，参数a,b，表示a的b次方
console.log('---2次方值---Math.pow(3,4)--------------------------------');
console.log(Math.pow(3,4));
//3四舍五入，到5进一位
console.log('---3四舍五入---Math.round(2.9)--------------------------------');
console.log(Math.round(2.9));
//4向上取整，获取大于等于参数的最小整数
console.log('---4向上取整---Math.ceil(2.3)--------------------------------');
console.log(Math.ceil(2.3));
//5向下取整，获取小于等于参数的最大整数
console.log('---5向下取整---Math.ceil(2.8)--------------------------------');
console.log(Math.floor(2.8));
//注：2.0的向上取整和向下取整都是2.0
//6生成一个[0.0,1)之间的随机浮点数，[闭区间，表示包括0.0，)开区间，表示不包括1
console.log('---6生成一个大于等于0.0小于1的随机浮点数---Math.random()--------------------------------');
console.log(Math.random());
//7最大值
console.log('---7最大值---Math.max(5,2,3,1,6,10,8,7,9)--------------------------------');
console.log(Math.max(5,2,3,1,6,10,8,7,9));
//8最小值
console.log('---8最小值---Math.max(5,2,3,1,6,10,8,7,9)--------------------------------');
console.log(Math.min(5,2,3,1,6,10,8,7,9));
//9圆周率的值
console.log('---9最大值---Math.PI--------------------------------');
console.log(Math.PI);
// console.log('--------------------------------------');
</script>
</head>
<body>
</body>
</html>
浏览器控制台输出
3. 选择结构
JS中选择结构有if...else和switch
3.1 if...else
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择结构-if-else</title>
<script>
var id = 1;
if(id>0){
console.log("id为正数");
}else if(id<0){
console.log("id为负数");
}else{
console.log("id为0");
}
</script>
</head>
<body>
</body>
</html>
浏览器控制台打印结果
3.2 switch
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择结构-switch</title>
<script>
var id = "1";
switch(id){
case "1":
console.log("libai");
break;
case "2":
console.log("baijuyi");
break;
case "3":
console.log("menghaoran");
break;
default:
console.log("liqingzhao");
break;
}
</script>
</head>
<body>
</body>
</html>
浏览器控制台打印结果
4. 循环结构
循环结构有while，do...while，for，for...in
4.1 while
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环结构-while</title>
<script>
var id = 1;
while(id<10){
console.log("循环加1",id);
id++;
}
console.log("此时id值不满足id<10，跳出循环，id：",id);
</script>
</head>
<body>
</body>
</html>
浏览器控制台打印结果
4.2 do...while
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环结构-do-while</title>
<script>
var id = 1;
do{
console.log("循环加1",id);
id++;
}while(id<10);
console.log("此时id值不满足id<10，跳出循环，id：",id);
</script>
</head>
<body>
</body>
</html>
浏览器控制台打印结果
4.3 for
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环结构-for</title>
<script>
var sum = 0;
for(var i=1; i<10; i++){
console.log("i:",i);
sum+=i;
}
console.log("1-9数字累加的和为sum：", sum);
</script>
</head>
<body>
</body>
</html>
浏览器控制台打印结果
4.4 for...in...
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环结构-增强for循环-for-in</title>
<script>
var str = "libai";
//迭代
for(var index in str){
console.log("index:",index);
console.log("str[index]:",str[index]);
}
</script>
</head>
<body>
</body>
</html>
浏览器控制台打印结果
5. 数组
5.1 定义语法
定义的语法有三种方式如下
语法1
先声明后赋值
var arr1 = new Array();
arr1[0] = 0;
arr1[1] = 1;
arr1[2] = 2;
语法2
声明时直接赋值，如赋值1,2,3
var arr2 = new Array(1,2,3);
语法3
声明时直接赋值，如赋值1,2,3
var arr3 = [4,5,6];
5.2 注意事项
数组长度会自动扩展
数组中元素的默认值为undefined
使用length属性来获取数组的长度
5.3 常用方法
数组可调用的函数方法，常用的有以下几种
| 方法 | 描述 |
|---|---|
| sort() | 排序，默认按字符编码的顺序排列，非string类型会自动转换为string，可自定义比较规则 |
| reverse() | 反转，将数组元素倒序排列 |
| join(separator) | 将数组中元素使用指定的分隔符连接成字符串，默认通过都好进行连接 |
| indexOf() | 返回指定元素在数组中首次出现的位置 |
| slice(begin,end) | 截取数组中索引从begin到end的元素，左闭右开，如果省略第二个参数，则表示截取到末尾 |
| toString() | 将数组转换为字符串 |
5.4 示例代码
示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组</title>
<script>
//语法1
var arr1 = new Array();
arr1[0] = 0;
arr1[1] = 1;
arr1[2] = 2;
//语法2
var arr2 = new Array(1,2,3);
//语法3
var arr3 = [4,5,6];
console.log(arr1[1]);
console.log(arr2[2]);
//索引为3的值并没有，故返回undefined
console.log(arr3[3]);
console.log(arr3.length);
//举例
var list = [];
for(var i=0;i<10;i++){
if(i%2==0){
list[i/2]=i;
}
}
console.log("小于10且整除2的数的集合：",list);
console.log("----------------------------------------------------------------------------------------------");
var strList = ["libai","dufu","baijuyi","lishangyin","dumu","menghaoran"];
console.log(strList);
strList.sort();
console.log("将数组排序：",strList);
strList.reverse();
console.log("将数组反转：",strList);
newst = strList.join();
console.log("将数组以逗号连接：",newst);
newstr = strList.join("=");
console.log("将数组以=连接：",newstr);
var index = strList.indexOf("libai");
console.log("值为libai的索引：", index);
var newList1 = strList.slice(1,3);
console.log("索引为1到3的值：",newList1);
var newList2 = strList.slice(1);
console.log("索引为1到最后一个的值：",newList2);
</script>
</head>
<body>
</body>
</html>
5.5 控制台结果
浏览器控制台打印
5.6 二维数组
二维数组是一维数组的变形，相当于每个元素都是一个一维数组
语法1
var arr1 = new Array();
arr1[0] = new Array(1,2,3);
arr1[1] = [4,5,6];
arr1[2] = [7,8,9];
语法2
var arr2 = [
[1,2,3],
[4,5,6],
[7,8,9]
];
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二维数组</title>
<script>
//二维数组就是特殊的一维数组，二维数组中的每个元素是一个一维数组
//语法1
var arr1 = new Array();
arr1[0] = new Array(1,2,3);
arr1[1] = [4,5,6];
arr1[2] = [7,8,9];
console.log(arr1[1][2]);
//语法2
var arr2 = [
[1,2,3],
[4,5,6],
[7,8,9]
];
console.log(arr2[2][2]);
//打印二维数组中的元素，由于控制台打印无法满足换行，故使用页面打印
for(var i=0;i<arr2.length;i++){
for(var j=0;j<arr2[i].length;j++){
//页面打印数组
document.write(arr2[i][j]+" ");
}
//换行
document.write("<br>");
}
</script>
</head>
<body>
</body>
</html>
浏览器控制台打印
6. 函数
JS中的函数有以下几种：自定义函数、回调函数、匿名函数、箭头函数。
6.1 自定义函数
6.1.1 语法
自定义函数的语法如下
function 函数名（参数1，参数2，...）{函数体}
6.1.2 注意事项
定义函数时不需要指定参数的类型
实参个数和形参个数可以不同，未指定参数时其默认值为undefined
不需要指定返回只的类型，如果有返回值，直接使用return返回即可
如果函数中没有使用return返回值，则默认返回undefined
6.1.3 变量的作用域
变量在代码中的作用域
| 名称 | 含义 |
|---|---|
| 局部作用域 | 在函数中声明的变量，只能在此函数内访问，函数运行结束变量自动销毁 |
| 全局作用域 | 在函数外声明的变量，在任何位置都可以访问 |
| 块级作用域 | 使用let关键字声明的变量，只能在声明它的代码块内访问 |
6.1.4 示例代码
示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数-自定义函数</title>
<script>
//语法
/*
function 函数名（参数1，参数2，...）{函数体}
*/
//定义函数-举例，无参
function fn1(){
console.log("无参函数");
}
//定义函数-举例，有参
function fn2(n1,n2,n3){
console.log("有参函数");
}
//调用函数
fn1();
var sum = fn2(1,2,3);
console.log(sum);
var a = 110;
function fn4(){
var b = 111;
}
{
var c = 112;
let d = 119;
}
console.log("全局变量a：",a);
console.log("局部变量b：",b);
console.log("块级作用域变量c：",c);
console.log("块级作用域变量d：",d);
</script>
</head>
<body>
</body>
</html>
6.1.5 控制台结果
浏览器控制台结果输出
6.2 回调函数
不立即执行的函数调用，满足一定条件时执行或者由别的代码调用执行，称为回调函数callback
调用时只写函数名，没有小括号和参数
6.2.1 定义语法
定义语法如下
function 函数名(){函数体}
6.2.2 应用
作为事件绑定的函数
作为其他函数的参数
6.2.3 示例代码
示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数-回调函数</title>
<script>
function f1(){
console.log("libai");
}
//事件绑定的函数
//点击页面时触发函数，即回调函数，不能加小括号
window.onclick = f1;
//函数作为参数
//函数本身也是一种数据类型，数据类型string,number,boolean,null,undefined,object,function
console.log(typeof f1);
var f = f1;
f();
console.log(typeof f);
function f2(a,b){
a();
}
f2(f1,2);
</script>
</head>
<body>
</body>
</html>
6.2.4 控制台输出
浏览器控制台输出
6.3 匿名函数
没有名字的函数称为匿名函数，一般用于回调
6.3.1 应用场景
用于函数的回调
用于一次性执行的函数，会自动执行，称为自执行函数
6.3.2 示例代码
示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数-匿名函数</title>
<script>
//匿名函数回调
window.onclick=function(){
//匿名函数，用于回调
console.log("点击页面触发函数执行");
};
//用于一次性执行的函数-自执行函数
(function(){
console.log("只执行一次的函数");
})();
</script>
</head>
<body>
</body>
</html>
6.3.3 控制台结果
浏览器控制台结果输出
6.4 箭头函数
ES6中允许使用箭头定义函数，称为箭头函数，也称为lamda表达式，是一种特殊的匿名函数，使用=>符号
6.4.1 定义语法
语法如下
参数 => 返回值
6.4.2 注意事项
如果箭头函数没有参数，也必须带上小括号表示参数部分
如果箭头函数有两个或两个以上的参数，则必须使用小括号
如果箭头函数的函数体部分多于一句，则需要使用花括号括起来
以上三条注意事项可通过下方示例代码查看
6.4.3 示例代码
示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数-箭头函数</title>
<script>
/*
ES6中允许使用箭头定义函数，称为箭头函数，也称为lamda表达式，是一种特殊的匿名函数，使用=>符号
*/
//语法：参数 => 返回值
var a = function(x){
return x*2;
}
console.log(a(2));
//使用箭头函数
var b = x => x*2;
console.log(b(2));
//如果箭头函数没有参数或者参数多于2个及以上，则必须使用小括号表示参数部分
var c = function(){
return 1;
}
console.log(c());
//使用箭头函数
var d = ()=>1;
console.log(d());
var e = function(x,y){
return x+y;
}
console.log(e(2,3));
//使用箭头函数
var f = (x,y) => x+y;
console.log(f(2,3));
//如果箭头函数的函数体多于一句，则需要使用花括号括起来
var g = function(x,y){
var sum = x+y;
return sum;
}
console.log(g(3,3));
//使用箭头函数
var h = (x,y) => {
var sum = x+y;
return sum;
}
console.log(h(3,3));
</script>
</head>
<body>
</body>
</html>
6.4.4 控制台输出结果
浏览器控制台输出结果
7. 数组的排序（拓展）
排序调用sort()方法，但一下几种情况的结果好像和我们想象的结果不太一样
7.1 举例
排序举例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>匿名函数-举例-比较器</title>
<script>
//举例
var list = [1,2,3,22,33,11,9,5];
console.log("排序前：",list);
console.log("排序后：",list.sort());
var strList = ["libai","baijuyi","menghaoran","ouyangxiu","lishangyin"];
console.log("排序前：",strList);
console.log("排序后：",strList.sort());
</script>
</head>
<body>
</body>
</html>
7.2 举例结果打印
浏览器打印结果
7.3 sort()函数
默认的sort()函数，排序的规则是根据每个元素的第一个字符开始按照字母和数字的顺序排序，第一个字符相同，则根据第二个字符进行排序
想要根据数值大小进行排序则需要自定义比较器
7.4 数组排序的实现
7.4.1 比较器的定义
升序
第一个从参数比第二个参数大则返回正数，第一个参数比第二个参数小则返回负数，相等则返回0
function compare(a,b){
return a-b;
}
降序
第一个从参数比第二个参数大则返回负数，第一个参数比第二个参数小则返回正数，相等则返回0
function compare(a,b){
return b-a;
}
7.4.2 排序示例代码
数组排序示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>匿名函数-举例-比较器</title>
<script>
//举例
var list = [1,2,3,22,33,11,9,5];
// list.forEach(function(value,index){
// console.log(index);
// console.log(value);
// });
console.log("排序前：",list);
console.log("排序后：",list.sort());
var strList = ["libai","baijuyi","menghaoran","ouyangxiu","lishangyin"];
console.log("排序前：",strList);
console.log("排序后：",strList.sort());
console.log("--------------------------------------------------------------------");
//定义比较器
//升序，第一个从参数比第二个参数大则返回正数，第一个参数比第二个参数小则返回负数，相等则返回0
function compare(a,b){
return a-b;
}
console.log("排序前：",list);
//定义的比较规则函数作为参数闯入，进行排序
console.log("排序后：",list.sort(compare));
console.log("--------------------------------------------------------------------");
//降序，第一个从参数比第二个参数大则返回负数，第一个参数比第二个参数小则返回正数，相等则返回0
function compare2(a,b){
return b-a;
}
console.log("排序前：",list);
//定义的比较规则函数作为参数闯入，进行排序
console.log("排序后：",list.sort(compare2));
// function fn(value,index){
// console.log(index,value);
// }
// list.forEach(fn);
</script>
</head>
<body>
</body>
</html>
7.4.3 控制台结果打印
浏览器结果输出
五、复合类型
1. String
1.1 定义语法
string类型的定义语法如下
var str;
或
var str = new String();
1.2 定义并赋值
//基本数据类型
var str1 = " libai dufu ";
或
//引用数据类型
var str2 = new String("libai");
1.3 常用方法
string类型的常用方法如下表
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定索引位置的字符，也可以使用[索引]的方式 |
| indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置 |
| lastIndexOf() | 返回某个指定的字符串值在字符串中最后出现的位置 |
| toLowerCase() | 把字符串转化为小写 |
| toUpperCase() | 把字符串转化为大写 |
| substring() | 提取字符串中两个指定的索引号之间的字符，左开右闭，即左边包括，右边不包括 |
| replace() | 将指定的字符串替换为指定的新的字符串 |
| split() | 把字符串分割为字符串数组 |
| trim() | 去除前后两端的空格 |
1.4 示例代码
常用方法的实力代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合类型-string</title>
<script>
//基本数据类型
var str1 = " libai dufu ";
//引用数据类型
var str2 = new String("libai");
var length = str1.length;
console.log("str1字符串长度获取.length： ",length);
//charAt()
console.log("str1索引为0的元素：",str1.charAt(0));
console.log("str1索引为3的元素：",str1.charAt(3));
console.log("str1索引为3的元素：",str1[3]);
console.log("str1最后一个元素：",str1[str1.length-1]);
console.log("str1最后一个元素：",str1.charAt(str1.length-1));
console.log("返回str1字符串中首次出现i所在的索引：",str1.indexOf("i"));
console.log("返回str1字符串中最后一次出现i所在的索引：",str1.lastIndexOf("i"));
console.log("将str1字符串转为小写：",str1.toLowerCase());
console.log("将str1字符串转为大写：",str1.toUpperCase());
console.log("截取字符串索引1到3的内容：",str1.substring(1,3));
console.log("将字符串中的空格换成大写的T：",str1.replace(" ","T"));
console.log("将字符串以空格分隔成字符串数组：",str1.split(" "));
console.log("剔除字符串前后的空格：",str1.trim());
</script>
</head>
<body>
</body>
</html>
执行代码，浏览器控制台输出如下
2. Date
2.1 定义语法
定义日期的方法有三种
2.1.1 直接定义
直接定义当前时间的Date对象
//定义日期对象，表示当前时间
var date1 = new Date();
2.1.2 指定时间定义
指定时间的年月日时分秒来定义某个时间
//参数指定年月日时分秒
var date2 = new Date(2024,5,12,13,14,52);
2.1.3 指定毫秒数定义
指定毫秒值定义某个时间
//参数指定为与1970年1月1日零时零分相差的毫秒数
var date3 = new Date(1718690957162);
2.2 常用方法
Date对象的常用方法如下表
| 方法 | 描述 |
|---|---|
| getFullYear() | 以四位数字返回年份 |
| getMonth() | 返回月份(-11)，0表示1月 |
| getDate() | 返回一个月中的某一天(1-31) |
| getHours() | 返回一个小时(0-23) |
| getMinutes() | 返回分钟(0-59) |
| getSeconds() | 返回秒(0-59) |
| getMilliseconds() | 返回毫秒(0-59) |
| getDay() | 返回一周中的某一天(0-6)，0表示周日 |
| getTime() | 返回从1970-1-1 0:0:0至今的毫秒数 |
set方法和get方法使用方法相同，用于设置值
| 方法 | 描述 |
|---|---|
| setFullYear() | 以四位数字设置年份 |
| setMonth() | 设置月份(-11)，0表示1月 |
| setDate() | 设置一个月中的某一天(1-31) |
| setHours() | 设置一个小时(0-23) |
| setMinutes() | 设置分钟(0-59) |
| setSeconds() | 设置秒(0-59) |
| setMilliseconds() | 设置毫秒(0-59) |
| setDay() | 设置一周中的某一天(0-6)，0表示周日 |
| setTime() | 设置从1970-1-1 0:0:0至今的毫秒数 |
2.3 示例代码
相关get方法的操作示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合类型-date</title>
<script>
//定义日期对象，表示当前时间
var date1 = new Date();
//参数指定年月日时分秒
var date2 = new Date(2024,5,12,13,14,52);
//参数指定为与1970年1月1日零时零分相差的毫秒数
var date3 = new Date(1718690957162);
console.log("当前时间date1：",date1);
console.log("指定时间date:2：",date2);
console.log("指定时间date3：",date3);
var y = date1.getFullYear();
console.log("当前的年：",y);
var m = date1.getMonth();
console.log("当前的月：",m);
var d = date1.getDate();
console.log("当前的日：",d);
var h = date1.getHours();
console.log("当前的小时：",h);
var min = date1.getMinutes();
console.log("当前的分钟：",min);
var s = date1.getSeconds();
console.log("当前的秒：",s);
var ms = date1.getMilliseconds();
console.log("当前的毫秒：",ms);
var ls = date1.getTime();
console.log("当前的时间距离1970年1月1日0点整的毫秒数：",ls);
var day = date1.getDay();
//返回的时间day是从0-6的数字，0表示周日，1表示周一，依次类推
var weekday = ['周日','周一','周二','周三','周四','周五','周六']
var currentTime = y+"年"+m+"月"+d+"日 "+h+":"+min+":"+s+":"+ms+" "+weekday[day];
console.log("当前时间完整表示：", currentTime);
document.write("网页上显示当前时间：",currentTime)
</script>
</head>
<body>
</body>
</html>
执行代码后，浏览器控制台输出结果如下
浏览器网页输出
3. JSON
3.1 JSON简介
json全称为JavaScript Object Notation
是一种轻量级的数据交换格式，用于表示JavaScript对象的一种方式
采用与编程语言无关的文本格式，易于阅读和编写，同时易于解析与生成
3.2 基本语法
json的语法格式如下
{
"属性名":"属性值","属性名":"属性值",...}
注意：
json结构是由一系列的键值对组成，称为json对象
属性名必须使用双引号引起来
3.3 JSON的使用
json的使用有三种方式
- 简单的json对象
- 复合属性，属性值为json对象
- json对象的集合
3.3.1 简单json对象
直接定义简单的json对象，如下
var man = {
"name":"dufu",
"age":29
}
3.3.2 复合json对象
定义复合的json对象，即json中嵌套json，如下
var man = {
"name":"dufu",
"age":29,
"address":{
"provice":"shanghai",
"city":"shanghaic",
"district":"pudong"
}
}
3.3.3 json对象数组
定义json对象数组，如下
var arrjs = [
{
"id":"1111",
"name":"libai"
},
{
"id":"2345",
"name":"baijuyi"
},
{
"id":"6778",
"name":"menhaoran"
}
];
3.4 JSON 转换
json和字符串之间的转换
3.4.1 json转换为字符串
json转换为字符串使用JSON.stringigy(json对象)方法
//将json对象转为字符串
var str1 = JSON.stringify(json对象);
3.4.2 字符串转为json对象
字符串转为json对象使用JSON.parse(字符串)方法
var jsonObj = JSON.parse(字符串);
3.5 示例代码
关于json定义和转换的实力代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合类型-json</title>
<script>
// 定义json对象
var man = {
"name":"dufu",
"age":29,
"address":{
"provice":"shanghai",
"city":"shanghaic",
"district":"pudong"
}
}
// 访问对象中的属性
console.log("man对象的name: ",man.name)
console.log("man对象的adderss: ",man.address)
console.log("man对象的adderss下的district: ",man.address.district)
//定义JSON对象数组
var arrjs = [
{
"id":"1111",
"name":"libai"
},
{
"id":"2345",
"name":"baijuyi"
},
{
"id":"6778",
"name":"menhaoran"
}
];
//获取数组中的对象属性
for(var i=0; i<arrjs.length; i++){
var aj = arrjs[i];
console.log(aj.id, aj.name);
}
//json转换
//json转为字符串
var libai1 = {
"name":"libai",
"age":1000,
"addr":"tang"
};
//查看libai1对象的类型，类型为Object
console.log(typeof libai1)
//输出为对象
console.log("json libai1: ",libai1);
//将json对象转为字符串
var str1 = JSON.stringify(libai1);
//输出转换后的对象类型，类型为字符串类型
console.log(typeof str1);
//输出对象
console.log("string str1: ",str1);
console.log("----------------------------------------------------");
//字符串转为JSON，注意，这里键值必须用双引号包裹，字符串最外层需用单引号，反之会报错
var str2 = '{"name":"dufu","addr":"tang"}';
//输出对象类型，类型为字符串string
console.log(typeof str2);
//输出字符串内容
console.log("string str2: ",str2);
var jsonObj = JSON.parse(str2);
//输出转换后的对象类型，类型为Object
console.log(typeof str2);
//输出对象内容
console.log("json jsonObj: ",jsonObj);
var strjs = '[{"name":"li","addr":"song"},{"name":"zhao","addr":"ming"}]';
console.log("string strjs: ",strjs);
var jsonObjs = JSON.parse(strjs);
console.log("json jsonObjs: ",jsonObjs);
</script>
</head>
<body>
</body>
</html>
执行代码，浏览器控制台查看输出如下
4. 对象类型
4.1 对象介绍
对象类型与Java中的引用数据类型相似
JavaScript是面向对象的语言，但并不是纯粹的面向对象，不支持某些面向对象的特征
4.2 创建对象
创建对象有三种方式：使用Object创建、使用构造函数创建、使用json对象创建
4.2.1 使用Object创建对象
4.2.1.1 语法
创建对象语法
//新创建的对象没有属性和方法
var 对象名 = new Object();
添加属性名和值
//为对象添加属性
对象名.属性名 = 属性值;
//为对象添加方法
对象名.方法名 = function(){
方法体
};
调用属性和方法
//调用属性
对象名.属性名;
//或者
对象名["属性名"];
//调用方法
对象名.方法名();
4.2.1.2 示例
创建对象和调用的示例
//新创建的对象没有属性和方法
var o = new Object();
//为对象添加属性名和属性值
o.name = "libai";
//为对象添加方法
o.play = function(){
console.log("方法体");
};
//属性和方法的调用
var name = o.name;
var name = o["name"];
o.play();
4.2.2 使用构造函数创建对象
4.2.2.1 语法
使用构造函数创建对象的语法如下
//为区别普通函数，构造函数名建议首字母大写
function 构造函数名(形参1，形参2,...){
this.属性名 = 形参1;
this.属性名 = 形参2;
this.方法名 = function(){
方法体;
};
}
4.2.2.2 示例
使用构造函数创建对象的示例
//举例，创建构造函数
function User(name,age){
//属性
this.name = name;
this.age = age;
//方法
this.study = function(){
console.log("我是"+this.name+" 年龄："+this.age);
};
this.doing = function(){
console.log("正在敲代码");
};
}
//使用构造函数创建对象
var user = new User("libai","20");
console.log(user.name, user.name);
user.study();
user.doing();
4.2.3 使用JSON对象结构创建对象
json本身就是一个对象，使用json结构也可以创建对象
4.2.3.1 语法
使用json对象创建对象的语法
var JSON对象 = {
//属性名可以不用引号
属性名:属性值,
属性名:属性值,
...
};
4.2.3.2 示例
使用json结构创建对象的示例
var student = {
"name":"zhangsan",
"age":"26",
"study":function(){
console.log("在学习");
}
};
console.log(student.name, student["age"]);
student.study();
4.3 示例代码
创建对象相关的示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合类型-对象类型</title>
<script>
/*
对象类型与Java中的引用数据类型相似
JavaScript是面向对象的语言，但并不是纯粹的面向对象，不支持某些面向对象的特征
*/
//创建对象的三种方式
//1使用Object
//新创建的对象没有属性和方法
var o = new Object();
//为对象添加属性名和属性值
o.name = "libai";
//为对象添加方法
o.play = function(){
console.log("方法体");
};
//属性和方法的调用
var name = o.name;
var name = o["name"];
o.play();
//2使用构造函数，模拟类的定义，相当于定义一个类型
//使用构造函数，模拟类的定义，相当于定义一个类型
function Fun(a,b){
this.name = a;
this.age = b;
this.play = function(){
console.log();
};
}
//举例，创建构造函数
function User(name,age){
//属性
this.name = name;
this.age = age;
//方法
this.study = function(){
console.log("我是"+this.name+" 年龄："+this.age);
};
this.doing = function(){
console.log("正在敲代码");
};
}
//使用构造函数创建对象
var user = new User("libai","20");
console.log(user.name, user.name);
user.study();
user.doing();
//3使用JSON格式对象，一般只在JSON对象中定义属性
var student = {
"name":"zhangsan",
"age":"26",
"study":function(){
console.log("在学习");
}
};
console.log(student.name, student["age"]);
student.study();
</script>
</head>
<body>
</body>
</html>
浏览器控制台输出如下
六、示例代码下载
本篇的示例代码均已上传到CSDN资源库
下载地址：JavaScript 基础学习1（js引入方式、基础使用、核心语法、复合类型） 示例代码
以上就是本篇JS入门指南的全部内容
感谢阅读，祝君暴富！
原文链接: https://hanshan.blog.csdn.net//article/details/139469850