javascript - Babel 如何转换 rest/spread 运算符
问题描述
我想知道 Babel 是如何编译这段代码的?
const test = ({ val1, val2, ...rest }) => val1.toLowerCase();
test({
val1: 'Test',
val2: 'other',
o1: 'other',
o2: 'Another'
});
这是一个虚拟函数,它获取一个对象作为参数并返回val1
toLowerCase。所以没什么神奇的。
解决方案
没那么复杂。它将创建一个排除属性的数组,例如:['val1', 'val2']
并将整个对象和排除数组传递给一个函数:
var test = function test(_ref) {
var val1 = _ref.val1,
val2 = _ref.val2,
rest = _objectWithoutProperties(_ref, ["val1", "val2"]);
return val1.toLowerCase();
};
的实现_objectWithoutProperties
是这样的:
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
// This does the trick
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
// If the object keys were Symbols it will append them too.
// If we don't have any symbols this was unnecessary
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (
!Object.prototype.propertyIsEnumerable.call(source, key)
) continue;
target[key] = source[key];
}
}
return target;
}
最后_objectWithoutPropertiesLoose
实现是这样的:
function _objectWithoutPropertiesLoose(source, excluded) {
// if the source object was null so there's nothing to return
if (source == null) return {};
// initialize an empty object to assign values to it later
var target = {};
// get an array of keys from the source object and loop through it
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
// THIS IS WHERE IT HAPPENS: if the current key was present on the excluded array, so skip this iteration
if (excluded.indexOf(key) >= 0) continue;
// add the value with that key into the target object
target[key] = source[key];
}
// return the target object
return target;
}
推荐阅读
- python - Python ORM 与 sqlalchemy 多表
- tsql - TSQL 条件连接和引用表维度
- c# - 如何使用 Hashtable C# 从 Application_start(Global.asax.cs) 页面访问缓存值到整个项目?
- java - 在android中一次在每个标记上显示信息窗口
- r - R dplyr group by one column and filter rows according another two columns
- charts - How to draw an average column in Google Charts Bar Chart?
- javascript - Why doesn't my .JSX script recognize every image in a folder which I want to mass-resize?
- javascript - how to store data in array using vuejs
- c# - RuntimeBinderException:无法对空引用执行运行时绑定
- python - Python Azure Data Factory Update Pipeline