Question

我熟悉JavaScript基础知识，但我正在尝试使用我的代码提高效率。为了练习，我制作了一个生成Fibonacci序列的程序。这是我的JavaScript代码：

let currentDigit = 1;
let lastDigit = 0;
let text = document.getElementById('numbers');


for (i = 0; i<=30; i++) {
    let temp = currentDigit;
    text.innerHTML += " " + currentDigit;
    if(i !== 30) {
        text.innerHTML += ","
    }
    currentDigit += lastDigit;
    lastDigit = temp;
}

我可以对此做出哪些改进，使其更清洁，更高效，更快捷？

Codepen

Answer 1

（参见更新以获得更有效的方法）

虽然这不一定更快，但它确实可以分离关注点，绝对是一种更清洁的方法。也就是说，使用a generator function：

function * fibonacci (length, curr = 1, last = 0) {
  for (let i = 0; i < length; i++) {
    yield curr;
    [curr, last] = [curr + last, curr];
  }
}

let text = document.getElementById('numbers');

text.append(Array.from(fibonacci(31)).join(', '));

<div id="numbers"></div>

只是澄清一下，生成器函数通常不被视为优化方法，因为允许yield和yield*等操作需要大量开销。

我可以添加关于DOM操作的另一点是create a text node and append()它到#numbers元素而不是导致浏览器完全重新解析元素@SLaks指出。这样做确实更有效率。

更新

玩@le_m's comment，这也有效：

function fibonacci (length, next = 1, curr = 0) {
  const mapFn = () => {
    [next, curr] = [next + curr, next];
    return curr;
  };

  return Array.from({ length }, mapFn);
}

let text = document.getElementById('numbers');

text.append(fibonacci(31).join(', '));

<div id="numbers"></div>

Answer 2

这是您的代码的优化版本，具体取决于您正在运行的引擎中优化解构分配的程度。

let a = 0;
let b = 1;
text.append(" ", Array.from(Array(31), () => [a,b] = [b,a+b], a).join(", "));

＆＃13;

let currentDigit = 1;
let lastDigit = 0;
let text = document.getElementById('numbers');

for (i = 0; i<=30; i++) {
    let temp = currentDigit;
    text.innerHTML += " " + currentDigit;
    if(i !== 30) {
        text.innerHTML += ","
    }
    currentDigit += lastDigit;
    lastDigit = temp;
}


text = document.getElementById('numbers2');
let a = 0;
let b = 1;
text.append(" ", Array.from(Array(31), () => ([a,b] = [b,a+b], a)).join(", "));

＆＃13;

<pre id=numbers>Your version:</pre>
<pre id=numbers2>New version:</pre>

＆＃13;

或者使用for-of循环，再次取决于优化。

let a = 0;
let b = 1;
let arr = Array(31);
for (const i of arr.keys()) {
  arr[i] = ([a,b] = [b,a+b], a);
}
text.append(" ", arr.join(", "));

＆＃13;

let currentDigit = 1;
let lastDigit = 0;
let text = document.getElementById('numbers');

for (i = 0; i<=30; i++) {
    let temp = currentDigit;
    text.innerHTML += " " + currentDigit;
    if(i !== 30) {
        text.innerHTML += ","
    }
    currentDigit += lastDigit;
    lastDigit = temp;
}


text = document.getElementById('numbers2');
let a = 0;
let b = 1;
let arr = Array(31);
for (const i of arr.keys()) {
  arr[i] = ([a,b] = [b,a+b], a);
}
text.append(" ", arr.join(", "));

＆＃13;

<pre id=numbers>Your version:</pre>
<pre id=numbers2>New version:</pre>

＆＃13;

如何提高JavaScript的效率？

2 个答案:

更新