文档章节

徒手写一个es6代码库

lilugirl
 lilugirl
发布于 2018/12/12 22:26
字数 300
阅读 5
收藏 0
mkdir demo
cd demo
npm init
npm install -g babel
npm install -g babel-cli
npm install --save-dev babel-preset-es2015-node5

在项目目录创建两个文件夹 functional-playground 和lib

mkdir functional-playground
mkdir lib

在lib目录下创建文件 es6-functional.js

const forEach = (array, fn) => {
  let i;
  for (i = 0; i < array.length; i++)
    fn(array[i])
}

export default forEach

在functional-playground目录下创建文件play.js

import forEach from '../lib/es6-functional'

var array = [1, 2, 3]
forEach(array, (data) => console.log(data))

执行命令

babel-node functional-playground/play.js --presets es2015-node5

执行结果如下

 

也可以将上述脚本写到package.json中

执行 npm run playground 命令可以查看到一样的结果

 

在es6-functional.js中定义更多的抽象函数

const forEach = (array, fn) => {
  let i;
  for (i = 0; i < array.length; i++)
    fn(array[i])
}

const forEachObject = (obj, fn) => {
  for (var property in obj) {
    if (obj.hasOwnProperty(property)) {
      fn(property, obj[property])
    }
  }
}

const unless = (predicate, fn) => {
  if (!predicate)
    fn()
}

export {
  forEach,
  forEachObject,
  unless
}


在 play.js 调用

import {
  forEach,
  forEachObject,
  unless
} from '../lib/es6-functional'

var array = [1, 2, 3]
forEach(array, (data) => console.log(data))

let object = {
  a: 1,
  b: 2
}
forEachObject(object, (k, v) => console.log(k + ":" + v))

forEach([1, 2, 3, 4, 5, 6, 7], (number) => {
  unless((number % 2), () => {
    console.log(number, " is even")
  })
})

执行 npm run playground 命令 查看结果

© 著作权归作者所有

共有 人打赏支持
lilugirl
粉丝 94
博文 394
码字总数 108494
作品 0
杨浦
程序员
私信 提问
ES6新增核心语法一览

let 和const let不可以声明前置 let不可以重复声明 存在块级作用域 这样就可以替换掉原来IIFE的写法 const 声明的常量不可以改变 适用于let的也同样适用于const 解构赋值 数组的解构(用来给...

Monettt
2017/11/23
0
0
前端开发者不得不知的 ECMAScript 6 十大特性

ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。 本文主要针对ES6做一个简要介绍。 ...

oschina
2016/03/16
25.9K
24
实例感受-es6的常用语法和优越性

1.前言 前几天,用es6的语法重写了我的一个代码库,说是重写,其实改动的并不多,工作量不大。在重写完了的时候,就个人总结了一下es6常用的一些常用的语法和比es5优越的方面。下面提到的语法...

守候i
2017/11/13
0
0
2015 年 JavaScript 开发者调查报告

年底将至,JavaScript 开发者调查也已经结束,此次调查总共有 5000 份回复,我真的迫不及待要分享这次调查的细节,感谢所有的参与者,这是 JavaScript 社区伟大的时刻。 你写什么类型的 Java...

oschina
2015/12/16
5.9K
16
【探秘ES6】系列专栏(三):生成器

ES6作为新一代JavaScript标准,即将与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系...

一配
2015/10/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 没时间 没头发 但有钱

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @开源中国总经办主任 :分享齐一的单曲《这个年纪》 《这个年纪》- 齐一 手机党少年们想听歌,请使劲儿戳(这里) @肿肿卷 :我真的可以睡一天...

小小编辑
26分钟前
10
4
Django进阶 1.1 ORM基础—ORM 1.2.1 增删改查之查询 1.2.2 删改增 (1) 1.2.3 删改增 (2)

ORM基础 ORM是Django操作数据库的API,Django的作者将sql语句封装在里面供我们使用。 我们前面还提到过Django提供一个模拟数据库的工具,sqlite,供我们学习测试使用。 如果我们想使用mysql...

隐匿的蚂蚁
今天
3
0
Windows 上安装 Scala

在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了。 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法。 接下来,我们可以从 ...

honeymose
今天
3
0
数据库篇多表操作

第1章 多表操作 实际开发中,一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系...

stars永恒
今天
3
0
nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部