Vue Hkp UI

Appearance

常用方法 ​

1.生成随机数 ​

vue
<!-- 方法 -->
<script setup lang="ts">
    const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min ;
    // 代码解析
    // 核心Math.random()，生成一个0到1的随机数，通过数学公式将其映射到指定范围，
    // 并利用Math.floor()确保返回的是整数
</script>
vue
<!-- 用法示例 -->
<script setup lang="ts">
    console.log(random(1, 100)) //输出1到100之间的随机数
</script>

2.数组去重 ​

vue
<!-- 方法 -->
<script setup lang="ts">
    const unique = (arr) => [...new Set(arr)];
    // 代码解析
    // Set是一种集合类型，会自动去重。而...是扩展运算符，可以将Set转换为数组，
    // 省去手动遍历的步骤。
</script>
vue
<!-- 用法示例 -->
<script setup lang="ts">
    console.log(unique([1,2,2,3,4,4,5])) //输出[1,2,3,4,5]
</script>

3.交换两个变量的值 ​

vue
<!-- 方法 -->
<script setup lang="ts">
    let a = 1, b = 2;
    [a, b] = [b, a]
    // 代码解析
    // 利用ES6的解构赋值语法，轻松实现两个变量的值交换

    console.log(a, b); //输出2，1
</script>

4.生成UUID ​

vue
<!-- 方法 -->
<script setup lang="ts">
    const uuid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
        const r = (Math.random() * 16) | 0 ;
        return c === 'x' ? r.toString(16) : ((r & 0x3) | 0x8).toString(16);
    });
    // 代码解析
    // 通过正则匹配字符X或者Y，并利用Math.random()生成随机数，
    // 再将其转换为符合UUID规范的十六进制格式

    // 用法示例
    console.log(uuid());  //类似 e25a24a8-876d-4589-929e-0adadc4d5880
</script>

5.常用数组操作方法 ​

vue
<script setup lang="ts">
// 1.push()：将一个或多个元素添加到数组的末尾
let fruits = ['apple', 'banana'];
fruits.push('orange'); 
//fruits 现在是 ['apple', 'banana', 'orange']

// 2.pop()：移除并返回数组的最后一个元素
let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();
// lastFruit 是 'orange', fruits 现在是 ['apple', 'banana']

// 3.shift()：移除并返回数组的第一个元素
let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();
// firstFruit 是 'apple', fruits 现在是 ['banana', 'orange']

// 4.unshift()：将一个或多个元素添加到数组的开头
let fruits = ['banana', 'orange'];
fruits.unshift('apple');
// fruits 现在是 ['apple', 'banana', 'orange']

// 5.splice()：从数组中添加或移除(替换)元素
var fruits = ['apple', 'banana', 'orange', 'grape'];
fruits.splice(1, 2);// 从索引 1 开始删除两个元素
// fruits 现在是 ['apple', 'grape']

//插入元素
var fruits = ['apple', 'grape'];
fruits.splice(1, 0, 'banana', 'orange'); // 从索引 1 开始删除 0 个元素，并插入 'banana', 'orange'
// fruits 现在是 ['apple', 'banana', 'orange', 'grape']

//替换元素
var fruits = ['apple', 'banana', 'orange', 'grape'];
fruits.splice(2, 1, 'kiwi'); // 从索引 2 开始，删除 1 个元素，并插入 'kiwi'
// fruits 现在是 ['apple', 'banana', 'kiwi', 'grape']

// 6.slice()：返回数组的一部分，不修改原数组
let fruits = ['apple', 'banana', 'orange'];
let citrus = fruits.slice(1);
// citrus 现在是 ['banana', 'orange'], fruits 保持不变

// 7.sort()：对数组元素进行排序
let fruits = ['orange', 'apple', 'banana'];
fruits.sort();
// fruits 现在是 ['apple', 'banana', 'orange']

// 8.some()：检查数组中是否至少有一个元素满足条件
let numbers = [1, 2, 3, 4, 5];
let hasEven = numbers.some(num => num % 2 === 0);
// hasEven 是 true

