小白也会的花里胡哨的技巧（我只是心疼giegie才发的）

js 与 ES6方面的技巧

1：有时候接口返回的值有些不是我们想要的，或者需要起个别名，再或者想要更深的字段

  (1) 不需要age
  let data = {
      name:'中国人',
      sex: '男',
      age: 14 ,
      address:{ detail:"广东"}
  }
  let { age, ...obj } = data;
  
  // ...obj 就是剩下的字段了，这时候赋值给你date中定义的变量即可，
  // 例如 this.form = {...obj}
  
 (2) 起个别名（这个情况多数是你定义变量和后端不一样，回显懒得换的情况）
 let { age: initAge  ,...obj } = date;
 // initAge = 14
 
 (3) let { address:detail, sex  } = date;
 // detail = '广东'    这个时候address 好像是没有用了的（印象中）
 

2：自定义的方法返回数组，你可以通过变量获取

function getDay(){
  return [ 2021, 12, 3]；
}

let [ year, month, day ] = getDay();
// year = 2021; month = 12; day = 3

3: 将值转为Boolean类型, 只需要在前面加上!!即可

    let value = "ss";
    // !!value  --> ture;

4: toString实现数组扁平化，平常用惯的估计是flag, 高阶函数去处理吧！今天学点花的(适合面试装*, 实用性还是缺一点的，里面的值是字符串类型了，要转一遍才行)

5：slice(0)实现深拷贝，大家可能用的比较多是JSON.StringIfy转一下，或者用递归方式去，这个方法也可以实现.

6: slice实现评分星星

"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);

7：对象的key是变量

let obj = {};
let value = "今天";
let obj[value] = "2021";
// obj  -->  { "今天":"2021" }

8: 优化if判断, 这个很多前人已经发过了，大概意思是if --> switch---> obj语句;

    // 原语句
    if(a==1) {}
    else if(a==w) {}
    // 优化1
    switch(a) {
        case 1：
            "do some think"
        break;
    }
    // 优化2
    let obj = {
        1: "do some think",
        2: "do some think"
    }
    obj[a];

9：可选链式操作 ?. 与 ??, ?.的作用是找对象深层的key, 找不到就undefined，不至于 让程序报错。 ?? 我觉得与 || 差不多，最大用处我觉得是对于0的问题，||处理0 是 false, ?? 会放行。

    // ?.
    let obj = {
        name:"xx",
        detail: {
          province:{
            city: "广东"
          }
        }
      }
      if(obj.detail&&obj.detail.province&&obj.detail.province.city){}
      if(obj?.detail?.province?.city)
      
    // ??
    const value = null ?? '默认值';
    // value: "default string"

    const value = 0 ?? 42;
    // value: 0

css方面的技巧

1: clip-path对于画按钮，大家一定试过ui多有梦想，四角内切、梯形等等 常规我们可能会用伪元素去制造缺角，但这个属性可以一次解决这个问题。

// 这里列矩形，其他可以去搜下
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

大概意思是polygon() 里面定义的数值，可以理解为点，然后首尾连接形成一个不规则矩形

比如可以实现一下效果，具体你可以天马行空。

vue方面的技巧

(1) 计算属性传参，常规估计大家都是在方法里面传参，computed里面估计少很多吧~ 要说有啥好处我也不清楚，反正骚就行，（估计computed缓存会比method好, 不过这操作是利用闭包的，可能有内存溢出风险，大佬可以指点下）

<div> {{ calcDate('今天天气晴朗') }} </div>


computed(){
    calcDate(){
        return function(value){
            return value + 'do some think'
        }
    }
}

(2) 爷传孙，但是你又不想在父props里面写一遍，直接通过$attrs即可，他将你在爷中的数据带过去，具体语法可以搜下（印象中大概是这样，具体忘了差不多了哈哈哈）

// 爷  obj = {name:"x", age: "xx"}
<father :obj="obj"></father>

// 父 不用在props中定义name,age
<son v-bind="$attrs"><son>  

// 孙
<div> {{ $attrs }} </div>

$attrs --- > {name:"x", age: "xx"}

(3) 父子的props属性是一样的？ 那可以直接解构来用了(各位大佬你们打印下son, 因为我也是三月份用了一次，但是大体是这个意思，莫要嫌弃我懒)

    // father
    import son from './son'
    props:{
        ...son.props
    }

建议各位打印下$$attrs, $slot ....几个属性，你会发现大陆了，现在一点了，准备午休，还有一些没来得及写，下午再写，先发布，大家莫嫌弃我懒