Giter Club home page Giter Club logo

interview-questions's People

Watchers

avatar

interview-questions's Issues

手写防抖函数和节流函数

📅 2021 / 03 / 28

防抖函数

在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。

const debounce = (fn, delay = 1000) => {
    let timer = null;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, delay)
    }
}

适用场景

  • 按钮提交场景：防止多次提交按钮，只执行最后提交的一次。
  • 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似。

节流函数

规定在一个单位时间内，只触发一次函数。如果这个单位事件内触发多次函数，只有一次生效。

const throttle = (fn, delay = 1000) => {
    let timer = null;
  
    return (...args) => {
        if (timer) return
        timer = setTimeout(() => {
            timer = null;
            fn.apply(this, args);
        }, delay)
    }
}

适用场景

  • 拖拽场景：固定事件内只执行一次，防止超高频触发位置变动。
  • 缩放场景：监控浏览器调整大小。
  • 动画场景：避免短时间内多次触发动画引起性能问题。

带连接符的字符串转驼峰的方法

📅 2021 / 03 / 27

var str = 'ning-san-fen'

function fn(str) {
    var arr = []

    if (str.indexOf('-') > -1) arr = str.split('-');

    for(var i = 1; i < arr.length; i++) {
        arr[i] = arr[i][0].toUpperCase() + arr[i].slice(1);
    }

    return arr.join('');
}

console.log(fn(str)) // ningSanFen

实现 a == 1 && a == 2 && a == 3 返回 true

📅 2021/03/26

1. 对象类型转换

var a = {
	value: 1,
	toString: function () {
		return a.value++;
	}
};

console.log(a == 1 && a == 2 && a == 3); // true

var a = {
	value: 1,
	valueOf: function () {
		return a.value++;
	}
}

console.log(a == 1 && a == 2 && a == 3); // true

原理：Object 类型与 Number 类型比较时，会将 Object 类型转换为 Number 类型。转换时会尝试调用 Object.valueOf 和 Object.toString 来获取对应的数字基本类型。重写 toString 方法或者 valueOf 方法都可以实现该效果。

2. 数组类型转换

var a = [1, 2, 3];

a.join = a.shift;

console.log(a == 1 && a == 2 && a == 3); // true
console.log(a) // []

原理：数组的 toString 会隐含调用 Array.join 方法。数组的 shift 方法会将数组中第一个元素删除，并返回该元素的值。所以我们看到 a == 1 时，会调用 join 方法，因为 join 方法被重写为 shift 方法，所以转换为 Number 后为 1。

3. 定义属性 “a”，并重写 getter 方法，严格模式下同样适用

var val = 0;
Object.defineProperty(window, 'a', {
	get: function() {
  		return ++val;
	}
})

console.log(a === 1 && a === 2 && a === 3); // true

4. 实例化

function A () {
	var value = 0;
  	this.valueOf = function () {
  		return ++value;
 	}
}

var a = new A();

console.log(a == 1 && a == 2 && a == 3); // true

// ES6 版本
class A {
	constroctar() {
		this.value = 0;
		this.valueOf()
	}
  
	valueOf() {
		return this.value++;
	}
}

var a = new A();

console.log(a == 1 && a == 2 && a == 3); // true

实现 add(1)(2)(3) 

// 实现 add(1)
function add(a) {
    return a;
}

// 实现 add(1)(2)
function add(a) {
    return function (b) {
        a = a + b;
        return a;
    }
}

// 实现 add(1)(2)(3)
function add(a) {
    return function (b) {
        a = a + b;
        return function () {
            a = a + c; 
            return a;
        }
    }
}

// 实现 add(1)(2)(3)...(10)
function add (a) {
    var fn = function (b) {
        a = a + b
        
        return fn;
    }
    
  fn.toString = function () { return a };
  
  return fn;
}

// // 实现 add(1, 2)(2)(3)...(10) 思路：使用 reduce 计算拼接的参数
function add() {
    var args = [].slice.call(arguments);
  
    var fn = function () {
        var args_fn = [].slice.call(arguments);
    
        return fn.apply(null, args.concat(args_fn));
    }
  
    fn.toString = function () {
        return args.reduce((a, b) => a + b);
    }
  
    return fn;
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.