最基础的前端就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。前言BB放开我，我又要投诉了。看到这个题目，我就很秃了。那我为什么秃头？ECMAScript6(ES2015)做了很多更新。这么多更新我说完了。ECMAScript6入门-阮一峰，这里有学习链接，只能说老大牛逼。2015年6月正式发布，四年过去了。事实上，大多数人都掌握了它。其实还有一种误解，认为不是ES5的都属于ES6。想想其实挺搞笑的。为什么会有这样的误解呢？ES2015出来的时候，浏览器厂商的支持是不一样的。ES2016出来之后，支持还是不一样的。ES2017、ES2018、ES2019都是这样。这就产生了一个问题，release发布了，但是不一定什么时候支持。这是我前两天刚看的文章，更新速度真吓人。从JavaScript、ES6、ES7到ES10，你从哪里学来的？-疯狂技术极客盘点ES7、ES8、ES9、ES10新特性-乘风破浪提案流程从提案到正式标准需要经历五个阶段。每个阶段的更改都需要TC39委员会的批准。Stage0-Strawman（展示阶段）某人的idea（任何人都可以向TC39委员会提出，要求修改语言标准）Stage1-Proposal（征求意见阶段）idea公布、审查和讨论Stage2-Draft（草案阶段）Theideaisperfect,initialspecificationStage3-Candidate(candidatestage)确定完成，完成规范并初步实现浏览器。Stage4-Finished（完成阶段）到这里后基本可以在浏览器中使用了。将在下一个年度版本中添加。别跟我提目前所有关于IE什么的提案，你可以去TC39的官网查看。什么是巴别塔？Babel是一个JavaScript编译器。将ECMAScript2015+版本代码转换为向后兼容的JavaScript语法，以便能够在当前和旧版本的浏览器或其他环境中运行。以下是Babel可以做的事情的列表：语法转换通过Polyfill（通过@babel/polyfill模块）在目标环境中添加缺失的特性源代码转换（codemods）配置文件.babelrc{//presets字段集transcodingRule"presets":["es2015","react","stage-2"],//plugin"plugins":["transform-decorators-legacy","transform-class-properties"]}RunbeforePresets中的执行顺序插件。插件的顺序是从前到后（transform-decorators-legacy，transform-class-properties）。预设顺序是从后到前（stage-2，react，es2015）。官方预设官方写了一些常用环境的预设：@babel/preset-env@babel/preset-flow@babel/preset-react@babel/preset-typescriptpolyfillBabel默认只转换新的JavaScript语法（syntax），不转换新的Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象的API，以及一些定义在全局对象上的方法（如Object.assign、Array.includes）不会被转码。所以我们还需要使用babel-polyfill。看不到ES6背后的东西也没关系。想学，还是看看阮一峰老师吧。让我告诉你我认为ES6更新了什么。Standardization（国际化、unicode、标准化、健壮性、跨平台）Functionalmethods（以前用奇葩的方式实现的功能，这次官方给了你）Convenience（脚本语言在玩怒）let,const,Block-levelscopeandtemporarydeadzone之前没有块级作用域的概念（可以模拟try{}catch(e){}，性能嘿嘿嘿）。这次加入了块级作用域、let变量、const常量的概念。//输出什么？for(vari=0;i<4;i++){};i//4//输出什么？for(leti1=0;i1<4;i1++){};i1//UncaughtReferenceError:i1isnotdefined变量提升和临时死区大家都知道，在面试的时候，他们喜欢做一些花哨的事情。promotion是说var会被提升到最前面执行，所以不会有iisnotdefineddeadzone是说let定义的变量在声明之前是不能使用的。(function(){console.log(1,i)//14//4来自上面的测试例子，否则会像下面这样//UncaughtReferenceError:iisnotdefined})();(function(){console.log(2,i)vari='lilnong.top'//2undefined})();(function(){console.log(3,i)leti='lilnong.top'//UncaughtReferenceError:初始化前无法访问'i'})();在globalThis浏览器中，最顶层的对象是window，但是Node和WebWorker是没有window的。在浏览器和WebWorkers中，self也指向顶级对象，但是Node没有self。在Node中，顶级对象是全局的，但在其他环境中是不支持的。所以提供一个属性来访问顶级对象。解构，默认值数组解构赋值let[a,b,c]=[1,2,3];对象解构赋值let{foo,bar}={foo:'aaa',bar:'bbb'}stringdestructuringAssignmentconst[a,b,c,d,e]='hello'函数参数的解构赋值（这是比较常用)axios('https://www.lilnong.top/cors/axios-destructuring').then(({data})=>console.log(data))//y取默认值，和那么第一个输入参数的默认值为{}functionmove({x=0,y=0}={}){return[x,y];}move({x:3,y:8});//[3,8]移动({x:3});//[3,0]移动({});//[0,0]移动();//[0,0]//y没有默认值，第一个入参的默认值为{x:0,y:0}functionmove({x,y}={x:0,y:0}){返回[x,y];}移动（{x：3，y：8}）;//[3,8]移动({x:3});//[3,未定义]移动({});//[undefined,undefined]移动();//[0,0]字符串扩展，模板字符串，unicode字符串扩展，只能说是写起来比较爽。那么之前的写法其实也不是很好。会浪费空间，效率不高。${Math.random()}-${Date.now()}-lilnong.topunicode更好的支持、codePointAt、fromCodePoint、国际化标准化和表情符号。在JavaScript内部，字符以UTF-16格式存储，每个字符固定为2个字节。对于需要4个字节来存储的字符（Unicode代码点大于0xFFFF的字符），JavaScript认为它们是两个字符。这里有一个小插曲，weex中的Text组件不能包含Image组件来实现流式排列。（富文本组件好像可以解决）在实现这个功能的时候，想到可以把文字变成块，然后flex允许换行。在测试地址中，使用了两种方案来获取大于Oxffff的字符。forofcodePointAt判断大于0xFFFF，需要跳过字节。charCodeAt是ES5支持的，只能取小于0xFFFF。更多的API包括，startsWith,endsWith,repeat,padStart,padEnd,trimStart,trimEnd,matchAll随着原生提供的API越来越多，我们逐渐不需要使用Loadsh等工具库。正则表达式扩展、断言和unicode前瞻断言JavaScript语言正则表达式仅支持前瞻和负前瞻，不支持后视和负前瞻。向后看）。ES2018引入了后向断言，V8引擎版本4.9（Chrome62）已经支持该功能。“预先断言”是指x只在y之前匹配，必须写成/x(?=y)/。例如，要只匹配百分号前的数字，写/\d+(?=%)/。“Advancenegativeassertion”是指x只有不在y前面才匹配，必须写成/x(?!y)/。例如，要只匹配不在百分号之前的数字，写/\d+(?!%)/。ECMAScript6入门-BacklineAssertions-RuanYifeng数值扩展，API，指数运算符更多APINumber.isFinite(),Number.isNaN(),Number.parseInt(),Number.parseFloat(),Number.isInteger(),Number.isSafeInteger()、Number.EPSILON、Number.isSafeInteger()函数扩展、默认值、rest参数、箭头函数、尾调用优化尾调用优化我们知道，一次函数调用会在内存中形成“调用记录”，又称为“callframe”，保存调用位置、内部变量等信息，如果在函数A内部调用函数B，那么在A的调用帧之上也会形成一个B的调用帧，等到B运行完毕，将结果返回给A，B的调用帧就会消失。如果函数B在里面也调用了函数C，那么还有一个C的调用帧，以此类推。所有调用帧形成一个“调用堆栈”。递归是非常占用内存的，因为它需要同时保存数千或数百个调用帧，而且很容易出现“堆栈溢出”错误（stackoverflow）。但是对于尾递归，由于只有一个调用帧，所以不会出现“栈溢出”的错误。restparameters(()=>arguments)(1,2,3)//输出什么？UncaughtReferenceError:argumentsisnotdefinedArgumentscannotbeusedincompatiblefunctions((...args)=>args)(1,2,3)//输出是什么？[1,2,3]我们可以使用...来收集输入参数((a,...args)=>args)(1,2,3)//[2,3]即使我们之前使用了变量接收，整个使用...接收箭头函数this指向定义它的对象。您不能使用参数对象数组的扩展、扩展运算符、API和空白空间的扩展。举个例子你就知道了。重复数据删除，尽管这种方法有局限性。[...新集合([12,2,3,12,31,2,11,2,1,2,1,21,1,2,3,1,23,12,3,12,31,11,1,2,2,31,2,3])]APIArray.from(),Array.of(),Array.prototype.copyWithin(),Array.prototype.find(),Array.prototype。findIndex(),Array.prototype.fill(),Array.prototype.entries(),Array.prototype.keys(),Array.prototype.values(),Array.prototype.includes(),Array.prototype.flat(),Array.prototype.flatMap(),nodeList=document.querySelectorAll('div');//ES5写法[].slice.call(nodeList);//ES6写法Array.from(nodeList);objectExpansion,abbreviation,variablenameexpression,expansionoperator,API变量名表达式看到下面这样写的时候，我的心在撒谎。GET_USER_INFO='getBaseUserInfo'obj={[GET_USER_INFO](){//第一次看到是在vuex中单独定义获取数据console.log(arguments)},'abc.sdf'(){//vuewatch监听变化当console.log(arguments)}}APIObject.is(),Object.assign(),Object.getOwnPropertyDescriptors(),Object.setPrototypeOf(),Object.getPrototypeOf(),Object.keys(),Object.values()、Object.entries()、Object.fromEntries()新类型、新全局对象Symbol、Set、Map、Proxy、Reflect、Promise、Iterator、Generator、async、Class、Module。微信太多公众号：前端力农参考前端培训目录，前端培训规划，前端培训计划
