1. 首页
  2. 标签
  3. Javascript
JS中map()使用记录
System
2024-08-23
所有,javascript

在JavaScript中，map()函数是一个强大的工具，可以用来转换数组中的每个元素。当你需要对数组中的每个元素进行某种操作并返回一个新数组时，map()函数非常有用。

下面是一个使用map()函数的简单例子，我们将对一个数组中的每个数字进行平方：




const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); // 输出: [1, 4, 9, 16, 25]

在这个例子中，map()函数接受一个箭头函数作为参数，该箭头函数对数组numbers中的每个元素进行操作（乘以自身），然后返回一个新的数组squaredNumbers，其中包含了所有操作后的结果。

除了使用箭头函数，你也可以使用常规函数或者类。例如，如果你有一个对象数组，你可以使用map()来转换或提取对象中的某个属性：




const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];
 
const names = users.map(user => user.name);
console.log(names); // 输出: ['Alice', 'Bob', 'Charlie']

在这个例子中，我们使用map()函数提取用户数组中每个用户对象的name属性，并返回一个包含所有名字的新数组。

- 阅读更多 -
JS如何配合input框实现模糊搜索
System
2024-08-23
所有,javascript

在JavaScript中，要结合input框实现模糊搜索，你可以监听input框的input事件，然后使用该事件中的target.value来获取输入的内容，接着根据这个内容筛选你的搜索数据集合。

以下是一个简单的例子，假设你有一个列表需要根据输入的关键词进行模糊搜索：

HTML部分：




<input type="text" id="searchInput" placeholder="Search...">
<ul id="searchResults">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <!-- 更多列表项 -->
</ul>

JavaScript部分：




document.getElementById('searchInput').addEventListener('input', function() {
  var input = this.value.toLowerCase(); // 获取输入并转换为小写
  var items = document.querySelectorAll('#searchResults li'); // 获取所有列表项
  items.forEach(function(item) {
    var text = item.textContent || item.innerText; // 获取列表项文本
    var match = text.toLowerCase().includes(input); // 检查文本是否包含输入
    if (match) {
      item.style.display = ''; // 如果匹配，显示该项
    } else {
      item.style.display = 'none'; // 如果不匹配，隐藏该项
    }
  });
});

在这个例子中，每当用户在input框中输入时，都会触发一个事件处理函数，该函数将遍历列表中的每一个li元素，检查是否包含输入的文本。如果包含，则显示该元素；如果不包含，则隐藏该元素。这样就实现了模糊搜索的功能。

- 阅读更多 -
用HTML、CSS和JS打造绚丽的雪花飘落效果
System
2024-08-23
所有,javascript



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snowflake Animation</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .snowflake {
    position: fixed;
    background-color: white;
    border-radius: 50%;
    transform: translate(-50%, -100%);
    pointer-events: none;
  }
</style>
</head>
<body>
<script>
  class Snowflake {
    constructor() {
      this.snowflake = document.createElement('div');
      this.snowflake.classList.add('snowflake');
      this.size = Math.random() * 10 + 10;
      this.speed = Math.random() * 2 + 1;
      this.x = Math.random() * window.innerWidth;
      this.y = Math.random() * -window.innerHeight;
      this.snowflake.style.width = `${this.size}px`;
      this.snowflake.style.height = `${this.size}px`;
      document.body.appendChild(this.snowflake);
      this.update();
    }
    update() {
      this.y += this.speed;
      this.snowflake.style.transform = `translate(${this.x}px, ${this.y}px)`;
      if (this.y > window.innerHeight) {
        this.snowflake.remove();
      }
      requestAnimationFrame(() => this.update());
    }
  }
 
  const snowflakes = [];
  for (let i = 0; i < 50; i++) {
    snowflakes.push(new Snowflake());
  }
</script>
</body>
</html>

这段代码创建了一个简单的雪花飘落效果。它使用了JavaScript中的类来构建每个雪花对象，每个对象都有自己的大小、速度和初始位置。每个雪花的CSS类定义了基本的样式，并且JavaScript代码负责更新每个雪花的位置，并移除那些移出屏幕的雪花。这个简单的示例展示了如何用JavaScript和CSS创建交互式动画效果。

- 阅读更多 -
js 进阶 ---剩余参数和arguments对象
System
2024-08-23
所有,javascript

在JavaScript中，我们可以使用...(剩余参数)语法来获取函数的多余参数，并将它们作为一个数组。同时，我们还可以使用arguments对象来访问所有传递给函数的参数。

  1. 使用剩余参数



function sum(...values) {
  let sum = 0;
  for (let val of values) {
    sum += val;
  }
  return sum;
}
 
console.log(sum(1, 2, 3)); // 输出：6

