javascript-TypeScript Transpile-循环vs数组切片

在ES6中,我们可以使用rest参数,有效地创建参数数组. TypeScript使用for循环将其转换为ES5.我想知道是否存在使用for循环方法比使用Array.prototype.slice更好的选择?也许存在slice选项无法涵盖的极端情况?@H_403_2@

@H_403_2@

// Written in TypeScript
/*
const namesJoinTS = function (firstName,...args) {
    return [firstName,...args].join(' ');
}

const res = namesJoinTS('Dave','B','Smith');
console.log(res)
*/

// TypeScript above transpiles to this:
var namesJoinTS = function (firstName) {
  var args = [];
  for (var _i = 1; _i < arguments.length; _i++) {
    args[_i - 1] = arguments[_i];
  }
  return [firstName].concat(args).join(' ');
};
var res = namesJoinTS('Dave','Smith');
console.log(res); //Dave B Smith

// Vanilla JS
var namesJoinJS = function (firstName) {
  var args = [].slice.call(arguments,1);
  return [firstName].concat(args).join(' ');
};
var res = namesJoinJS('Dave','Smith');
console.log(res); // //Dave B Smith
最佳答案
这种怪异的转换是旧版V8曾经(可能仍然)有偏差优化的副作用.他们极大地优化了某些模式,但并不关心整体性能,因此,一些奇怪的模式(例如将参数复制到数组中的for循环*)的运行速度更快.因此,图书馆和图书馆的维护者.编译器开始寻找相应的方法来优化其代码,因为它们的代码可在数百万个设备上运行并且每毫秒计数.现在,随着V8中的优化变得更加成熟并专注于平均性能,这些技巧中的大多数不再起作用.将它们从代码库中重构出来只是时间问题.@H_403_2@

此外,JavaScript正在朝着一种可以更轻松地优化的语言的方向发展,诸如参数之类的旧功能被更严格的新功能(剩余属性)所替代,从而具有更高的性能.使用它们通过美观的代码实现良好的性能,参数是过去的错误.@H_403_2@

@H_403_2@

I was wondering is there any scenarios where using the for loop approach is a better option than using Array.prototype.slice?@H_403_2@

好吧,在较早的V8版本上速度更快,但仍然需要测试这种情况.如果您为项目编写代码,我将始终选择更优雅的解决方案,在99%的情况下,理论上可能会松散的毫秒数无关紧要.@H_403_2@

@H_403_2@

Maybe there are edge cases that the slice option does not cover?@H_403_2@

否(AFAIK).@H_403_2@

*您可能会问“为什么更快?”,那是因为:@H_403_2@

参数本身很难优化,因为@H_403_2@

1)可以重新分配(参数= 3)@H_403_2@

2)它必须是“实时的”,不断变化的参数将反映到参数中@H_403_2@

因此,只有直接访问它,才能对其进行优化,因为编译器随后可能会用变量引用替换类似数组的访问器:@H_403_2@

@H_403_2@

 function slow(a) {
   console.log(arguments[0]);
 }

 // can be turned into this by the engine:
 function fast(a) {
  console.log(a);
 }

如果您内联循环并且如果参数数量更改,则回退到另一个版本(可能更慢),这也适用于循环:@H_403_2@

@H_403_2@

 function slow() {
   for(let i = 0; i < arguments.length; i++) {
     console.log(arguments[i]);
   }
}

slow(1,2,3); 
slow(4,5,6);
slow("what?");

// can be optimized to:
function fast(a,b,c) {
  console.log(a);
  console.log(b);
  console.log(c);
}

function fast2(a) {
  console.log(a);
}

fast(1,3);
fast(4,6);
fast2("what?");

现在,如果您调用另一个函数并传递参数,则情况将变得非常复杂:@H_403_2@

@H_403_2@

 var leaking;

 function cantBeOptimized(a) {
   leak(arguments); // uurgh
   a = 1; // this has to be reflected to "leaking" ....
 }

function leak(stuff) { leaking  = stuff; }

cantBeOptimized(0);
 console.log(leaking[0]); // has to be 1

这不能真正优化,这是性能问题.
因此,调用函数并传递参数在性能上是一个坏主意.

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...