Js and ES6 skills

1: Sometimes the interface returns a value that is not what we want, or we need a separate name, or we want a deeper field

  (1) You don't need agelet data = {
      name:'Chinaman'.sex: 'male'.age: 14 ,
      address: {detail:"Guangdong"}}let{ age, ... obj } = data;/ /... Obj is the rest of the field, and you can assign it to the variable defined in date,
  // For example this.form = {... obj}
  
 (2(this is usually the case where you define a variable differently from the back end, and you don't want to change it)let { age: initAge ,... obj } = date;// initAge = 14
 
 (3) let { address:detail, sex  } = date;
 // detail = 'guangdong'
 
Copy the code

2: custom methods return arrays that you can get from variables

function getDay(){
  return [ 2021.12.3]；
}

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

Copy the code

3: Convert the value to Boolean, just add!! Can be

    let value = "ss";
    / /!!!!! value --> ture;
Copy the code

4: ToString flattens arrays, usually used to estimate is flag, high order function to deal with it! Today learn some flowers (suitable for interview outfit *, practical or lack of a little, inside the value is a string type, to turn over the line)

5: Slice (0) implements deep copy. This method can also be implemented if you use json.stringify or recursively.

6: Slice implements scoring stars

Painted "u u u u being fostered fostered fostered fostered".slice(5 - rate, 10 - rate);
Copy the code

7: The key of the object is a variable

let obj = {};
let value = "Today";
let obj[value] = "2021";
// obj --> {" today ":"2021"}
Copy the code

If –> switch– > obj; if –> obj;

    / / the original statement
    if(a==1) {}
    else if(a==w) {}
    1 / / optimization
    switch(a) {
        case 1:"do some think"
        break;
    }
    2 / / optimization
    let obj = {
        1: "do some think".2: "do some think"
    }
    obj[a];
Copy the code

9: Optional chain operation? With?? ,? The. Function is to find the object deep key, undefined, so as not to let the program error. ?? I think with the | | about, most useful I think is an issue for 0, | | processing 0 is false,?????? Will release.

    / /? .
    let obj = {
        name:"xx".detail: {
          province: {city: "Guangdong"}}}if(obj.detail&&obj.detail.province&&obj.detail.province.city){}
      if(obj? .detail?.province?.city)// ??
    const value = null ?? 'Default value';
    // value: "default string"

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

Copy the code

CSS tips

1: Clip-path for button drawing, you must have tried UI dream, quadrangle cut, trapezoid, etc. We might use fake elements to create missing corners, but this property can solve the problem at once.

// Here is a rectangle, other can be searched
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Copy the code

Polygon () is the number defined in polygon(), which can be interpreted as points, then connected to form an irregular rectangle

For example, you can achieve an effect, specific you can be unconstrained.

Vue skills

(1) Attributes are passed through methods. For computed data, methods are much less than methods. (2) Attributes are passed through methods, and for computed data, methods are much less than methods.

<div> {{ calcDate('It's sunny today') }} </div>


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

(2) if you don’t want to write this in the parent props, you can use $attrs to check the syntax of the props file.

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

// The parent does not need to define name,age in props< son v - bind = "$attrs" > < son > / / sun < div > {{$attrs}} < / div > $attrs - > {name: "x", the age: "xx"}Copy the code

(3) The props properties of the parent and the child are the same? That can be directly deconstructed to use (guys, please print son, because I also used it in March, but basically the same meaning, don’t blame me for being lazy)

    // father
    import son from './son'
    props: {... son.props }Copy the code

I suggest you print it out
attrs, $slot …. A few attributes, you will find the mainland, now one o ‘clock, ready to lunch break, there are some did not have time to write, write in the afternoon, first released, we do not dislike me lazy