在这个例子中，我们定义了一个名为sum的函数，它接受任意数量的参数。我们使用...values语法来获取所有的参数，并将它们作为一个数组。然后我们遍历这个数组并将所有的值加起来，返回最终的总和。

  1. 使用arguments对象



function printArgs() {
  console.log(arguments);
}
 
printArgs('Hello', 'World'); // 输出：[Arguments] { '0': 'Hello', '1': 'World' }

在这个例子中，我们定义了一个名为printArgs的函数，它接受任意数量的参数。我们使用arguments对象来访问所有传递给函数的参数。然后我们打印出arguments对象，它是一个类数组对象，包含了所有传递给函数的参数。

注意：剩余参数和arguments对象应该谨慎使用，因为在使用它们时，你可能会忽略参数的顺序，这可能会导致代码的可读性降低。

- 阅读更多 -
JS生成id的方法(多种解决方案)_js生成唯一id，2024年最新2024年最新前端面试精讲
System
2024-08-23
所有,javascript



// 解法1: 使用UUID生成唯一ID
function generateUUID() {
    var d = new Date().getTime(); //Timestamp
    var d2 = (performance && performance.now && (performance.now()*1000)) || 0; //Time in microseconds since page-load or 0 if unsupported
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16; //random number between 0 and 16
        if(d > 0) { //Use timestamp until depleted
            r = (d + r)%16 | 0;
            d = Math.floor(d/16);
        } else { //Use microseconds since page-load if supported
            r = (d2 + r)%16 | 0;
            d2 = Math.floor(d2/16);
        }
        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
}
 
// 使用
var uniqueId = generateUUID();
console.log(uniqueId);

这段代码使用了一个简化版本的UUID生成方法，它基于当前的时间戳和性能数据生成一个看似随机的字符串，可以用作生成唯一ID。这种方法的优点是不需要外部依赖，但在某些特定环境下可能存在重复的风险。

- 阅读更多 -
【延伸学习】TS（JS）类的继承（prototype、call、apply，extends）
System
2024-08-23
所有,javascript



// 基类
class Animal {
  name: string;
 
  constructor(name: string) {
    this.name = name;
  }
 
  move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}
 
// 继承自Animal的子类
class Dog extends Animal {
  bark() {
    console.log('Woof!');
  }
}
 
// 使用prototype属性实现继承
function Animal() {
  this.name = 'Animal';
}
 
Animal.prototype.move = function(distanceInMeters: number) {
  console.log(`${this.name} moved ${distanceInMeters}m.`);
};
 
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
 
const dog = new Dog();
dog.name = 'Buddy';
dog.bark = function() { console.log('Woof!'); };
dog.move(10);
 
// 使用call或apply调用父类构造函数
class Cat extends Animal {
  constructor(name: string) {
    super.constructor.call(this, name);
  }
 
  meow() {
    console.log('Meow!');
  }
}
 
const cat = new Cat('Kitty');
cat.move(5);
 
// TypeScript中的extends关键字也可以用于接口继承
interface Animal {
  name: string;
  move: (distanceInMeters: number) => void;
}
 
interface Dog extends Animal {
  bark: () => void;
}
 
// 实现接口
const dog: Dog = {
  name: 'Rex',
  move: (distanceInMeters = 0) => {
    console.log(`${dog.name} moved ${distanceInMeters}m.`);
  },
  bark: () => {
    console.log('Woof!');
  },
};

这个代码示例展示了如何在TypeScript中使用类继承、prototype属性以及call和apply方法来实现继承。同时，也演示了如何在TypeScript中使用接口来实现多态行为。

- 阅读更多 -
js解析.shp文件
System
2024-08-23
所有,javascript

在JavaScript中，没有内置的方法来解析.shp文件，因为.shp文件是一种特定于GIS（地理信息系统）的二进制格式。然而，你可以使用第三方库，如shpjs来解析.shp文件。

以下是使用shpjs解析.shp文件的步骤：

  1. 安装shpjs库。



npm install shpjs
  1. 在你的JavaScript代码中引入shpjs库。
  2. 使用shpjs的API来解析.shp文件。

示例代码：




import { parseShp } from 'shpjs';
 
// 假设你已经通过某种方式获取到了shp文件的ArrayBuffer数据
function fetchShpFile(url) {
  return fetch(url).then(response => response.arrayBuffer());
}
 
fetchShpFile('path/to/your/file.shp')
  .then(arrayBuffer => parseShp(arrayBuffer))
  .then(geoJSON => {
    // 在这里处理解析得到的GeoJSON数据
    console.log(geoJSON);
  })
  .catch(error => {
    console.error('Error parsing SHP file:', error);
  });

