分类 javascript 下的文章

2024-08-23

在JavaScript中，可以使用input元素的oninput事件来实时监听输入框值的变化。以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input Event Example</title>
<script>
function handleInputChange(event) {
    console.log(event.target.value);
}
</script>
</head>
<body>
 
<input type="text" oninput="handleInputChange(event)" placeholder="Type something here...">
 
</body>
</html>

在这个例子中，每当用户在输入框中输入或更改文本时，都会触发handleInputChange函数，并将输入框的当前值记录到控制台。

- 阅读更多 -

NodeJS Web 开发第五版

System

2024-08-23

所有,javascript

这是一个使用Express框架创建简单的RESTful API的示例代码。




const express = require('express');
const app = express();
const port = 3000;
 
// 中间件，用于解析JSON格式的请求体
app.use(express.json());
 
// 用户列表
const users = [];
 
// 用户API路由
app.get('/users', (req, res) => {
  res.send(users);
});
 
app.post('/users', (req, res) => {
  const newUser = {
    id: users.length + 1,
    name: req.body.name,
    email: req.body.email
  };
  users.push(newUser);
  res.status(201).send(newUser);
});
 
// 启动服务器
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

这段代码首先导入了Express框架，并初始化了一个简单的应用。定义了一个用户列表，并实现了两个API端点：一个用于获取用户列表，另一个用于创建新用户。创建新用户时，为用户分配了一个唯一的ID，并将其加入用户列表。最后，应用程序在指定端口监听请求。

System

2024-08-23

所有,javascript

题目描述：

给定一组URL组件，请编写代码将这些组件拼接成一个完整的URL。

示例：




输入：
protocol = "http"
host = "leetcode.com"
path = "/path"
query = "query=123"
fragment = "fragment"
输出：
"http://leetcode.com/path?query=123#fragment"

解决方案：

Java 实现：




public class Solution {
    public String buildUrl(String protocol, String host, String path, String query, String fragment) {
        StringBuilder url = new StringBuilder();
        url.append(protocol).append("://").append(host);
        if (path != null) {
            url.append('/').append(path.startsWith("/") ? path.substring(1) : path);
        }
        if (query != null) {
            url.append('?').append(query);
        }
        if (fragment != null) {
            url.append('#').append(fragment);
        }
        return url.toString();
    }
}

Python 实现：




class Solution:
    def buildUrl(self, protocol, host, path, query, fragment):
        url = protocol + "://" + host
        if path:
            url += '/' + path.lstrip('/')
        if query:
            url += '?' + query
        if fragment:
            url += '#' + fragment
        return url

C++ 实现：




#include <iostream>
#include <string>
 
std::string buildUrl(std::string protocol, std::string host, std::string path, std::string query, std::string fragment) {
    std::string url = protocol + "://" + host;
    if (!path.empty()) {
        url += '/' + path.substr(path.starts_with('/') ? 1 : 0);
    }
    if (!query.empty()) {
        url += '?' + query;
    }
    if (!fragment.empty()) {
        url += '#' + fragment;
    }
    return url;
}
 
int main() {
    std::string protocol = "http";
    std::string host = "leetcode.com";
    std::string path = "/path";
    std::string query = "query=123";
    std::string fragment = "fragment";
    std::cout << buildUrl(protocol, host, path, query, fragment) << std::endl;
    return 0;
}

JavaScript 实现：




