标签 Javascript 下的文章

JavaScript map对象/set对象详解

2024-08-26

Map和Set是ES6中引入的新的数据结构，它们分别提供了键值对的集合和唯一值的集合。

Map对象

Map对象保存键值对，并且可以记住键的原始插入顺序。任何值(对象都可以作为一个键或一个值)。

创建Map对象：




let map = new Map();

添加元素：




map.set('key1', 'value1');
map.set('key2', 'value2');

获取元素：




map.get('key1'); // 'value1'

检查元素是否存在：




map.has('key1'); // true

删除元素：




map.delete('key1'); // true

清空所有元素：




map.clear();

获取所有键/值：




map.keys(); // MapIterator { 'key1', 'key2' }
map.values(); // MapIterator { 'value1', 'value2' }
map.entries(); // MapIterator { [ 'key1', 'value1' ], [ 'key2', 'value2' ] }

Set对象

Set对象允许你存储任何类型的唯一值，无论是原始值或者对象引用。

创建Set对象：




let set = new Set();

添加元素：




set.add(1);
set.add('2');

删除元素：




set.delete(1); // true

检查元素是否存在：




set.has(1); // false

获取所有元素：




set.values(); // SetIterator { 1, '2' }
set.entries(); // SetIterator { [ 1, 1 ], [ '2', '2' ] }

清空所有元素：




set.clear();

以上就是Map和Set对象的基本使用方法。在实际开发中，这两个对象可以极大地提高我们的编程效率和代码质量。

2024-08-26




// 防抖函数: 在函数执行时，如果在设定的等待时间内再次调用函数，则重新设置等待执行时间。
function debounce(fn, wait) {
    let timeout = null;
    return function() {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait);
        if (callNow) fn.apply(context, args);
    };
}
 
// 节流函数: 确保一定时间内只执行一次函数。
function throttle(fn, wait) {
    let previous = 0;
    return function() {
        let context = this;
        let args = arguments;
        let now = new Date();
        if (now - previous > wait) {
            fn.apply(context, args);
            previous = now;
        }
    };
}
 
// 使用示例
// 假设 handleDebounce 和 handleThrottle 是绑定了事件监听的函数
let handleDebounce = debounce(function() {
    console.log('防抖函数执行了！');
}, 1000);
 
let handleThrottle = throttle(function() {
    console.log('节流函数执行了！');
}, 1000);
 
// 用户触发事件时，调用防抖或节流函数
document.getElementById('debounceButton').addEventListener('click', handleDebounce);
document.getElementById('throttleButton').addEventListener('click', handleThrottle);

这段代码定义了防抖和节流函数，并展示了如何使用它们来处理事件监听中的函数执行。在实际应用中，防抖用于输入框的搜索功能，防止用户输入时频繁触发搜索请求，而节流用于鼠标移动或滚动事件，确保事件处理器被频繁调用时只执行一次。

JavaScript实现手写签名，可触屏手写，支持移动端与PC端双端保存

2024-08-26

实现手写签名功能，可以使用HTML5的<canvas>元素。以下是一个简单的示例，展示了如何在网页上实现手写签名，并支持在移动端和桌面端上使用。

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signature Pad</title>
<style>
  canvas {
    border: 1px solid #000;
    touch-action: none;
  }
</style>
</head>
<body>
<canvas id="signature-pad" width="300" height="150"></canvas>
 
<script src="signature.js"></script>
</body>
</html>

JavaScript部分 (signature.js):




const canvas = document.getElementById('signature-pad');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;
 
const resizeCanvas = () => {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
};
 
const draw = (e) => {
  if (!isDrawing) return;
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];
};
 
const startDrawing = (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
};
 
const stopDrawing = () => {
  isDrawing = false;
};
 
// Event listeners
canvas.addEventListener('mousedown', (e) => {
  e.preventDefault();
  startDrawing(e);
  draw(e);
});
 
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseleave', stopDrawing);
 
