面试题集合（浏览器篇）


## 1. 前端之SSO（单点登录）

### 知识点
- session存储用户信息于服务器
- 通过session ID（cookie）来实现认证
- 由于cookie不支持跨域，跨域时的解决方案不同于同域

### 链接
- [单点登录（SSO）看这一篇就够了](https://www.jianshu.com/p/75edcc05acfd)
- [前端需要了解的 SSO 与 CAS 知识](https://juejin.cn/post/6844903509272297480)
  
## 2. git revert和reset

- git reset操作会将版本回退至指定的commit，指定commit后的操作都将被撤销
- git revert则撤销指定commit的修改，同时生成一个新的commit

## 3. git merge和rebase

![git merge](git-merge.jpeg)
![git rebase](git-rebase.jpeg)

- 都是合并操作
- 当需要保留详细的合并信息的时候建议使用git merge，特别是需要将分支合并进入master分支时；
- 当发现自己修改某个功能时，频繁进行了git commit提交时，发现其实过多的提交信息没有必要时，可以尝试git rebase
- rebase操作会去除之前的commit记录，而merge不会

### cherrypick的了解

## 4. git 如何取消add操作

可以reset，reset后面可以跟commit ID，也可以跟Head指针回退add内容

## 5. git的工作流

dev、release、master分支

## 6. keepAlive组件的原理




面试题集合（其他）


## 1. 浏览器存储

### Cookie

- 大小限制4k，超出会裁剪

- HTTP 是无状态的协议（对于事务处理没有记忆能力，每次客户端和服务端会话完成时，服务端不会保存任何会话信息）
  
- cookie 存储在客户端
  
  cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。

- cookie 是不可跨域的
  
### LocalStorage

- 保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据
- 大小为5M左右
- 仅在客户端使用，不和服务端进行通信

### sessionStorage

- 会话级别的浏览器存储（窗口关闭会清空）
- 大小为5M左右
- 仅在客户端使用，不和服务端进行通信
  
基于上面的特点，sessionStorage 可以有效对表单信息进行维护，比如刷新时，表单信息不丢失。

### sessionStorage 、localStorage 和 cookie 之间的区别

- 共同点：都是保存在浏览器端，且都遵循同源策略。
- 不同点：在于生命周期与作用域的不同


  
## 1. 手写 bind、call、apply

``` javascript
// call
Function.prototype.myCall = (content) => {
  content = content || window;
  content.fn = this;
  const args = [...arguments].slice(1);
  const result = content.fn(args);
  delete content.fn;
  return result;
}

// apply
Function.prototype.myApply = (content) => {
  content = content || window;
  content.fn = this;
  let result
  if (arguments[1] && Array.isArray(arguments[1])) {
    if (arguments[1].length === 1) {
      result = content.fn(...arguments[1])
    } else {
      result = content.fn()
    }
  }
  delete content.fn
  return result
}

// bind
Function.prototype.myBind = (content) => {
  content = content || window;
  content.fn = this;
  const args = [...arguments].slice(1);
  return () => {
    content.fn(args)
  }
}
```

## 2. 手写防抖节流
   
   防抖
   ``` javascript
    const debounce = (fn, delay) => {
      let timeout = null;
      return () => {
        if (timeout) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
          fn.call(this, arguments)
        }, delay)
      }
    }
   ```
   节流
   ``` javascript
    const throttle = (fn, delay) => {
      let canRun = true;
      if (!canRun) {
        return
      }
      canRun = false;
      setTimeout(() => {
        fn.call(this. arguments);
        canRun = true;
      }, delay);
    }
   ```

## 3. 手写数组flat

``` javascript
const flat = arr => {
  arr.reduce((pre, value) => {
    return pre.concat(Array.isArray(value) ? flat(value) : value)
  }, []);
}
```

## 4. 写一个 mySetInterVal(fn, a, b),每次间隔 a,a+b,a+2b 的时间，然后写一个 myClear，停止上面的 mySetInterVal

``` javascript
function mySetInterVal(fn, a, b) {
  this.a = a;
  this.b = b;
  this.time = 0;
  this.handle = -1;
  this.start = () => {
    this.handle = setTimeout(() => {
      fn();
      this.time++;
      this.start();
    }, this.a + this.time * this.b);
  }

  this.stop = () => {
    clearTimeout(this.handle);
    this.time = 0;
  }
}

var a = new mySetInterVal(() => {console.log('123')},1000, 2000 );
a.start();
a.stop();
```

## 5. 斐波那契数列
   
``` javascript
const Fibonacci = (n) => {
  if (n < 0) throw new Error('输入的数字不能小于0');
  if (n < 2) return n;
  return Fibonacci(n - 1) + Fibonacci(n - 2)
}
```
   
## 7. 实现 add(1)(2)(3)
   
``` javascript
const add = (a) => (b) => (c) => a + b + c;
```

## 8. 数据类型判断

typeof 可以正确识别：Undefined、Boolean、Number、String、Symbol、Function 等类型的数据，但是对于其他的都会认为是 object，比如 Null、Date 等，所以通过 typeof 来判断数据类型会不准确。但是可以使用 Object.prototype.toString 实现。

``` javascript
const getType = (obj) => {
  return Object.prototype.toString.call(obj).slice(8, -1);
}
```

## 9. 数组扁平化
    
数组扁平化就是将 [1, [2, [3]]] 这种多层的数组拍平成一层 [1, 2, 3]。使用 Array.prototype.flat 可以直接将多层数组拍平成一层：

``` javascript
[1, [2, [3]]].flat(2)  // [1, 2, 3]
```

关键：递归

``` javascript
const flatten = arr => {
  let newArr = [];
  for(let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      newArr.concat(flatten(arr[i]))
      return
    }
    newArr.push(arr[i])
  }
  return neaArr;
}
```

## 10. 深浅拷贝

浅拷贝：只考虑对象类型

ES5版
``` javascript
function shallowCopy(obj) {
  if (typeof obj !== 'object') return

  let newObj = obj instanceof Array ? [] : {};

  for (let i in obj) {
    if (obj.hasOwnProperty(i)) {
      newObj[i] = obj[i];
    }
  }

  return newObj;
}
```

ES6版
``` javascript
const shallowCopy = obj => Array.isArray(obj) ? [...obj] : {...obj}
```

深拷贝

``` javascript
const deepClone = obj => {
  if (typeof obj !== 'object') return;
  let newObj = obj instanceof Array ? [] : {};
  
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === 'object') {
        newObj[key] = deepClone(obj[key]);
      } else {
        newObj[key] = obj[key];
      }
    }
  }

  return newObj;
}
```

## 11. 解析 URL 参数为对象
  
``` javascript
const urlSearch = href => {
  let obj = {};
  const queryIndex = href.indexOf('?');
  const urlOptions = href.slice(queryIndex + 1, href.length);
  const options = urlOptions.split('&');
  options.map(option => {
    const equalIndex = option.indexOf('=');
    obj[option.slice(0, equalIndex)] = option.slice(equalIndex + 1, option.length);
  });
  return obj;
}
```

## 12. 实现柯里化（Currying）

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

## 13. 手写AJAX

``` js
const myAjax = (url) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.onreadystatechange = () => {
      if (xhr.readyState !== 4) return
      if (xhr.status === 200) {
        resolve(xhr.responseText)
      } else {
        reject(xhr.responseText)
      }
    }
    xhr.send();
  })
}
```

## 14. 手写Promise

``` javascript
const PADDING = "PADDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

class MyPromise {
  constructor(executor) {
    this.status = PADDING;
    this.value = undefined;
    this.error = undefined;

    let resolve = (value) => {
      if (this.status === PADDING) {
        this.value = value;
        this.status = FULFILLED;
      }
    }

    let reject = (error) => {
      if (this.status === PADDING) {
        this.error = error;
        this.status = REJECTED;
      }
    }

    try {
      executor(resolve, reject)
    } catch (e) {
      reject(e);
    }
  }

  then(onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
      onFulfilled(this.value)
    }

    if (this.status === REJECTED) {
      onRejected(this.error)
    }
  }
}
```
    
## 15. 实现 Promise.all
  
``` js
const promiseAll = (promises) => {
  if (Array.isArray(promises)) {
    throw new Error('the arguments must be an array !!!')
  }
  const promisesLength = promises.length;
  let current = 0, result = [];
  new Promise((resolve, reject) => {
    promises.forEach((promise, i) => {
      Promise.resolve(promise).then(value => {
        current ++;
        result[i] = value;
        if (current === promisesLength) {
          resolve(result)
        }
      }, error => reject(error))
    })
  })
}
```

## 16. 手写模版字符串

``` javascript
const render = (str, data) => {
  const reg = /\{\{(\w+)\}\}/;
  if (reg.test(str)) {
    const key = reg.exec(str)[1];
    str = str.replace(reg, data[key]);
    return render(str, data);
  }
  return str;
} 
```