function buildUrl(protocol, host, path, query, fragment) {
    let url = protocol + "://" + host;
    if (path) {
        url += '/' + path.replace(/^\//, '');
    }
    if (query) {
        url += '?' + query;
    }
    if (fragment) {
        url += '#' + fragment;
    }
    return url;
}
 
// 测试示例
console.log(buildUrl("http", "leetcode.com", "/path", "query=123", "fr

System

2024-08-23

所有,javascript




// Object.assign 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。
// 它将返回目标对象。
let target = { a: 1, b: 2 };
let source = { b: 4, c: 5 };
 
let returnedTarget = Object.assign(target, source);
console.log(returnedTarget); // { a: 1, b: 4, c: 5 }
 
// Object.values 方法返回一个给定对象自身可枚举属性值的数组，其顺序与对象中的顺序相同。
let obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]
 
// reduce 方法对数组中的每个元素执行一个提供的reducer函数（升序执行），
// 将其结果汇总为单个输出值。
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15
 
// rest 运算符(spread operator) 允许一个表达式被展开为一个新的数组
let fruits = ['apple', 'banana', 'mango'];
let newFruits = [...fruits];
console.log(newFruits); // ['apple', 'banana', 'mango']
 
// 使用 rest 运算符和 Object.assign 来复制数组
let clone = [...numbers];
console.log(clone); // [1, 2, 3, 4, 5]
 
// 使用 Object.values 和 reduce 来计算对象值的总和
let values = { first: 10, second: 20, third: 30 };
let sumOfValues = Object.values(values).reduce((total, num) => total + num, 0);
console.log(sumOfValues); // 60

System

2024-08-23

所有,javascript

在前端JavaScript、Java和MySQL中，字符串截取通常使用substr或substring方法。在Oracle中，使用SUBSTR函数。

JavaScript:
- substr方法：substr(startIndex, length)，从startIndex开始，截取长度为length的字符串。
- substring方法：substring(startIndex, endIndex)，从startIndex开始到endIndex（不包括endIndex）之间的字符串。
```
var str = "Hello, World!";
var substrResult = str.substr(0, 5); // 结果："Hello"
var substringResult = str.substring(0, 5); // 结果："Hello"
```
Java:
- substring方法：substring(startIndex, endIndex)，从startIndex开始到endIndex（不包括endIndex）之间的字符串。
```
String str = "Hello, World!";
String substrResult = str.substring(0, 5); // 结果："Hello"
```
MySQL:
- SUBSTR函数：SUBSTR(str, startIndex, length)，从startIndex开始，截取长度为length的字符串。
```
SET @str = 'Hello, World!';
SELECT SUBSTR(@str, 1, 5); // 结果：'Hello'
```

Oracle:

SUBSTR函数：与MySQL的SUBSTR用法相同。




SELECT SUBSTR('Hello, World!', 1, 5) FROM DUAL; // 结果：'Hello'

注意：在JavaScript中，如果省略length参数，则substr会截取从startIndex到字符串末尾的所有字符；在Java和MySQL中，如果省略length参数，则substring和SUBSTR会截取从startIndex到字符串末尾的所有字符。

- 阅读更多 -

压缩js 和还原压缩min.js

System

2024-08-23

所有,javascript

压缩（压缩js）和解压（还原压缩min.js）JavaScript 文件通常是开发过程中的一个步骤，以减少文件大小，便于网络传输。这可以通过工具如 Google Closure Compiler, Terser 或其他压缩工具实现。

压缩 JS 文件:

压缩 JS 文件通常会移除空格、换行和注释，并且还可能会进行更复杂的优化，例如 mangle 变量名、内联简单的函数等。

使用 Node.js 和 Terser 压缩 JS 文件:




const Terser = require('terser');
 
const filePath = 'path/to/yourfile.js';
const fileContent = fs.readFileSync(filePath, 'utf-8');
 
(async () => {
    const result = await Terser.minify(fileContent);
    fs.writeFileSync('path/to/yourfile.min.js', result.code);
})();

解压（还原压缩min.js）:

解压缩的过程通常是不可逆的，因为许多压缩工具会丢失元数据和注释。但是，可以使用一些工具进行反压缩，例如：

使用在线工具:

使用 Node.js 和 Terser 反压缩:




const Terser = require('terser');
 
const filePath = 'path/to/yourfile.min.js';
const fileContent = fs.readFileSync(filePath, 'utf-8');
 
(async () => {
    const result = await Terser.format(fileContent);
    fs.writeFileSync('path/to/yourfile.pretty.js', result.code);
})();

注意：压缩和解压缩的过程可能不是完全可逆的，压缩后的代码可能会丢失部分格式和注释，一些变量名也可能被 mangle （变形），所以在某些情况下可能无法完全还原原始代码。

- 阅读更多 -

js获取浏览器指纹

System

2024-08-23

所有,javascript

在JavaScript中，通常无法直接获取浏览器的指纹，因为这会涉及到用户的隐私。不过，可以通过一些技巧生成一个伪指纹，例如结合浏览器的fingerprint2库来生成一个基于用户设备的唯一标识。

以下是使用fingerprint2库生成浏览器指纹的示例代码：

首先，你需要引入fingerprint2库：




<script src="path/to/fingerprint2.js"></script>

然后，使用fingerprint2生成浏览器指纹：




// 初始化fingerprint2
Fingerprint2.get(function (result, components) {
    console.log(result); // 这是生成的浏览器指纹
});

这段代码会根据用户的浏览器信息（包括用户的浏览器名称、版本、插件、语言、屏幕分辨率等）生成一个唯一标识符，但请注意，这并不是真正的浏览器指纹，因为它不包含任何能够独一无二地识别用户身份的信息。

为了保护用户隐私，请务必在使用这类技术时清楚地向用户说明收集信息的目的，并确保这些信息不会被用于追踪用户。

- 阅读更多 -

JS ：深拷贝解析与实现（附structuredClone语法测试）

System

2024-08-23

所有,javascript




// 深拷贝解析与实现示例
 
// 定义一个深拷贝函数
function structuredClone(obj) {
    return new structuredClone.structuredClone(obj);
}
 
// 定义一个测试对象
const testObject = {
    a: 1,
    b: {
        c: 2,
        d: [3, 4]
    }
};
 
// 测试深拷贝函数
const clone = structuredClone(testObject);
console.log(clone); // 输出: { a: 1, b: { c: 2, d: [ 3, 4 ] } }
 
// 修改原始对象并确认深拷贝对象不受影响
testObject.a = 100;
testObject.b.c = 200;
testObject.b.d.push(5);
 
console.log(testObject); // 输出: { a: 100, b: { c: 200, d: [ 3, 4, 5 ] } }
console.log(clone);       // 输出: { a: 1, b: { c: 2, d: [ 3, 4 ] } }
 
// 注意: 实际的深拷贝实现可能需要递归地处理嵌套对象和数组，
// 并且需要考虑特殊的引用类型比如函数、Date、RegExp等。
// 这里的示例只是为了展示基本的用法。

这段代码定义了一个简单的structuredClone函数，用于执行深拷贝操作。然后定义了一个测试对象，并使用该函数创建了一个对象的深拷贝。接下来，修改原始对象的属性，并验证深拷贝对象不受影响。这个例子旨在展示如何使用structuredClone函数进行深拷贝操作，并提醒开发者深拷贝需要考虑到对象的所有引用。

- 阅读更多 -

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元素，检查是否包含输入的文本。如果包含，则显示该元素；如果不包含，则隐藏该元素。这样就实现了模糊搜索的功能。

- 阅读更多 -