(前端面试)每日5题

1、JS中如何继承

        子类继承父类，继承可以使子类具有父类的各种属性和方法

        a、原型链的继承

function Person() {
    this.name = '父类',
    this.arr = [1, 2, 3]
};

function Child() {
    this.type = '子类'
};

Child.prototype = new Person();
console.log(new Child().name);

        b、构造函数继承

function Person() {
    this.name = '父类'，
    this.arr = [1, 2, 3]
};

Person.protyotype.age = 18;

function Child() {
    Person.call(this),
    this.type = '子类'
};

console.log(new Child);

        c、组合继承

function Person() {
    this.name = '父类',
    this.arr = [1, 2, 3]
};

Person.prototype.age = 18;
function Child() {
    Person.call(this),
    this.type = '子类'
};

Child.prototype = new Person();

var c1 = new Child();
var c2 = new Child();

console.log(c1.constructor);//父类函数
c1.arr.push(5);
console.log(c1);
console.log(c2);

2、JS中如何进行隐式类型转换

        ToPrimitive方法：这是JS中每个值隐含的自带的方法，用来将值(无论是基本类型值还是对象)转换为基本类型值

        如果值为基本类型，则直接返回值本身：如果值为对象，则为：

                ToPrimitive(obj, type)

                obj-->需要转换的对象

                type-->期望的结果类型

                type的值可以为number或者String，默认情况下为number

                a、当type为number时规则如下：

                        (1)调用obj的valueOf方法，如果为原始值，则返回，否则下一步

                        (2)调用obj的toString方法，如果为原始值，则返回，否则下一步

                        (3)抛出TypeError异常

                b、当type为string时规则如下：

                        (1)调用obj的toString方法，如果为原始值，则返回，否则下一步

                        (2)调用obj的valueOf方法，如果为原始值，则返回，否则下一步

                        (3)抛出TypeError异常

var objToNumber = function (value) {
    return Number(value.valueOf().toString())
}
console.log(objToNumber([]) === 0);
console.log(objToNumber({}) === NaN);

        + 操作符的两边有至少一个string 类型变量时，两边的变量都会被隐式转换为字符串：其他情况下两边的变量都会被转换为数字

        - * /操作运算符会转换为数字

        == < > 转为数字进行比较

        对象

let a = {};
console.log(a > 2);false
//过程 a.valueOf() a.toString() Number(a.toString())

3、 JS中如何使用for...of类遍历对象

        for...of是允许遍历一个含有iterator接口的数据结构(数组、对象等)并且返回各项的值

        需要遍历的对象是类数组对象，使用数组的Array.from转为数组

let obj = {
    0: 1,
    1: 2,
    2: 3,
    length: 3
};

obj = Array.from(obj);

for(let value of obj) {
    console.log(value);
}

        需要遍历的对象不是类数组，给对象添加一个Symbol.iterator属性，指向迭代器

        iterator遍历过程

        a、创建一个指针对象，指向当前数据结构的起始位置

        b、第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员

        c、第二次调用指针对象的next方法，指针就指向数据结构的第二个成员

        d、不断调用指针对象的next方法，知道它指向数据结构的结束位置

        每一次调用next方法，都会返回数据结构的房钱成员信息，返回一个包含value和done两个属性的对象

        value：当前成员的值

        done：是一个布尔值，表示遍历是否结束

let person = {
    name: '996',
    age: 25,
    height: 210,
    weight: 220,
    sex: 'gg'
};

person[Symbol.iterator] = function() {
    //拿到对象中所有key值
    let keys = Object.keys(this);
    //定义数组的下标值
    let index = 0;
    return {
       next() {
            if(index < keys.length) {
                return { value: person[keys[index++]], done: false}
            }else{
                return { value: undefined, done: true }
            }
        }
    }
};

for(let value of person) {
    console.log(value);
}

4、JS中实现函数的防抖

        通过setTimeout的方式，在一定事件间隔内，将多次触发变成一次触发

<div>
    <input type="text" id="ipt" value="123">
    <input type="submit" id="btn" type="提交">
</div>

var ipt = document.querySelector('#ipt');
        var btn = document.querySelector('#btn');
        //btn.addEvenListener('click', getValue);
        btn.addEventListener('click', debounce(getValue, 2000));
        function getValue(e) {
            var val = ipt.value;
            console.log(this);
            console.log(e);
            console.log(val);
        }
        function debounce(fn, time) {
            var t = null//定义最开始的定时器
            return function(e) {
                //拿到外部函数的this
                var that = this
                if(t) {//判断定时器是否生成，如果生成了，清除上一个定时器
                    clearTimeout(t)
                }
                var firstClick = !t
                //如果是第一个点击就立即执行
                if(firstClick){
                    fn.apply(this, arguments)
                }
                t = setTimeout(() => {
                    t = null
                }, time);
            }
        }

        防抖场景：登入，发验证码，等按钮用户点击太快，以及发送多次请求

        调整游览器窗口大小的时候，resize次数过于频繁，造成计算过多，一次计算到位

        搜索框输入

5、JS中实现函数的节流

        减少一段时间的触发频率(时间戳)，控制事件发生的频率，控制在2s发生一次

<input type="text" id="ipt" value="123">
<input type="submit" id="btn" value="提交">

var ipt = document.querySelector('#ipt');
        var btn = document.querySelector('#btn');
        // btn.addEventListener('click', getValue);
        btn.addEventListener('click', throttle(getValue, 2000));
        function getValue() {
            var val = ipt.value;
            console.log(val);
        }
        function throttle(fn, time) {
            var begin = 0;//设置时间的初始值(上一次点击的时间)
            return function() {
                //拿到当前的时间戳
                var date = new Date().getTime()
                var that = this
                console.log(date - begin)
                if(date-begin > time) {
                    fn.apply(that, arguments)
                    begin = date
                }
            }

        应用场景：scroll：每隔一秒计算一次位置信息 搜索框实时搜索，并且发送请求，展示下拉列表，每隔两秒发送一次请求