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