js的一些小方法

1. 引入图片

  const renderImg = (imgurl:string) => {
    //imgUrl:相对地址--../../image/text.png
    return new URL(imgUrl, import.meta.url).href;
  };

2. 颜色格式转换：# -> rgba

const hexToRgba = (hexColor, opacity) => {
  const hex = hexColor.replace("#", "");
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};

hexToRgba("#fff", 0.3);

3.解构赋值

取值：

  let data = {
    x: 1,
    y: 2,
    z: 3,
    id: 12345,
    name: "text",
  }

  const { x, y, z, ...other } = data;
  console.log(x, y, z, other);//1 2 3 {id: 12345, name: 'text'}

值交换

let a =1;
let b = 2;
[a, b] = [b, a]; //a=2;b=1

4.判断奇数偶数

console.log(7 & 1);    // 1
console.log(8 & 1) ;   // 0

5.数组扁平化

arr.flat(扁平的层级，不写默认全部扁平化)

 let arr = [1,[2,3,[2,3,4]]]
 console.log(arr.flat()) //[1,2,3,2,3,4]

arr.flatMap()--扁平化一层

let arr = [{x:1,y:0},{x:1,y:0}]
arr.flatMap((item: any) => [item.x, item.y])// [1,0,1,0]

6.数组去重

 let arr = [3, 5, 2, 2, 5, 5]; 
 let setArr = new Set(arr) // 返回set数据结构Set(3) {3, 5, 2} 

//方法一 es6的...解构 
let unique1 = [...setArr ];          //去重转数组后 [3,5,2] 

//方法二 Array.from()解析类数组为数组 
let unique2 = Array.from(setArr )    //去重转数组后 [3,5,2]

7.去除字符串两端空格

' ksjdoi dfdf     '.trim()

8.深拷贝 

1. JSON.parse(JSON.stringify('A'));
2. structuredClone('A')