第一眼——ES6

617035918 发布于2019-08-20 12:12 / 1794人阅读

摘要：别色眯眯的不想走啦行行行，再看一眼瞧得咋地半夜看的同学，对不起不很酥胡。解决了以前那些无处安放的对象和作用域问题。要是您忘不了，之后还有的。。。

越来越多的框架推荐使用ES6进行高效开发，node也早已支持ES6，那不如就偷偷瞄一眼儿这性感的“编程语言”？
献给初学者

Go~ 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。。。

GPU云服务器云服务器第一眼 ES6 es6-系列 ES6入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80851.html

第七元素

摘要：今天，我们先看看第七种。这就是引入的原因。实际用途当你第一眼看到，你会在想，什么鬼，不想用。注册表每个是唯一的，即使两个描述一样的也不相等。第一句和第二句都是创建一个，不同的是，不再是每次创建不同的，它会从注册表中找，找到了就会返回。 typeof Symbol(): symbol Javascript 一共有6种数据类型：Undefined、Null、Number、String、Ob...

王晗 2019-08-20 11:24 评论0 收藏0
面试题目别有洞天 -> 从es6优雅解法，到降级polyfill，再到redux reduce

摘要：每次被执行时，和被传入，这个根据进行累加或者是自身消减，英文原意，进而返回最新的。之前的一篇文章：从一道面试题，到我可能看了假源码讨论了bind方法的各种进阶Pollyfill，今天再分享一个有意思的题目。从解这道题目出发，我会谈到数组的Reduce方法，ES6特性和Redux数据流框架中Reducer的命名等等。一道典型的题目，却如唐代诗人章碣《对月》诗中所云：别有洞天三十六，水...

econi 2019-08-21 11:33 评论0 收藏0
React+Webpack+ES6 兼容低版本浏览器（IE9）解决方案

摘要：本文记录如下起因在准备提测的那天，顺便打开看一眼注意，这里是原生不是用模拟的，排查后发现，原来是因为构造函数中使用了。简写如下老司机们肯定能一眼发现问题构造函数中不应该使用而是传入的应该改为改正之后，问题确实解决了。虽然过了兼容IE6的噩梦时代，IE依旧阴魂不散，因为你可能还要兼容IE9。在ES6已经普及的今天，用ES6写react已经成了标配。但是babel编译的js语法，由于某些...

hzc 2019-08-01 17:40 评论0 收藏0
React+Webpack+ES6 兼容低版本浏览器（IE9）解决方案

摘要：本文记录如下起因在准备提测的那天，顺便打开看一眼注意，这里是原生不是用模拟的，排查后发现，原来是因为构造函数中使用了。简写如下老司机们肯定能一眼发现问题构造函数中不应该使用而是传入的应该改为改正之后，问题确实解决了。虽然过了兼容IE6的噩梦时代，IE依旧阴魂不散，因为你可能还要兼容IE9。在ES6已经普及的今天，用ES6写react已经成了标配。但是babel编译的js语法，由于某些...

alphahans 2019-08-21 16:44 评论0 收藏0