面

循环

some 有一项返回true，则这个方法返回true
erery 每一项都返回true， 则这个方法返回true
forEach 没有返回值
filter 返回true的项会组成数组之后返回
map 返回调用结果构成的函数

map filter一起用

  var arr = [1,2,3,4,5];
  var newAr = arr.map(item => item = item * 2).filter(item => item > 6);

call apply bind

call apply bind 改变函数运行时的this指向
apply 接受两个参数 第一个是参数this的指向，第二个参数是函数接受的参数，已数组的形式传入, 
方法只是临时改变一次
call 和apply 一样 第二个参数不一样 不用数组
bind 和 call 差不多 只不过参数可以分为多次传入
bind 是返回绑定this之后的函数 apply，call则是立即执行
function fn (...args) {
    console.log(this,args)
}
let obj = {
    myname:'zs'
}
fn.apply(obj,[2,3]) //this指向了obj
fn(1,2) //this指向window

localStorage sessionStorage cookie

localStorage  持久化的本地存储，除非主动或删除，否则永远不会过期，存储信息是在同一域下共享的 大小5M localStorage本质是对字符串的读取，内容多的话会消耗内存
sessionStorage 与localStorage方法基本一致， 一旦页面关闭sessionStorage将会删除数据
区别 :
    cookie数据大小不能超过4K localStorage，sessionStorage比cookie大可以达到5M
    cookie设置过期时间之前一直有效，即使窗口关闭， localStorage手动删除  sessionStorage关闭会话窗口
    数据域服务器交互方式，cookie会自动传入服务器， 服务器也可以写cookie，
    localStorage，sessionStorage不会，仅本地宝存

闭包

闭包:让你可以在一个内层函数中访问到其外层函数的作用域
场景：创建私有变量，延长变量的生命周期
function init () {
     var name = 'zs';
     function displayName () {
         console.log(name);
     }
     displayName();
 }
 init();

浅拷贝

let copy1 = {...{x:1}};//...实现
let copy2 = Object.assign({}, {x:1});//Object.assign浅拷贝

深拷贝

let obj = {a:1,b:{x:3}};
JSON.parse(JSON.stringify(obj))
缺点：拷贝对象包含 正则表达式 函数 或者 undefind 等值会失败

递归深拷贝

function deepClone (obj) {
    let copy = obj instanceof Array ? [] : {};
    for (let i in obj) {
        if (obj.hasOwnProperty(i)){
            copy[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
        }
    }
    return copy;
}

call做了什么

//将函数设为对象的属性
//执行删除这个函数
//指定this到函数并传入给定参数执行函数
//如果不穿入参数，默认指向window
Function.prototype.mycall = function (context) {
    if (typeof this !== 'function') {
        throw new TypeError('not function');
    }
    context = context || window;
    context.fn = this;
    let arg = [...arguments].slice(1);
    let result = context.fn(...arg);
    delete context.fn;
    return result;
}

实现一个apply

Function.prototype.myapply = function (context) {
    if (typeof this != 'function') {
        throw new TypeError('not function')
    }
    context = context || window;
    context.fn = this;
    let result = "";
    if (arguments[1]) {
        result = context.fn(...arguments[1])
    } else {
        result = context.fn()
    }
    delete context.fn;
    return result;
}

实现一个双向数据绑定

let obj = {};
let input = document.getElementById('input');
let span = document.getElementById('span');
//数据劫持
Object.defineProperty(obj, 'text', {
    configurable: true,
    enumerable: true,
    get () {
        console.log('获取数据了')
    },
    set (newVal) {
        console.log('数据更新了');
        input.value = newVal;
        span.innerHTML = newVal;
    }
})

解析URL参数为对象

function urlSearch (href) {
    let name, value;
    let str = href;
    let num = str.indexOf("?");//获取索引
    str = str.substr(num + 1);//取得所有参数
    let arr = str.split("&");
    let json = {};
    for (let i = 0; i < arr.length; i++) {
        num = arr [i].indexOf("=");
        if (num > 0) {
            name = arr[i].substring(0,num);
            value = arr[i].substr(num + 1);
            json[name] = value;
        }
    }
}

防抖 防止多次提交按钮 只执行最后提交的一次

function debounce (fn, delay) {
    let timer = null;
    return function () {
        let context = this;
        let arg = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, arg)
        }, delay)
    }
}

节流

function throttle (fn, delay) {
    var timer = null;
    var prev = Date.now();
    return function (...args) {
        var that = this;
        var remaining = delay - (Date.now() - prev)
        if (remaining <= 0) {
            fn.apply(that, args)
            prev = Date.now()
        } else {
            timer && clearTimeout(timer)
            timer = setTimeout(function () {
                fn.apply(that, args)
            },remaining)
        }
    }
}

过滤前后空格

var a = ' 123 ';a.replace(/(^\s*)|(\s*$)/g,'');

instanceof原理

function instance_of (L, R) {
    var O = R.prototype;
    L = L.__proto__;
    while (true) {
        if (L === null) return false;
        if (O === L) return true;
        L = L.__proto__;
    }
}

实现懒加载

let imgs = document.querySelectorAll('img');
let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
function LazyLoad () {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    for (let i = 0; i < imgs.length; i++) {
        let x = clientHeight + scrollTop - imgs[i].offsetTop;
        if (x > 0 && x < clientHeight + imgs[i].height) {
            imgs[i].src = imgs[i].getAttribute('data')
        }
    }
}