// 9.every()：检查数组中是否所有元素都满足条件
let numbers = [2, 4, 6, 8];
let allEven = numbers.every(num => num % 2 === 0);
// allEven 是 true

// 10.find()：返回数组中第一个满足条件的元素
let numbers = [1, 2, 3, 4, 5];
let evenNumber = numbers.find(num => num % 2 === 0);
// evenNumber 是 2

// 11.indexOf()：返回数组中第一个匹配元素的索引，如果不存在则返回 -1
let fruits = ['apple', 'banana', 'orange'];
let bananaIndex = fruits.indexOf('banana');
// bananaIndex 是 1

// 12.concat()：连接两个或多个数组
let fruits = ['apple', 'banana'];
let moreFruits = ['orange', 'kiwi'];
let allFruits = fruits.concat(moreFruits);
// allFruits 现在是 ['apple', 'banana', 'orange', 'kiwi']

// 13.map()： 对数组中的每个元素执行一个函数，并返回一个新数组
// map方法不会修改原数组
// 1.当数组元素为基本数据类型时
let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
// numbers现在是[1, 2, 3] doubled 现在是 [2, 4, 6]

// 2.当数组为引用数据类型时，此时原数组会改变，但这与map方法无关，这属于是访问到了对象内部并赋值
let arr=[{id:1},{id:2},{id:3}]
let newArr=arr.map((item,index)=>{
    item.id=1;
    return item
})
// arr 是 [{id:1},{id:1},{id:1}] newArr 是 [{id:1},{id:1},{id:1}]



// 14.forEach()：遍历数组的每个元素并执行提供的回调函数
let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(fruit => console.log(fruit));
// 输出：apple, banana, orange

// 15.filter()： 创建一个新数组，其中包含满足条件的所有元素
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);
// evenNumbers 现在是 [2, 4]

// 16.findIndex()： 找到数据的索引，对其进行操作
const indexToRemove = this.tableData.findIndex((item) => item.id === obj.id)

</script>

6.常用对象操作方法 ​

vue
<script setup lang="ts">
let person = { name: 'John', age: 30, city: 'New York' };
// 1.Object.keys(obj)：枚举属性-返回一个包含对象所有键的数组
let keys = Object.keys(person);
// keys: ['name', 'age', 'city']

// 2.Object.values(obj)：枚举键值-返回一个包含对象所有值的数组
let values = Object.values(person);
// values: ['John', 30, 'New York']

// 3.Object.entries(obj)：枚举键值对组合-返回一个包含对象所有键值对的数组
let entries = Object.entries(person);
// entries: [['name', 'John'], ['age', 30], ['city', 'New York']]

// 4.Object.hasOwnProperty(key)：检查对象是否包含指定的属性
let hasName = person.hasOwnProperty('name');
// hasName: true

// 5.Object.assign(target,source)： 将一个或多个对象的属性复制到目标对象
let defaults = { job: 'Engineer', salary: 50000 };
let employee = Object.assign({}, person, defaults);
// employee: { name: 'John', age: 30, city: 'New York', job: 'Engineer', salary: 50000 }

// 6.delete obj[key]： 从对象中删除指定的属性
delete person.age;
// person: { name: 'John', city: 'New York' }

</script>

7.常用字符串操作方法 ​

vue
<script setup lang="ts">
// 1.split：分割字符串
let str = "apple,orange,banana";
let fruitsArray = str.split(',');
// fruitsArray:["apple", "orange", "banana"]

// 2.concat(str1，str2，...，strN)：连接字符串
let fullName = 'John'.concat(' ', 'Doe'); 
// fullName:'John Doe'

// 3.charAt(index)：返回指定索引位置的字符
let greeting = 'Hello, world!';
let firstChar = greeting.charAt(0); 
// firstChar:'H'

// 4.startWith(searchString)：检查字符串是否以指定字符串开头
let greeting = 'Hello, world!';
let startsWithHello = greeting.startsWith('Hello'); 
// startsWithHello: true

