ES6

ES6标准发布后，前端人员也开发渐渐了解到了es6，但是由于兼容性的问题，仍然没有得到广泛的推广，不过业界也用了一些折中性的方案来解决兼容性和开发体系问题，但大家仍很疑惑，使用ES6会有哪些兼容性问题。 一、Nodejs下ES6兼容性现状   之前写了es6通过Babel编译后的在浏览器端的兼容性问题 《Babel下的ES6兼容性和规范》 ，随着范围的扩展，ES6在Nodejs上兼容性也有必要重新梳理下。   随着iojs的引入，新版的Nodejs开始原生支持部分ES6的特性，既然ES6在浏览器端使用需要使用babel等编译，在Nodejs总可以放心使用了吧。然而事实并非如此，为此在nodejs端，我也做了特性兼容性研究： ES6新特性在Nodejs下的兼容性列表 这里罗列下nodejs支持的新特性，没列出的新特性均为不支持。 https://iojs.org/en/es6.html https://kangax.github.io/compat-table/es6/ ES6特性 Nodejs兼容性 let,const,块 strict模式支持 class类 strict模式支持 Map，Set 和 WeakMap，WeakSet 支持 generators 支持 进制转换 支持 对象字面量扩展 支持 promise 支持 String对象新API 支持 symbols 支持

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> ES5 ES5中的继承，看图： function Super() {} function Sub() {} Sub.prototype = new Super(); Sub.prototype.constructor = Sub; var sub = new Sub(); Sub.prototype.constructor === Sub; // ② true sub.constructor === Sub; // ④ true sub.__proto__ === Sub.prototype; // ⑤ true Sub.prototype.__proto__ == Super.prototype; // ⑦ truefunction Super() {} function Sub() {} Sub.prototype = new Super(); Sub.prototype.constructor = Sub; var sub = new Sub(); Sub.prototype.constructor === Sub; // ② true sub.constructor === Sub; // ④ true sub.__proto__ === Sub.prototype; // ⑤ true Sub

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 下面是几篇比较好的Promise文章： [1] Promise是怎么工作的, http://wengeezhang.com/?p=13 [2] JavaScript进阶之路——认识和使用Promise，重构你的Js代码 - 雲霏霏, http://bluereader.org/article/57381475 [3] Promise的前世今生和妙用技巧, http://www.cnblogs.com/whitewolf/archive/2015/10/22/4902570.html [4] 谈谈使用promise时候的一些反模式, http://www.wtoutiao.com/p/p63e4h.html 来源： oschina 链接： https://my.oschina.net/u/2288810/blog/543389

最近在学习前端的各大流行框架, 主要学习了 Vue.js 和 React.js, 前段时间用 Vue.js + uikit 实现了 V2EX 的克隆版本, 最近又用 React.js + redux + bootstrap 实现了 RubyChina 的克隆版本, 两个项目都支持响应式布局. 不得不说这是学习新知识的一个有效途径. 这两个项目都比较合适学习 Vue.js 和 React.js 的朋友参考. Vue.js + V2EX 项目 代码地址: <https://github.com/liuzhenangel/v2ex_frontend> Demo: <http://v2ex.liuzhen.me> 关于这个项目的一些介绍和学习资料可以访问 [这里](https://github.com/liuzhenangel/v2ex_frontend) 查看 . 这篇文章主要介绍 React.js 的相关知识. React.js + RubyChina 项目 代码地址: <https://github.com/liuzhenangel/react-ruby-china> Demo: <http://ruby-china.liuzhen.me> 项目介绍 react-ruby-china 项目是一个利用 react, react-dom, react-redux, react

ES6新特性 关于E S6新特性我就不废话太多了，这里仅简单罗列一下： 箭头函数 类 增强的Object字面量 模板字符串 解构 参数默认值，不定参数，拓展参数 let与const 关键字 for of 值遍历 模块 Map和Set类型 Proxies Symbols Math，Number，String，Object 的新API Promises异步对象 参考1： http://www.cnblogs.com/Wayou/p/es6_new_features.html 参考2： http://babeljs.io/docs/learn-es2015/ Babel 6 由于目前主要浏览器不能够完全支持ES6，因此通常借助一些工具将ES6语法翻译成ES5， Babel即是这样一款工具。 最新的Babel 6与Babel 5及更早的版本有很大的差别， Babel变成了一个平台，而其他各种工具则以插件的形式安装。 通过控制台全局安装babel： npm install -g babel-cli 此时，全局安装的模块默认位于“C:\Users\zhl\AppData\Roaming\npm\node_modules”（Windows系统），为了正常使用Babel，一定要添加环境变量“NODE_PATH”，并指向上述路径。 为了使用Babel的翻译功能，安装ES6翻译插件（仍然全局安装）：

