前端工程师面试题自检篇（二）

<div>  <span>    <a></a>  </span>  <span>    <a></a>    <a></a>  </span></div>
把上诉dom结构转成下面的JSON格式
{  tag: 'DIV',  children: [    {      tag: 'SPAN',      children: [        { tag: 'A', children: [] }      ]    },    {      tag: 'SPAN',      children: [        { tag: 'A', children: [] },        { tag: 'A', children: [] }      ]    }  ]}

function dom2Json(domtree) {  let obj = {};  obj.name = domtree.tagName;  obj.children = [];  domtree.childNodes.forEach((child) => obj.children.push(dom2Json(child)));  return obj;}

function Person(obj) {    this.name = obj.name    this.age = obj.age}Person.prototype.add = function(value){    console.log(value)}var p1 = new Person({name:"番茄", age: 18})
function Person1(obj) {    Person.call(this, obj)    this.sex = obj.sex}// 这一步是继承的关键Person1.prototype = Object.create(Person.prototype)Person1.prototype.play = function(value){    console.log(value)}var p2 = new Person1({name:"鸡蛋", age: 118, sex: "男"})

let arr = [1,1,"1","1",true,true,"true",{},{},"{}",null,null,undefined,undefined]
// 方法1let uniqueOne = Array.from(new Set(arr)) console.log(uniqueOne)
// 方法2let uniqueTwo = arr => {    let map = new Map(); //或者用空对象 let obj = {} 利用对象属性不能重复得特性    let brr = []    arr.forEach( item => {        if(!map.has(item)) { //如果是对象得话就判断 !obj[item]            map.set(item,true) //如果是对象得话就obj[item] =true 其他一样            brr.push(item)        }    })    return brr}console.log(uniqueTwo(arr))
//方法3let uniqueThree = arr => {    let brr = []    arr.forEach(item => {        // 使用indexOf 返回数组是否包含某个值 没有就返回-1 有就返回下标        if(brr.indexOf(item) === -1) brr.push(item)        // 或者使用includes 返回数组是否包含某个值 没有就返回false 有就返回true        if(!brr.includes(item)) brr.push(item)    })    return brr}console.log(uniqueThree(arr))
//方法4let uniqueFour = arr => {                                              // 使用 filter 返回符合条件的集合    let brr = arr.filter((item,index) => {        return arr.indexOf(item) === index    })    return brr}console.log(uniqueFour(arr))

1. 语法上的区别：
函数式组件是一个纯函数，它是需要接受props参数并且返回一个React元素就可以了。类组件是需要继承React.Component的，而且class组件需要创建render并且返回React元素，语法上来讲更复杂。
2. 调用方式
函数式组件可以直接调用，返回一个新的React元素；类组件在调用时是需要创建一个实例的，然后通过调用实例里的render方法来返回一个React元素。
3. 状态管理
函数式组件没有状态管理，类组件有状态管理。
4. 使用场景
类组件没有具体的要求。函数式组件一般是用在大型项目中来分割大组件（函数式组件不用创建实例，所有更高效），一般情况下能用函数式组件就不用类组件，提升效率。

CSS3中的盒模型有以下两种:标准盒模型、IE盒模型盒模型都是由四个部分组成的,分别是margin、border、padding和content标准盒模型和IE盒模型的区别在于设置width和height时, 所对应的范围不同1、标准盒模型的width和height属性的范围只包含了content2、IE盒模型的width和height属性的范围包含了border、padding和content可以通过修改元素的box-sizing属性来改变元素的盒模型；1、box-sizing：content-box表示标准盒模型（默认值）2、box-sizing：border-box表示IE盒模型（怪异盒模型）

arr.sort((a, b) => {  let i = 0;  const arr1 = a.split(".");  const arr2 = b.split(".");
  while (true) {    const s1 = arr1[i];    const s2 = arr2[i];    i++;    if (s1 === undefined || s2 === undefined) {      return arr2.length - arr1.length;    }
    if (s1 === s2) continue;
    return s2 - s1;  }});console.log(arr);

function bubbleSort(arr) {  // 缓存数组长度  const len = arr.length;  // 外层循环用于控制从头到尾的比较+交换到底有多少轮  for (let i = 0; i < len; i++) {    // 内层循环用于完成每一轮遍历过程中的重复比较+交换    for (let j = 0; j < len - 1; j++) {      // 若相邻元素前面的数比后面的大      if (arr[j] > arr[j + 1]) {        // 交换两者        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];      }    }  }  // 返回数组  return arr;}// console.log(bubbleSort([3, 6, 2, 4, 1]));

//1：创建Ajax对象var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');// 兼容IE6及以下版本//2：配置 Ajax请求地址xhr.open('get','index.xml',true);//3：发送请求xhr.send(null); // 严谨写法//4:监听请求，接受响应xhr.onreadysatechange=function(){     if(xhr.readySate==4&&xhr.status==200 || xhr.status==304 )          console.log(xhr.responsetXML)}

$.ajax({  type:'post',  url:'',  async:ture,//async 异步  sync  同步  data:data,//针对post请求  dataType:'jsonp',  success:function (msg) {
  },  error:function (error) {
  }})

