六月填坑(四)

時間 2019-12-07

標籤六月 6月简体版

原文原文鏈接

1. async await 異步

async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}

async function async2() {
  console.log('async2');
}

console.log('script start');

setTimeout(function () {
  console.log('setTimeout');
}, 0);

async1();
new Promise(function (resolve) {
  console.log('promise1');
  resolve();
}).then(function () {
  console.log('promise2');
});

console.log('script end');
/**script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout */
複製代碼

function testSometing() {
 console.log("執行testSometing");
 return "testSometing";
}
 
async function testAsync() {
 console.log("執行testAsync");
 return Promise.resolve("hello async");
}
 
async function test() {
 console.log("test start...");
 const v1 = await testSometing();//關鍵點1
 console.log(v1);
 const v2 = await testAsync();
 console.log(v2);
 console.log(v1, v2);
}
 
test();
 
var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//關鍵點2
promise.then((val)=> console.log(val));
 
console.log("test end...")
// await異步是讓出線程
/**test start...
執行testSometing
promise start..
test end...
testSometing
執行testAsync
promise
hello async
testSometing hello async */
複製代碼

async function testSometing() {
 console.log("執行testSometing");
 return "testSometing";
}
 
async function testAsync() {
 console.log("執行testAsync");
 return Promise.resolve("hello async");
}
 
async function test() {
 console.log("test start...");
 const v1 = await testSometing();
 console.log(v1);
 const v2 = await testAsync();
 console.log(v2);
 console.log(v1, v2);
}
 
test();
 
var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//3
promise.then((val)=> console.log(val));
 
console.log("test end...")

//執行結果

test start...
執行testSometing
promise start..
test end...
promise
testSometing
執行testAsync
hello async
testSometing hello async
複製代碼

和上一個例子比較發現promise.then((val)=> console.log(val));先與console.log(v1);執行了，緣由是由於如今testSometing函數加了async，返回的是一個Promise對象要要等它resolve，因此將當前Promise推入隊列，因此會繼續跳出test函數執行後續代碼。以後就開始執行promise的任務隊列了，因此先執行了promise.then((val)=> console.log(val));由於這個Promise對象先推入隊列；ajax

2. promise封裝一個ajax

getJSON('/login.json').then((json)=>{
    console.log(json)
},(error)=>{
    console.error(error);
})

function getJSON(url){
  return new Promise((resolve,reject)=>{
    var xhr=new XMLHttpRequest();
    xhr.open('Get',url,true);
    XML.setRequestHeader("Accept", "application/json");
    xhr.send();
    xhr.onReadyStateChange=function(){
      if(xhr.readyState==4&&xhr.status==200){
        resolve(JSON.parse(xhr.responseText))
      }else{
        const resJson = { code: this.status, response: this.response};
        reject(resJson);
      }
    }
  })
}
複製代碼

3. 對url的最全處理（解構賦值）

/**let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
parseParam(url)
/* 結果
{ user: 'anonymous',
  id: [ 123, 456 ], // 重複出現的 key 要組裝成數組，能被轉成數字的就轉成數字類型
  city: '北京', // 中文需解碼
  enabled: true, // 未指定值得 key 約定爲 true
}
*/
let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
function parseParam(url){
  const params = url.split('?')[1].split('&'); //[user=anonymous,id=456,id=123,enabled]
  const obj={};
  params.forEach((item)=>{
    // 處理有value的key 
    if ( /[=]/.test(item)){
      let [k, v] = item.split('=');
      v = decodeURIComponent(v); // 解碼
      // 將有數字的轉換成數字類型
      if (/\d/.test(v)){
        v=parseInt(v)
      }
      // 第一次入棧
      if (!obj[k]) {
        obj[k] = v;
      } else {
        obj[k] = [].concat(obj[k],v)
      }
    }else{
      obj[item]=true;
    }
    
  })
  return obj
}
console.log(parseParam(url)); //{ user: 'anonymous', id: [ 123, 456 ], city: '北京', enabled: true }
複製代碼

4. 攜程筆試操做字符串（正則）

/**給定一個長度小於 50 且包含字母和數字的任意字符串，要求按順序取出當中的數字和英文字母，
 * 數字須要去重，從新排列後的字符串數字在前，字母在後。 */
// 輸入：'攜程C2t0r1i8p2020校招'
// 輸出： '2018Ctrip'
var str = '攜程C2t0r1i8p2020校招';
function handle(str){
  let num = '';
  let word='';
  for(let i=0;i<str.length;i++){
    if(/\d/.test(str[i])){
      num+=str[i]
    }
    if(/[a-zA-Z]/.test(str[i])){
      word += str[i]
    }
  }
  num=num.split('').filter((item, index) => num.split('').indexOf(item)==index);
  console.log(num.join('')+word);
  
}
handle(str) //'2018Ctrip'

方法二：  var nums = str.match(/\d/g); //[ '2', '0', '1', '8', '2', '0', '2', '0' ]
複製代碼

5. 隨機生成指定長度的字符串

// 隨機生成指定長度的字符串
 function randomString(n) {
   let str = 'abcdefghijklmnopqrstuvwxyz9876543210';
   let temp='';
   for(let i=0;i<n;i++){
      let index = Math.floor(Math.random() * str.length);
      temp+=str[index]
   }
   console.log(temp)
 }
 randomString(6)
複製代碼

6. 請用js去除字符串空格？

// 請用js去除字符串空格？
var str = " 23 23 "; 
console.log(str.replace(/(^\s*)|(\s*$)/g,""));//'23 23'
複製代碼

7. js 實現圖片懶加載（注意節流）

經過getBoundingClientRect()方法來獲取元素的大小以及位置，MDN上是這樣描述的：這個方法返回一個名爲ClientRect的DOMRect對象，包含了top、right、botton、left、width、height這些值。圖片的上沿應該是位於可視區域下沿的位置的臨界點，再滾動一點點，圖片就會進入可視區域。json

MDN上有這樣一張圖：數組

<div class="container">
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img1.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img2.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img3.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img4.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img5.png">
  </div>
</div>


 function checkImgs(){
   const imgs = document.querySelectorAll('.my-photo');
   [...imgs].forEach((item)=>{
     if(isInSight(item)){
       loadItem(item);
     }
   })
 }
 isInSight(el){
   const bound=el.getBoundingClientRect();
   const client=window.innerHeight;
  //  隨着滾動條的向下滾動，bound.top會愈來愈小，也就是圖片到可視區域頂部的距離愈來愈小，當bound.top===clientHeight時，
  //圖片的上沿應該是位於可視區域下沿的位置的臨界點，再滾動一點點，圖片就會進入可視區域。
   //若是隻考慮向下滾動加載
  //const clientWidth = window.innerWeight;
   return bound.top < window.innerHeight + 100
 }
 function loadItem(el){
   if(!el.src){
     const source=el.dataset.src;
     el.src=source;
   }
 }

//  這裏的mustRun就是調用函數的時間間隔，不管多麼頻繁的調用fn，只有remaining>=mustRun時fn才能被執行。
function throttle(fn,wait=500){
  let start=null;
  return function(...args){
    const context=this;
    let now=new Date();
    if(!start) {
      start=new Date();}
    
    if(wait&&now-start>wait){
      setTimeout(() => {
        fn.apply(context,args);
        start=new Date();
      }, 0);
    }  
  }
}
window.addEventListener('scroll',throttle(checkImgs,50))
複製代碼