刘新修

获取JSON对象key及vulue

[

2023/09/01 09:29 | by 刘新修 ]

JavaScript代码

var arr = [
{
"原告性别": "女",
"出生日期": "XX1年1月1X日",
"居住地址": "北京市丰台区XXXXX",
"所属民族": "汉族",
"电话号码": "XXXXXX78",
"原告姓名": "XXX"
},
{
"原告性别": "男",
"出生日期": "1992年6月10日",
"居住地址": "北京市通州区XXXXX",
"所属民族": "汉族",
"电话号码": "18701519435",
"原告姓名": "xxx"
}
]
/*** 遍历数组中的JSON对象 ***/
for (var i=0; i<arr.length; i++){
var keys=Object.keys(arr[i]);
console.log('keys:', keys);
}
//keys: (6) ['原告性别', '出生日期', '居住地址', '所属民族', '电话号码', '原告姓名']

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(738)

JS 中如何优雅的使用多层嵌套属性而不会发生报错

[

2023/08/29 10:58 | by 刘新修 ]

平时在写js的时候遇到多层属性嵌套，一般大家敢直接用点使用吗？

有没有开发的时候好好的，某一时刻突然出现一个控制台报错类似：Uncaught TypeError: xxx is not a function

一般这种情况就是没有判断是否有值，如果数据是后端返回的，有可能后端就是没有值或者值的类型不对，这些情况都可能导致出现程序出错，一般我们需要进行判断，常见的判断就是

JavaScript代码

if(obj.a && obj.a.b && obj.a.b.c && obj.a.b.c.d){
// do something
}

如果层级太深或者类似判断逻辑太多，写起来有点烦，能把自己蠢哭。。。下面有一些优雅的方式解决这个问题。

方法1：

扁平化处理：后台处理 / 前端预处理, 防止出现不存在值的情况

方法2：

ES6 使用 CoffeeScript: a?.b?.c?.d

方法3：

JavaScript代码

function checkNested(obj /*, level1, level2, ... levelN*/) {
var args = Array.prototype.slice.call(arguments),
obj = args.shift();
for (var i = 0; i < args.length; i++) {
if (!obj || !obj.hasOwnProperty(args[i])) {
return false;
}
obj = obj[args[i]];
}
return true;
}
var test = {level1:{level2:{level3:'level3'}} };
checkNested(test, 'level1', 'level2', 'level3'); // true
checkNested(test, 'level1', 'level2', 'foo'); // false

方法4：

https://github.com/letsgetrandy/brototype

JavaScript代码

var myURL;
if (Bro(app).doYouEven('config.environment.buildURL')) {
myURL = app.config.environment.buildURL('dev');
}

方法5：

lodash

JavaScript代码

var object = { 'a': [{ 'b': { 'c': 3 } }] };
_.get(object, 'a[0].b.c');
// => 3
_.get(object, ['a', '0', 'b', 'c']);
// => 3
_.get(object, 'a.b.c', 'default');
// => 'default'

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(680)

Object.getOwnPropertyNames()

[

2023/08/28 16:29 | by 刘新修 ]

JavaScript代码

// 类数组对象
const obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.getOwnPropertyNames(obj).sort());
// ["0", "1", "2"]
Object.getOwnPropertyNames(obj).forEach((val, idx, array) => {
console.log(`${val} -> ${obj[val]}`);
});

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(566)

js比较俩个对象是否相等

[

2023/08/28 15:20 | by 刘新修 ]

一、使用Object.getOwnPropertyNames()

该方法和Object.keys()功能一样，不同的地方在于Object.getOwnPropertyNames返回对象本身全部的属性，而Object.keys返回对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）（即返回enumerable为false的属性）

共同点是俩者都不会返回自身原型链上的属性。

JavaScript代码

