前端知识搜集

文章目录

前端知识搜集一、闭包二、数字字符转千分位三、用字符串获取对象中的属性函数柯里化函数柯里化的好处1. 参数复用2. 提前确认函数柯里化的面试题 四、判断一个对象是否是空对象五、new一个对象这个过程发生了什么？六、如何实现localStorage跨域共享

---

一、闭包

实现一个foo函数, 返回自身被调用的次数 可以这么使用:

a = foo(); b = foo(); c = foo(); // 此时 a 的值是1;b的值是2;c的值是3; 用闭包实现，闭包能使变量保存到内存中用立即执行函数实现返回函数立即调用 const foo = (function() { // 把这里想象成全局变量 let count = 1; function increase() { return count++; } increase.reset = function() { count = 1; } return increase; })();

二、数字字符转千分位

/** * 数字字符转千分位 * “\b”可以表示字母在单词的边界，“\B”可以表示字母不在单词的边界。 * 举个例子：“\B.+ful\b”就能匹配到“beautifulfull”中的“beautiful”。 */ let num = "111234567"; num = parseFloat(num); num = num.toFixed(2); num = num.replace(/\B(?=(\d{3})+\b)/g, ','); console.log(num);

正则的零宽度正预测先行断言(?=exp)，名字有点难记，意思是它断言自身出现的位置的后面能匹配表达式exp。

三、用字符串获取对象中的属性

var object = { ‘a’: [{ ‘b’: { ‘c’: 3 } }] }; get(object, ‘a[0].b.c’); //应该返回 3

function get(obj, path) { const pathes = path.split('.'); // a[0], b, c let prop; let res = obj; const reg = /(\w+)\[(\d+)\]$/; while (prop = pathes.shift()) { // 如果prop中有 '[]'，先匹配[]前面的字符，然后再匹配括号中的数字 if (reg.test(prop)) { // obj.a res = res[RegExp.$1]; // a[0] res = res[RegExp.$2]; } else { res = res[prop]; } } return res; }

函数柯里化

维基百科上说道：柯里化，英语：Currying(果然是满满的英译中的既视感)，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

// 普通的add函数 function add(x, y) { return x + y } // Currying后 function curryingAdd(x) { return function (y) { return x + y } } add(1, 2) // 3 curryingAdd(1)(2) // 3

函数柯里化的好处

1. 参数复用

返回的函数可以多次应用。

// 正常正则验证字符串 reg.test(txt) // 函数封装后 function check(reg, txt) { return reg.test(txt) } check(/\d+/g, 'test') //false check(/[a-z]+/g, 'test') //true // Currying后 function curryingCheck(reg) { return function(txt) { return reg.test(txt) } } var hasNumber = curryingCheck(/\d+/g) var hasLetter = curryingCheck(/[a-z]+/g) hasNumber('test1') // true hasNumber('testtest') // false hasLetter('21212') // false

2. 提前确认

在函数第一次执行时便进行必要的判断，然后确定返回的函数，以后就不比每次都进行判断。

var on = function(element, event, handler) { if (document.addEventListener) { if (element && event && handler) { element.addEventListener(event, handler, false); } } else { if (element && event && handler) { element.attachEvent('on' + event, handler); } } } var on = (function() { if (document.addEventListener) { return function(element, event, handler) { if (element && event && handler) { element.addEventListener(event, handler, false); } }; } else { return function(element, event, handler) { if (element && event && handler) { element.attachEvent('on' + event, handler); } }; } })(); //换一种写法可能比较好理解一点，上面就是把isSupport这个参数给先确定下来了 var on = function(isSupport, element, event, handler) { isSupport = isSupport || document.addEventListener; if (isSupport) { return element.addEventListener(event, handler, false); } else { return element.attachEvent('on' + event, handler); } }

函数柯里化的面试题

// 实现一个add方法，使计算结果能够满足如下预期： add(1)(2)(3) = 6; add(1, 2, 3)(4) = 10; add(1)(2)(3)(4)(5) = 15; function add() { // 第一次执行时，定义一个数组专门用来存储所有的参数 var _args = Array.prototype.slice.call(arguments); // 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值 var _adder = function() { _args.push(...arguments); return _adder; }; // 利用toString隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回 _adder.toString = function () { return _args.reduce(function (a, b) { return a + b; }); } return _adder; } add(1)(2)(3) // 6 add(1, 2, 3)(4) // 10 add(1)(2)(3)(4)(5) // 15 add(2, 6)(1) // 9

四、判断一个对象是否是空对象

function objIsEmpty(obj) { const keys = Object.keys(obj); return keys.length === 0; }

五、new一个对象这个过程发生了什么？

以构造器的prototype属性为原型，创建新对象。将this（也就是上一步中的新对象）和参数传给构造函数，执行构造函数。如果构造函数没有手动返回对象，则返回第一步创建的对象。

自己实现一个new方法：

function Parent(name, age) { this.name = name; this.age = age; } Parent.prototype.toString = function() { return this.name + ' ' + this.age; } // 自己实现一个new方法 function newMethod(Parent, ...rest) { // 1.创建一个__proto__指向构造函数prototype属性的对象 const obj = Object.create(Parent.prototype); // 2.将该对象和参数给Parent执行 Parent.call(obj, ...rest); // 3.返回该对象 return obj; } const child = newMethod(Parent, 'makabaka', 23); console.log(child instanceof Parent); // true console.log(child.toString()); // makabaka 23

六、如何实现localStorage跨域共享

https://www.cnblogs.com/tyrion1990/p/8134384.html 1.解决思路：在A域和B域下引入C域，所有的读写都由C域来完成，本地数据存在C域下; 因此 A域和B域的页面必定要引入C域的页面（使用ifame）; 当然C域最好是主域。

A,B需要读写时，通过window.frames[0].postMessage()向C域发送请求。C域监听跨域消息，进行读写操作A,B域需要监听跨域消息来接受来自C域的数据