Object.hasownproperty (a) differs from Object.a
  let obj={a:1.b:2,}



  Object.prototype.c=3

  // Common methods will look for the property/method on the prototype chain, that is, the newly defined property C on Object.prototype

  if(obj.c){ console.log('hasC')}//hasC

  // But using hasOwnProperty() does not look for the key defined on the prototype chain

  if(obj.hasOwnProperty('c')) {console.log('hasOwnProperty')}// Can't print

Copy the code

Obj.hasownproperty does not find properties of the prototype chain on Object, but obj.c does

2, JS, floating point Numbers, use or operation ` | 0 ` integer

When you look at the React source code, see this line:

return MAGIC_NUMBER_OFFSET - ((ms / UNIT_SIZE) | 0);

Copy the code

| 0 means integer:

console.log(19 / 3 | 0); / / 6

Copy the code

Principle: JS double-precision floating-point number is used to store number type, and | is binary, or will be a number to an integer, then bit operations, so that can be used to take the whole

Supplement: (1) about or operation | concrete calculation process, see: the front small knowledge (2020.3.20) of 10 “the | 2, JS is what mean?”

(2) The nonbitwise operator ~ turns a number negative and subtracts by one

~12  / / - 13

~9 -  / / 8

Copy the code
3. Parameter meanings of array.reduce ()
[0.1.2.3.4].reduce(function(all, item, index.array){

  return all + item;

});

Copy the code

① all indicates the sum of the elements before item ② item indicates the current element (note: index=1) ③ index indicates the current position (note: 1) ④ Array indicates the current array

Reference: developer.mozilla.org/zh-CN/docs/…

4. Brief introduction of the principle of DOM to image

www.tuicool.com/articles/YZ…

5, React. CreateRef and React. UseRef

Each time the App renders, createRef will return a new reference, and useRef will return the same reference

6. How to render canvas directly in React?

Error: Objects are not valid as a React child (found: [object HTMLCanvasElement]). If you meant to render a collection of children, use an array instead.

Rendering canvas directly in React will cause an error:

  import html2canvas from 'html2canvas';



  const [canvasOne, setCanvasOne] = useState(undefined);



  html2canvas(element)

    .then(function(canvas) {

        setCanvasOne(canvas)

    });



<div>

  {canvasOne}

</div>

Copy the code

Solutions:

  import html2canvas from 'html2canvas';



  const [canvasOne, setCanvasOne] = useState(undefined);



  html2canvas(element)

    .then(function(canvas) {

        setCanvasOne(canvas.toDataURL())

    });



<img src={canvasOne} />

Copy the code
7. Use native JS to drag and drop small div demo

Please look at: www.jq22.com/webqd1348

8. Name the while loop to distinguish it from the inner while loop
  let a=5



  while1:while(a>0) {

    a=a- 1

    console.log(a,'while1')



    while(a>=3) {

      console.log(a,'innerWhile2')

      // Skip this loop and continue to loop while1

      continue while1

    }

    while(a<3) {

      console.log(a,'innerWhile1')

      // Skip this loop and continue to loop while1

      continue while1

    }



  }

Copy the code
9. Set the page color to gray

Using CSS3 filters:

{

  filter: grayscale(100%).

}

Copy the code

Details please see: www.runoob.com/cssref/css3…

React implements two-way data binding

React doesn’t have the concept of two-way binding, but it’s easy to implement

View — >model, change state with onChange, change value with state, change value of input with onChange

import React, {useEffect, useState} from 'react';



export default function App() {

  const [textValue, setTextValue] = useState(' ')



  return (

    <div>

      <input

        type="text"

        onChange={(e)= > {

          setTextValue(e.target.value)

        }}

        value={textValue}

      />

    </div>

  );

}

Copy the code

(after)