// promise 封装实现：
function getJSON(url) {  // 创建一个 promise 对象  let promise = new Promise(function(resolve, reject) {    let xhr = new XMLHttpRequest();
    // 新建一个 http 请求    xhr.open("GET", url, true);
    // 设置状态的监听函数    xhr.onreadystatechange = function() {      if (this.readyState !== 4) return;
      // 当请求成功或失败时，改变 promise 的状态      if (this.status === 200) {        resolve(this.response);      } else {        reject(new Error(this.statusText));      }    };
    // 设置错误监听函数    xhr.onerror = function() {      reject(new Error(this.statusText));    };
    // 设置响应的数据类型    xhr.responseType = "json";
    // 设置请求头信息    xhr.setRequestHeader("Accept", "application/json");
    // 发送 http 请求    xhr.send(null);  });
  return promise;}

1.如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式，而不是对象的形式2.如果obj里有RegExp(正则表达式的缩写)、Error对象，则序列化的结果将只得到空对象；3、如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失；4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null5、JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor；6、如果对象中存在循环引用的情况也无法正确实现深拷贝；

function foo() {  console.log(this.a)}var a = 1foo()
const obj = {  a: 2,  foo: foo}obj.foo()
const c = new foo()

function a() {  return () => {    return () => {      console.log(this)    }  }}console.log(a()()())

let a = {}let fn = function () { console.log(this) }fn.bind().bind(a)() // => ?

// fn.bind().bind(a) 等于let fn2 = function fn1() {  return function() {    return fn.apply()  }.apply(a)}fn2()

let a = { name: 'poetries' }function foo() {  console.log(this.name)}foo.bind(a)() // => 'poetries'

function shallowCopy(obj) {    if (typeof obj !== 'object') return
    let newObj = obj instanceof Array ? [] : {}    for (let key in obj) {        if (obj.hasOwnProperty(key)) {            newObj[key] = obj[key]        }    }    return newObj}

function deepClone(obj) {    if (typeof obj !== 'object') return;    var newObj = obj instanceof Array ? [] : {};    for (var key in obj) {        if (obj.hasOwnProperty(key)) {            newObj[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key];        }    }    return newObj;}

const isObject = (target) => (typeof target === "object" || typeof target === "function") && target !== null;
function deepClone(target, map = new WeakMap()) {    if (map.get(target)) {        return target;    }    // 获取当前值的构造函数：获取它的类型    let constructor = target.constructor;    // 检测当前对象target是否与正则、日期格式对象匹配    if (/^(RegExp|Date)$/i.test(constructor.name)) {        // 创建一个新的特殊对象(正则类/日期类)的实例        return new constructor(target);      }    if (isObject(target)) {        map.set(target, true);  // 为循环引用的对象做标记        const cloneTarget = Array.isArray(target) ? [] : {};        for (let prop in target) {            if (target.hasOwnProperty(prop)) {                cloneTarget[prop] = deepClone(target[prop], map);            }        }        return cloneTarget;    } else {        return target;    }}

<div class="container">    <div class="left"></div>    <div class="right"></div>    <div style="clear:both"></div></div>

<div class="container">    <div class="left"></div>    <div class="right"></div></div>

.container{    width: 300px;    background-color: #aaa;    overflow:hidden;    zoom:1;   /*IE6*/}

<div class="container clearfix">    <div class="left"></div>    <div class="right"></div></div>

.clearfix{    zoom: 1; /*IE6*/}.clearfix:after{    content: ".";    height: 0;    clear: both;    display: block;    visibility: hidden;}

// 版本一：标志实现function throttle(fn, wait){    let flag = true;  // 设置一个标志    return function(...args){        if(!flag) return;        flag = false;        setTimeout(() => {            fn.call(this, ...args);            flag = true;        }, wait);    }}
// 版本二：时间戳实现function throttle(fn, wait) {    let pre = 0;    return function(...args) {        let now = new Date();        if(now - pre < wait) return;        pre = now;        fn.call(this, ...args);    }}

function add(a, b, c) {    return a + b + c}add(1, 2, 3)let addCurry = curry(add)addCurry(1)(2)(3)

function curry(fn) {    let judge = (...args) => {        if (args.length == fn.length) return fn(...args)        return (...arg) => judge(...args, ...arg)    }    return judge}