day03-面试准备-ES6 知识点及常考面试题-2022年4月9日12:17:00

var、let 及 const 区别

变量提升（hoisting）

console.log(a) // undefined
var a = 1

虽然变量还没有被声明，但是我们却可以使用这个未被声明的变量，这种情况就叫做提升，并且提升的是声明。

上述代码等价于：

var a
console.log(a) // undefined
a = 1

在全局作用域下使用 let 和 const 声明变量，变量并不会被挂载到 window 上，这一点就和 var 声明有了区别。

• 函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪到作用域顶部
• var 存在提升，我们能在声明之前使用。 let 、 const 因为暂时性死区的原因，不能在声明前使用
• var 在全局作用域下声明变量会导致变量挂载在 window 上，其他两者不会
• let 和 const 作用基本一致，但是后者声明的变量不能再次赋值

原型继承和 Class 继承

其实在 JS 中并不存在类， class 只是语法糖，本质还是函数。

class Person {}
Person instanceof Function // true

组合继承

function Parent(value) {
this.val = value
}
Parent.prototype.getValue = function() {
console.log(this.val)
}
function Child(value) {
Parent.call(this, value)
}
Child.prototype = new Parent()
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

寄生组合继承

function Parent(value) {
this.val = value
}
Parent.prototype.getValue = function() {
console.log(this.val)
}
function Child(value) {
Parent.call(this, value)
}
Child.prototype = Object.create(Parent.prototype, {
constructor: {
value: Child,
enumerable: false,
writable: true,
configurable: true
}
})
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

Class 继承

class Parent {
constructor(value) {
this.val = value
}
getValue() {
console.log(this.val)
}
}
class Child extends Parent {
constructor(value) {
super(value)
this.val = value
}
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

模块化

为什么要使用模块化？

使用模块化可以给我们带来以下好处

• 解决命名冲突
• 提高代码的复用性
• 提高代码可维护性

Proxy

可使用Proxy实现数据响应式，Vue3中将用proxy取代之前的Object.defineProperty.

let onWatch = (obj, setBind, getLogger) => {
    let handler = {
        get(target, property, receiver) {
            getLogger(target, property) 
            return Reflect.get(target, property, receiver)
            
        },
        set(target, property, value, receiver) {
            setBind(value, property)
            return Reflect.set(target, property, value)
        }
    }
    return new Proxy(obj, handler)
}

let obj = { a: 1 }
let p = onWatch(
    obj,
    (v, property) => {
        console.log(`监听到属性${property}改变为${v}`)
    },
    (target, property) => {
        console.log(`'${property}' = ${target[property]}`)
    }
)

执行结果

map, filter, reduce

map

map 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后放入到新的数组中。

[1, 2, 3].map(v => v + 1) // -> [2, 3, 4]

filter

filter 的作用也是生成一个新数组，在遍历数组的时候将返回值为 true 的元素放入新数组，我们可以利用这个函数删除一些不需要的元素。

let array = [1, 2, 4, 6];
let newArray = array.filter(item => item !== 6);
console.log(newArray) // [1, 2, 4]

reduce

reduce 可以将数组中的元素通过回调函数最终转换为一个值。

const arr = [1, 2, 3]
const sum = arr.reduce((acc, current) => acc + current, 0)
console.log(sum)

可以使用reduce来实现map

const arr = [1, 2, 3];
const mapArray = arr.map(value => value*2);
const reduceArray = arr.reduce((acc, curr) => {
    acc.push(curr * 2)
    return acc;
},[])
console.log(mapArray, reduceArray)