面试题

面试题
1、 ES6 实现输出两个数组中重复原素

// 求交集 并集  差集
let a=new Set[1,2,3];
let b=new Set[3,4,5];
//交集
let c=new Set([...a,...b]);
//并集
let d=new Set([...a].filter(x=>b.has[x]));
//交集
let d=new Set([...a].filter(x=>b.has[x]));

2、ES6 实现 输入 abbbbbcddffbbb输出abcdfb

function get (num) {
  let data = num.split('')
  let res = new Set(data)
  return [...res].join('')
}
console.log(get("abbbbbcddffbbb"))

3、实现电话号码中间四位星号隐藏

function phoneNumber(num) {
    let res = `${num.slice(0, 3)}****${num.slice(7)}`
    return res
}
console.log(phoneNumber("13343567888"))

4

var length = 10
function fn () {
    console.log(this.length)
}
var obj = {
    length: 5,
    method: function (fn) {
        fn()
        arguments[0]()
    }
}
obj.method(fn, 1)
// 结果 
10
2

5题单词首字母大写

let str = “good good study, day day up”
let reg = /\b([a-zA-Z])[a-zA-Z]*\b/g
// => 函数执行了六次，每一次都把正则匹配信息传递给函数
// => 每一次ARG：["good", "g"]  ["good", "g"]  ...
str = str.replace(reg, (...arg) => {
   let [content, $1] = arg
   $1 = $1.toUpperCase()
   content = content.substring(1)
   return $1+content
}) 

6、DOM事件绑定原理

	 *   1.DOM0级事件绑定
	 *     xxx.onxxx=function(){}
	 *   2.DOM2级事件绑定
	 *     EventTarget.prototype:
	 * 		 addEventListener/removeEventListener/dispatchEvent 
	 * 		 所有的DOM元素对象(含window)都是EventTarget的实例
	 *     非标准浏览器(IE<=8)：attachEvent/detachEvent
	 *     xxx.addEventListener/removeEventListener('xxx',function(){},false)
	 * 
	 * 【DOM0事件绑定的原理】
	 *    每一个DOM元素对象都有很多内置的私有属性，其中包含onxxx这样事件类的私有属性
	 *    =>DOM0事件绑定原理就是给这些事件类私有属性赋值（当我们触发相关事件行为，浏览器会帮助我们把赋值的函数触发执行）
	 *    =>特点1：如果不存在某个事件类型的私有属性，则无法基于这种方式做事件绑定（例如 DOMContentLoaded [等到DOM资源加载完触发的事件]）
	 *    =>特点2：只能给当前元素的某个事件类型绑定一个方法（私有属性只能赋值一个值）
	 * 
	 * 【DOM2事件绑定的原理】
	 *    利用浏览器的事件池机制来完成事件监听和绑定的
	 *    =>特点1：所有事件类型都可以基于这种方式进行事件绑定（ 例如 window.addEventListener('DOMContentLoaded',function(){}) ）
	 *    =>特点2：可以给当前元素的某一个事件类型绑定多个不同的方法
	 */
	box.onclick = function () {
		console.log('OK');
	};

	box.addEventListener('click', function () {
			console.log('DOM2=>OK');
	});
	box.addEventListener('click', function () {
		console.log('DOM2=>NO');
	}); 


	// ===========================
	// 问：window.onload和document.ready区别(JQ中的$(document).ready())
	// 我之前看过部分JQ源码，其中包含$(document).ready()的处理
	// =>document.addEventListener("DOMContentLoaded", completed)
	// =>1）它是基于DOM2级事件中事件池监听实现事件绑定的，所以可以在相同页面中给事件绑定好多不同的方法，也就是可以使用多次
	// =>2）它监听的是DOMContentLoaded事件，等待DOM结构一加载完就会触发执行的
	// 而window.onload本身基于DOM0事件绑定，而且监听的是load事件，所以页面中不仅只能用一次，而且需要等到浏览器所有资源都加载完毕才会触发执行，触发的节点要晚于DOMContentLoaded
	// ....
	// 所以我们之前做项目的时候，有的项目没有用JQ，我想在DOM结构加载完再去做一些事情，我就仿照着JQ写过一些公共方法