摘要:别色眯眯的不想走啦行行行,再看一眼瞧得咋地半夜看的同学,对不起不很酥胡。解决了以前那些无处安放的对象和作用域问题。要是您忘不了,之后还有的。。。
越来越多的框架推荐使用ES6进行高效开发,node也早已支持ES6,那不如就偷偷瞄一眼儿这性感的“编程语言”?
献给初学者
检测本地是否支持ES6环境
简便方法:直接在浏览器调试工具下尝试输入Promise(ES6的新API,用于异步事件的处理),如果能打印出其构造函数,则支持(如果真有浏览器光是支持了Promise而不支持ES6,那我服!)
在开发环境里面使用ES6
webpack+babel 作为转译工具进行ES6到ES5的编译
wp的配置详见
《webpack的安装及配置》
安装插件:
babel-loader
npm install babel-loader
babel-core
npm install babel-core
babel-es2015-transform
npm install babel-babel-transform
在webpack.config.js的module属性中的loaders字段加入
{ test: /.js$/, loader: "babel" }
在项目根目录下创建配置文件.babelrc
{ "presets": ["es2015"] }一些新东西
class
类!
我们通过一个demo来初见一下js的class
class Student { getName() { console.log( " This is es6 style " ); } //注意:这里不用逗号 getClass() { console.log( "gp02" ); } }
let
块级作用域变量声明
以前通过var声明的变量因为变量提升的缘故,若非在函数作用域内声明,则为全局变量,而let则是解决了这个问题
一个实用场景:
//<=ES5 for ( var i = 0; i < 10; i ++ ) { } console.log( i );//9 变量提升到了全局 //ES6 for ( let ii = 0; ii < 10; i ++ ) { } console.log( ii );//undefined 变量只在for循环块级作用域中生效
Q:如何形成块级作用域?
大括号包围则形成一个块级作用域,如函数、循环、判断、选择等结构
{ let a = 0; } console.log( a );//undefined let k = 0; console.log( k );//0;
const
静态变量
const NAME = "Samuel"; NAME = "Lucifer"; console.log( NAME ); //报错,静态变量不能被重新复制,它相当于一个常量
箭头函数
用=>来表示匿名函数function() {}
如果没有=>后没有{},则表示返回=>后的内容
const A=(a, b)=>a+b;
等价于
const A = function(a, b) { return a+b; }
方便回调函数的定义
fetch(url).then((data)=>{ console.log( data ); //从写法上来说也体现了回调函数的意义,“拿到data了,接着做点什么” });
模块化
ES5的模块化
关键字:require module exports
遵循CommonJS规范
详见:前端模块化的那些事儿
ES6的模块化
关键字:import(导入) export(导出)
module.js
var number = 20; //通过export导出 export default number
import.js
//通过import引入module模块 import num from "./module.js" //这里是module.js的相对路径 //num对应module的出口number console.log( num );//20
第一眼差不多看到这儿吧。别色眯眯的不想走啦!
行行行,再看一眼:
瞧得咋地?
A bright new future is coming!(半夜看的同学,对不起!)
4不4很酥胡~。:)
解决了以前那些无处安放的对象和作用域问题。
要是您忘不了,之后还有ES6的API。。。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/80851.html
摘要:每次被执行时,和被传入,这个根据进行累加或者是自身消减,英文原意,进而返回最新的。 之前的一篇文章:从一道面试题,到我可能看了假源码讨论了bind方法的各种进阶Pollyfill,今天再分享一个有意思的题目。 从解这道题目出发,我会谈到数组的Reduce方法,ES6特性和Redux数据流框架中Reducer的命名等等。一道典型的题目,却如唐代诗人章碣《对月》诗中所云:别有洞天三十六,水...
摘要:本文记录如下起因在准备提测的那天,顺便打开看一眼注意,这里是原生不是用模拟的,排查后发现,原来是因为构造函数中使用了。简写如下老司机们肯定能一眼发现问题构造函数中不应该使用而是传入的应该改为改正之后,问题确实解决了。 虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9。在ES6已经普及的今天,用ES6写react已经成了标配。但是babel编译的js语法,由于某些...
摘要:本文记录如下起因在准备提测的那天,顺便打开看一眼注意,这里是原生不是用模拟的,排查后发现,原来是因为构造函数中使用了。简写如下老司机们肯定能一眼发现问题构造函数中不应该使用而是传入的应该改为改正之后,问题确实解决了。 虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9。在ES6已经普及的今天,用ES6写react已经成了标配。但是babel编译的js语法,由于某些...
阅读 3219·2021-10-21 17:50
阅读 3223·2021-10-08 10:05
阅读 3345·2021-09-22 15:04
阅读 545·2019-08-30 14:00
阅读 1916·2019-08-29 17:01
阅读 1477·2019-08-29 15:16
阅读 3206·2019-08-26 13:25
阅读 829·2019-08-26 11:44