8 ways to quickly populate Javscript arrays with data

preface

The problem of simulating data filling is often encountered in daily development. That is, to build some fake data, convenient debugging and development. Therefore, I sorted out common methods of data filling and shared them with more developers during my own learning process. Study together, refueling together, progressing together.

fill()

The fill() method fills all elements of an array from the start index to the end index with a fixed value. Does not include terminating indexes.

let arr  = Array(10).fill('1')
/ / / "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"]

let obj = Array(2).fill({name:'Tell me Jayne to hide.'.age:18})
/ / [{name: "call me might hide zhan", the age: 18}, {name: "call me might hide zhan", the age: 18}]
Copy the code

copyWithin()

The copyWithin() method shallowly copies part of the array to another location in the same array and returns it without changing the length of the original array. It’s filled with undefined.

 const arr = [...Array(10)].copyWithin(0)
//[ undefined, undefined, undefined, undefined, undefined ]
Copy the code

You can also copy the value of an array to another array based on the index

let arr = ['a'.'b'.'c'.'d'.'e'];
console.log(arr.copyWithin(0.3.4));
[ "d"."b"."c"."d"."e" ]
Copy the code

keys()

The keys() method is used to create an iterable from an array that contains the array keys. Return true if the object is an array, false otherwise.

// Populate the array
const arr = [...Array(10).keys()]
//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Copy the code

Array.from()

The array.from () method creates a new, shallow-copy Array instance from an array-like or iterable.

Array.from(arrayLike[, mapFn[, thisArg]])
Copy the code

parameter

ArrayLike A pseudo-array object or iterable that you want to convert to an array.

MapFn Optional If this parameter is specified, each element in the new array executes the callback function.

ThisArg Optional This object is optional when the callback function mapFn is executed.

Four methods of populating sequential data (other data also available)

const arr = Array.from(Array(10)).map((item,index) = >index)
//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Copy the code

const arr = Array.from(Array(10), (item, index)=>index)
//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Copy the code

const arr = Array.apply(null.Array(10)).map((item, index) = >index)
//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Copy the code

const arr = Array.from({length:10},(item,index)=>index)
Copy the code

map()

A Map object iterates based on the insertion order of the elements in the object – a for… The of loop returns an array of the form [key, value] after each iteration. Populate sequential data with a map

// const arr =[...Array(10)].map((item,index)=>index)
[ 0.1.2.3.4.5.6.7.8.9 ]
Copy the code

Array.of()

The array.of () method creates a new Array instance with a variable number of arguments, regardless of the number or type of arguments

const arr = Array.of(1.2.3);   
/ / [1, 2, 3]
Copy the code

The difference between array.of () and Array constructors is that they handle integer arguments: array.of (7) creates an Array with a single element of 7, while Array(7) creates an empty Array of length 7 (note: This is an array with seven empty Spaces, not seven undefined ones.

const arr = Array(7);          
// [,,,,,,]
const arr1 = Array(1.2.3);    
/ / [1, 2, 3]
Copy the code

ArrayBuffer()

The ArrayBuffer object is used to represent a generic, fixed-length buffer of raw binary data. Sometimes fixed-length buffers of raw binary data are created. You can use an ArrayBuffer, which is an array of bytes.

const buffer = new ArrayBuffer(8);

console.log(buffer.byteLength);
/ / 8
console.log(buffer);
//{ byteLength: 8 } Copy the code

Object.keys()

The object.keys () method returns an array of a given Object’s own enumerable properties in the same order as the property names would be returned if the Object were iterated through normally.

let arr = Object.keys(Array.apply(null, {length:10})).map((item= >+item));
[ 0.1.2.3.4.5.6.7.8.9 ]
Copy the code

Creates an array with the value String

let arr = Object.keys([...Array(10)]);
/ / / "0", "1", "2", "3", "4", "5", "6", "7", "eight" and "9"]
Copy the code

Temporary data can be created for presentation

let yData = Array.from({ length: 5 }, v => Math.random() * 10240)
 //[7513.437978671786, 5167.373983274039, 3814.0122504839223, 981.9482320596001, 4330.3850800180335]
 
let xData = Array.from({ length: 5 }, (v, w) => 'Tell me Jayne to hide.' + w)
/ / / "call me jen might hide 0", "call me jen might hide 1", "call me jen hid hide 2", "call me jen hid hide 3", "call me jen might hide 4"]
 Copy the code

summary

You can extend the method to create more complex data. Here is just a simple example, easier to understand, but also to help more people grasp.

This article is formatted using MDNICE