Multiple Approaches for Creating Arrays with Repeated Elements in JavaScript and Performance Analysis

Introduction

In JavaScript development, there is often a need to create arrays containing the same element repeated multiple times. This requirement is particularly common in scenarios such as data initialization, test data generation, and placeholder creation. This article systematically introduces multiple methods for creating arrays with repeated elements, from basic implementations to advanced optimizations.

Basic Implementation Methods

The most intuitive implementation uses a for loop combined with the Array.prototype.push method:

function fillArray(value, len) {
  var arr = [];
  for (var i = 0; i < len; i++) {
    arr.push(value);
  }
  return arr;
}

This method has a time complexity of O(n) and space complexity of O(n). While simple and easy to understand, it may encounter performance bottlenecks when handling large-scale data.

ES6 Array.fill Method

ES6 introduced the Array.fill() method, providing a more concise implementation:

console.log(Array(5).fill(2))
// => [2, 2, 2, 2, 2]

This method features concise syntax but requires attention to browser compatibility issues. In environments supporting ES6, this is the preferred implementation approach.

Optimized Algorithm: Doubling Implementation

For scenarios requiring the creation of extremely large arrays, a doubling algorithm can be employed to optimize performance:

function fillArray(value, len) {
  if (len == 0) return [];
  var a = [value];
  while (a.length * 2 <= len) a = a.concat(a);
  if (a.length < len) a = a.concat(a.slice(0, len - a.length));
  return a;
}

The core concept of this algorithm is to reduce the number of operations by continuously doubling the array length. Detailed analysis is as follows:

• Initialization phase: Create an array containing a single element
• Doubling phase: Double the array length using the concat method
• Adjustment phase: Use the slice method to extract a subarray of the required length

Performance Comparison Analysis

Different methods exhibit significant differences in time complexity:

• Basic for loop: O(n) time complexity, performing one push operation per iteration
• Doubling algorithm: O(log n) time complexity, improving performance by reducing operation count
• Array.fill: Browser-native implementation, typically offering optimal performance

In practical testing, the performance advantage of the doubling algorithm becomes particularly evident when array length reaches the 10^6 level.

Implementation Detail Optimization

During implementation, the following details require attention:

• Boundary condition handling: Return an empty array directly when len is 0
• Memory management: Avoid unnecessary array copying operations
• Type safety: Ensure the correctness of input parameter types

Application Scenario Analysis

Different methods suit different application scenarios:

• Small-scale arrays: Recommend using Array.fill or basic for loops
• Large-scale arrays: Prioritize the doubling algorithm
• Compatibility requirements: Use basic implementations in environments not supporting ES6

Conclusion

JavaScript offers multiple implementation methods for creating arrays with repeated elements. Developers should choose appropriate methods based on specific requirements. For performance-sensitive large-scale applications, the doubling algorithm provides significant performance advantages; for general application scenarios, the Array.fill method offers the best development experience.