// 5.endsWit(searchString)：检查字符串是否以指定字符串结尾
let greeting = 'Hello, world!';
let startsWithHello = greeting.endsWith('world'); 
// true

// 6.substring(start,end)：返回字符串的子字符串，从中截取一段字符,包括开始位置和结束位置
let A="Hello".substring(1, 4)
//A:ell

// 7.substr(start,length)：返回字符串的子字符串，从中截取一段字符,包括开始位置和截取长度
let A="Hello".substr(1, 3)
//A:ell

// 8.trim()：去除字符串两端空格
let A="Hello ".trim()
//A:"Hello"

// 9.replace(OldValue,newValue) :用新字符串替换原字符串中的子字符串
let A="Hello World".replace("World","Universe")
//A:"Hello Universe"

// 10.indexOf(substring) :返回子字符串在字符串中第一次出现的位置，如果没有找到则返回 -1。
let A="Hello".indexOf("lo")
//A:3

// 11.lastIndexOf(substring) :返回子字符串在字符串中最后一次出现的位置，如果没有找到则返回 -1。 
let A="Hello".lastIndexOf("l")
//A:3

// 12.toUpperCase() :将字符串转换成大写
let A="Hello".toUpperCase()
//A:HELLO

// 13.toLowerCase() :将字符串转换成小写
let A="Hello".toLowerCase()
//A:hello

</script>

8.常用数组对象操作方法 ​

vue
<script setup lang="ts">
// 1.for()
let numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

// 2.forEach()
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
    console.log(number);
});
//使用箭头函数
numbers.forEach(number => console.log(number));

// 3.map() 返回一个新数组，新数组的元素是经过map函数内部代码块处理过的数据
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(function(number) {
    return number * 2;
});
// doubled: [2, 4, 6, 8, 10]
//使用箭头函数
let doubled = numbers.map(number => number * 2);

// 4.filter() 返回一个新数组，符合过滤条件的元素组成
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});
// evenNumbers: [2, 4]
//使用箭头函数
let evenNumbers = numbers.filter(number => number % 2 === 0);
</script>

9.时间转换常用方法 ​

vue
<script setup lang="ts">
// 1.2024-12-10T16:00:00.000Z 时间转 正常时间
const newDate = (time:string) => {
    let date = new Date(time)
    let y = date.getFullYear()
    let m :any = date.getMonth() + 1
    m = m < 10 ? '0' + m : m
    let d :any = date.getDate()
    d = d < 10 ? '0' + d : d
    
    let hh:any = date.getHours()
    hh = hh < 10 ? '0' + hh : hh
    let mf:any = date.getMinutes()
    mf = mf < 10 ? '0' + mf : mf
    let ss:any = date.getSeconds()
    ss = ss < 10 ? '0' + ss : ss
    return y + '-' + m + '-' + d + ' ' + hh + ':' + mf + ':' + ss
}
console.log(newDate('2024-12-10T16:00:00.000Z')) //输出 2024-12-11 00:00:00

// 2.时间戳转正常时间
function dateFormat (timestamp: number|string|Date, format = 'YYYY-MM-DD HH:mm:ss'): string {
  var date = new Date(timestamp)
  function fixedTwo (value: number): string {
    return value < 10 ? '0' + value : String(value)
  }
  var showTime = format
  if (showTime.includes('SSS')) {
    const S = date.getMilliseconds()
    showTime = showTime.replace('SSS', '0'.repeat(3 - String(S).length) + S)
  }
  if (showTime.includes('YY')) {
    const Y = date.getFullYear()
    showTime = showTime.includes('YYYY') ? showTime.replace('YYYY', String(Y)) : showTime.replace('YY', String(Y).slice(2, 4))
  }
  if (showTime.includes('M')) {
    const M = date.getMonth() + 1
    showTime = showTime.includes('MM') ? showTime.replace('MM', fixedTwo(M)) : showTime.replace('M', String(M))
  }
  if (showTime.includes('D')) {
    const D = date.getDate()
    showTime = showTime.includes('DD') ? showTime.replace('DD', fixedTwo(D)) : showTime.replace('D', String(D))
  }
  if (showTime.includes('H')) {
    const H = date.getHours()
    showTime = showTime.includes('HH') ? showTime.replace('HH', fixedTwo(H)) : showTime.replace('H', String(H))
  }
  if (showTime.includes('m')) {
    var m = date.getMinutes()
    showTime = showTime.includes('mm') ? showTime.replace('mm', fixedTwo(m)) : showTime.replace('m', String(m))
  }
  if (showTime.includes('s')) {
    var s = date.getSeconds()
    showTime = showTime.includes('ss') ? showTime.replace('ss', fixedTwo(s)) : showTime.replace('s', String(s))
  }
  return showTime
}
console.log(dateFormat(1685514045679)) //输出 2023-05-31 14:20:45
</script>

