前言

平常写代码的时候经常会用到一些重复的逻辑或者是代码片段，笔者就心血来潮想总结一下，于是乎便有了本文。废话不多说，现在立马为大家介绍一下我认为很有用的一些开发小技巧～

1. 解构赋值

作用:解构可以减少书写很多不必要的代码，也可以理解是给数据起别称来指代

/** 解构数组 **/ 
const [A, B, C, ...rest] = [1, 2, 3, 4, 5]; 
// rest 代指了剩余参数

/** 函数参数解构 **/ 
function fn({ age = 18, name = '用户' }){
    // 也可以给参数设置默认值
    console.log(`Name: ${name}, Age: ${age}`)
}

/** 解构对象 **/
const { name, id = 0 } = { name: '小明', id: 11 };// 可以给解构的变量设置默认值，防止提取的值为 undefined

/** 二次解构 **/
const [A,[B,C],D] = [1, [2, 3], 4];
const { person: { name, age } } = { person: { name: '小明', age: '18' } };

2. Set去重

原理：在 JS 中 Set 是拥有天然去重结构的内置对象

/** 数组去重 **/
const arr = [1,1,1,2,3,4,5];
// 直接再转回数组
const res = [...new Set(arr)];
console.log(res) //[1,2,3,4,5];

/** 数组对象去重 **/
const fn = (array) =>{
   const data = new Map();
   return array.filter(item =>{
       if(data.has(item.id)){
          return false;
       }else{
          data.set(item.id,true);
          return true;
      }
   })
}

const objArray = [
    { id: 1, name: '小明' }, 
    { id: 2, name: '小红' },
    { id: 1, name: '小明' } 
]; 
const res = fn(objArray); 
console.log(res);
// [ { id: 1, name: '小明' }, { id: 2, name: '小红' }]

3. 数字补零

作用：当你需要 val 在没有 x 位数的时候进行补 0 的操作

const fn = (val,x) => val.toString().padStart(x,0);

fn(7,3);// 007

4. 转换进制

/** 将当前进制转换成 10 进制 **/
const fn = (num,cur) => parseInt(num, cur);
fn(1101100,2);// 108


/** 10进制转换位其他进制 **/
const fn = (num,target = 10) => num.toString(target);
fn(108,2); // 1101100

5. 简化if判断

作用：在判断中需要同时满足多条件时，优化写法

/** 需要 x 符合A、B、C、D条件其中之一即可 **/
if([A,B,C,D].includes(x)){
    // ...符合条件的逻辑操作
} else { 
    // ...不符合条件的逻辑操作 
}

/** 需要 x 同时满足A、B、C、D条件 **/
const A = (x) => x > 0;  
const B = (x) => x < 10; 
const C = (x) => x % 2 === 0;
const D = (x) => x !== 5; 
const x = 8;

if([A,B,C,D].every(fn => fn(x)){
    // ...符合条件的逻辑操作
} else { 
    // ...不符合条件的逻辑操作 
}

6. URL解析

作用：解析浏览器URL上的query参数

const getQueryParams = (...keys) => {
    const query = new URLSearchParams(location.search);
    
    if (keys.length === 1) {
        return decodeURIComponent(query.get(keys[0]));
    }
    
    const params = {};
    keys.forEach(key => {
        params[key] = decodeURIComponent(query.get(key));
    });
    
    return params;
}

// 示例
const value = getQueryParams('param1'); // 返回单个参数值

const params = getQueryParams('param1', 'param2', 'param3'); // 返回对象

7. 批量赋值

作用：获取接口数据后需要反复给对象中的属性赋值

// 接口数据
const res = {
  A: 'valueA',
  B: 'valueB',
  C: 'valueC',
  //...
};

// 传统赋值
this.A = res.A;
this.B = res.B;
this.C = res.C;

// 优化
const { A, B, C } = res;
Object.assign(this, { A, B, C });

// Vue3中也可以这样
<script setup> 
import { reactive, onMounted } from 'vue'; 
const obj = reactive({ A: '', B: '', C: '' }); 

onMounted(() => { 
// 接口数据
const res = { 
    A: 'valueA',
    B: 'valueB', 
    C: 'valueC',
    //...
 }; 
const { A, B, C } = res;
Object.assign(obj, { A, B, C });
});
</script>

提升前端开发效率的第 N 种方法（持续更新 ing）

前言