var obj = {"name":"liuxinxiu","age":18,"info":"1234"}
var obj2 = obj;
var obj3 = {"name":"liuxinxiu","age":18,"info":"123"}
function checkInfo(obj1, obj2){
//判断是否指向同一内存
if (obj1 === obj2) return true;
let bankInfo = Object.getOwnPropertyNames(obj1),
oldBankInfo = Object.getOwnPropertyNames(obj2)
//判断长度不相同直接返回不同
if(bankInfo.length !== oldBankInfo.length) return false
for(let i=0,max=bankInfo.length; i<max; i++){
let prop_name = bankInfo[i]
if(obj1[prop_name] !== obj2[prop_name]){
return false
}
}
return true
}
console.log(checkInfo(obj,obj3))

二、使用Object.keys()或者Object.entries().toString()

Object.keys()是将对象中键先取出来组成数组，然后先比较键。而后通过键在比较值

Object.entries()是将键和值分别组成俩个数组。然后使用toString将键值数组转化为字符串去比较

JavaScript代码

checkInfo() {
// object.keys
let bankInfo = Object.keys(this.params.bankInfo),
oldBankInfo = Object.keys(this.params.oldBankInfo)
if (oldBankInfo.length !== bankInfo.length) return false
for (let i = 0; i <= bankInfo.length - 1; i++) {
let key = bankInfo[i];
if (!oldBankInfo.includes(key)){
return false
}
if (this.params.oldBankInfo[key] !== this.params.bankInfo[key]){
return false
}
}
// object.entries
console.log(Object.entries(this.params.bankInfo).toString() === Object.entries(this.params.oldBankInfo).toString()) //true
console.log(Object.entries(this.params.bankInfo).toString()) //accountType,2,nationality,CHN,bankName,,bankCode,
console.log(Object.entries(this.params.oldBankInfo).toString()) //accountType,2,nationality,CHN,bankName,,bankCode,
}

三、使用JSON.stringify()或。适用于俩个对象属性顺序相同

JavaScript代码

let bankInfo = {
accountType : 2,
nationality:'CHN', //国籍
bankName : '', //银行名称
bankCode : '', //银行code
}
let oldBankInfo = {
accountType : 2,
nationality:'CHN', //国籍
bankName : '', //银行名称
bankCode : '', //银行code
}
let flag2 = JSON.stringify(bankInfo) == JSON.stringify(oldBankInfo)
console.log(flag2)

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(510)

shell(bash)替换字符串大全

[

2023/08/16 11:13 | by 刘新修 ]

1. 替换（只替换一个）

用varrB=${varA/str1/str2}

C#代码

$ var="AAAszip_BBB.zip";var2=${var/zip/ZIP};echo $var2};
AAAsZIP_BBB.zip
$ var="AAAszip_BBB.zip";var2=${var/.zip/.ZIP};echo $var2;
AAAszip_BBB.ZIP

2. 替换（替换所有）

