hiiamyes/f2e-interview-question.md

## f2e-interview-question.md

      
    Raw
  

              f2e-interview-question.md
            
          
    CSS


What is CSS BEM?

Haven't used BEM before, but as I know, it's a class name naming convension, for better managing css code.

What is the difference between em and rem units?


em: Representing relative font-size, relative to parent element.
rem: root em, representing relative font-size, but only relative to root element (<html>).


Using flexbox, create a 3-column layout where each column takes up a col-{n} / 12 ratio of the container.

<div class="row">
  <div class="col-2"></div>
  <div class="col-7"></div>
  <div class="col-3"></div>
</div>
Answer
.row {
  display: flex;
}
.col-2 {
  flex: 0 0 calc(100% * 2 / 12);
}
.col-3 {
  flex: 0 0 calc(100% * 3 / 12);
}
.col-7 {
  flex: 0 0 calc(100% * 7 / 12);
}
Demo

HTML


What is HTML5 Web Storage? Explain localStorage and sessionStorage.


Web Storage: Browser can store key-value-pair data through Web Storage API.
localStorage: One kind of web storage, persists the data even when the browser is closed.
sessionStorage: One kind of web storage, keep the data until the session of the page is closed.


What’s the difference between a block-level element and an inline element?


block element: Each element starts on a new line, have width and height.
inline element: Element doesn't start on a new line, have no width and height.


Javascript


What are the differences between var, let and const?


var: Function scope variable.
let: Block scope variable.
const: Block scope variable, can't be reassigned, can't be redeclared.


What is the difference between the array methods map() and forEach()?


map(): Iterate through input array and return a new array.
forEach(): Iterate through input array.


Create a function batches that returns the maximum number of whole batches that can be cooked from a recipe.

/**
It accepts two objects as arguments: the first object is the recipe
for the food, while the second object is the available ingredients.
Each ingredient's value is number representing how many units there are.
`batches(recipe, available)`
*/
// 0 batches can be made
batches(
  { milk: 100, butter: 50, flour: 5 },
  { milk: 132, butter: 48, flour: 51 }
);
batches(
  { milk: 100, flour: 4, sugar: 10, butter: 5 },
  { milk: 1288, flour: 9, sugar: 95 }
);

// 1 batch can be made
batches(
  { milk: 100, butter: 50, cheese: 10 },
  { milk: 198, butter: 52, cheese: 10 }
);

// 2 batches can be made
batches(
  { milk: 2, sugar: 40, butter: 20 },
  { milk: 5, sugar: 120, butter: 500 }
);

Answer
function batches(recipe, available) {
  const numberOfIngredients = [];
  for (ingredient in recipe) {
    if (recipe[ingredient] === 0) continue;
    numberOfIngredients.push(
      Math.floor((available[ingredient] || 0) / recipe[ingredient])
    );
  }
  return Math.min(...numberOfIngredients);
}
Demo

Create a function pipe that performs left-to-right function composition by returning a function that accepts one argument.

const square = v => v * v;
const double = v => v * 2;
const addOne = v => v + 1;
const res = pipe(
  square,
  double,
  addOne
);
res(3); // 19; addOne(double(square(3)))
Answer
function pipe(...methods) {
  return function(input) {
    let output = input;
    for (method of methods) {
      output = method(output);
    }
    return output;
  };
}
Demo

Create a function to handler Array Object data

// input origin Data:
const authors = [
  {
    name: "張曼娟",
    id: "a001",
    books: [
      {
        name: "人間好時節",
        id: "a1b001"
      },
      {
        name: "時間的旅人",
        id: "a1b002"
      }
    ]
  },
  {
    name: "瑞．達利歐",
    id: "a002",
    books: [
      {
        name: "原則：生活和工作",
        id: "a2b001"
      }
    ]
  }
];

// output flat Data：
const books = [
  {
    author: "張曼娟",
    authorId: "a001",
    book: "人間好時節",
    bookId: "a1b001"
  }
];
Answer:
function getBooksFromAuthors(authors) {
  const books = [];
  for (author of authors) {
    const { id: authorId, name: authorName } = author;
    for (book of author.books) {
      const { id: bookId, name: bookName } = book;
      books.push({
        author: authorName,
        authorId,
        book: bookName,
        bookId
      });
    }
  }
  return books;
}
Demo