ES6作为新一代JavaScript标准，即将与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，Mozilla Web开发者博客推出了《 ES6 In Depth 》系列文章。CSDN已获授权，将持续对该系列进行翻译， 组织成 【探秘ES6】系列专栏 ， 供大家学习借鉴。本文为该系列的第四篇。 前两次学习了 生成器 和 迭代器 以后，脑袋有没有一团浆糊？哈哈。我承诺过本次我们将学习一些简单的东西。 那我们现在就开始吧！ “小句号”的基本使用 ES6新引入了一种新的字符串语法——模版字符串（Template Strings），它看起来和普通的字符串很像，区别在于它不是由单引号'或者双引号"来闭合，而是使用`（俗称：小句号）。我们来看个最简单的例子，它们其实就是字符串而已： context.fillText(`Ceci n'est pas une chaîne.`, x, y); 但是既然它被叫做“模版字符串”，那它应该不仅仅是用小句号来闭合的普通字符串吧？模版字符串让JavaScript有了一个简单的 字符串插值 功能——既写法美观又能很方便地将JavaScript变量替换到字符串中。 很多情景下都可以用到它，但最打动我的是它在毫不起眼的错误消息中的使用： function authorize(user, action) { if (!user

S6作为新一代JavaScript标准，正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，Mozilla Web开发者博客推出了《 ES6 In Depth 》系列文章。CSDN已获授权，将持续对该系列进行翻译，组织成 【探秘ES6】系列专栏 ，供大家学习借鉴。本文为该系列的第五篇。 本文讲述的是有关ES6剩余参数（Rest parameters）和默认参数（Defaults parameters）的使用。 剩余参数（Rest parameters） 当需要创建一个可变函数API时，该函数需要实现任意数目参数的输入。例如， String.prototype.concat 方法可接受任意数目的字符串参数输入。而在ES6中，可利用剩余参数来转变实现思路。 以下将结合实例说明。containsAll是一个可变函数，用于检测字符串是否包含成分子串。例如，containsAll("banana", "b", "nan")返回true，containsAll("banana", "c", "nan")则返回false。 采用传统写法的代码如下： function containsAll(haystack) { for (var i = 1; i < arguments.length; i++) { var needle = arguments[i]; if

ES6作为新一代JavaScript标准，即将与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，Mozilla Web开发者博客推出了《 ES6 In Depth 》系列文章。CSDN已获授权，将持续对该系列进行翻译， 组织成 【探秘ES6】系列专栏 ， 供大家学习借鉴。本文为该系列的第二篇。 你是如何遍历数组中的元素的？20年前JavaScript刚进入视野时，你应该是这样写的： for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } 直到ES5中原生JavaScript中添加了forEach方法： myArray.forEach(function (value) { console.log(value); }); 语法上简洁了一些，但是它有一个小小的不足：你不能用break语句跳出循环且不能在这个封闭的函数内使用return语句。 如果有一个简单的for-loop语法来遍历数组就好了。 使用一个for-in循环怎么样？ for (var index in myArray) { // don't actually do this console.log(myArray[index]); } 我用几个理由来说明这并不是一个好主意：

ES6作为新一代JavaScript标准，即将与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，Mozilla Web开发者博客推出了《 ES6 In Depth 》系列文章。CSDN已获授权，将持续对该系列进行翻译， 组织成 【探秘ES6】系列专栏 ， 供大家学习借鉴。本文为该系列的第三篇。 ES6生成器介绍 什么是生成器呢？ 请先看看以下代码。 function* quips(name) { yield "hello " + name + "!"; yield "i hope you are enjoying the blog posts"; if (name.startsWith("X")) { yield "it's cool how your name starts with X, " + name; } yield "see you later!"; } 这是一段有关汤姆猫（talking cat）的代码。它看上去像是一个函数，是吗？在ES6中，它的名字是生成器函数，其与普通函数有很多相似的地方。但有两点不同： 生成器函数以function*开头； 在生成器函数中，yield是一个关键字，如同return。yield可以多次使用，作用是中断生成器， 而在需要的时候可以恢复生成器的执行 。 所以生成器函数最大的特点是可以中断自己，但普通函数不可以。

ES6作为新一代JavaScript标准，已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，Mozilla Web开发者博客推出了《 ES6 In Depth 》系列文章。CSDN已获授权，将持续对该系列进行翻译，组织成 【探秘ES6】系列专栏 ，供大家学习借鉴。本文为该系列的第六篇。 什么是解构赋值？ 解构赋值可将数组的元素或对象的属性赋予给另一个变量，该变量的定义语法与数组字面量或对象字面量很相似。此语法非常简洁，相比于传统的属性访问方式，更加直观清晰。 在不使用解构赋值的情况下，通常我们这样访问数组中的元素： var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; 使用解构赋值后，代码得到了极大的简化，同时可读性也更强： var [first, second, third] = someArray; 除了个别特性，解构赋值的大部分特性在SpiderMonkey（Firefox的JavaScript引擎）中都已得到支持，详见 bug 694100 。 解构数组与其可迭代性 上面的例子为我们展示了解构赋值在数组中的运用，其基本语法形式为： [ variable1, variable2, ..., variableN ] = array;