一、常用函数
1.map
将调用的数组的每个元素传递给指定的函数，并返回一个数组。
2.reduce
按函数方法计算值。
3.filter
返回的数组元素是函数逻辑为真的一个子集。
4.find
返回与指定条件匹配的第一个元素，不再往后匹配。
findIndex
和 find 用法相同，不过不是返回第一个匹配的元素，而是返回该匹配元素的索引值。为清晰可见，以下面的名字数组为例，而不是数字数组。
indexOf
和 findIdex 用法相同，但它不以函数作为参数，它的参数是一个简单的值。适用于简单逻辑或不需要要函数进行判定的情况。
5.push
这是一种将元素添加至数组末尾的相对简单的方法。它修改数组值，函数本身返回压入数组的值。
6.pop
删除数组的最后一个元素。同样，它改变了原数组。函数本身返回被删除元素的值。
7.shift
从数组头部删除一个元素。同样，它改变了原数组。函数本身返回被删除元素的值。
8.unshift
在数组头部添加一个或多个元素。同样，它改变了原数组。与其他很多方法不同的是，函数本身返回数组新的长度。
9.splice
通过删除或替换现有元素和/或添加新元素改变数组的值。此方法会改变原数组。
10.slice
返回从指定的起始位置到结束位置的浅拷贝数组。如果没有指定结束位置，则会返回到原数组的最后部分。重要的是，该方法不会改变原数组的值，而是返回对应的子集。
11.sort
用于对数组的元素进行排序。默认情况下，sort() 方法按照字符串 Unicode 码点的顺序对数组的元素进行排序。这意味着数组中的每个元素都会被转换为字符串，然后按照字符串的 Unicode 码点进行排序。如果需要对数字数组进行排序，可以提供一个自定义的比较函数作为 sort() 方法的参数。比较函数应该接受两个参数，并返回一个负数、零或正数，以表示第一个参数应该排在第二个参数之前、相等或之后。
二、Http
1.http简介
HTTP（Hypertext Transfer Protocol，超文本传输协议）是一种应用层协议，用于在客户端（如浏览器）和服务器之间传输超文本数据。它基于请求-响应模型，客户端发送请求，服务器处理并返回响应。HTTP是无状态协议，即每次请求和响应都是独立的，服务器不会记录请求的上下文信息。
2.DNS简介
DNS（Domain Name System，域名系统）是一种用于将易于理解和记忆的域名转换为与之对应的IP地址的系统。它是互联网的基础组成部分，使得用户可以通过域名访问网站，而不需要记住复杂的IP地址。
3.浏览器调试
在 Chrome 中按 F12 打开调试器；右击，选中选项检查。
4.Http Server
http-server 是一个轻量级的 Node.js HTTP 服务器，它默认情况下不提供任何 JSON 存储功能。
在下载完 Node.js 压缩包后，可以使用 npm（Node.js package manager包管理器）来安装 http-server。在终端或命令提示符中运行命令：npm install -g http-server。通过npm config set registry https://registry.npmmirror.com换源之后再安装速度会快很多。
5.Ajax
Ajax（Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）是一种在不重新加载整个网页的情况下，与服务器交换数据并更新部分网页内容的技术。Ajax 的主要目的是提高网页的性能和用户体验。
Json Server
安装：npm install -g json-server
新建 db.json
启动：json-server --watch db.json --port 4000
Axios
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
安装 Axios：
npm install axios
# 或者
yarn add axios<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
练习：
做一个新闻的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻</title>
<style>
.one{
height: 5rem;
background-color: rgba(42, 38, 38, 0.222);
border-bottom: 1px solid #ddd;
display: flex;
justify-content: space-between;
align-items: center;
}
.one_left{
display: flex;
margin-left: 2rem;
align-items: center;
}
.one_left > img{
height: 4rem;
}
.one_right{
display: flex;
margin-right: 2rem;
align-items: center;
}
a{
color: black;
text-decoration: none;
}
.two{
height: 10rem;
display: flex;
justify-content: space-around;
}
.two_left{
margin-left: 1rem;
margin-right: 1rem;
}
.two_left>img{
height: 10rem;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.carousel {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carousel-item {
min-width: 100%;
box-sizing: border-box;
}
.carousel-item img {
width: 100%;
display: block;
}
.carousel-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
.carousel-control.prev {
left: 0;
}
.carousel-control.next {
right: 0;
}
</style>
<script src="/assets/js/script.js"></script>
</head>
<body>
<div>
<div class="one">
<div class="one_left">
<img src="/assets/imgs/news.webp" alt="news">
<div style="color: red;font-size: 2rem;font-weight: bold;">新闻</div><br>
</div>
<div class="one_right">
<a href="#">国内</a>
<a href="#">国际</a>
<a href="#">经济</a>
<a href="#">社会</a>
<a href="#">法治</a>
<a href="#">军事</a>
<a href="#">文娱</a>
</div>
</div>
<div class="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/assets/imgs/news1.jpg" alt="Image 1" style="height: 400px;">
</div>
<div class="carousel-item">
<img src="/assets/imgs/news2.jpg" alt="Image 2" style="height: 400px;">
</div>
<div class="carousel-item">
<img src="/assets/imgs/news3.jpg" alt="Image 3" style="height: 400px;">
</div>
</div>
<!-- 可选：添加导航按钮 -->
<button class="carousel-control prev">❮</button>
<button class="carousel-control next">❯</button>
</div>
<hr>
<div class="two">
<div class="two_left">
<img src="/assets/imgs/news4.jpg" alt="4">
</div>
<div class="two_right">
<div>
<a href="#">“熊猫杯”日本青年感知中国征文大赛颁奖仪式暨十周年纪念活动举行</a>
</div>
<div style="margin-top: 1rem; color: gray;">
9月23日，由中国外文局亚太传播中心（人民中国杂志社、中国报道杂志社）、中国驻日本大使馆、日本科学协会共同主办的“熊猫杯”日本青年感知中国征文大赛颁奖仪式暨十周年纪念活动在京举行。
</div>
</div>
</div>
<hr>
<div class="two">
<div class="two_left">
<img src="/assets/imgs/news5.jpg" alt="4" style="width: 19.2rem;">
</div>
<div class="two_right">
<div>
<a href="#">共享经验 共话合作 共谋未来——2024金砖国家治国理政研讨会暨人文交流论坛在俄罗斯莫斯科举行</a>
</div>
<div style="margin-top: 1rem; color: gray;">
2024年9月23日，2024金砖国家治国理政研讨会暨人文交流论坛在俄罗斯莫斯科举行。中宣部副部长王纲、俄罗斯总统国际文化合作事务特使米哈伊尔·施维特科伊出席会议并分别发表主旨演讲。
</div>
</div>
</div>
</div>
</body>
</html>// script.js
document.addEventListener('DOMContentLoaded', function() {
const carouselInner = document.querySelector('.carousel-inner');
const items = document.querySelectorAll('.carousel-item');
const prevBtn = document.querySelector('.carousel-control.prev');
const nextBtn = document.querySelector('.carousel-control.next');
let currentIndex = 0;
function updateCarousel() {
const offset = -currentIndex * 100;
carouselInner.style.transform = `translateX(${offset}%)`;
}
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex > 0) ? currentIndex - 1 : items.length - 1;
updateCarousel();
});
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex < items.length - 1) ? currentIndex + 1 : 0;
updateCarousel();
});
// 可选：自动播放功能
setInterval(() => {
currentIndex = (currentIndex < items.length - 1) ? currentIndex + 1 : 0;
updateCarousel();
}, 3000); // 每3秒切换一次
});
思维导图
扫一扫
689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
