preface

Recently, I found some features I had never known before in the process of learning, some of which were very interesting and could give me a new idea when dealing with some problems.

I present these features to you.

4 interesting JS features

Parse the URL using the A tag

Sometimes we need to extract the domain name, query keyword, variable parameter value from a URL, generally we will parse the URL to obtain these contents. But you may not know there’s an easier way.

Create an A tag and assign the URL that needs to be parsed to the HREF property of A, and then we can easily access that content. The code is as follows:

function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){ var ret = {}, seg = a.search.replace(/^\? /,' ').split('&'),
                len = seg.length, i = 0, s;
            for(; i<len; i++) {if(! seg[i]) {continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            returnret; }) (),hash: a.hash.replace(The '#'.' ')}; }Copy the code

Label statement

Sometimes we’ll write a double for loop to do some data processing, and sometimes we’ll just jump out of the loop when we want to do that. Avoid wasting unnecessary resources.

At this point we can use label with continue/break:

firstLoop: 
for (let i = 0; i < 3; i++) { 
   for (let j = 0; j < 3; j++) {
      if (i === j) {
         continuefirstLoop; // Continue the firstLoop //break firstLoop; // 中止 firstLoop 循环
      }
      console.log(`i = ${i}, j = ${j}`); I = 1, j = 0 I = 2, j = 0 I = 2, j = 1for (let i = 0; i < 3; i++) { 
   for (let j = 0; j < 3; j++) {
      if (i === j) {
         continue 
      }
      console.log(`i = ${i}, j = ${j}`); I = 0, j = 1 I = 0, j = 2 I = 1, j = 0 I = 1, j = 2 I = 2, j = 0 I = 2, j = 1Copy the code

You can get an idea of the tag statement from the output of the above two pieces of code.

Void operator.

The void operator evaluates the given expression and returns undefined.

Since void ignores the value of the operands, it makes more sense to use void when the operands have side effects.

Replace undefined with void

Since undefined is not a JavaScript keyword, we might get a bit of an unexpected result when we assign a variable to undefined.

function t(){ var undefined = 10; console.log(undefined); } console.log(t()); // In most browsers it is 10Copy the code

In the code above, we might want to assign undefined, but we get 10 instead. So we can use void instead of undefined.

This is why we see void replacing undefined in many sources.

What is IntersectionObserver?

IntersectionObserver can be used to monitor whether elements enter the visible area of the device without frequent calculation.

So instead of using getBoundingClientRect().top, which is more performance-destroying, we can use this feature to handle exposure buries.

Of course, you can also use this API to optimize the scroll top as follows:

IntersectionObserverFun: function() {
    let self = this;
    let ele = self.$refs.pride_tab_fixed;
    if(!!!!! IntersectionObserver ){let observer = new IntersectionObserver(function() {let offsetTop = ele.getBoundingClientRect().top;
            self.titleFixed = offsetTop < 0;
        }, {
            threshold: [1]
        });
        observer.observe(document.getElementsByClassName('title_box') [0]); }else {
        window.addEventListener('scroll', _.throttle(function() {letoffsetTop = ele.getBoundingClientRect().top; self.titleFixed = offsetTop < 0; }, 50)); }},Copy the code

Hopefully these four features will help you out and give you a thumbs up.

The last

If you want to join [big front-end communication group], follow the public account and click “communication plus group” to add the robot to automatically pull you into the group. Pay attention to the first time I receive the latest dry goods.