1. 程式人生 > >前端面試題目總結(一)

前端面試題目總結(一)

1.判斷下面輸出內容,並嘗試怎樣正確輸出0,1,2,3,4,5

for (var i = 0; i <= 5; i++) {
    setTimeout(function timer(){
        console.log(i)
    }, i * 1000)
}
// 每過一秒打印出一個6
// 6
// 6
// 6
// 6
// 6
// 6

解析:setTimeout是非同步函式,所以會先把迴圈全部執行完畢,這時候 i 就是 6 了,所以會輸出一堆 6

解決辦法:

1.1.使用let

for (let i = 0; i <= 5; i++) {
    setTimeout(
function timer() { console.log(i) }, i * 1000) } // 0 // 1 // 2 // 3 // 4 // 5

解析:使用 let 定義 i 了來解決問題了

1.2.使用自執行函式

for (let i = 0; i <= 5; i++) {;
    (function timer(j) {
        setTimeout(function timer() {
            console.log(j)
        }, j * 1000)
    })(i)
}
// 自執行函式
//
0 // 1 // 2 // 3 // 4 // 5

1.3.使用 setTimeout 的第三個引數,這個引數會被當成 timer 函式的引數傳入

for (let i = 0; i <= 5; i++) {
    setTimeout(function timer() {
        console.log(i)
    }, i * 1000, i)

}
// 使用 setTimeout 的第三個引數,這個引數會被當成 timer 函式的引數傳入
// 0
// 1
// 2
// 3
// 4
// 5

2.實現深淺拷貝的方法

淺拷貝:

方法一:object.assign()

// 淺拷貝:方法一:Object.assign
let a = {
    name: 'nancy',
    age: 27
}

let b = Object.assign(a)
console.log(b)
// {name: "nancy", age: 27}

let a = {
    name: 'nancy',
    age: {
        date: '1992-02-22'
    }
}

let b = Object.assign(a)
a.age.date = '1993'
console.log(b)

// {name: "nancy", age: {date: "1993"}}
// 拷貝的只是引用地址,原地址的內容發生改變,新拷貝的內容也跟著變化

 

 

方法二:擴充套件運算子:...

// 方法二:... 擴充套件運算子

let a = {
    name: 'nancy',
    age: 27
}
let b = { ...a
}
console.log(b)
// {name: "nancy", age: 27}
let a = {
    name: 'nancy',
    age: {
        date: '1992-02-22'
    }
}
a.age.date = '1993'
let b = { ...a
}
console.log(b)
// {name: "nancy", age: {date: "1993"}}
// 拷貝的只是引用地址,原地址的內容發生改變,新拷貝的內容也跟著變化

深拷貝:

使用:JSON.parse(JSON.stringify(object))

// 深拷貝
let a = {
    name: 'nancy',
    age: {
        date: '1992'
    }
}

let b = JSON.parse(JSON.stringify(a))
a.age.date = '1993'
console.log(b)
// {name: "nancy", age: {date: "1992"}}

侷限性:

一:忽略undefined

let a = {
    name: 'nancy',
    age: {
        date: undefined
    }
}

let b = JSON.parse(JSON.stringify(a))
a.age.date = '1993'
console.log(b)
// {name: "nancy", age: {}}
console.log(a)
// {name: "nancy", age: {date: "1993"}}

二:忽略symbol

// 二:忽略symbol
let a = {
    name: 'nancy',
    sex: {
        gender: Symbol('female')
    }
}

let b = JSON.parse(JSON.stringify(a))
a.sex.gender = 'male'
console.log(b)
// {name: "nancy", sex: {}}
console.log(a)
// {name: "nancy", sex: {gender: "male"}}

三:迴圈引用,會報錯

// 迴圈引用,這種方法會報錯
let obj = {
    a: 1,
    b: {
        c: 2,
        d: 3,
    },
}
obj.c = obj.b
obj.e = obj.a
obj.b.c = obj.c
obj.b.d = obj.b
obj.b.e = obj.b.c
let newObj = JSON.parse(JSON.stringify(obj))
console.log(newObj)
// 報錯 Uncaught TypeError: Converting circular structure to JSON

四:不能序列化函式

// 不能序列化函式
let a = {
    age: undefined,
    sex: Symbol('male'),
    jobs: function () {},
    name: 'nancy'
}
let b = JSON.parse(JSON.stringify(a))
console.log(b) // {name: "nancy"}