How to convert key-value object array into 2d array in javascript

<!-- language: lang-js -->

let th = ['name', 'id', 'class']
    
let arr = [
    { 'name' : 'a', 'class':'7', 'id':'1' },
    { 'name' : 'b', 'class':'7', 'id':'2' },
    { 'name' : 'b', 'class':'7', 'id':'3' },
    { 'name' : 'd', 'class':'7', 'id':'4' }
]
    
/* final array what is look like */
    
let finalArr = [
    ['a', '1', '7'],
    ['b', '2', '7'],
    ['c', '3', '7'],
    ['d', '4', '7']
]

How can I create this array without using forEach and map? This is a sample data, but in reality there are more than 10k data at a time so forEach is not a good option.

You have a typo in the third row, fixed here:
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let th = ['name', 'id', 'class'];

let arr = [
    { 'name': 'a', 'class': '7', 'id': '1' },
    { 'name': 'b', 'class': '7', 'id': '2' },
    { 'name': 'c', 'class': '7', 'id': '3' },
    { 'name': 'd', 'class': '7', 'id': '4' }
];

const transformedArr = arr.map(row => th.map(name => row[name]));
console.log(transformedArr);

<!-- end snippet -->

A potentially faster one, but actually slower up to 2x times than the above solution (tested in node.js / Chrome with 40000000 items in the arr, in Firefox seems the same, but it hangs on that amount of data):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let th = ['name', 'id', 'class'];

let arr = [
    { 'name': 'a', 'class': '7', 'id': '1' },
    { 'name': 'b', 'class': '7', 'id': '2' },
    { 'name': 'c', 'class': '7', 'id': '3' },
    { 'name': 'd', 'class': '7', 'id': '4' }
];

const transformedArr = [];

for (let i = 0; i < arr.length; i++) {
    const item = [];
    for (let j = 0; j < th.length; j++) {
        item.push(arr[i][th[j]]);
    }
    transformedArr.push(item);
}

console.log(transformedArr);

<!-- end snippet -->

You may be surprised by the performance of Array.map/Array.forEach (especially map). Here are performance tests for different approaches:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const arr4Test = [...Array(10000)].map((_, i) => ({name: `a`, class: 1, id: i}));
let finalArr = [];
// for ... of
let perf = performance.now();
for (let obj of arr4Test) {
finalArr.push(Object.values(obj));
}
perf = (performance.now() - perf).toFixed(5);
console.log(`for ... of ${JSON.stringify(finalArr.slice(0, 3))} ... ${perf}ms`);
// classic loop
perf = performance.now();
finalArr.length = 0;
for (let i = 0; i < arr4Test.length; i += 1) {
let tmpArr = [];
for (let key in arr4Test[i]) {
tmpArr.push(arr4Test[i][key])
}
finalArr.push(tmpArr);
}
perf = (performance.now() - perf).toFixed(5);
console.log(`classic loop ${JSON.stringify(finalArr.slice(0, 3))} ... ${perf}ms`);
// map
perf = performance.now();
finalArr = arr4Test.map(Object.values);
perf = (performance.now() - perf).toFixed(5);
console.log(`map => ${JSON.stringify(finalArr.slice(0, 3))} ... ${perf}ms`);
// forEach
finalArr.length = 0;
perf = performance.now();
arr4Test.forEach(v => finalArr.push(Object.values(v)));
perf = (performance.now() - perf).toFixed(5);
console.log(`forEach => ${JSON.stringify(finalArr.slice(0, 3))} ... ${perf}ms`);

<!-- end snippet -->

Regarding the Kooilinc's answer. Benchmarked the options and I think the classic loop test is not good, Object.values should be used as well as in the other tests otherwise it's unequal conditions:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<script name="benchmark" data-count="1000">
const arr4Test = [...Array(10000)].map((_, i) => ({name: `a`, class: 1, id: i}));
let finalArr = [];
// @benchmark for...off
finalArr.length = 0;
for (let obj of arr4Test) {
finalArr.push(Object.values(obj));
}
finalArr;
// @benchmark classic loop
finalArr.length = 0;
for (let i = 0; i < arr4Test.length; i += 1) {
let tmpArr = [];
for (let key in arr4Test[i]) {
tmpArr.push(arr4Test[i][key])
}
finalArr.push(tmpArr);
}
finalArr;
// @benchmark map
finalArr = arr4Test.map(Object.values);
finalArr;
// @benchmark forEach
finalArr.length = 0;
arr4Test.forEach(v => finalArr.push(Object.values(v)));
finalArr;
</script>
<script src="https://raw.githack.com/silentmantra/benchmark/master/benchmark.min.js"></script>

<!-- end snippet -->

You just need to push a new array to finalArr using .map and the order you want of the columns.

let arr = [
{ 'name' : 'a', 'class':'7', 'id':'1' },
{ 'name' : 'b', 'class':'7', 'id':'2' },
{ 'name' : 'b', 'class':'7', 'id':'3' },
{ 'name' : 'd', 'class':'7', 'id':'4' }
]
let finalArr = [];
arr.map(row => {
finalArr.push([row.name, row.id, row.class]);
})
console.log(finalArr);

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let th = ['name', 'id', 'class']
let arr = [{
'name': 'a',
'class': '7',
'id': '1'
},
{
'name': 'b',
'class': '7',
'id': '2'
},
{
'name': 'b',
'class': '7',
'id': '3'
},
{
'name': 'd',
'class': '7',
'id': '4'
}
];
let data = arr.map((e) => ([e.name, e.id, e.class]));
console.log(data);
let data1 = arr.map((e) => th.map((j) => e[j]))
console.log(data1);
console.log(arr.map((e) => (Object.values(e))));

<!-- end snippet -->