用varB=${varA//str1/str2}

C#代码

$ var="AAAszip_BBB.zip";var2=${var//zip/ZIP};echo $var2;
AAAsZIP_BBB.ZIP

3. 替换（替换开头一个）

用varB=${varA/#str1/str2}

C#代码

$ var=".zipAAAszip_BBB.zip_CCC";var2=${var/#.zip/.ZIP};echo $var2;
.ZIPAAAszip_BBB.zip_CCC

不存在
varB=${varA//#str1/str2}

4. 替换（替换结尾一个）

用varB=${varA/%str1/str2}

C#代码

$ var="AAAszip_BBB.zip_CCC.zip";var2=${var/%.zip/.ZIP};echo $var2;
AAAszip_BBB.zip_CCC.ZIP

不存在
varB=${varA//%str1/str2}

而且可以很好地匹配到“.”点号

5. 截取，删除右边，保留左边，从右起最短匹配

用$varB=${varAa%<pattern>}，

C#代码

$ a="aaa=bbb";b=${a%=*};echo $b
aaa
$ a="http://localhost:3000/china/shanghai.html";b=${a%/*};echo $b
http://localhost:3000/china

6. 截取，删除右边，保留左边，从右起最长匹配

用$varb=${vara%%<pattern>}从右起最长匹配

C#代码

$ a="http://localhost:3000/china/shanghai.html";b=${a%%/*};echo $b
http:

7. 截取，删除左边，保留右边，从左起最短匹配

用$varb=${vara#<pattern>}

C#代码

$ a="aaa=bbb";b=${a#*=};echo $b
bbb
$ a="http://localhost:3000/china/shanghai.html";b=${a#*/};echo $b
/localhost:3000/china/shanghai.html

8. 截取，删除左边，保留右边，从左起最长匹配

用$varb=${vara##<pattern>}从左起最长匹配

C#代码

$ a="http://localhost:3000/china/shanghai.html";b=${a##*/};echo $b
shanghai.html

Linux/Unix | 评论(0) | 引用(0) | 阅读(599)

SHELL替换字符串内容

[

2023/08/11 17:22 | by 刘新修 ]

C#代码

//http://dl.ktm1234.com/injured/work-litigation/
//http://dl.ktm1234.com/XXX/jiaye/injured/work-litigation/
var="http://dl.ktm1234.com/injured/work-litigation/";var2=${var//com/com\/XXX\/jiaye};echo $var2;

结果：http://dl.ktm1234.com/XXX/jiaye/injured/work-litigation/

Linux/Unix | 评论(0) | 引用(0) | 阅读(490)

uniapp创建项目脚手架的区别

[

2023/08/09 11:49 | by 刘新修 ]

vue-cli 构建 uniapp 项目：

优点：

vue-cli 是一个强大的工具，可以快速构建出各种类型的项目，配置灵活，便于维护和管理。同时，其支持 TypeScript 等最新技术，可以提高开发效率和代码质量。

vue-cli 集成了丰富的插件和模板，可以帮助您快速搭建 uniapp 项目，并提供了丰富的功能和组件。

vue-cli 社区活跃度高，得到广泛应用和支持，很多开发者都已经熟悉了 vue-cli 的使用和优化。

缺点：

基于 vue-cli 构建 uniapp 项目需要一定的前端开发经验和技能，对初学者来说可能会有些困难。

构建出来的项目大小比较大，需要考虑如何压缩和优化代码，以提升页面加载速度。

HBuilderX.exe 构建 uniapp 项目：

优点：

HBuilderX.exe 是一款专门为 uniapp 开发提供的开发工具，可以快速搭建 uniapp 项目，支持调试、运行等功能，适合初学者或没有前端开发经验的开发者使用。

HBuilderX.exe 集成了丰富的组件和模板，可以快速搭建出各种类型的 uniapp 项目，并且自带了一些 UI 组件，方便快速开发。

HBuilderX.exe 教程和文档详尽，易于上手，初学者可以快速掌握。

缺点：

HBuilderX.exe 对于更高级的定制和优化需要进行配置和扩展，需要一定的前端开发经验和技能。

在使用 HBuilderX.exe 构建 uniapp 项目时可能会有一些限制，例如只支持部分平台等问题，需要根据项目需求选择适合的构建方式。

创建uni-app项目（步骤流程）

方式一：直接在HBuilder X上创建（常用）

在窗口栏找到“文件”=>新建=>项目

会在HBuilder X会在右下角提示项目创建成功，成功之后的项目目录结构如下：

方式二：使用命令行（vue-cli）创建

vue create -p dcloudio/uni-preset-vue my-project

创建成功之后，运行即可。

cd my-project

npm run serve

项目目录结构：

Tags: uniapp

vue | 评论(0) | 引用(0) | 阅读(683)

Vue实现倒计时组件(可自定义时间倒计时功能的组件)：

[

2023/07/27 14:12 | by 刘新修 ]

一、创建countDown.vue（倒计时组件）：

XML/HTML代码

<template>
<span :endTime="endTime" :endText="endText">
<slot>{{content}}</slot>
</span>
</template>
<script>
export default {
data(){
return {
content: '',
}
},
props:{//接收父组件的数据
endTime:{type:String,default:''},
endText:{type:String,default:'活动已结束'},
},
watch: {//监听时间的变化
endTime() {
this.countdowm(this.endTime)
}
},
mounted () {
this.countdowm(this.endTime)
},
methods: {
countdowm(timestamp){
let self = this;
let timer = setInterval(function(){
let nowTime = new Date();
let endTime = new Date(timestamp * 1000);
let t = endTime.getTime() - nowTime.getTime();
if(t>0){
let day = Math.floor(t/86400000);
let hour=Math.floor((t/3600000)%24);
let min=Math.floor((t/60000)%60);
let sec=Math.floor((t/1000)%60);
hourhour = hour < 10 ? "0" + hour : hour;
minmin = min < 10 ? "0" + min : min;
secsec = sec < 10 ? "0" + sec : sec;
let format = '';
if(day > 0){
format = `${day}天${hour}小时${min}分${sec}秒`;
}
if(day <= 0 && hour > 0 ){
format = `${hour}小时${min}分${sec}秒`;
}
if(day <= 0 && hour <= 0){
format =`${min}分${sec}秒`;
}
self.content = format;
}else{
clearInterval(timer);
selfself.content = self.endText;
}
},1000);
}
}
}
</script>

二、vue倒计时组件的使用方法（父组件里面）：

XML/HTML代码

<template>
<count-down :endTime="endTime" :endText="endText " />
</template>
<script>
import countDown from '@/components/countDown'//引入路径，可更改
export default {
data() {
return{
endTime:new Date("2022/04/18 08:00:20").getTime() / 1000 + ' ',
// console.log(endTime)=>得到毫秒 1658030420 可在方法里面放入后台数据,new Date('放后台数据').getTime() / 1000 + ' ',但要记得调用方法
endText:'',
}
},
components: {
countDown
},
}
</script>

说明一下：

XML/HTML代码

1）endTime是一个时间戳，而且是字符串数据类型，需要处理下
let endTime = new Date("2022/04/18 08:00:20").getTime() / 1000 + ' '
2）endText是倒计时结束显示的内容

三、vue倒计时组件效果如下：

vue | 评论(0) | 引用(0) | 阅读(647)

Linux shell命令批量删除子目录下的文件，保留指定数量的最新文件

[

2023/07/26 16:26 | by 刘新修 ]

C#代码

#!/bin/bash
#保留文件数
ReservedNum=2
#要删除文件的，父级目录
FileDir=/usr/docker/springCloud/project/
#循环子目录列表
for element in `ls $FileDir`
do
# 拼接成完成目录（父目录路径/子目录名）
dir_or_file=$FileDir$element
# 获取子目录下的指定文件格式的总数量
FileNum=$(ls -l $dir_or_file | grep 'keda-' |wc -l)
# 输出删除前的指定格式的文件数量
echo $element "jar num:" $FileNum
# 如果数量大于保留数量，那就循环删除文件
while(( $FileNum > $ReservedNum))
do
OldFile=$(ls -rt $dir_or_file | grep 'keda-'| head -1)
echo $element "Delete jar:"$OldFile
rm -rf $dir_or_file/$OldFile
let "FileNum--"
done
done
# 删除完后，再循环输出一下每个子目录下的文件数量
for element in `ls $FileDir`
do
dir_or_file=$FileDir$element
FileNum=$(ls -l $dir_or_file | grep 'keda-' |wc -l)
echo $element "jar num:" $FileNum
done

Linux/Unix | 评论(0) | 引用(0) | 阅读(501)

纯前端让浏览器下载pdf文件

[

2023/07/18 10:20 | by 刘新修 ]

XML/HTML代码

<!--
* @Description: npage.vue
* @Version: 1.0
* @Author: LiuXia
* @Date: 2022-08-01 20:32:06
* @LastEditors: Jesse Liu
* @LastEditTime: 2023-07-17 20:38:42
-->
<template>
<div class="wscn-http404-container">
<h1 style="line-height:300px; text-align:center">npage.vue (新测试文件)</h1>
<div>time:</div>
</div>
</template>
<script>
import { parseTime } from '@/utils'
import { downloadFile } from "@/utils/getFile";
import { fileLinkToStreamDownload , urlFile } from '@/utils/down'
export default {
name: 'PageTest',
computed: {
message() {
return 'PageTest'
},
parseTime: parseTime
},
methods:{
downfile(filePath){
//https://bbwx.kaitaiming.com/image/group1/M00/24/AE/rBBlxWS0vaqAR8ltAAGsWlc-FnY677.pdf
// 后端上传文件返回请求的filePath地址
console.log( filePath, 3333333 );
// 获取文件名
let fileName = urlFile(filePath, 1);
// 获取文件后缀
let fileExtension = urlFile(filePath, 2);
// url下载
fileLinkToStreamDownload(filePath,fileName,fileExtension);
}
},
mounted() {
this.downfile('http://localhost:9527/image/group1/M00/24/AE/rBBlxWS0vaqAR8ltAAGsWlc-FnY677.pdf');
this.$store.dispatch("case/casesList/downloadFile",{}).then((res)=>{
let data = res.data;
let headers = res.headers;
/*** 调用下载文件 ***/
//downloadFile(data, headers)
})
},
}
</script>
<style lang="scss" scoped>
</style>

JavaScript代码

/*
* @Description: down.js
* @Author: Jesse Liu
* @Date: 2023-02-06 16:27:18
* @LastEditors: Jesse Liu
* @LastEditTime: 2023-07-17 20:20:05
*/
export function fileLinkToStreamDownload(url, fileName, type) {
let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;
if (!reg.test(url)) {
throw new Error("传入参数不合法,不是标准的文件链接");
} else {
let xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.setRequestHeader('Content-Type', `application/${type}`);
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
//接受二进制文件流
console.log(this)
var blob = this.response;
const blobUrl = window.URL.createObjectURL(blob);
// 这里的文件名根据实际情况从响应头或者url里获取
const a = document.createElement('a');
a.href = blobUrl;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(blobUrl);
}
}
xhr.send();
}
}
// 获取url中需要的数据 type 1: 获取文件名 2：获取后缀 3：获取文件名+后缀 4:获取文件前缀
export function urlFile(url, type) {
let filename = url.substring(url.lastIndexOf('/') + 1)
switch (type){
case 1: return filename; break;
case 2: return filename.substring(filename.lastIndexOf(".") + 1); break;
case 3: return filename.substring(0, filename.lastIndexOf(".")); break;
case 4: return url.substring(0, url.lastIndexOf('/') + 1)
}
}

vue | 评论(0) | 引用(0) | 阅读(516)

获取JSON对象key及vulue

JS 中如何优雅的使用多层嵌套属性而不会发生报错

方法1：

方法2：

方法3：

方法4：

方法5：

Object.getOwnPropertyNames()

js比较俩个对象是否相等

shell(bash)替换字符串大全

1. 替换（只替换一个）

2. 替换（替换所有）

3. 替换（替换开头一个）

4. 替换（替换结尾一个）

5. 截取，删除右边，保留左边，从右起最短匹配

6. 截取，删除右边，保留左边，从右起最长匹配

7. 截取，删除左边，保留右边，从左起最短匹配

8. 截取，删除左边，保留右边，从左起最长匹配

SHELL替换字符串内容

uniapp创建项目脚手架的区别

Vue实现倒计时组件(可自定义时间倒计时功能的组件)：

Linux shell命令批量删除子目录下的文件，保留指定数量的最新文件

纯前端让浏览器下载pdf文件

分类

个人简介

Follow me

搜索

最新日志

新浪微博

最新评论

链接

归档

日历

其他

< 2024 > < 7 >
日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31