Meta Interview Question
1. In JavaScript, write a function that takes an array as input that can contain both ints and more arrays (which can also contain an array or int) and return the flattened array.
ex. [1, [2, [ [3, 4], 5], 6]] => [1, 2, 3, 4, 5, 6]
2. Using HTML and CSS, show how you would create an image that would display another image (aligned to the bottom, right) when the user hovers over the image.
ex. The Facebook "edit profile picture" icon
Interview Answers
array.toString().split(',').map(Number), map need because input array has only integer types.
var flatten = function(arr, resultArr) {
var result = resultArr || [];
for(var i = 0; i < arr.length; i++) {
if(Array.isArray(arr[i])) {
flatten(arr[i], result);
} else {
result.push(arr[i]);
}
}
return result;
};
Alex's solution:
[1, [2, [ [3, 4], 5], 6]].toString().split(",").map(Number)
Works but I think it's missing the point. I would think the question is trying to see how you can traverse nested structures.
My solution traverses the array and does it recursively, which I think is appropriate when traversing nested structures:
function flatten(arr){
var newArr = [];
arr.forEach(function iterate(el){
if( el instanceof Array){
el.forEach(iterate);
}else{
newArr.push(el);
}
});
return newArr;
}
flatten([1, [2, [ [3, 4], 5], 6]]);
CSS question is fairly easy. Given two img elements with the classes "one" and "two", you can give them the styles:
.two{
display:none;
}
.one:hover + .two{
display: block;
}
Alex's solution:
[1, [2, [ [3, 4], 5], 6]].toString().split(",").map(Number)
Works but I think it's missing the point. I would think the question is trying to see how you can traverse nested structures.
function flatten(arr){
var newArr = [];
arr.forEach(function iterate(el){
if( el instanceof Array){
el.forEach(iterate);
}else{
newArr.push(el);
}
});
return newArr;
}
flatten(a);
function flatten(arr) {
var flatArray = [];
function _flatten(value) {
if (typeof value === 'number') {
flatArray.push(value);
} else {
value.map(function(value) {
_flatten(value);
});
}
}
arr.map(_flatten);
return flatArray;
}
arr.join().split(',').map(function(i) { return parseInt(i) });
const flatten = arr => arr.reduce((a, b) => b instanceof Array ? a.concat(flatten(b)) : a.concat(b), [])
function flatten (array) {
var flattened = [];
function helper (arr) {
for (var i = 0; i < arr.length; i++) {
if (typeof arr[i] === 'object') {
helper(arr[i]);
} else {
flattened.push(arr[i]);
}
}
}
helper(array);
return flattened;
}
/*
* Similar to Vinnie's answer, but more performant with fewer accessors
*/
function flattenArray(arr, dest) {
var flatArray = dest || [],
n = arr.length,
i, val;
for (i = 0; i < n; i++) {
val = arr[i];
if (Array.isArray(val)) {
flattenArray(val, flatArray);
} else {
flatArray.push(val);
}
}
return flatArray;
}
[].concat.apply([], arr);
1.Flatten an array using JavaScript :
var flatten = function(input, output) {
if(!output) output = [];
var
i= 0,
l= input.length;
for (; i < l; i++){
var value = input[i],
isArray = toString.call(value) === "[object Array]";
if(isArray) {
flatten(value, output);
}else {
output.push(value);
}
};
return output;
}
var arr = [4, [3, 6, [9, 1, 9, [5, 1]]], 8, [5]];
console.log(flatten(arr));
2. Use CSS Sprites.