10 tips on front end (May 18, 2019)

1. When the index of an array is assigned a negative number or a decimal number, does the length of the array change?

  let arr=[]
  arr[10]=11
  console.log(arr.length); //11

  arr[-1]=-1
  console.log(arr.length) //11
  
  arr[3.14]=3.14
  console.log(arr.length) //11
  //===================================
  let arr1=[]
  
  arr1[2.1]=2.1
  console.log(arr1[2.1],'arr144') //2.1
  console.log(arr1.length,'arr145') //0
  
  arr1[1]=1
  console.log(arr1.length,'arr147') //2
  //========================
  let arr2=[]
  arr2[-1]=-1
  console.log(arr2.length,'arr253') //0
  //========================
  let arr3=[]
  arr3[5]=5
  console.log(arr3.length,'arr258') //6

Therefore, the length attribute of array only calculates non negative integer subscripts! Do not calculate negative number and decimal number

2. What if the hot update of antd Pro project is slow and stuck at 95% (sending)?

I actually wrote a comma in the less file.... A kind of

3. Use active for the name of less subclass

span {
      position: relative;
      .leftIcon{
        border-radius: 17px;
      }
      &.active {
        background:rgba(94,112,231,1);
        .leftIcon{
          background:rgba(255,255,255,1);
        }
      }
    }

4. Ant D's Spin component does not recognize undefined (the Spin attribute of the Spin component is only valid for true/false). If it is undefined, it will be read all the time

<Spin spinning={undefined}>
</Spin>

5. flex beyond line Wrap: Wrap

.noIcon {
  display: flex;
  //Line break
  flex-wrap: wrap;
}

6. sort() double sorting
(1) ranking of total scores
(2) if the total scores are equal, we will rank them according to the Chinese scores

var jsonStudents = [
    {name:"Dawson", totalScore:"197", Chinese:"100",math:"97"},
    {name:"HanMeiMei", totalScore:"196",Chinese:"99", math:"97"},
    {name:"LiLei", totalScore:"185", Chinese:"88", math:"97"},
    {name:"XiaoMing", totalScore:"196", Chinese:"96",math:"100"},
    {name:"Jim", totalScore:"196", Chinese:"98",math:"98"},
    {name:"Joy", totalScore:"198", Chinese:"99",math:"99"}];
jsonStudents.sort(function(a,b){
    var value1 = a.totalScore,
        value2 = b.totalScore;
    if(value1 === value2){
        return b.Chinese - a.Chinese;
    }
    return value2 - value1;
});

7. Regular expression: js without underline, capitalize the first letter

let str='str_abc'
str=str.replace(/_(\w)/g, (all, letter) => letter.toUpperCase());
console.log(str) //'strAbc'

8. Press control+enter to trigger the event

<TextArea onKeyDown={(e)=>{
   if(e.ctrlKey&&event.keyCode===13)
      this.handleOk()
}}/>

The CTRL key of the onKeyDown event is the control key, and the key code = 13 is the enter key.

9. Use < br / > instead of carriage return, and use dangerousysetinnerhtml to make the DOM element of react read the tag in the string

dangerouslySetInnerHTML is equivalent to innerHtml

let str=comment.split(/\r\n|\r|\n/g).join('<br/>')
 <div dangerouslySetInnerHTML={{__html:str}} />

10. Regular expression: positive integer

 const reg = /^[0-9]*[1-9][0-9]*$/;

(end)

Tags: Javascript Attribute less hot update React

Posted on Fri, 08 Nov 2019 09:36:34 -0800 by simonsays