每日，杂学

关于Object.create(null)产生的对象没有原型而产生的一些讨论

proto 是个 getter，暴露了一个引擎的内部属性 [[Prototype]]，而后 proto 同时也是一个 setter，这样一来，若是你把它弄没了（基于Null去建立对象），它就再也不是 getter / setter，因此你修改它的时候，就不会再应用到内部属性 [[Prototype]] 上，这样一来，它就再也不是这个对象的原型了

按这个思路，object.create(null)，也同样能够玩 proto，只要手动定义一个……

由于 proto 和其它不少两个下划线开头的 api，是在 Object.prototype 上定义的，因此问题来了，不用 setPrototypeOf 可不能够给它定义 prototype 呢，其实应该也是能够的。。

动手实现一个New的过程

function myNew() {
    var func = arguments[0] //构造函数
    var p = Array.prototype.slice.call(arguments).slice(1) //后续的参数
    //var obj = Object.create(null) //创造一个纯粹的字典，没法连接原型链  obj.__proto__ = func.prototype
    var obj = Object.create({}) //方式1
    obj.__proto__ = func.prototype
    //var obj = Object.create(func.prototype) //方式2
    //方式3，在以前的讨论中
    func.apply(obj, p)
    return obj
}
复制代码

h5经常使用meta标签

<meta charset="UTF-8">
    <title>title</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=640,user-scalable=no" />
    <!--<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">-->
    <meta http-equiv="cleartype" content="on">
    <meta name="apple-mobile-web-app-title" content="...">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="x-rim-auto-match" content="none">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
复制代码

复制

copy(){  //投放弹窗中的复制url,曲线救国来着，竟然造了一个dom
           
            var a =this.outPut.qrcodeurl  //须要复制的值
             var transfer = document.getElementById('J_CopyTransfer');
        if (!transfer) {
            transfer = document.createElement('textarea');
            transfer.id = 'J_CopyTransfer';
            transfer.style.position = 'absolute';
            transfer.style.left = '-9999px';
            transfer.style.top = '-9999px';
            document.body.appendChild(transfer);
        }
        transfer.value = a;
        transfer.focus();
        transfer.select();
        document.execCommand('Copy', false, null);
        },
 var Request =this.getUrl()
        this.pageInfo.baseid=Request['baseid']
复制代码

时间格式化

dataFormate(time,fmt){
            var o = {
        "M+": time.getMonth() + 1, //月份 
        "d+": time.getDate(), //日 
        "h+": time.getHours(), //小时 
        "m+": time.getMinutes(), //分 
        "s+": time.getSeconds(), //秒 
        "q+": Math.floor((time.getMonth() + 3) / 3), //季度 
        "S": time.getMilliseconds() //毫秒 
         };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (time.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        },
复制代码

深克隆（非json，有弊端的克隆)

const clone = parent => {
  // 维护两个储存循环引用的数组
  const parents = [];
  const children = [];
  const isType = (obj, type) => {
    if (typeof obj !== "object") return false;
    const typeString = Object.prototype.toString.call(obj);
    let flag;
    switch (type) {
      case "Array":
        flag = typeString === "[object Array]";
        break;
      case "Date":
        flag = typeString === "[object Date]";
        break;
      case "RegExp":
        flag = typeString === "[object RegExp]";
        break;
      default:
        flag = false;
    }
    return flag;
  };
  const _clone = parent => {
    if (parent === null) return null;
    if (typeof parent !== "object") return parent;

    let child, proto;

    if (isType(parent, "Array")) {
      // 对数组作特殊处理
      child = [];
    } else if (isType(parent, "RegExp")) {
      // 对正则对象作特殊处理
      child = new RegExp(parent.source, getRegExp(parent));
      if (parent.lastIndex) child.lastIndex = parent.lastIndex;
    } else if (isType(parent, "Date")) {
      // 对Date对象作特殊处理
      child = new Date(parent.getTime());
    } else {
      // 处理对象原型
      proto = Object.getPrototypeOf(parent);
      // 利用Object.create切断原型链
      child = Object.create(proto);
    }

    // 处理循环引用
    const index = parents.indexOf(parent);

    if (index != -1) {
      // 若是父数组存在本对象,说明以前已经被引用过,直接返回此对象
      return children[index];
    }
    parents.push(parent);
    children.push(child);

    for (let i in parent) {
      // 递归
      child[i] = _clone(parent[i]);
    }

    return child;
  };
  return _clone(parent);
};
复制代码

