ES6
XU丶WEI
这个作者很懒,什么都没留下…
展开
-
es6的十大特性
ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。http://www.jianshu.com/p/53fe8b56cfb0本文主要针对ES6做一个简要介绍。 主要译自: http://webapplog.com/ES6/comment-page-1/。也许你还不知道ES6是什么, 实际上转载 2017-06-03 15:28:44 · 527 阅读 · 0 评论 -
使用ES6的新特性Proxy来实现一个数据绑定实例
项目地址:https://github.com/jrainlau/mog在线体验:点击预览http://codepen.io/jrainlau/pe…点击预览https://segmentfault.com/a/1190000007443611作为一个前端开发者,曾踩了太多的“数据绑定”的坑。在早些时候,都是通过jQuery之类的工具手动完成这些功能,但是当数据量非常大的时候,这些手动的工作让转载 2017-06-03 15:20:00 · 619 阅读 · 0 评论 -
es6学习笔记模块导入导出
ES6模块不是对象,而是通过export命令显式指定输出的代码,输入时也采用静态命令的形式。ES6的模块自动采用严格模式export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。关于export//直接导出export var year = 1958; //导出变量export function multiply(x, y) { //导出函数 return x转载 2017-06-03 15:19:20 · 383 阅读 · 0 评论 -
深入学习 ES6 的迭代器 和 for-of 循环
我们如何遍历数组中的元素?20年前JavaScript刚萌生时,你可能这样实现数组遍历:for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]);}自ES5正式发布后,你可以使用内建的 forEach 方法来遍历数组:myArray.forEach(function (value)转载 2017-06-03 15:18:18 · 283 阅读 · 0 评论 -
React ES6新特性
箭头操作符 http://blog.csdn.net/exialym/article/category/6170433如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=>便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs。我们知道在JS中回调是经常的事,而一般回调又以匿名函数的形式出现,每次转载 2017-06-03 15:17:34 · 288 阅读 · 0 评论 -
Promise对象的含义和基本用法
1.Promise的含义Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理更强大。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件 (通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。Promise对象有以下2个特点: 1.对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pen转载 2017-06-03 15:17:09 · 460 阅读 · 0 评论 -
es6笔记5^_^set、map、iterator
一、set1.基本用法 数据结构Set类似于数组,但是成员的值都是唯一的,没有重复的值。 let s = new Set(); [2,3,5,4,5,2,2].map(x => s.add(x)) for (let i of s) {console.log(i)}// 2 3 5 4//Set函数可以接受一个数组作为参数,用来初始化。 var items = new转载 2017-06-03 15:16:43 · 284 阅读 · 0 评论 -
ES2015函数扩展 - 函数参数的默认值
基本用法在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法function log(x, y){ y = y || 'world'; console.log(x, y);}log('Hello'); // Hello worldlog('hello', 'china'); // hello chinalog('hello', ''); // hello world转载 2017-06-03 15:16:18 · 217 阅读 · 0 评论 -
ES2015数组拓展 - Array.of()
Array.of方法用于将一组值,转换为数组Array.of(3,11,8) // [3,11,8]Array.of(3) // [3]Array.of(3).length // 1123123这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为差异。Array() // []Array(3) // [,,,]Array(3,11,转载 2017-06-03 15:15:25 · 306 阅读 · 0 评论 -
ES6迭代器指南
前言EcmaScript 2015 (又称ES6)提供一个全新的迭代器的概念,它允许我们在语言层面上定义一个(有限或无限的)序列。暂时先抛开它。我们对于for循环以及它的兄弟for-in循环,都已经十分的熟悉。后者可以被用来帮助我们理解迭代器。for (var key in table) { console.log(key + ' = ' + table[key]);}对于for-in循环转载 2017-06-03 15:21:15 · 233 阅读 · 0 评论 -
深入理解 Promise (上)
自从ES6流行起来,Promise 的使用变得更频繁更广泛了,比如异步请求一般返回一个 Promise 对象,Generator 中 yield 后面一般跟 Promise 对象,ES7中 Async 函数中 await 后面一般也是 Promise 对象,还有更多的 NodeAPI 也会返回 Promise 对象,可以说现在的编程中 Promise 的使用无处不在,那么我们是否真的弄懂了 Prom转载 2017-06-03 15:21:46 · 402 阅读 · 0 评论 -
ES6笔记 - Promise模式
http://coderlt.coding.me/2016/07/17/ES6-promise/Promise 为异步编程提供统一的解决方案,比传统的回调和事件更加合理有效。多重嵌套的回调函数,代码是横向发展,不是纵向发展,容易乱成一团,不便管理,称之为”callback hell”,回调地狱或回调恶梦。Promise就是为了解决这个问题而提出的。它不是新的语法功能,而是一种新的写法,允许将回调转载 2017-06-03 15:27:47 · 185 阅读 · 0 评论 -
es6语法快速上手
随着google和firfox以及node6.0对es6的支持,es6语法的定稿使它越来越受到关注,尤其是React项目基本上都是用es6来写的。是时候从es5到es6转变了http://www.tuicool.com/articles/IfERzaU<!–more–>一、相关背景介绍我们现在大多数人用的语法JavaScript 其实版本是ecmscript5,也是就es5。这个版本己经很多年了转载 2017-06-03 15:27:12 · 226 阅读 · 0 评论 -
深入理解ES7的async/await
在最开始学习ES6的Promise时,曾写过一篇博文 《promise和co搭配生成器函数方式解决js代码异步流程的比较》 ,文章中对比了使用Promise和co模块搭配生成器函数解决js异步的异同。在文章末尾,提到了ES7的async和await,只是当时只是简单的提了一下,并未做深入探讨。在前两个月发布的Nodejs V7中,已添加了对async和await的支持,今天就来对这个东东做一下深入的转载 2017-06-03 15:26:25 · 575 阅读 · 1 评论 -
深入掌握 ECMAScript 6 异步编程(四):async函数的含义与用法
原文出处: 阮一峰 本文是《深入掌握 ECMAScript 6 异步编程》系列文章的最后一篇。Generator函数的含义与用法Thunk函数的含义与用法co函数库的含义与用法async函数的含义与用法一、终极解决异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题。从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次转载 2017-06-03 15:25:18 · 497 阅读 · 0 评论 -
ES6笔记 - Generator函数
Generator 是一个分步执行的函数,可以根据需要执行下一步。合理利用这个特性可以很好解决异步编程回调嵌套的问题。简介Generator很像是一个函数,但是你可以暂停它的执行。你可以向它请求一个值,于是它为你提供了一个值,但是余下的函数不会自动向下执行直到你再次向它请求一个值。特征function 后面跟 *,函数体内有 yield 关键字执行Genertor函数返回一个遍历器对象,遇到 yi转载 2017-06-03 15:24:41 · 217 阅读 · 0 评论 -
ES6笔记 - 常用特性
这里列出在项目中常用的ES6相关特性,以便更快的理解和应用ES6。常用特性作用域控制 let、const模板字符串语法糖 - 箭头函数解构类与模块Promiselet & constconst 不可重新赋值的值 (常量、配置项以及引用的组件)let 使用let声明的变量只在语句块内有效let 的使用场景相对较少的,我们只会在 loop(for,while 循环)及少量必须重定义的变量上用到他le转载 2017-06-03 15:23:59 · 261 阅读 · 0 评论 -
深入理解 Promise (下)
经过几天源码研究学习之后,基本上对Promise有了深入的了解,也手动封装了自己了Promise工具类,下面就是我们去在应用场景中去验证这个工具类的使用了上 - 理论知识Promise 规范ES6 Promise APIPolyfill和扩展类库Promise 在应用中的错误用法和误区当作回调使用没有返回值没有catchcatch()与then(null, onRejected)断链穿透长度未知转载 2017-06-03 15:23:37 · 478 阅读 · 0 评论 -
深入理解 Promise (中)
经过上一篇 深入理解 Promise (上) 的理论知识和用法学习,这一篇让我们深入源码层面,一步一步去封装一个Promise,去了解Promise的内部实现,以便我们在项目中对Promise的使用运用自如。上 - 理论知识Promise 规范ES6 Promise APIPolyfill和扩展类库Promise 在应用中的错误用法和误区当作回调使用没有返回值没有catchcatch()与th转载 2017-06-03 15:23:16 · 498 阅读 · 0 评论 -
ES2015数组扩展 - Array.from()
Array.from方法用于把两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。下面是一个类似数组的对象,Array.from将它转为真正的数组let arrayLike = {"0":"a","1":"b","2":"c",length:3};// ES5的写法var arr1 = [].s转载 2017-06-03 15:13:28 · 336 阅读 · 0 评论 -
数组的解构赋值
基本用法ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称之为解构(Destructuring)// 以前为变量赋值,只能直接指定值var a = 1;var b = 2;var c = 3;// ES6允许写成这样var [a,b,c] = [1,2,3];12345671234567本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的转载 2017-06-02 16:16:50 · 181 阅读 · 0 评论 -
对象的解构赋值
解构不仅可以用于数组,还可以用于对象var {foo,bar} = {foo:"aaa",bar:"bbb"};foo // "aaa"bar // "bbb"123123对象的解构和数组有一个重要的不同。数组的元素是按此排序的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。var {bar,foo} = {foo:"aaa",bar:"bbb"};转载 2017-06-02 16:16:25 · 239 阅读 · 0 评论 -
延展操作符和解构的简单实际应用
延展操作符(…)function showMe(name,age){ return "名字是"+name+"年龄是"+age;}var name = "zhangsan";var age = 18;console.log(showMe(name,18));//名字是zhangsan年龄是18//或var me = ["jack",20];console.log(showM转载 2017-05-19 17:21:36 · 235 阅读 · 0 评论 -
总结ES6常用的新特性
http://luckykun.com/work/2016-05-10/es6-feature.htmlES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更”甜”的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数(=>)、class等等。用一句话来说就是:ES6给我们提供了许多的新语法和代码特性来提高javascript的体验不过转载 2017-05-19 17:19:33 · 328 阅读 · 0 评论 -
快速理解和使用 ES7 await/async
await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了。虽然没有在 ES2016 中录入,但很快就到来,目前已经在 ES-Next Stage 4 阶段。https://segmentfault.com/a/1190000007116715直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据老朋友 Ajax传统的写法,无需解释// 获取产品数转载 2017-06-04 22:22:24 · 213 阅读 · 0 评论 -
ES7的Async/Await 异步
阅读本文前,期待您对promise和ES6(ECMA2015)有所了解,会更容易理解。本文以体验为主,不会深入说明,结尾有详细的文章引用。第一个例子Async/Await应该是目前最简单的异步方案了,首先来看个例子。这里我们要实现一个暂停功能,输入N毫秒,则停顿N毫秒后才继续往下执行。12345678910111213141516var sleep = funct转载 2017-06-04 22:21:56 · 350 阅读 · 0 评论 -
深入理解Promise
本文缘起前段时间一朋友换工作时,笔试题中要求手写一个Promise。在工作中虽已大量使用Promise,其原理却没有深入探究过,换做自己,当场也很难手写一个完善的Promise实现。近期补了一些课,以本文来彻底的理解Promise实现原理。http://www.jianshu.com/p/f8b052c715501.Promise是什么Promise是抽象异步处理对象以及对其进行各种操作的组件,可转载 2017-06-04 22:21:24 · 440 阅读 · 0 评论 -
用ES6 Generator替代回调函数
目前,已经有很多文章讨论过了如何使用ES6 generators来取代JavaScript中经常遇到的“回调金字塔”。但是,其中提到的绝大多数方法都需要依赖于某个库,而对于其中的原理却提及甚少。在本文中,我们将一步一步的将一个基于回调函数的例子修改为一个基于generator的例子。本文的目标是让你透彻地理解使用generator替代回调函数的原理。Generator是JavaScript中一个新概转载 2017-06-04 22:20:37 · 331 阅读 · 0 评论 -
ES6 新特性范例大全
ECMAScript6(ECMAScript 2015 ,ES5,ES2016)技术已经在前端圈子很流行了,他给前端开发人员带来了很多惊喜,提供的语法糖使复杂的操作变得简单。http://www.css88.com/archives/7240本文没有详细描述这些新特性,因为网上都已经有很多相关的介绍了。主要针对ES6 新特性收集了相关范例代码,他可以让你快速了解这个新的JavaScript规范。箭头转载 2017-06-04 22:19:51 · 414 阅读 · 0 评论 -
浅谈Promise
https://hzzly.github.io/2017/03/25/%E6%B5%85%E8%B0%88Promise/接触过promise的的都知道它的应用场景和用途,Promise可以用来避免异步操作函数里的嵌套回调(callback hell)问题,因为解决异步最直接的方法是回调嵌套,将后一个的操作放在前一个操作的异步回调里,但如果操作多了,就会有很多层的嵌套(回调地狱)。12345678转载 2017-06-04 22:18:35 · 365 阅读 · 0 评论 -
箭头函数学习初步
回忆一下,我们定义函数的通常写法function getName(){ return "zhangsan";}或var getName = function(){ return "zhangsan";}12345671234567新的写法let getName2 = ()=>{ return "zhangsan";}或let getName2转载 2017-05-19 17:23:56 · 230 阅读 · 0 评论 -
令人振奋的Class(上)
可以在这里测试http://babeljs.io/repl/ es2015中定义类: clss me { showName() { return "张三"; } } // 实例化类 let m = new me(); console.log(m.showName());1转载 2017-05-19 17:25:02 · 203 阅读 · 0 评论 -
变量解构赋值的用途
变量解构赋值用途很多 1.交换变量的值[x,y] = [y,x];112.从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能把它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便了。// 返回一个数组function f(){ return [1,2,3];}var [a,b,c] = f();// 返回一个对象function f(){ return {f转载 2017-06-02 16:15:57 · 190 阅读 · 0 评论 -
ES2015字符串的扩展
includes()、startsWith()、endsWith()传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。 ES6又提供了三种新方法includes():返回布尔值,表示是否找到了参数字符串startsWith():返回布尔值,表示参数字符串是否在源字符串的头部endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部1转载 2017-06-02 16:15:31 · 197 阅读 · 0 评论 -
ES6中箭头函数的使用
基本用法ES6允许使用“箭头”(=>)定义函数。var f = v => v;上面的箭头函数等同于:var f = function(v) { return v; };如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。var f = () => 5; // 等同于 var f = function () { return 5 };var sum = (num1, nu转载 2017-06-02 16:15:03 · 211 阅读 · 0 评论 -
ES6中Set和WeakSet的使用
ES6中提供了两新数据结构-Set和WeakSet。Set是类似于数组,但是成员变量的值都是唯一的,没有重复的值。WeakSet也是不重复的值的集合,但是只能用来存放对象。一、Set使用(1)Set本身提供了一个构造函数,用来生成Set数据结构。var s = new Set();[2,2,2,5,8,16,2,1].map(x => s.add(x))for(i of s){console.转载 2017-06-02 16:14:32 · 292 阅读 · 0 评论 -
ES6中Json的与Map之间的转换
在学习开发React-Native中,从网络请求回来的数据用的json,于是就需要Json和字符串、Json和Map之间的转换。1.JSON与字符串的转换1.1Json转换为字符串 /** * * json转字符串 */ static stringToJson(data){ return JSON.parse(data); }123456712345671.2字符串转J转载 2017-06-02 16:14:05 · 594 阅读 · 0 评论 -
webpack+vue起步
webpack与vue起步 2016-05-31 VUE VUEhttp://mrzhang123.github.io/2016/05/31/webpack-vue-2/记得第一次知道Vue.js是在勾三股四大大的微博,那时候他开始翻译vue的文档,从那时候开始到现在,看了几次vue的教程,每次都有更深的理解,因为之前并没有研究过angular等框架,所以对MVVM并不是很了解,但是经过这段时间转载 2017-06-05 14:35:35 · 387 阅读 · 0 评论 -
[提高]ES2015中最惊艳特性之生成器函数初步
我们来设计一个简单无比的需求 比如我要通过简单的函数来返回 1.我的名字(zhangsan) 2.我的年龄(18岁 )往往我们需要写2个函数,如function showName/showAge 或者我们通过一个函数来返回对象function showMe(){ return {name:"zhangsan",age:18};}123123但是ES20转载 2017-05-19 17:28:07 · 235 阅读 · 0 评论 -
令人振奋的Class(下):继承和实战代码示例
class User{ constructor(n) { this._name = n; } showme() { console.log(this._name); }}// 继承class student extends User{ constructor(sname) { super(sname); }}// 实例化转载 2017-05-19 17:25:44 · 227 阅读 · 0 评论