每日，雜學

關於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

簡單到哭。。