六月填坑(四)

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对象先推入队列；

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这些值。 图片的上沿应该是位于可视区域下沿的位置的临界点，再滚动一点点，图片就会进入可视区域。

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))
复制代码

争取一周三篇文章，解决一些小问题。Alisa加油~

转载于:https://juejin.im/post/5d038773e51d455071250aff