10.Watch 写法 ​

vue
<script setup lang="ts">
// <1.监听某个参数>
// 它用于监视某个数据属性（在这里是 count）的变化，并在变化时执行相应的回调函数
watch(count,(newValue,oldValue)=>{
  console.log(`我侦听到了count状态的变化，当前值为${newValue},从而处理相关逻辑`);
})
//watch 方法来监听多个响应式数据属性（在这里是 x 和 y），并在这两个属性发生变化时执行相应的回调。
watch([x,y],([x,y],oldValue)=>{
  console.log(`我是x=>${x},我是y=》${y}`);
})

//<2.监听对象性属性>
//watch 方法来监听一个对象的特定属性（在这里是 obj.num），并在该属性发生变化时执行相应的回调。
watch(()=>obj.num,(newV,oldV)=>{
   console.log('监听单个属性',oldV,newV);
})

//监听多个对象性属性
// watch 方法来监听对象 obj 的多个属性（num 和 age）。当这两个属性的值发生变化时，会执行指定的回调函数。
watch([()=>obj.num,()=>obj.age],(newV,oldV)=>{ //返回的新值和旧值也是数组，和属性相对应
  console.log('监听多个',oldV,newV);//监听多个属性要在监听单个属性后面执行 
})

//<3.监听整个对象>
//这里的 watch 方法用于监听整个 obj 对象。如果 obj 的任何一个属性发生变化，都会触发后面的回调函数。
// 但是有个问题新旧值都一样，所以使用computed计算 深拷贝一下，然后监听新的值
const objs = computed(()=>{
  return JSON.parse(JSON.stringify(obj))
})
watch(objs,(newV,oldV)=>{
    console.log(newV,oldV);
},{ deep: true,immediate:true })


//watchEffect一开始也会执行一次，拿到的数据是改变后的
// ，但获取到的dom数据是上一次的，可以加flush: 'post'。目前还未实践
watchEffect(()=>{
    //凡是写在这里的数据只要变化都会触发这里的代码执行
    console.log(obj.num);
    console.log(obj.age);
})
</script>

11.获取浏览器地址的参数 ​

vue
<script setup lang="ts">
function getHashParams() {
  const hash = window.location.hash.slice(1)
  const hashObject: any = {}
  if (hash.includes('?')) {
    // 如果哈希部分意外地包含了 '?'（尽管这通常不是标准做法），我们可以尝试解析它
    const fakeUrl = `#${hash}` // 为了使用 URLSearchParams，我们“伪造”一个 URL
    const fakeParams = new URLSearchParams(fakeUrl.slice(fakeUrl.indexOf('?') + 1)) // 提取 '?' 后面的部分
    fakeParams.forEach((value, key) => {
      hashObject[key] = value
    })
  }
  else {
    // 否则，我们假设哈希部分是以 '&' 分隔的键值对（尽管这也不是标准做法）
    const pairs = hash.split('&')
    pairs.forEach((pair) => {
      const [key, value] = pair.split('=')
      hashObject[decodeURIComponent(key)] = decodeURIComponent(value || '')
    })
  }
  return hashObject
}
const hashParams = getHashParams()
console.log('travel_code',hashParams.travel_code)
</script>

Released under the MIT License.

Copyright © 2023-present The Muse Catcher