canvas.addEventListener('touchstart', (e) => {
  e.preventDefault();
  startDrawing(e.touches[0]);
  draw(e.touches[0]);
});
 
canvas.addEventListener('touchmove', (e) => {
  e.preventDefault();
  draw(e.touches[0]);
});
 
canvas.addEventListener('touchend', stopDrawing);
 
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

这段代码提供了基本的手写签名功能，并且支持鼠标和触摸屏操作。在移动端上，你可能需要额外处理触摸事件，以确保签名的流畅性和清晰度。此外，你可以添加清除签名的功能，以及将签名转换为图像等额外的功能。

vue项目中使用jsplumb总结

2024-08-26

在Vue项目中使用jsPlumb进行可视化流程图的绘制，你需要先安装jsPlumb库：




npm install jsplumb

然后在你的Vue组件中引入并初始化jsPlumb：




<template>
  <div ref="diagramContainer">
    <!-- 这里将用于显示流程图的容器 -->
  </div>
</template>
 
<script>
import jsPlumb from 'jsplumb';
 
export default {
  name: 'Flowchart',
  data() {
    return {
      jsPlumbInstance: null,
    };
  },
  mounted() {
    this.jsPlumbInstance = jsPlumb.getInstance();
    this.initDiagram();
  },
  methods: {
    initDiagram() {
      // 初始化jsPlumb配置
      this.jsPlumbInstance.setContainer(this.$refs.diagramContainer);
 
      // 配置连线的参数
      const connectorOptions = {
        endpoint: 'Dot',
        paintStyle: {
          stroke: '#1e8151',
          fill: 'transparent',
        },
        hoverPaintStyle: {
          stroke: '#216477',
          fill: 'transparent',
        },
        connectorStyle: {
          stroke: '#1e8151',
          fill: 'transparent',
        },
        connectorHoverStyle: {
          stroke: '#216477',
          fill: 'transparent',
        },
      };
 
      // 添加端点
      this.jsPlumbInstance.addEndpoint('flowchartNode1', {
        anchor: 'BottomCenter',
      }, connectorOptions);
 
      this.jsPlumbInstance.addEndpoint('flowchartNode2', {
        anchor: 'TopCenter',
      }, connectorOptions);
 
      // 连接端点
      this.jsPlumbInstance.connect({
        source: 'flowchartNode1',
        target: 'flowchartNode2',
      });
    },
  },
};
</script>
 
<style>
.flowchartNode1, .flowchartNode2 {
  /* 定义节点的样式 */
  width: 100px;
  height: 40px;
  position: absolute;
  top: 50px;
  left: 50px;
}
</style>

在这个例子中，我们创建了一个Vue组件，该组件在mounted钩子中初始化了jsPlumb实例，并设置了流程图的容器。然后我们定义了连线的参数并添加了两个带有端点的节点，最后我们连接了这两个节点。这样就形成了一个简单的流程图。

JAVA中将XML转JSON

2024-08-26

在Java中，可以使用第三方库如org.json和org.json.JSONObject以及org.w3c.dom和javax.xml.parsers.DocumentBuilderFactory来实现XML到JSON的转换。以下是一个简单的例子：




import org.json.JSONObject;
import org.w3c.dom.Document;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.DocumentBuilder;
import org.json.XML;
 
public class XmlToJsonConverter {
    public static void main(String[] args) {
        String xmlString = "<test><item>Hello</item><item>World</item></test>";
        JSONObject jsonObject = XML.toJSONObject(xmlString);
        System.out.println(jsonObject.toString(2)); // 2 is the indent factor
    }
}

在这个例子中，我们使用了org.json.XML类的toJSONObject方法来转换XML字符串到JSON对象。然后我们打印出格式化的JSON字符串，其中的参数2表示使用两个空格来缩进JSON。

确保你的项目中包含了org.json库，可以通过Maven或者其他依赖管理工具添加依赖。




<dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20210307</version>
</dependency>

