// 方法1: 使用 filter 方法
let arr = [1, 2, 3, 4, 5];
arr = arr.filter(item => item !== 3); // [1, 2, 4, 5]
// 方法2: 使用 for 循环和 splice 方法
arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
if (arr[i] === 3) {
arr.splice(i, 1);
i--; // 因为删除元素后，数组长度会变，所以i需要回退
}
}
// 方法3: 使用 while 循环和 pop 方法
arr = [1, 2, 3, 4, 5];
let i = arr.length;
while (i--) {
if (arr[i] === 3) {
arr.pop();
}
}
// 方法4: 使用 reduce 方法
arr = [1, 2, 3, 4, 5];
arr = arr.reduce((acc, val) => {
if (val !== 3) {
acc.push(val);
}
return acc;
}, []);
// 方法5: 使用 Map 结构
arr = [1, 2, 3, 4, 5];
let map = new Map();
for (let i = 0; i < arr.length; i++) {
map.set(arr[i], true);
}
map.delete(3); // 删除键为3的元素
arr = [...map.keys()]; // 将Map的键转换回数组在JavaScript中，您可以使用document.cookie属性来设置和获取cookie。以下是如何封装设置和获取cookie的工具函数：
// 设置cookie
function setCookie(name, value, daysToLive) {
const expires = daysToLive ? `; expires=${new Date(Date.now() + daysToLive * 864e5).toUTCString()}` : '';
document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;
}
// 获取cookie
function getCookie(name) {
const matches = document.cookie.match(new RegExp(
`(?:^|; )${name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$&')}=([^;]*)`
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
// 使用示例
setCookie('user', 'John Doe', 7); // 设置cookie，有效期为7天
const user = getCookie('user'); // 获取cookie
console.log(user); // 输出: John Doe这里的setCookie函数接受cookie的名字、值和有效期（以天为单位）作为参数，并计算了过期时间。getCookie函数接受cookie的名字作为参数，并返回对应的值，如果cookie不存在则返回undefined。
题目描述：
一个猴子有X个桃子，它每天都会吃现有的一半（四舍五入到最近的整数），并且每天都会生产一个新的桃子。有一天它会吃掉所有的桃子。假设猴子不会死，问需要多少天它会吃掉N（0 < N < 2^31）个桃子。
输入描述：
每行包含一个正整数N，代表猴子吃的桃子数量。
输出描述：
输出猴子吃掉N个桃子所需的天数。
示例：
输入：
输出：
说明：
当输入为1时，猴子开始有1个桃子。第1天吃掉1个，生产1个，有2个桃子。第2天吃掉1个，生产1个，有2个桃子。总共需要2天。
解法：
import java.util.Scanner;
public class Main {
public static void main(String[] args) {
Scanner scanner = new Scanner(System.in);
while (scanner.hasNextInt()) {
int n = scanner.nextInt();
System.out.println(calculateDays(n));
}
scanner.close();
}
private static int calculateDays(int n) {
int days = 0;
while (n > 0) {
n = (n + 1) / 2; // 新产的桃子算上现有的桃子
days++;
}
return days;
}
}注意：
- 输入的N是指猴子吃掉的桃子数，而不是猴子一开始就有的桃子数。
- 每天吃的桃子数量是当前所有的桃子数量的一半（向上取整），新产的桃子数是原有的桃子数量加1。
- 每天结束后，猴子的总桃子数就是所有吃掉的桃子数量和新产的桃子数量之和。
- 当猴子吃掉所有的桃子，即peanuts之和为0时，计算结束。
要将 JavaScript 中 new Date() 生成的日期格式转换为 'yyyy-MM-dd HH:mm:ss' 格式，可以使用以下代码示例：
function formatDate(date) {
function padZero(num) {
return num < 10 ? '0' + num : num;
}
var year = date.getFullYear();
var month = padZero(date.getMonth() + 1); // 月份是从0开始的
var day = padZero(date.getDate());
var hours = padZero(date.getHours());
var minutes = padZero(date.getMinutes());
var seconds = padZero(date.getSeconds());
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
var date = new Date();
console.log(formatDate(date)); // 输出格式为 'yyyy-MM-dd HH:mm:ss'这段代码定义了一个 formatDate 函数，它接受一个 Date 对象作为参数，并返回一个格式化为 'yyyy-MM-dd HH:mm:ss' 的字符串。函数内部定义了一个辅助函数 padZero 来处理月份、日期、小时、分钟和秒钟小于10时的前缀0。最后返回的字符串模板字面量包含了格式化后的日期和时间。
Mapbox GL JS 是一个用于创建交互式地图的开源JavaScript库。由于Mapbox GL JS官方文档主要以英文提供，中文资料相对较少，我们可以通过翻译官方文档来帮助开发者更好地理解和使用Mapbox GL JS。
以下是一个简单的Mapbox GL JS的示例代码，展示了如何在网页上创建一个基本的交互式地图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mapbox GL JS 地图示例</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN'; // 替换为你的Mapbox访问令牌
var map = new mapboxgl.Map({
container: 'map', // 地图容器的id
style: 'mapbox://styles/mapbox/streets-v11', // 地图样式
center: [116.4073963, 39.9041999], // 地图中心点坐标
zoom: 11 // 地图缩放级别
});
</script>
</body>
</html>在这个示例中，你需要替换YOUR_ACCESS_TOKEN为你自己的Mapbox访问令牌，获取方式可以在Mapbox官网注册账号后获得。
如果你想要查看中文资源，可以考虑参考Mapbox官方文档的中文翻译版本，但请注意，由于翻译通常是由社区贡献者完成的，可能无法及时反映最新的信息。如果需要最新和最准确的信息，请直接参考官方英文文档。
// 假设我们已经有了一个HTML5 Canvas元素和相关的ctx绘图上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 地图数据，这里使用二维数组表示每个方格是否可以通行
var mapData = [
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 0, 0, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1]
];
// 地图的大小
var mapWidth = 8;
var mapHeight = 7;
// 地图的单元格大小
var cellSize = 32;
// 绘制地图
function drawMap() {
for (var y = 0; y < mapHeight; y++) {
for (var x = 0; x < mapWidth; x++) {
if (mapData[y][x] === 1) {
ctx.fillStyle = '#333'; // 绘制为深灰色的方块
ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
}
}
}
}
// 键盘按键处理
document.addEventListener('keydown', function(event) {
var keyCode = event.keyCode;
switch (keyCode) {
case 37: // 左键移动视图
break;
case 38: // 上移动视图
break;
case 39: // 右键移动视图
break;
case 40: // 下移动视图
break;
}
});
// 调用函数绘制地图
drawMap();这个代码示例展示了如何使用JavaScript和HTML5 Canvas来绘制一个简单的Q版地图，并且通过键盘的上下左右按键来控制地图场景的移动。代码中包含了绘制地图的函数drawMap和键盘按键的事件监听器，但没有实现实际的场景移动逻辑，因为这个逻辑取决于具体的游戏设计和上下文。
在Vue 3中使用Howler.js来实现音频播放，你需要首先安装Howler.js库，然后在你的Vue组件中引入并使用它。以下是一个简单的例子：
- 安装Howler.js：
npm install howler- 在Vue组件中使用Howler.js：
<template>
<div>
<button @click="playAudio">播放音频</button>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import { Howl } from 'howler';
export default defineComponent({
setup() {
const audio = new Howl({
src: ['your-audio-file.mp3'],
html5: true,
format: ['mp3']
});
const playAudio = () => {
audio.play();
};
return { playAudio };
},
});
</script>在这个例子中，我们首先导入了Howl类。然后在setup函数中，我们创建了一个Howl实例，指定了音频文件路径和格式。playAudio方法通过调用Howl实例的play方法来播放音频。在模板中，我们添加了一个按钮，当点击时会调用playAudio方法。
在Vue 3和Vite的组合中实现移动端和PC端的响应式布局，可以使用CSS的媒体查询来定义不同屏幕尺寸下的样式，并结合Vue的指令来动态调整DOM。
以下是一个简单的例子：
- 安装Vue 3和Vite:
npm create vite@latest my-vue-app --template vue-ts
cd my-vue-app
npm install- 在
src/App.vue中编写响应式布局的组件:
<template>
<div class="container">
<header>Header</header>
<main>
<aside>Side Content</aside>
<article>Main Content</article>
</main>
<footer>Footer</footer>
</div>
</template>
<script setup lang="ts">
// No script needed for basic layout
</script>
<style>
.container {
display: flex;
flex-direction: column;
}
header, footer {
text-align: center;
padding: 1rem 0;
}
main {
display: flex;
flex: 1;
}
aside {
width: 200px; /* 固定宽度或百分比 */
background-color: #f2f2f2;
}
article {
flex: 1;
background-color: #e2e2e2;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
main {
flex-direction: column;
}
aside, article {
width: 100%;
max-width: 100%;
}
}
</style>在上述代码中，.container是一个flex容器，用于组织页面的结构。header和footer保持在页面顶部和底部，而main部分包含侧边栏和主内容。媒体查询@media (max-width: 768px)用于在屏幕宽度小于768像素时改变布局，使侧边栏和主内容在移动端上占据全部宽度。
在实际应用中，你可能需要使用Vue的指令来根据屏幕宽度动态切换布局（例如使用v-if或v-show来控制移动端和PC端的显示），但上述代码提供了一个响应式的基础布局示例。
// 导入WebSocket库
const WebSocket = require('ws');
// 初始化WebSocket服务器实例
const wss = new WebSocket.Server({ port: 8080 });
// 监听连接事件
wss.on('connection', function connection(ws) {
// 监听消息事件
ws.on('message', function incoming(message) {
// 广播消息到所有连接的客户端
wss.clients.forEach(function each(client) {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
// 监听关闭连接事件
ws.on('close', function close() {
console.log('连接已关闭！');
});
// 监听错误事件
ws.on('error', function error(e) {
console.log('发生错误:', e);
});
});
console.log('WebSocket服务器运行在 ws://localhost:8080');这段代码使用了Node.js的ws库来创建一个简单的WebSocket服务器。服务器监听8080端口的连接，并将接收到的消息广播给所有其他的连接的客户端。同时，它还处理了关闭连接和错误事件。这是一个实战级的WebSocket实现，适合用于教学和实际应用的原型设计。
以下是20个基于Three.js的代码示例，涵盖了创建3D场景、添加几何体、添加材质和纹理、添加灯光以及动画等常见的3D场景元素。
- 创建一个简单的3D立方体:
// 创建场景
const scene = new THREE.Scene();
// 创建摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();- 创建一个带有纹理的3D球体:
// 加载纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');
// 创建材质
const material = new THREE.MeshBasicMaterial({map: texture});
const sphereGeometry = new THREE.SphereGeometry(1, 20, 20);
const sphere = new THREE.Mesh(sphereGeometry, material);
scene.add(sphere);- 添加环境光和点光源:
// 环境光
scene.add(new THREE.AmbientLight(0x404040));
// 点光源
const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(10, 0, 25);
scene.add(pointLight);- 使用OBJLoader加载复杂的3D模型:
const objLoader = new THREE.OBJLoader();
objLoader.load('path/to/model.obj', 'path/to/model.mtl', function (object) {
scene.add(object);
});- 添加鼠标旋转控制:
new THREE.OrbitControls(camera);- 添加简单的动画:
function animate() {
requestAnimationFrame(animate);
// 旋转立方体
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}- 使用GUI库添加可配置参数:
// 创建GUI
const gui = new dat.GUI();
gui.add(scene, 'fog').name('Fog');
gui.addColor(scene, 'background').name('Background Color');- 使用Post Processing添加后处理效果:
const renderPass = new THREE.RenderPass(scene, camera);
const effectPass = new THREE.ShaderPass(THREE.DigitalGlitch);
effectPass.uniforms['duration'].value = 2.0;
effectPass.uniforms['strength'].value = 1.5;
const composer = new THREE.EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(effectPass);