十道有趣的前端面试题及解析

const Animal = function (){ 
  this.type = 'animal'
}


const Cat = function (){ 
  this.name = 'cat'
}


Cat.prototype = new Animal()


const cat = new Cat(); 


console.log(cat.__proto__ === Cat.prototype)
console.log(Cat.prototype.__proto__ === Animal.prototype)

const len = 5
const nums = []
for (var i = 0; i < len; i++);{
  nums.push(i + 1)
}


console.log(nums)

const len = 5
const nums = []
for (var i = 0; i < len; i++);
// At this time, i has become 6
{
  nums.push(i + 1)
}


console.log(nums) // [ 6 ]

const arr = [1, 30, 4, 21, 100000]
console.log(arr.sort())

const arr = [1, 30, 4, 21, 100000]
// the array elements are converted to strings, then sorted according to each character's Unicode code point value
const charCodesOfArr = arr.map((num) => `${num}`.charCodeAt()) // [49, 51, 52, 50, 49]
// so the answer is [1, 100000, 21, 30, 4]
console.log(arr.sort())

// a.js 
export default () => "Hello medium"
export const name = "fatfish"
// b.js 
import * as data from "./a.js"
console.log(data) // { default: function default (), name: "fatfish" }

const x = {}
const y = { key: 'y' }
const z = { key: 'z' }
x[y] = 'fatfish'
x[z] = 'medium'
console.log(x[y])

const objKey = { key: 'fatfish' }
const obj = {
  [ objKey ]: 'fatfish'
}
console.log(obj) // { [object Object]: "fatfish" }

const x = {}
const y = { key: 'y' }
const z = { key: 'z' }
x[y] = 'fatfish' // x => { [object Object]: "fatfish" }
x[z] = 'medium' // x => { [object Object]: "medium" }
console.log(x[y]) // medium

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i)
  }, 1000)
}

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i) // 3 3 3
  }, 1000)
}

// 1. Use let instead of var
for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i) // 0 1 2
  }, 1000)
}
// 2. Using closures
for (var i = 0; i < 3; i++) {
  ((n) => {
    setTimeout(() => {
      console.log(n) //  0 1 2
    }, 1000)
  })(i)
}

console.log(+true)
console.log(!'fatfish')

// The + operator
converts the Boolean to a number, true is converted to 1, and false is converted to 0
console.log(+true) // 1
// The string "fatfish" is a true value, use ! It will become false
console.log(!'fatfish')

const fn = () => {
  let x = y = 1000
  x++
  return x
}


fn()
console.log(typeof x)
console.log(typeof y)

const fn = () => {
 // let x = y = 1000   
 // it is equivalent to the following code
 let x = 1000
 // Note that here, we define a global variable y  
 y === 1000
  x++
  return x
}
fn()
console.log(typeof x) // undefined
console.log(typeof y) // y equals 1000, so typeof y is number

var x = 'fatfish'
const fn = () => {
  // No.3
  console.log(x)
  var x = 'medium'
  // No.4
  console.log(x)
}
// No.1
console.log(x)
fn()
// No.2
console.log(x)

var x = 'fatfish'
const fn = () => {
  // No.3
  // Variable hoisting occurs when a variable is declared with var.
  var x = undefined
  // So at this time the value of x is undefined
  console.log(x)
  // var x = 'medium'
  x = 'medium'
  // No.4
  // The value of x is medium
  console.log(x)
}
// No.1
console.log(x) // fatfish
fn()
// No.2
console.log(x) // fatfish

const nums = [ 10, 18, 0, 11, 9 ]
nums.length = 0


console.log(nums[3])

const nums = [ 10, 18, 0, 11, 9 ]
nums.length = 0 // it causes nums to become []


console.log(nums[3]) // undefined