请注意，这个例子假设你的XML结构比较简单，如果XML结构复杂，可能需要编写更复杂的逻辑来处理特定的情况。

java hutool工具类处理json的常用方法

2024-08-26

Hutool是一个Java工具类库，它包含了一些实用的API，包括处理JSON的方法。以下是一些常用的Hutool处理JSON的方法及其使用示例：

将Java对象转换为JSON字符串：




import cn.hutool.json.JSONUtil;
 
public class Example {
    public static void main(String[] args) {
        User user = new User("张三", 25);
        String jsonStr = JSONUtil.toJsonStr(user);
        System.out.println(jsonStr);
    }
}
 
class User {
    private String name;
    private int age;
 
    public User(String name, int age) {
        this.name = name;
        this.age = age;
    }
 
    // getters and setters
}

解析JSON字符串为Java对象：




import cn.hutool.json.JSONUtil;
 
public class Example {
    public static void main(String[] args) {
        String jsonStr = "{\"name\":\"张三\",\"age\":25}";
        User user = JSONUtil.toBean(jsonStr, User.class);
        System.out.println(user.getName());
    }
}
 
class User {
    private String name;
    private int age;
 
    // getters and setters
}

从JSON字符串中获取指定字段的值：




import cn.hutool.json.JSONUtil;
 
public class Example {
    public static void main(String[] args) {
        String jsonStr = "{\"name\":\"张三\",\"age\":25}";
        String name = JSONUtil.getStr(jsonStr, "name");
        System.out.println(name);
    }
}

判断JSON字符串是否包含某个字段：




import cn.hutool.json.JSONUtil;
 
public class Example {
    public static void main(String[] args) {
        String jsonStr = "{\"name\":\"张三\",\"age\":25}";
        boolean contains = JSONUtil.containsKey(jsonStr, "name");
        System.out.println(contains);
    }
}

创建JSON对象并添加数据：




import cn.hutool.json.JSONObject;
 
public class Example {
    public static void main(String[] args) {
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("name", "张三");
        jsonObject.put("age", 25);
        System.out.println(jsonObject.toString());
    }
}

这些方法提供了一个基本框架来处理JSON数据。Hutool的JSON处理非常灵活，可以轻松地序列化和反序列化对象，解析和生成JSON字符串。

【JavaScript】字符串的正则匹配和替换

2024-08-26




// 定义一个函数，用于处理字符串的正则表达式匹配和替换
function regexpReplace(str, pattern, replacement) {
  // 使用正则表达式和String的replace方法进行匹配和替换
  const regex = new RegExp(pattern, 'g'); // 'g'标志表示全局匹配
  return str.replace(regex, replacement);
}
 
// 示例使用
const originalString = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
const pattern = 'dog';
const replacement = 'monkey';
 
// 调用函数进行替换
const resultString = regexpReplace(originalString, pattern, replacement);
 
console.log(resultString); // 输出: The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy?

这段代码定义了一个regexpReplace函数，它接受三个参数：一个字符串str，一个匹配模式pattern，以及一个用于替换的字符串replacement。函数内部创建了一个正则表达式对象，并使用replace方法进行全局替换操作。然后，我们提供了一个使用例子，展示了如何使用这个函数来替换原始字符串中的单词"dog"为"monkey"。

2024-08-26




import com.paypal.http.HttpResponse;
import com.paypal.orders.Order;
import com.paypal.orders.OrderGetRequest;
import com.paypal.payments.Capture;
import com.paypal.payments.CaptureRequest;
import com.paypal.payments.Links;
import com.paypal.payments.Payment;
import com.paypal.payments.Refund;
import com.paypal.payments.RefundRequest;
import com.paypal.payments.Transaction;
 
// 创建支付并获取PayPal订单ID
public String createPaymentAndGetOrderId() {
    // 创建PayPal支付请求逻辑...
    // 返回生成的PayPal订单ID
    return "paypal-order-id";
}
 
