前端面试题目总结（一）

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"}