js基礎---3

時間 2019-11-09

原文原文鏈接

實現promise

const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'
function MyPromise(fn){
 const that = this
  that.state = PENDING
  that.value = null
  that.resolvedCallbacks = []
  that.rejectedCallbacks = [] 
  function resolve(value) {
    if(that.state === PENDING) {
      that.state = RESOLVED
      that.value = value
      that.resolvedCallbacks.map(cb => cb(that.value))
    }
  }    
  function reject(value) {
    if(that.state === PENDING){
      that.state = REJECTED
      that.value = value;
      that.rejectedCallbacks.map(cb => cb(that.value));
    }
  }
  try {
    fn(resolve, reject)
  } catch (e) {
    reject(e)
  }
}    
MyPromise.prototype.then = function(onFulfilled, onRejected) {
  const that = this
  //對傳入的兩個參數作判斷，若是不是函數將其轉爲函數
  onFulfilled = 
    typeof onFulfilled === 'function'
    ? onFulfilled 
    : v => v  // onFulfilled = v => v
  onRejected = 
    typeof onRejected === 'function'
    ? onRejected
    : r => {
      throw r
    }
  if(that.state === PENDING) {
    that.resolvedCallbacks.push(onFulfilled)
    that.rejectedCallbacks.push(onRejected)
  }
  else if(that.state === RESOLVED) {
    onFulfilled(that.value)
  }
  else {
    onRejected(that.value)
  }
}
new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功的回調數據')
  }, 1000)
}).then(value => {
  console.log('Promise.then:  ', value)
})

大數相加

1.末尾加上末尾，若是大於等於10，產生進位。若是沒有進位就是0.2.倒數第二位加上倒數第二位，再加上進位，若是大於等於10，產生進位。3.倒數第三位加上倒數第三位，再加上進位，若是大於等於10，產生進位。。。。直到加完數字小的位數。第一循環結束，進行第二循環。第二循環是指，數字較小（或者長度較短）的數字已經加完結束了。剩下的就是第一循環加完後，剩下的進位與剩下的相加。node

//bigNumberA和bigNumberB使用字符串存儲，不然會自動轉化爲科學計數
let bigNumberAdd = (bigNumberA, bigNumberB) => {
    let A  = (bigNumberA + '').split('');
    let B = (bigNumberB + '').split('');
    let aLen = A.length, bLen = B.length, cLen = Math.max(aLen, bLen) + 1;
    let result = [], prefix = 0;
    for (let i = 0; i< cLen -1; i++ ) {
        let a = aLen - i - 1 >= 0 ? parseInt(A[aLen - i - 1]) : 0, b = bLen - i - 1 >= 0 ? parseInt(B[bLen - i - 1]) : 0;
    result[i] = (a + b + prefix) % 10;
        prefix = Math.floor((a + b + prefix) / 10);
    }
    return result.reverse().join('');
};
bigNumberAdd('45486646468484544661134868968','544545867466464646');

純js寫一個動畫，5s由快到慢，速度自定義

animation easereact

實現一個三角形

.triangle{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-buttom:100px solid yellow;
}

快排是怎樣實現的

冒泡排序？

手寫二分查找

手寫求一個字符串中出現次數最多且長度最長的子串

反轉鏈表

var reverseList=function(head){
if(head===null||head.next===null){
return head;
}
var new_head=reverseList(head.next);
head.next.next=head;
head.next=null;
return new_head;
};

圖片懶加載怎麼作？

防抖

函數防抖就是在函數須要頻繁觸發的狀況下，只有足夠的空閒時間，才執行一次。
典型應用nginx

百度搜索框在輸入稍有停頓時才更新推薦熱詞。

拖拽web

function debounce(handler, delay){
 delay = delay || 300;
 var timer = null;
 return function(){
   var _self = this,
       _args = arguments;    
   clearTimeout(timer);
   timer = setTimeout(function(){
     handler.apply(_self, _args);
   }, delay);
 }


}

節流

一個函數只有在大於執行週期時才執行，週期內調用不執行。好像水滴積攢到必定程度纔會觸發一次下落同樣。
典型應用：正則表達式

搶券時瘋狂點擊，既要限制次數，又要保證先點先發出請求
窗口調整

頁面滾動算法

function throttle(handler, wait){數據庫

wait = wait || 300;
 var lastTime = 0;
 return function(){
   var _self = this,
   _args = arguments;
   var nowTime = new Date().getTime();
   if((nowTime - lastTime) > wait){
     handler.apply(_self, _args);
     lastTime = nowTime;
   }
 }
 }

js中最大整數是多少？

9開頭數組

數組扁平化是指將一個多維數組變爲一維數組

[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]
遞歸法：promise

function flatten(arr) {
  let res = [];
  arr.map(item => {
    if(Array.isArray(item)) {
      res = res.concat(flatten(item))
    } else {
      res.push(item);
    }
  })
  return res;
}