// 使用PayPal订单ID获取订单信息
public Order getOrder(String orderId) {
    OrderGetRequest request = new OrderGetRequest(orderId);
    return order.execute();
}
 
// 通过PayPal订单ID执行支付
public String executePayment(String orderId) {
    // 构建Capture请求，需要包含orderId和payerId
    CaptureRequest captureRequest = new CaptureRequest(orderId);
    captureRequest.setPayerId("payer-id"); // 获取payerId的逻辑
    // 执行Capture操作
    HttpResponse<Capture> response = captureRequest.execute();
    // 获取交易状态
    Capture capture = response.result();
    Transaction transaction = capture.transactions().get(0);
    // 返回支付状态
    return transaction.relatedResources().capture().status();
}
 
// 通过PayPal订单ID执行退款
public Refund executeRefund(String orderId, String captureId) {
    RefundRequest refundRequest = new RefundRequest();
    refundRequest.setAmount(new com.paypal.payments.Amount()); // 设置退款金额
    refundRequest.setInvoiceNumber("INVOICE-NUMBER-HERE"); // 设置退款发票号
    refundRequest.setNote("Refund note"); // 设置退款注释
    refundRequest.setCaptureId(captureId); // 设置要退款的捕获事务ID
    // 执行Refund操作
    HttpResponse<Refund> refundResponse = refundRequest.execute();
    return refundResponse.result();
}

这个代码示例提供了创建PayPal支付、获取订单信息、执行支付和退款的核心函数。在实际应用中，需要补充获取payerId、设置退款金额、发票号等细节。此外，为了安全性和模块化，应当在实际代码中对PayPal客户端进行正确的初始化和配置。

JavaScripts数组里的对象排序的24个方法

2024-08-26

在JavaScript中，有许多方法可以用于对数组中的对象进行排序。以下是24种排序方法的示例代码：

使用Array.prototype.sort()和Object.values()




let arr = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 22 },
  { name: 'Doe', age: 21 }
];
 
arr.sort((a, b) => a.age - b.age);
 
console.log(arr);

使用Array.prototype.sort()和Object.values()，按年龄降序排序




let arr = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 22 },
  { name: 'Doe', age: 21 }
];
 
arr.sort((a, b) => b.age - a.age);
 
console.log(arr);

使用lodash的\_.orderBy()




const _ = require('lodash');
 
let arr = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 22 },
  { name: 'Doe', age: 21 }
];
 
arr = _.orderBy(arr, 'age', 'asc');
 
console.log(arr);

使用lodash的\_.orderBy()，按年龄降序排序




const _ = require('lodash');
 
let arr = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 22 },
  { name: 'Doe', age: 21 }
];
 
arr = _.orderBy(arr, 'age', 'desc');
 
console.log(arr);

使用Ramda的R.sort()




const R = require('ramda');
 
let arr = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 22 },
  { name: 'Doe', age: 21 }
];
 
arr = R.sort(R.ascend(R.prop('age')), arr);
 
console.log(arr);

使用Ramda的R.sort()，按年龄降序排序




const R = require('ramda');
 
let arr = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 22 },
  { name: 'Doe', age: 21 }
];
 
arr = R.sort(R.descend(R.prop('age')), arr);
 
console.log(arr);

使用Lodash的\_.sortBy()




const _ = require('lodash');
 
let arr = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 22 },
  { name: 'Doe', age: 21 }
];
 
arr = _.sortBy(arr, 'age');
 
console.log(arr);

使用Lodash的\_.sortBy()，按年龄降序排序




const _ = require('lodash');
 
let arr = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 22 },
  { name: 'Doe', age: 21 }
];
 
arr = _.sortBy(arr, [o => -o.age]);
 
console.log(arr);

使用Ramda的R.sortBy()




const R = require('ramda');
 
let arr = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 22 },
  { name: 'Doe', age: 21 }
];
 
arr = R.sortBy(R