目录
js基础完结篇
一,表达式和语句
1.1,表达式和语句区别:
表达式:因为表达式可被求值,所以它可以写在赋值句的右侧
语句:而语句不一定有值,所以比如alert() for 和 break 等语句就不能被用于赋值
1.2,程序三大流程控制语句(案例代过)
案例演示:
语句综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=`, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let money = 100
while (true) {
let re = +prompt(`
ATM
请你选择操作:
1.存钱
2.取钱
3.查看余额
4.退出
`)
if (re === 4) {
break
}
switch (re) {
case 1:
let save = +prompt("请输入存款金额:")
money += save
break
case 2:
let qu = +prompt("请输入取款金额:")
if (qu > money) {
alert(`您的钱不够,您的余额为${money}小于${qu}`)
}
else
money -= qu
break
case 3:
alert(`您的银行卡余额是${money}`)
break
}
}
</script>
</body>
</html>
for循环打印数组:
补充无限for循环 for(;;)
二,数组
2.1,声明数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//使用new Array 构造函数声明
let array = new Array(1,2,3,4)
//字面量声明数组
let arr = [1,2,3,4]
</script>
</body>
</html>
2.2,数组求和
需求:求数组[2,6,1,7,4]里面所有元素的和以及平均值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let sum = 0
let tempt
let arr = [2, 6, 1, 7, 4]
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
tempt = sum / 5
}
console.log(sum);
document.write(`和为${sum},平均值为${tempt}`)
</script>
</body>
</html>
2.3,数组求最大值和最小值
需求:求数组[2,6,1,77,52,25,7]里面所有元素的最大值以及最小值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [2, 6, 1, 77, 52, 25, 7]
let max = arr[0]
let min = arr[0]
for (let i = 1; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i]
}
if (min > arr[i]) {
min = arr[i]
}
}
document.write(`最大值是${max},最小值是${min}`)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [2, 6, 1, 77, 52, 25, 7]
let max = arr[0]
let min = arr[0]
for (let i = 1; i < arr.length; i++) {
max < arr[i] ? max = arr[i] : max
min > arr[i] ? min = arr[i] : min
}
document.write(`最大值是${max},最小值是${min}`)
</script>
</body>
</html>
2.4,数组的操作(crud ,增删查改)
文档查具体细节 , MDA文档
删除补充
2.5,数组的筛选
需求:将数组[2,0,6,1,77,0,52,0,25,7] 中大于10的元素选出来,放入新数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
let list = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
list.push(arr[i])
}
}
console.log(list);
document.write(list)
</script>
</body>
</html>
2.6,数组去0案例
需求:将数组[2,0,6,1,77,0,52,0,25,7] 中的零去掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
let list = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== 0) {
list.push(arr[i])
}
}
console.log(list);
document.write(list)
</script>
</body>
</html>
2.7,综合案例(略)
2.8,数组实现排序(冒泡排序)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
这里使用两个嵌套的 for 循环是为了实现冒泡排序算法。冒泡排序的思想是通过相邻元素之间的比较和交换,逐步将最大(或最小)的元素移动到数组的一端。
首先,外层的 for 循环使用变量 i 控制每一轮比较的起点位置,从数组的第一个元素开始。内层的 for 循环使用变量 j 控制比较的终点位置,从 i+1 开始,遍历 i 后面的所有元素。
内层循环中的条件 j < arr.length 确保了在每一轮比较中都会遍历到数组的最后一个元素。而外层循环中的条件 i < arr.length - 1 确保了比较轮次不会超过数组的长度减一,这是因为在最后一轮比较中,最后一个元素已经处于正确的位置上了(无需再比较)。
这种嵌套的 for 循环可以确保每个元素都与其后面的元素进行比较,并根据需要执行交换操作,以达到排序的目的。
*/
let arr = [1, 3, 2, 5, 4];
let temp;
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
document.write(arr);
</script>
</body>
</html>
三,函数
3.1,函数的声明,封装,调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
function 函数名(){
具体实现的代码块
也就是函数体
}
调用
函数名()
*/
//封装函数
function bubbleSort() {
let arr = [1, 3, 2, 5, 4];
let temp;
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
document.write(`从小到大排序结果=${arr}`);
}
// 调用函数
bubbleSort()
</script>
</body>
</html>
函数命名与变量命名规范相同
3.2,函数的返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fn(){
return 20
}
//相当于 fn() = 20
</script>
</body>
</html>
打断点的位置
点击行数就可以打断点了
3.3,函数细节补充
3.4,函数的作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num = 10 //全局变量
console.log(num)
function fn(){
console.log(num); //可以打印
}
//局部变量
function fun(){
let str = 'bestwishesn'
}
console.log(str) //不能打印
</script>
</body>
</html>
3.5,作用域变量补充(注意)
3.5.1,补充一:
如果函数内部,变量没有声明,直接赋值,也可以当全局变量看,但不推荐使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fun(){
str = 'bestwishesn'
}
console.log(str) //可以打印
</script>
</body>
</html>
3.5.2,补充二:
不同作用域下变量名相同并不冲突
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let str = 'hello world'
function fun(){
let str = 'bestwishesn'
console.log(str);
}
console.log(str) //可以打印
</script>
</body>
</html>
函数内打印的内容为bestwishesn 外部打印的内容是hello world
3.5.3,补充三:
每当声明一个函数就会产生新的作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let str = 'hello world'
function fun(){
let str = 'bestwishesn'
console.log(str);
function fun2(){
let str = 'abc'
console.log(str)
}
}
console.log(str) //可以打印
</script>
</body>
</html>
变量访问原则,先从当前作用域查找如果没有就向外一步一步查找(就近原则)
3.6,匿名函数
Webapis 会使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//匿名函数表达式 调用只能在函数命名函数下调用
let fn = function (x, y) {
console.log(x + y);
}
fn(1, 2)
//具名函数的特点 在任意位置调用
</script>
</body>
</html>
匿名函数必须先声明后调用
3.7,立即执行函数
避免变量污染问题
声明方法:
- 第一种声明方法
<script>
//立即执行函数的写法
(function(){})()
</script>
- 第二种声明方法(推荐)
<script>
(function () { }())
</script>
使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//立即执行函数的写法
//必须加分号 加前面后面都可以
; (function () {
let num = 10
})();
; (function () {
let num = 20
})(); //后面小括号本质是在调用函数
//(function(形参){})(实参)
</script>
</body>
</html>
省略调用的步骤,避免与用户变量名冲突
3.8,小案例
秒数转换案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>5
100
//用户输入
let second = +prompt("请输入秒数")
function getTime(time) {
console.log(time);//总的秒数
let h = parseInt(time / 60 / 60 % 24)
let m = parseInt(time / 60 % 60)
let s = parseInt(time % 60)
h = h < 10 ? "0" + h : h;
s = s < 10 ? "0" + s : s;
m = m < 10 ? "0" + m : m;
// console.log(h, m, s);
return `转换之后是${h}小时,${m}分钟,${s}秒`
}
let str = getTime(second)
document.write(str);
console.log(str);
</script>
</body>
</html>
3.9,逻辑中断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fn(x, y) {
x = x || 0
y = y || 0
console.log(x + y);
}
fn(0, 0)
</script>
</body>
</html>
五,面向对象编程
5.1,对象是什么以及它的特点:
- 对象(object):JavaScript中的一种数据类型,是数据的集合
- 对象是无序的
5.2,对象的声明方法
<script>
let 对象名 = {}
let 对象名 = new Object()
</script>
5.3,对象的组成
- 属性:特征(名词)
- 方法:行为(动词)
<script>
let 对象名 = {
属性名:属性值,
方法:函数;
}
</script>
在对象外面的叫变量 在对象里面的叫属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let bestwishes = {
//属性
uname: 'bestwishesn',
age: 18,
gender: '男'
}
console.log(bestwishes);
console.log(typeof bestwishes);
</script>
</body>
</html>
对象属性没有顺序
属性和值用冒号隔开(英文格式)
属性与属性用逗号隔开(英文格式)
5.4,对象的操作 增删改查(Crud)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let person = {
//属性
uname: 'bestwishesn',
age: 18,
gender: '男',
weight: '56kg',
address: '北京'
}
//查 --->对象.属性
let name = person.uname
let age = person.age
let gender = person.gender
let weight = person.weight
let address = person.address
//改 --->对象.属性 = 新值
person.gender = '女'
person.address = '西安'
console.log(person.uname);
console.log(typeof person);
//增 ---> 对象.属性
person.hobby = '羽毛球'
//删 delete 对象.属性
delete person.weight
</script>
</body>
</html>
5.4.1, 查的另外一种方法
<script>
let person = {
//属性
uname: 'bestwishesn',
age: 18,
gender: '男',
weight: '56kg',
address: '北京'
}
//查 --->对象[属性名]
let name = person['uname']
</script>
属性名一点要加‘’
5.5,方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let person = {
//属性
uname: 'bestwishesn',
age: 18,
gender: '男',
weight: '56kg',
address: '北京',
// 方法命名--->方法名:function(){}
code:function(){
console.log('code');
}
}
//方法的调用---> 对象名.方法名() 例如 document.write()
person.code
</script>
</body>
</html>
5.6,重点 遍历对象(for in 语法)
返回的是字符串类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let person = {
//属性
uname: 'bestwishesn',
age: 18,
gender: '男',
weight: '56kg',
address: '北京',
// 方法命名--->方法名:function(){}
code: function () {
console.log('code');
}
}
for (let k in person) {
//获得对象的属性是看,获得对象的属性值是person[k]
// k 是属性名 --->字符串类型
// console.log(k);
//console.log(person.k); 相当于 console.log(person.'uname')
console.log(person[k]); //输出属性名 person[k]
}
</script>
</body>
</html>
5.7,遍历数组对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let students = [
{ name: '小明', age: 18, gender: '男', hometown: '西安' },
{ name: '小黑', age: 19, gender: '男', hometown: '北京' },
{ name: '小栏', age: 20, gender: '女', hometown: '重庆' },
{ name: '小白', age: 21, gender: '女', hometown: '威海' },
]
for (let i = 0; i < students.length; i++) {
let j = students[i]
for (let k in j) {
let people = j[k]
console.log(people);
}
}
</script>
</body>
</html>
5.8,渲染
根据数据渲染成表格(略)
let students = [
{ name: '小明', age: 18, gender: '男', hometown: '西安' },
{ name: '小黑', age: 19, gender: '男', hometown: '北京' },
{ name: '小栏', age: 20, gender: '女', hometown: '重庆' },
{ name: '小白', age: 21, gender: '女', hometown: '威海' },
]
5.9,内置对象
(Math内置对象)
查找内置对象 在MDN 文档中查看
MDNhttps://developer.mozilla.org/zh-CN/
5.9.1, 内置对象--生成任意随机数
Math.random() 返回0-1之间 [0,1) ---->小数
<script>
console.log(Math.random());
</script>
随机生成0-10之间的数 Math.floor(Math.random()*(10+1))
<script>
console.log(Math.floor(Math.random() * 11))
</script>
随机生成N-M的随机数函数
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
随机点名案例 自己写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = ['red', 'green', 'blue','张飞','gaunyu ']
let random = Math.floor(Math.random() * arr.length)
console.log(arr[random]);
</script>
</body>
</html>
去除抽奖过的人,数组的删除方法pop 删除最后一个元素,shift删除第一个元素,splice(起始位置(下标),删除几个元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = ['red', 'green', 'blue', '张飞', 'gaunyu ']
let random = Math.floor(Math.random() * arr.length)
document.write(arr[random]);
arr.splice(random, 1)
console.log(arr);
</script>
</body>
</html>
5.9.2,随机生成颜色
视频演示
随机颜色实现
具体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div></div>
<script>
function getRandomColor(flag = true) {
//如果是true 则返回#ffffff
if (flag) {
let str = '#'
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'a', 'b', 'c', 'd', 'e', 'f']
for (let i = 1; i <= 6; i++) {
let random = Math.floor(Math.random() * arr.length)
str += arr[random]
}
return str
} else {
//否则是false 则返回rgb(255,255,255)
let r = Math.floor(Math.random() * 256)
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)
return `rgb(${r},${g},${b})`
}
}
console.log(getRandomColor(false))
console.log(getRandomColor(true))
console.log(getRandomColor())
const div = document.querySelector('div')
div.style.backgroundColor = getRandomColor()
</script>
</body>
</html>
5.10,拓展不同数据类型的储存的方式不同(堆 和 栈)
值类型和引用类型
5.10.1,简单数据类型和复杂数据类型举例
思考:
<script>
let num1 = 10
let num2 = num1
num2 = 20
console.log(num1);
</script>
引用数据类型
<script>
let obj1 = {
age: 18
}
let obj2 = obj1
obj2.age = 20
console.log(obj1.age);
</script>
简单数据类型的值储存在栈中,引用数据类型的值储存在堆中