请注意，这个例子假设你已经有方法来获取.shp文件的ArrayBuffer。在实际应用中，你可能需要使用fetch或其他方式来获取文件。

shpjs库可能不支持所有.shp文件的特性，如果你的文件包含特殊的或不常见的数据，你可能需要查看库的文档，或者使用其他支持更多特性的库。

- 阅读更多 -
next.js app目录 i18n国际化简单实现
System
2024-08-23
所有,javascript



// next.config.js
const { i18n } = require('./next-i18next.config');
 
module.exports = {
  i18n,
  // 其他配置...
};
 
// next-i18next.config.js
const { i18n } = require('./i18n');
 
module.exports = {
  i18n,
};
 
// i18n.js
module.exports = {
  i18n: {
    // 定义支持的语言列表
    locales: ['en', 'fr', 'es'],
    // 默认语言
    defaultLocale: 'en',
  },
  // 其他配置...
};

这个代码实例展示了如何在Next.js应用中配置i18n国际化支持。首先，在next.config.js中导入并使用next-i18next.config.js中定义的i18n配置。然后，在next-i18next.config.js中导出了一个对象，该对象包含了i18n配置和语言列表。最后，在i18n.js文件中定义了支持的语言列表和默认语言。这样，Next.js应用就可以支持国际化了。

- 阅读更多 -
从零开始NEXT.js——服务器组件
System
2024-08-23
所有,javascript

在NEXT.js中，我们可以使用“服务器组件”来处理需要直接在服务器端执行的逻辑，并将结果传递给客户端。服务器组件是一个以.server.js结尾的文件，它可以导入任何Node.js模块，并且只在服务器端执行。

以下是一个简单的服务器组件示例，它返回当前的服务器时间：




// pages/api/time.server.js
export default async function handler(req, res) {
  const time = new Date().toLocaleTimeString();
  res.send(`当前服务器时间是：${time}`);
}

在客户端，你可以使用fetch函数来获取这个服务器组件的响应：




// pages/index.js
export default function Home() {
  const [serverTime, setServerTime] = useState('');
 
  useEffect(() => {
    fetch('/api/time')
      .then(res => res.text())
      .then(time => setServerTime(time));
  }, []);
 
  return (
    <div>
      <p>服务器时间: {serverTime}</p>
    </div>
  );
}

在这个例子中，服务器组件/pages/api/time.server.js返回服务器的当前时间，然后客户端通过调用这个API，获取并展示服务器时间。这个过程是在服务器端完成的，客户端只负责展示。

- 阅读更多 -
three.js: gltf模型设置发光描边
System
2024-08-23
所有,javascript

在Three.js中，要为GLTF模型设置发光描边，你需要使用MeshLambertMaterial或MeshPhongMaterial作为材质，并将emissive和emissiveIntensity属性设置为使模型发光。然后，你可以使用MeshLine和MeshLineMaterial来描边模型。

以下是一个简单的例子，展示如何为GLTF模型设置发光描边：




import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { MeshLine, MeshLineMaterial } from 'three.meshline';
 
// 创建场景、摄像机和渲染器
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);
 
// 加载GLTF模型
const loader = new GLTFLoader();
loader.load('path/to/your/model.gltf', (gltf) => {
  const model = gltf.scene;
  scene.add(model);
 
  // 设置模型材质发光描边
  model.traverse((child) => {
    if (child.isMesh) {
      const material = new THREE.MeshPhongMaterial({
        color: 0xffffff,
        emissive: 0xffffff, // 设置发光颜色
        emissiveIntensity: 0.5, // 设定发光强度
        side: THREE.DoubleSide, // 两面可见
        transparent: true, // 开启透明
        opacity: 0.75, // 设置透明度
      });
      child.material = material;
 
      // 描边部分
      const geometry = new THREE.EdgesGeometry(child.geometry);
      const outlineMaterial = new MeshLineMaterial({
        color: 0xffffff,
        linewidth: 2,
        transparent: true,
        opacity: 0.8,
        depthTest: false,
      });
      const mesh = new THREE.Mesh(geometry, outlineMaterial);
      child.add(mesh);
    }
  });
}, undefined, (error) => {
  console.error(error);
});
 
camera.position.z = 5;
 
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
 
animate();

在这个例子中，我们首先加载GLTF模型，然后遍历模型的所有网格部分，将它们的材质设置为发光的MeshPhongMaterial。之后，我们使用EdgesGeometry来创建网格的边缘，并使用MeshLineMaterial来描绘这些边缘。通过调整emissive和emissiveIntensity属性，你可以控制模型的发光强度。通过调整linewidth和opacity属性，你可以控制描边的宽度和透明度。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号