Converting to Modern JavaScript (1)

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Today we’re going to help you transition from traditional to modern JavaScript by looking at some examples to see if this code is modern JavaScript.

Problem one, look at these two lines of code

var tuts = ['deep learning'.'machine learning'];
tuts.indexOf('meta learning');
Copy the code

What do you think, modern or traditional? The answer is traditional code, as explained below

• Course is to usevarThe statement
• andindexOfIt was also introduced in ES5, so this is traditional code
• Correct, the syntax used here is not new per se

Question two: look at the other two lines of code. Modern or traditional?

var obj1 = {a:0.b: {c:0}};
var obj2 = Object.assign({},obj1)
Copy the code

• Object. Assign is not a new syntax here, so is it traditional JavaScript

var tutPromise = new Promise((resolve,reject) = >{
    setTimeout(() = > {
        resolve({
            title:'machine leanring'})},500);
})
Copy the code

This code is actually not modern JavaScript, and this might surprise you, but it doesn’t have promises

The examples above only raise the question of what constitutes modern JavaScript code, and what does modern JavaScript code mean?

First of all, modern JavaScript is not an ES2015 syntax, nor is it ES2017, nor is it even ES2020

It’s a coding syntax supported by all modern browsers, with Chrome, Edge Firefox, and Safari now accounting for 90% of the browser market.

Browsers based on the above rendering engines account for roughly the other 5%, and these engines support roughly the same features. This means that 95% of the site’s visitors are using fast, modern browsers, which account for most of the market.

What that means is that they’re constantly supporting new JavaScript features, so the easiest way to look at what we call modern JavaScript code that runs on these modern browsers is to look at features that are already widely supported.

class

Has over 95% browser support

class Tut {
    constructor(title){
        this.title = title
    }
}

class VideoTut extends Tut{
    play(){
        console.log(`play The ${this.title}`)}}Copy the code

Arrow function

Arrow functions are supported at 96%

const addOneArrowFunc = num => num + 1;
Copy the code

The generator

Also 96% of browsers support generators

function* search(node){
    if(! node)return;
    yield node;
    yield* search(node.firstChild);
    yield* search(node.nextSibling);
}

for(let node of search(document)) {if(node.localName === 'title') {console.log(node.textContent);
        break}}Copy the code

• The code above takes full advantage of JavaScript features to implement lazy binary lookup in the DOM tree

Block-level scope

const events = {
    click: log,
    mouseup:log
}

for(let type in events){
    let fn = events[type]
    addEventListener(type,function(e){
        fn(e)
    })
}
Copy the code

• Block-level scoping, constant let declarations, free of hosting issues, and 95% browser support

deconstruction

function add({a, b=0}){
    return a + b;
}

const {x,y,z=0} = {x:1.y:2};

const [a,...rest] = 'abc'.split(' ')
Copy the code

Deconstruction has 94% support

Rest and spread

Math.max(... [1.2.3]);
let unique = [... new Set([1.2.2.3]]Copy the code

Rest parameters and REST extensions are also 94% supported

Object shortcut

let a = 1, b = 2
const obj = {a,b};
const Myth = {
    random() { return 42}}Copy the code

Object shortcuts are now 95% supported by browsers

Asynchronous programming

ES2017 is new but also has 95% browser support