11.23
1.17.1 数组:
数组的创建方式:
//1- 最简单的方式，直接赋值 ->arr02 数组名
let arr02 = [1,2,3,4,5,6];
// 2- new Array(); 不指定长度和内容
// 3- new Array(size); 指定长度
// 4- new Array(element0, element1, ..., elementn); 指定元素数量，同时长度也就确定了
concat()
连接两个或更多的数组，并返回结果是一个数组要接受.。
join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()
删除并返回数组的最后一个元素
push()
向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()
颠倒数组中元素的顺序。
sort()
对数组的元素进行排序
sort() 方法用于对数组的元素进行排序。
语法
arrayObject.sort(sortby)
参数 描述
sortby 可选。规定排序顺序。必须是函数。
返回值
对数组的引用。请注意，数组在原数组上进行排序，不生成副本。
说明
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
• 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
• 若 a 等于 b，则返回 0。
• 若 a 大于 b，则返回一个大于 0 的值。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>回顾数组</title>
</head>
<body>
<script>
//大小顺序是乱的
let array01 = [1,0,99,8,12];
//调用排序方法->不是想我们想的那样对数字进行排序
//array01.sort();
//console.log(array01);
//排序需要指定一个按照规则排序的函数
function sortby(a,b){
//return a-b; ->最终的排序结果就是 从小到大
return b-a; //最终的排序结果就是 从大到小
}
array01.sort(sortby);
console.log(array01);
</script>
</body>
</html>
1.17.2 数组和循环结合:
最大值:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>数组</title>
</head>
<body>
<script>
let array01 = new Array(5);
//给数组元素赋值
for(let i =0; i<array01.length;i++){
//访问的时候 数组名[索引] = 值
array01[i] = Math.floor(Math.random()*100);
}
//i =0 表示的是数组的下标
for(let i =0; i<array01.length;i++){
//访问的时候 数组名[索引]
console.log(array01[i]);
}
//最大值
//1 假设数组第一个元素最大
let max = array01[0];
//用max和剩余的每个元素都比较一下
for(let i =1 ;i< array01.length ; i++){
//用max< ?
if(max < array01[i]){
max = array01[i];
}
}
///输出结果:
console.log("max : " + max);
</script>
</body>
</html>
最小值:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>数组</title>
</head>
<body>
<script>
let array01 = new Array(5);
//给数组元素赋值,要求数据用户输入进来的.
for(let i =0; i<array01.length;i++){
//弹窗输入
let temp = prompt("请输入第"+(i+1)+"个数字","1");
//访问的时候 数组名[索引] = 值
array01[i] =parseFloat(temp) ;
}
//i =0 表示的是数组的下标
for(let i =0; i<array01.length;i++){
//访问的时候 数组名[索引]
console.log(typeof array01[i]);
}
//最大值
//1 假设数组第一个元素最小
let min = array01[0];
//用max和剩余的每个元素都比较一下
for(let i =1 ;i< array01.length ; i++){
//用min> ?
if(min > array01[i]){
min = array01[i];
}
}
///输出结果:
console.log("min : " + min);
//页面展示结果
document.write("min : " + min);
</script>
</body>
</html>
求和和平均值.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>数组</title>
</head>
<body>
<script>
let array01 = new Array(5);
//给数组元素赋值,要求数据用户输入进来的.
for(let i =0; i<array01.length;i++){
//弹窗输入
let temp = prompt("请输入第"+(i+1)+"个数字","1");
//访问的时候 数组名[索引] = 值
array01[i] = temp ;
}
//i =0 表示的是数组的下标
for(let i =0; i<array01.length;i++){
//访问的时候 数组名[索引]
console.log(array01[i]);
}
let sum = 0;
//用max和剩余的每个元素都比较一下
for(let i =0 ;i< array01.length ; i++){
sum = sum + parseFloat(array01[i]);
}
///输出结果:
console.log("sum : " + sum);
//页面展示结果
document.write("sum : " + sum);
document.write(",avg : " + sum/array01.length);
</script>
</body>
</html>
1.17.3 轮播半成品:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>数组</title>
<style>
.button{border-radius: 8px; background-color: olivedrab}
</style>
</head>
<body>
<img id="moviepic" src="imgs/cat.png" style="width: 468px; height:654px"><br/>
<button class="button" id="btnleft"> < </button>
<button id="btn0">-</button>
<button id="btn1">-</button>
<button id="btn2">-</button>
<button id="btn3">-</button>
<button class="button" id="btnright"> > </button>
<script>
//存储的是要轮播的图片
let arraypic = ["cat.png","chmen.png","default.png","nn.png"];
//定义一个数字，表示电影图片的下标
let i =0;
document.getElementById("btn0").style.background="red";
//按钮的单击事件
document.getElementById("btnright").onclick =fun01;
function fun01(){
//如果已经是最后一张图片了
if(i==3){
//从0重新开始
i = 0;
}
else{
i++;
}
document.getElementById("moviepic").src="imgs/"+arraypic[i];
document.getElementById("btn"+i).style.background="red";
for(let j=0;j<arraypic.length;j++){
if(i!=j)
document.getElementById("btn"+j).style.background="";
}
}
//按钮的单击事件
document.getElementById("btnleft").onclick = function (){
//如果已经是最后一张图片了
if(i==0){
//从0重新开始
i = 3;
}
else{
i--;
}
document.getElementById("moviepic").src="imgs/"+arraypic[i];
document.getElementById("btn"+i).style.background="red";
for(let j=0;j<arraypic.length;j++){
if(i!=j)
document.getElementById("btn"+j).style.background="";
}
}
setInterval("fun01()",1000);
</script>
</body>
</html>
扩展:
https://www.swiper.com.cn/demo/index.html
1.17.4 数学：
Math 对象
Math 对象用于执行数学任务。
使用 Math 的属性和方法的语法：
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);
注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
ceil(x)
对数进行上舍入。
floor(x)
对数进行下舍入。
max(x,y)
返回 x 和 y 中的最高值。
min(x,y)
返回 x 和 y 中的最低值。
pow(x,y)
返回 x 的 y 次幂。
random()
返回 0 ~ 1 之间的随机数。
round(x)
把数四舍五入为最接近的整数。
sqrt(x)
返回数的平方根。
1.18 随机数:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
console.log(Math.PI)
//
console.log(Math.ceil(12.1))
console.log(Math.floor(12.1))
// for(let i=0;i<10;i++){
// let r = Math.floor(Math.random()*10);
// console.log(r)
// }
let student = ["11","111","1","44","444","4"];
//r其实是随机生成的一个下标
let r = Math.floor(Math.random()*6);
//要输出这个数组的元素
console.log(student[r]);
</script>
</body>
</html>
浙公网安备 33010602011771号