spa非hash传值

getUrl(){
               var url =location.search ; //获取url中"?"符后的字串,用了unescape转义，防止中文
               var theRequest = new Object();
               if (url.indexOf("?") != -1) {
                  var str = url.substr(1);
                  var strs = str.split("&");
                  for(var i = 0; i < strs.length; i ++) {
                     theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
                  }
               }
              return theRequest;
                      },
getUrl() {
      let obj = {};
      location.search
        .slice(1)
        .split("&")
        .forEach(str => {
          let i = str.indexOf("=");
          obj[str.slice(0, i)] = str.slice(i + 1);
        });
      return obj;
    }
复制代码

移动端调试工具

let script = document.createElement('script')
  script.src = 'https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js'
  script.onload = function() {
    /* eslint-disable no-new */
    if (window.VConsole) new window.VConsole()
  }
  document.head.appendChild(script)

复制代码

bind的简单实现

Function.prototype.bind=function(){
	let me =this  //调用bind函数的对象
	let arg=arguments
	return function(){
return me.apply(arg[0],arg[1])
}
	
	
}
复制代码

referer与origin

referer显示来源页面的完整地址，而origin显示来源页面的origin: protocal+host，不包含路径等信息，也就不会包含含有用户信息的敏感内容

referer存在于全部请求，而origin只存在于post请求，随便在页面上点击一个连接将不会发送origin

所以origin较referer更安全，多用于防范CSRF攻击。

节流函数（避免重复触发）

var timer = null;
    var previous = null;//
var throttle = function (fn, delay, atleast) { //fn须要执行的函数，delay间隔时间,当
	console.log('throttle')
    return function () {
        var now = +new Date();
	
        if ( !previous ) previous = now;
		console.log(now,previous,now - previous > atleast)
        if ( now - previous > atleast ) {//若是间隔时间小于则直接触发
            fn();
            // 重置上一次开始时间为本次结束时间
            previous = now;
        } else {//不然
            clearTimeout(timer);
            timer = setTimeout(function() {
                fn();
            }, delay);
        }
    }
}
//拿百度首页作实验
document.getElementById('head_wrapper').addEventListener('click',e=>{throttle(function(){console.log('主题')},1000,5000)()})
复制代码

//改进版
function throttle(fn,t){
	let time=new Date().getTime()
	let setTime
	return function(){
	let nowTime =new Date().getTime()
	console.log(nowTime,time,nowTime - time,t)
	if(nowTime - time >t){
	fn()
	console.log('节流成功')
	if(setTime){clearTimeout(setTime)}
		}else{
	if(!setTime){
setTime=setTimeout(e=>{
	fn()
console.log('延迟执行')},t)
}
	 
}
}
}
var a =throttle(e=>{console.log(123)},500)
for (let i =0;i<10;i++){a()}
复制代码

引用和赋值

在浏览器输入如下代码

var a =[{a:1,b:2,c:3},{a:4,b:5,c:6},{a:7,b:8,c:9}]
var b =a.filter(function(e){
	return e.a==1
})
b[0].a=3
a
复制代码

会发现a[0].a变为了3 这是由于在第二行代码。赋值的时候，等号右边是一个对象，指向同一块内存，也就致使了，b[0].a和a[0].a指向了同一块地址，改变其中一个，另一个也会改变。

若是不想这样，你须要一个东西叫作深拷贝。

var a =[{a:1,b:2,c:3},{a:4,b:5,c:6},{a:7,b:8,c:9}]
var b =JSON.parse(JSON.stringify(a.filter(function(e){
	return e.a==1
})))
b[0].a=3
a
复制代码

map和set

map是一个二维数组形式的对象 例如：var a =new Map([["a",1],["b",2],["c",3]]) 有set get delete has基本方法 后面放入的相同KEY值的值会把前者覆盖掉。 set是将数组对象去重后的对象 例如: var a =new Set([1,2,3,"3",3]) 数组去重的方法 var a =Array.from(a)或者[...a]

for in 与for of 的区别

for in 本质是遍历KEY值，固然也能遍历数组 例如

var a =["a","b","c"]
    a.name=123
    for ( let i in a ){
    console.log(i)   
    }
    // 0,1,2,name
