向现代 JavaScript 转换(1)

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

今天我们通过看一些例子，来判断这些代码是否是现代 JavaScript 来帮助大家从传统向现代 JavaScript 转换。

第一题，请看这两行代码

var tuts = ['deep learning','machine learning'];
tuts.indexOf('meta learning');

你怎么看，现代还是传统？答案是传统代码，下面给出解释

• 课程是用 var 声明
• 而且 indexOf 也是在 ES5 中引入的，所以这是传统代码
• 正确，这里使用的本质上不是新语法

第二题 请看另外两行代码，现代还是传统？

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

• 这里，object.assign 已经并不是什么新的语法，所以还是传统 JavaScript

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

其实这个代码不算现代 JavaScript 了，这个可能出乎大家意料，不是有 Promise

上面几个例子只是引出了一个问题，就是什么样代码算是现代 JavaScript ，现代 JavaScript 代码到底是什么意思?

首先，这里所谓现代 JavaScript 不是 ES2015 语法， 也不是 ES2017，甚至不是 ES2020

而是所有现代浏览器都支持的代码编写语法，目前 Chrome、Edge Firefox 和 Safari 占据了 90% 的浏览器市场。

基于上面渲染引擎的浏览器基本占据了另外 5％，而这些引擎支持的特性大致相同。这意味着 95% 的网站访问者都使用快速的现代浏览器，占据大部分市场份额的浏览器。

其实也就是说 他们会不断支持新的 JavaScript 特性，那么我们所谓的现代 JavaScript 代码也就是可以在这些现代浏览器上运行的代码最简单的方法是查看已经得到广泛支持的特性。

类

拥有超过 95％ 的浏览器支持

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

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

箭头函数

箭头函数的支持为 96%

const addOneArrowFunc = num => num + 1;

生成器

同样有 96% 浏览器支持生成器

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
    }
}

• 上面的代码充分利用了 JavaScript 特性，在 DOM 树上实现了惰性二分查找

块级作用域

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

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

• 块级作用域、常量let声明,摆脱了托管问题,并且拥有95％的浏览器支持

解构

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

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

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

解构拥有94%的支持

rest 和 spread

Math.max(...[1,2,3]);
let unique = [... new Set([1,2,2,3])]

rest参数和rest扩展的支持也是94%

对象快捷方式

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

对象快捷方式现在的浏览器支持为95%

异步编程

ES2017的新特性 但也拥有95%的浏览器支持

新特征	浏览器支持
类	95.5%
箭头函数	96%
生成器	96%
块作用域	95%
解构	94%
Rest 和 spread	94%
对象快捷方式	95%
Async/Await	95%