ES6真的已经大行其道了吗？ES6是用来替代lodash API的吗？
我也很纠结，所以折中的方案是只用需要的，例如&br&&div class=&highlight&&&pre&&code class=&language-text&&var find = require('lodash.find');
&/code&&/pre&&/div&&br&能用Array.prototype.filter or Array.prototype.map等等的尽量用语言自带的，而需要用lodash的时候就只包含某个功能，而不是全部。
我也很纠结，所以折中的方案是只用需要的，例如var find = require('lodash.find');能用Array.prototype.filter or Array.prototype.map等等的尽量用语言自带的，而需要用lodash的时候就只包含某个功能，而不是全部。
其实 lodash 或 ramda 之类的库，并不只是提供了一些数据处理的基础方法，同时还方便了我们以 Functional Programming 的思路来进行数据处理。对于习惯使用 ramda 的朋友来说，肯定已经很了解 Functional Programming 所带来的好处，但是很多使用 lodash 的朋友还是只把它当做一个 util 来使用。下面我用 lodash 具体说一下到底他提供了那些原生 ES6 没有的功能。&br&&br&&b&lodash/fp&/b&&br&首先我需要声明一点，我后面提到的所有方法都是 lodash/fp 下面的，关于他的具体介绍可以看这里：&a href=&///?target=https%3A///lodash/lodash/wiki/FP-Guide& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&FP Guide · lodash/lodash Wiki · GitHub&i class=&icon-external&&&/i&&/a&&br&它是可以按需加载的，如果我只需要 map，那么我可以 &i&import map from 'lodash/fp/map'&/i&，它就只会引入 map 相关的代码。&br&&br&&b&Immutable&/b&&br&lodash/fp 下面的所有方法，都是 Immutable 的。就是说所有的方法都不会改变传入参数的原始对象，只会返回一个新的对象。&br&&br&这样强制规定以后，就可以避免一不小心修改了原始对象造成了错误。而 JS 原生的 Array 方法，有一些是 mutable 的，有一些是 immutable 的，即使很熟悉的人也有可能一不注意就犯错了。我以前就在原生的 reverse 方法坑惨了，它竟然是 mutable 的。。。&br&&br&&b&Compose&/b&&br&lodash/fp 下面的所有方法，都是 Auto-curried Iteratee-first Data-last 处理过的。这三个形容词是什么意思呢？&br&Auto-curried：所有的方法都是柯理化的&br&Iteratee-first：处理过程（函数）作为第一个参数传入&br&Data-last：处理对象作为最后的参数传入&br&这三个处理在我的理解中，都是为了 compose 做准备的。什么是 compose 呢？下面可以看一个例子：&br&&div class=&highlight&&&pre&&code class=&language-js&&&span class=&kr&&import&/span& &span class=&nx&&toUpper&/span& &span class=&nx&&from&/span& &span class=&s1&&'lodash/fp/toUpper'&/span&&span class=&p&&;&/span&
&span class=&kr&&import&/span& &span class=&nx&&head&/span& &span class=&nx&&from&/span& &span class=&s1&&'lodash/fp/head'&/span&&span class=&p&&;&/span&
&span class=&kr&&import&/span& &span class=&nx&&flow&/span& &span class=&nx&&from&/span& &span class=&s1&&'lodash/fp/flow'&/span&&span class=&p&&;&/span&
&span class=&kr&&import&/span& &span class=&nx&&filter&/span& &span class=&nx&&from&/span& &span class=&s1&&'lodash/fp/filter'&/span&&span class=&p&&;&/span&
&span class=&kr&&const&/span& &span class=&nx&&names&/span& &span class=&o&&=&/span& &span class=&p&&[&/span&&span class=&s1&&'liu'&/span&&span class=&p&&,&/span& &span class=&s1&&'wang'&/span&&span class=&p&&,&/span& &span class=&s1&&'chen'&/span&&span class=&p&&];&/span&
&span class=&kr&&const&/span& &span class=&nx&&toUpperHeadNames&/span& &span class=&o&&=&/span& &span class=&nx&&flow&/span&&span class=&p&&(&/span&
&span class=&nx&&toUpper&/span&&span class=&p&&,&/span&
&span class=&nx&&head&/span&
&span class=&p&&);&/span&
&span class=&kr&&const&/span& &span class=&nx&&toUpperHeadNamesWithoutL&/span& &span class=&nx&&flow&/span&&span class=&p&&(&/span&
&span class=&nx&&toUpperHeadNames&/span&&span class=&p&&,&/span&
&span class=&nx&&filter&/span&&span class=&p&&(&/span&&span class=&nx&&letter&/span& &span class=&o&&=&&/span& &span class=&nx&&letter&/span& &span class=&o&&!==&/span& &span class=&s1&&'L'&/span&&span class=&p&&)&/span&
&span class=&p&&);&/span&
&span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&log&/span&&span class=&p&&(&/span&&span class=&nx&&toUpperHeadNames&/span&&span class=&p&&(&/span&&span class=&nx&&names&/span&&span class=&p&&))&/span& &span class=&c1&&// ['L', 'W', 'C']&/span&
&span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&log&/span&&span class=&p&&(&/span&&span class=&nx&&toUpperHeadNamesWithoutL&/span&&span class=&p&&(&/span&&span class=&nx&&names&/span&&span class=&p&&))&/span& &span class=&c1&&// ['W', 'C']&/span&
&/code&&/pre&&/div&在上面的例子中，我们使用了 lodash 提供的 compose 方法 flow，将两个基本函数组合成了我们所需要的数据处理函数，然后又把这个数据处理函数与另一个基础函数组合成了另一个数据处理函数。也就是说，我们可以通过 compose 对函数进行任意的组合，这样可以极大的增加函数的灵活性和复用性。这也是原生方法所不能提供的便利。&br&&br&&b&Lazy Evaluation&/b&&br&通过 flow 创建的函数是 lazy evaluation 的。lazy evaluation 的解释可以参考这里 &a href=&///?target=https%3A//en.wikipedia.org/wiki/Lazy_evaluation& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Lazy evaluation&i class=&icon-external&&&/i&&/a&。简单来说，就是当处理过程复杂的情况下，lazy evaluation 可以让计算性能提高非常多。flow 已经自带做了这种性能优化，而原生的链式调用是不会有这种性能优化的。
其实 lodash 或 ramda 之类的库，并不只是提供了一些数据处理的基础方法，同时还方便了我们以 Functional Programming 的思路来进行数据处理。对于习惯使用 ramda 的朋友来说，肯定已经很了解 Functional Programming 所带来的好处，但是很多使用 lodash 的…
已有帐号？
无法登录？
社交帐号登录V8 团队眼中的 ES6、ES7及未来 - WEB前端 - 伯乐在线
& V8 团队眼中的 ES6、ES7及未来
V8团队致力于让 JavaScript 演变成一门表达能力强，定义明确，更容易开发高效、安全、正确的Web应用的编程语言。2015年6月， 经由TC39标准委员会的批准，成为 JavaScript 语言版本的一次最大的升级。这次升级为 JavaScript 带来了许多新特新包括 , , , , ,
和一些额外的语法糖。TC39标准委员会也加快了新规范定稿的节奏并于2016年2月发布了ES7的草案，该草案预计将在今年夏天定稿。由于发布周期较短，与ES6相比，ES7并没有增加太多的新特性，比较引人注意的是它增加了
今天，JavaScript 引擎发展到了一个重要的里程碑：V8 支持了 ES6 和 ES7。你可以通过安装 Chrome Canary 版本（Chrome 金丝雀版，一个比 Dev 还要更新得更快的版本 —— 译者注）使用这些新的语言特性，而这些新特性将在 Chrome 52 正式版中默认支持。
由于规范在不断演变，Web兼容性、实现一致性等各种复杂，使得决定什么特性在哪个 JavaScript 引擎版本被充分支持成为个难题。接下来我们讨论为什么引擎考虑对规范的支持相比于升级版本号要复杂得多，为什么尾调用优化到目前为止依然在讨论中，以及还有什么附加工作还在进行中。
演变的规范
当TC39标准委员会决定加快升级 JavaScript 的脚步后，JavaScript 语言的最新版本成为了非正式的草稿版本。虽然 ECMAScript 规范以年为周期提出草稿和正式发布，但 V8 引擎不仅仅实现了最新的正式版本（例如：ES6），还包括一些已经几乎成为标准，不会再有大的变化，实现足够安全（以后应该不会再大改）的特性（例如：乘方运算符和Array.prototype.includes()从ES7草稿中实现）。V8引擎遵循的一个基本的原则是，浏览器中的语言特性实现要遵守现有规范，或者至少是即将成为的规范。事实上，实现一个正式版本的语言规范的过程涵盖了对一些特性的修正和完善，这些修正许多会被包含到下一版本的 ECMAScript 规范中去。
如图：当前实现的特性中包含部分还在进展中的规范
举一个现实的例子，如果我们要实现 ES6 规范里规定的正则表达式的，V8引擎团队发现这个新规范一旦支持将使得许多之前正常的网站出现错误（比如那些使用了这个流行的npm库的网站全不好使了）。由于保证兼容性是web的重要考量，V8和Safari JavaScriptCore团队的工程师们提出了一个给正则表达式规范来防止之前的网站出错，这个修正得到TC39标准委员会的认同。这个修正案预计在ES8中由TC39标准委员会正式提出，但它已然成为ECMAScript语言的一部分，V8引擎已经实现了它。
语言规范的不断细化意味着每一个版本（包括仍在评估中的草案）不断修正和完善之前的版本，引擎的升级表面上在不断支持 ES6 和 ES7 特性，事实上底下的工作非常复杂。不考虑实际情况仅根据语言规范一刀切是不可能的，可能对 V8 引擎最恰当的描述是，V8 的实现遵循“尽可能贴近未来ECMAScript标准”这一原则。
衡量一致性
有许多方法可以衡量JavaScript引擎对ECMAScript标准的兼容性，从而评估实现该规范有多复杂。V8团队，以及其他浏览器厂商，使用 作为持续保持与未来 ECMAScript 标准草案相一致的金科玉律。这组测试用例随着规范持续升级，并提供超过 16000 个单元测试，用来充分测试所有的语言特性，涵盖了边界条件。当前 V8 引擎通过了大约 98% 的测试用例，剩下的 2% 之所以没通过是因为有少数边界情况以及有部分还没有准备好支持的特性。
由于test262用例数目非常庞大，浏览结果成本也很高，所以还可以考虑其他可选方案，例如检查。kangax 整理的兼容性速查表能够非常方便地查看一个特性是否被特定浏览器引擎实现（比如），但是Kangax表没有充分测试所有的边界条件。目前为止，Chrome Canary 版本在Kangax表上支持了 98% 的 ES6 规范和 100% 的Kangax表列出的 ES7 规范（例如，在表上在ESnext tab页中标记为“2016特性”和“2016杂项”的部分）。
Kangax ES6兼容表剩余的2%测试是关于，这个特性其实在V8引擎中已经实现了，但是特意在 Chrome Canary 版本中关闭了，具体关闭这个特性的原因和开发体验有关，下面会详细说。如果想要把这个特性加上，可以在设置里面把“实验的JavaScript特性”选项开启，这样就可以强制打开这个特性，那样 Canary 就完全支持Kangax表上的ES6规范了。
尾调用优化
尾调用优化已经被实现但是没有在特性中默认支持的理由目前。ES6规范要求在严格模式下，函数尾调用不会出现堆栈溢出。这对某些编程范式是非常有用的（例如函数式编程——译者注），然而现在的实现方式有两个问题。首先，由于引擎消除尾递归是隐式的，函数是否符合尾调用而被消除了尾递归。这意味着开发者可能很难发现一些死的递归，如果它们恰好出现在末尾，因为这些递归的堆栈将不再溢出。其次，尾调用优化要求除掉尾调用执行时的调用堆栈，这将导致执行流中的堆栈信息丢失。这又进一步导致了两个后果：
这使得调试过程中信息更加难懂，因为堆栈不连续。
包含的执行流信息不完整可能会导致依赖于这些错误信息的收集分析用户端信息的一些遥测软件出错。
实现一个可以改善堆栈信息缺失问题，但是V8引擎和开发者工具团队还是认为当堆栈信息在调试过程中是完全确定的，并始终符合实际虚拟机堆栈的真实状态时，调试是最容易，最可靠和最准确的。何况，影子堆栈功能如果默认开启，会带来很大的性能开销。
基于以上原因，V8团队强烈建议用特殊的语法来指定尾递归优化。TC39标准委员会有一个叫做从语法上指定尾部调行为，这个提案由来自 Mozilla 和微软的委员提出。我们已经准备好了ES6的尾递归优化实现，我们也开始实现基于这一提案的尾调用优化语法。我们计划在下一次TC39会议中解决这一问题，从而决定究竟默认支持隐式尾调用优化还是显示使用尾调用优化语法。你可以测试每一种实现，通过 V8 启动参数 –harmony-tailcalls 和 –harmony-explicit-tailcalls。
ES6中最激动人心的承诺是 JavaScript 模块将支持通过名字空间来组织和区分不同的子系统。ES6
声明了模块，但是并没有说明在一个JavaScript程序中该如何加载模块。在浏览器中，最新的模块加载行为是通过来指定。尽管还需要额外的标准化工作来支持高级的动态模块加载API，Chromium已经支持模块化的script标签了。你可以在
关注我们的实现工作，在
仓库了解更多关于实验的模块加载API的具体思路。
ESnext 未来
可以预见在将来 ECMAScript 升级会变得更频繁而细碎。V8 团队已经开始实现更新的特性比如
等等，同时我们也经常检查ESnext实现进展和针对现有的ES6和ES7做性能优化。
我们力争继续推动 JavaScript 的演变，以及在尽早实现新特性和保持现有Web兼容和稳定性之间力求平衡，向TC39标准委员会提出设计问题和实现反馈。我们期待着看这些新特性能为开发者们带来不同寻常的美妙体验。
打赏支持我翻译更多好文章，谢谢！
打赏支持我翻译更多好文章，谢谢！
任选一种支付方式
关于作者：
可能感兴趣的话题
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2016 伯乐在线在 ES6 大行其道的今天，还有必要使用 lodash 之类的库吗？
按投票排序
我也很纠结，所以折中的方案是只用需要的，例如var find = require('lodash.find');
能用Array.prototype.filter or Array.prototype.map等等的尽量用语言自带的，而需要用lodash的时候就只包含某个功能，而不是全部。
其实 lodash 或 ramda 之类的库，并不只是提供了一些数据处理的基础方法，同时还方便了我们以 Functional Programming 的思路来进行数据处理。对于习惯使用 ramda 的朋友来说，肯定已经很了解 Functional Programming 所带来的好处，但是很多使用 lodash 的朋友还是只把它当做一个 util 来使用。下面我用 lodash 具体说一下到底他提供了那些原生 ES6 没有的功能。lodash/fp首先我需要声明一点，我后面提到的所有方法都是 lodash/fp 下面的，关于他的具体介绍可以看这里：它是可以按需加载的，如果我只需要 map，那么我可以 import map from 'lodash/fp/map'，它就只会引入 map 相关的代码。Immutablelodash/fp 下面的所有方法，都是 Immutable 的。就是说所有的方法都不会改变传入参数的原始对象，只会返回一个新的对象。这样强制规定以后，就可以避免一不小心修改了原始对象造成了错误。而 JS 原生的 Array 方法，有一些是 mutable 的，有一些是 immutable 的，即使很熟悉的人也有可能一不注意就犯错了。我以前就在原生的 reverse 方法坑惨了，它竟然是 mutable 的。。。Composelodash/fp 下面的所有方法，都是 Auto-curried Iteratee-first Data-last 处理过的。这三个形容词是什么意思呢？Auto-curried：所有的方法都是柯理化的Iteratee-first：处理过程（函数）作为第一个参数传入Data-last：处理对象作为最后的参数传入这三个处理在我的理解中，都是为了 compose 做准备的。什么是 compose 呢？下面可以看一个例子：import toUpper from 'lodash/fp/toUpper';
import head from 'lodash/fp/head';
import flow from 'lodash/fp/flow';
import filter from 'lodash/fp/filter';
const names = ['liu', 'wang', 'chen'];
const toUpperHeadNames = flow(
const toUpperHeadNamesWithoutL flow(
toUpperHeadNames,
filter(letter =& letter !== 'L')
console.log(toUpperHeadNames(names)) // ['L', 'W', 'C']
console.log(toUpperHeadNamesWithoutL(names)) // ['W', 'C']
在上面的例子中，我们使用了 lodash 提供的 compose 方法 flow，将两个基本函数组合成了我们所需要的数据处理函数，然后又把这个数据处理函数与另一个基础函数组合成了另一个数据处理函数。也就是说，我们可以通过 compose 对函数进行任意的组合，这样可以极大的增加函数的灵活性和复用性。这也是原生方法所不能提供的便利。Lazy Evaluation通过 flow 创建的函数是 lazy evaluation 的。lazy evaluation 的解释可以参考这里 。简单来说，就是当处理过程复杂的情况下，lazy evaluation 可以让计算性能提高非常多。flow 已经自带做了这种性能优化，而原生的链式调用是不会有这种性能优化的。
ES6真的已经大行其道了吗？ES6是用来替代lodash API的吗？
两者之间并没有冲突
已有帐号？
无法登录？
社交帐号登录搭配arrow箭头函数使用
_.map([1, 2, 3], function(n) { return n * 3; });
_.reduce([1, 2, 3], function(total, n) { return total + }, 0);
_.filter([1, 2, 3], function(n) { return n &= 2; });
[1, 2, 3].map(n =& n * 3);
[1, 2, 3].reduce((total, n) =& total + n);
[1, 2, 3].filter(n =& n &= 2);
2. Head & Tail
利用ES6中数组解构获取list中的头和尾部
_.head([1, 2, 3, 4]);
_.tail([1, 2, 3, 4]);
const [head, ...tail] = [1, 2, 3];
同样可以得到初始元素和最后一个元素的值
_.initial([1, 2, 3]);
_.last([1, 2, 3]);
const [last, ...initial] = [1, 2, 3].reverse();
在reverse反转数组前，利用Spread展开操作符来克隆数组
const xs = [1, 2, 3];
const [last, ...initial] = [...xs].reverse();
3. Rest & Spread
ES6中的Rest和Spread允许我们定义和调用接受一个可变数量的参数的函数。
var say = _.rest(function(what, names) {
var last = _.last(names);
var initial = _.initial(names);
var finalSeparator = (_.size(names) & 1 ? ', & ' : '');
return what + ' ' + initial.join(', ') +
finalSeparator + _.last(names);
say('hello', 'fred', 'barney', 'pebbles');
const say = (what, ...names) =& {
const [last, ...initial] = names.reverse();
const finalSeparator = (names.length & 1 ? ', &' : '');
return `${what} ${initial.join(', ')} ${finalSeparator} ${last}`;
say('hello', 'fred', 'barney', 'pebbles');
4. Curry柯里化
函数柯里化是指，把接受多个参数的函数转换成接受一个单一参数的函数
function add(a, b) {
return a +
var curriedAdd = _.curry(add);
var add2 = curriedAdd(2);
const add = a =& b =& a +
const add2 = add(2);
5. Partial
分步输入实参
var greet = function(greeting, name) {
return greeting + ' ' +
var sayHelloTo = _.partial(greet, 'hello');
sayHelloTo('fred');
const sayHelloTo = name =& greet('hello', name);
sayHelloTo('fred');
利用reset操作符，分步输入更多实参
const sayHelloTo = (name, ...args) =& greet('hello', name, ...args);
sayHelloTo('fred', 1, 2, 3);
// "hello fred"
6. Operators
更多可替代操作符
_.eq(3, 3);
_.add(10, 1);
_.map([1, 2, 3], function(n) {
return _.multiply(n, 10);
_.reduce([1, 2, 3], _.add);
[1, 2, 3].map(n =& n * 10);
[1, 2, 3].reduce((total, n) =& total + n);
返回Object对象中对应的path路径的值数组
var object = { 'a': [{ 'b': { 'c': 3 } }, 4] };
_.at(object, ['a[0].b.c', 'a[1]']);
_.at(['a', 'b', 'c'], 0, 2);
obj =& obj.a[0].b.c,
obj =& obj.a[1]
].map(path =& path(object));
arr =& arr[0],
arr =& arr[2]
].map(path =& path(['a', 'b', 'c']));
挑选对象某些属性
var object = { 'a': 1, 'b': '2', 'c': 3 };
return _.pick(object, ['a', 'c']);
const { a, c } = { a: 1, b: 2, c: 3 };
return { a, c };
9. Constant, Identity, Noop
_.constant({ 'a': 1 })();
// { a: 1 }
_.identity({ user: 'fred' });
// { user: 'fred' }
// undefined
内部使用arrow箭头定义上述函数
const constant = x =& () =&
const identity = x =&
const noop = () =& undefined;
也可以写成如下
(() =& ({ a: 1 }))();
// { a: 1 }
(x =& x)({ user: 'fred' });
// { user: 'fred' }
(() =& undefined)();
// undefined
10. Chaining & Flow
lodash中链式写法替代
_([1, 2, 3])
.tap(function(array) {
array.pop();
.reverse()
const pipeline = [
array =& {
array.pop();
array =& array.reverse()
pipeline.reduce( (xs, f) =& f(xs), [1, 2, 3]);
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：35746次
排名：千里之外
原创：51篇
转载：17篇
阅读：22795
(5)(3)(11)(20)(7)(20)(3)}