复制代码

for of 是es6的一个方法，用来遍历iterable（set,map,array），不能对{}使用。 只会遍历iterable自己的值

var a =["a","b","c"]
    a.name=123
    for ( let i of a ){
    console.log(i)   
    }
    // 0,1,2
复制代码

数组的filter,map,reduce,sort

filter返回为true的元素 map对数组的每一个元素进行操做 reduce先后相连元素的操做 sort排序

var a =[3,2,4,1,10,3,"321312","22221"]
a.filter(function(e){return (typeof e)=="number"&&e>3})
//[4, 10]
a.map(function(e){return e+3})
//[6, 5, 7, 4, 13, 6, "3213123", "222213"]
a.reduce(function(e,d){return e+d})
//"2332131222221"
a.sort(function(o,n){return o-n })
//[1, 2, 3, 3, 4, 10, "22221", "321312"]
复制代码

数组排序

快速排序

var qsort = (arr)=> {
    if(arr.length===0) {return []}
    const head = arr[0]
    const rest = arr.slice(1)
    const less = rest.filter(x => x<head)
    const large = rest.filter(x => x>=head)
    return [...qsort(less),head,...qsort(large)]
}
复制代码

数组去重

一，利用对象key的惟一性去重

思路：将数组的值做为对象的KEY值，若是对象的KEY值属性不存在，则存入结果数组

var a =[1,2,3,4,5,5,3,2,1,0]
var b ={}
var res=[]
for(var i=0;i<a.length;i++){
    console.log(!b[a[i]])
        if(!b[a[i]]){
            res.push(a[i]);
            b[a[i]] = 1;
	    }

}
复制代码

resule [1, 2, 3, 4, 5, 0] 待优化： 若是待去重的数组是[1,2,3,4,5,'5','3',2,1,0],那么，字符串和数字将被视做同一属性，同样被去重。（缘由是对象的KEY值是字符串属性)优化方法，在属性前加入typeof属性，分离string和number 优化后的代码

var a =[1,2,3,4,5,5,3,2,1,0]
var b ={}
var res=[]
for(var i=0;i<a.length;i++){
    var key = typeof(a[i])+a[i]
        if(!b[key]){
            res.push(a[i]);
            b[key] = 1;
	    }

}
复制代码

二，利用set对象的惟一性

var a =[1,2,3,4,5,'5',3,'2',1,0]
var b =[...new Set(a)]
或者var b = Array.from(new Set(a))
复制代码

待优化：对于数组对象，暂时没想到如何去重

三，使用filter

[1,2,3,1,'a',1,'a'].filter(function(ele,index,array){
//el元素,index下标,array数组自己，indexOf会得到首次出现的位置。
    return index===array.indexOf(ele)
})
复制代码

generator

function* aaa(e){
for(let i of e ){
	yield i
}
}
var a=aaa([{a:1},{b:2}])
a.next()
Object {value: Object, done: false}
a.next()
Object {value: Object, done: false}
a.next()
Object {value: undefined, done: true}
复制代码

class

class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        console.log('Hello, ' + this.name + '!');
    }
}
class old123 extends Student{
	constructor(name,grade){
	super(name);
	this.grade=grade
}
mygrade(){
console.log("成绩",this.grade)}
}
var c =new old123("呵呵哒",123)
c.mygrade()
//成绩 123

c.hello()
//Hello, 呵呵哒!

复制代码

IOS absolute布局方案

容器

100vh 100vw position: relative; overflow: hidden;

组件

overflow:auto;

position:absolute

-webkit-overflow-scrolling:touch;

HTTP和HTTPS

网络传输分四层（HTTP应用层，TCP、UDP传输层，IP网络层，链路层）

解析（IP,PORT）-连接（3次问好）-请求-响应

HTTPS 1，使传输转为安文

2，经过加密data的hash值，客户端经过公钥解密，对比铭文hash，确保了信息的不可修改

3，经过证书认证，确保服务端的惟一性。

事件冒泡

两种模式，大-小，小-大

阻止方式 1，判断点击事件回调参数的，e.target是否与this（指向触发点击事件的dom自己）相等

2，在事件回调中添加stopPropagation()方法。

浏览器cors跨域解决方案

给浏览器加上--args --disable-web-security --user-data-dir

简单到哭。。