js中一些小知识_javascript 串行执行-CSDN博客

本文链接：https://blog.csdn.net/weixin_45818337/article/details/139141479

一行代码将数组排序并去重

let arrs = [1,3,4,6,1,7,10] 
arrs =Array( ... new Set(arrs.sort()))
 console.log(arrs)

js接口串行与并行的实现样例

串行：可以使用async/await来保证多个接口串行访问。async/await提供了一种更清晰的方式来写异步代码，它会在等待一个异步操作完成之后再继续执行。

async function testFunction(urls){
  for(let i of urls){
     let res=await $.fetch(i)
 }

}

testFunction(['http://baidu.com','http://baidu.com','http://baidu.com'])

穿插一个知识:fetch和AJAX的区别----添加链接描述

并行访问使用:promise.all

let testp1=new  Promise((resolve,reject)=>{
    setTimeout(()=>{
      console.log('testp1结束');
      resolve()
   },0)
})
let testp2=new  Promise((resolve,reject)=>{
    setTimeout(()=>{
 console.log('testp2结束');
      resolve()
   },0)
})
promise.all([testp1,testp2]).then(res=>{
})

Promise和Async/Await的区别

添加链接描述

css中间栏优先加载

<div class="main-2">

     <div class="main-wrap-2">main-wrap</div>

</div>

<div class="sub-2">sub</div>

<div class="extra-2">extra</div>

css部分：

.main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;background:#F90;}

.main-wrap-2{  margin:0 200px 0 150px;  }

.sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-3000px; padding-bottom:3000px;}

.extra-2{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}

优先加载关键在于重要内容在html里面必须在前面，所有main部分移到了最上面


中间栏优先加载，采用css3 方法：

[html]<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自适应宽度，左右两栏固定宽度，中间栏优先加载</title>
<style>
.container{
        display:-moz-box;
        display:-webkit-box;
        }
div{
        padding:10px;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;                
        }        
.sider_l{
        width:250px;
        -moz-box-ordinal-group:1;
        -webkit-box-ordinal-group:1;                
        background:limegreen;
        }
.middle_content{
        -moz-box-flex:1;
        -webkit-box-flex:1;
        -moz-box-ordinal-group:2;
        -webkit-box-ordinal-group:2;
        background:lightpink;                
        }        
.sider_r{
        width:250px;
        -moz-box-ordinal-group:3;
        -webkit-box-ordinal-group:3;                
        background:green;                
        }                        
</style>
</head>

<body>
        <div class="container">
            <div class="middle_content">优先加载主内容区</div>
        <div class="sider_l">左边栏</div>
                <div class="sider_r">右边栏</div>            
    </div>
</body>
</html>
[/html]

中间栏优先加载position:absolute方法

<style type="text/css">
html,body{width:100%;height:100%;margin:0;padding:0;}
.content{width:100%;height:100%;position:relative;background:#CFF;overflow:hidden;}
.left{width:200px;height:100%;background:#0F0;position:absolute;z-index:1001;top:0;left:0;}
.center-ct{height:100%;background:#60F;position:absolute;z-index:900;top:0;left:0;margin:0;width:100%;}
.center{margin:0 200px;}
.right{width:200px;height:100%;background:#FF0;position:absolute;z-index:1000;right:0;top:0;}
</style>
</head>

<body>
<div class="content">
<div class="center-ct">
    <div class="center">
    center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center
    </div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

详细可看此链接

JS 0.1+0.2 == 0.3?

在 JavaScript 中，有时候你可能会发现 0.1+0.2 不等于 0.3。这是因为 JavaScript 使用的是浮点数来表示小数，而浮点数在计算机内部是用二进制表示的，这导致了一些精度问题。

因为计算机硬件存储数据时，是以二进制（10101010）形式进行存储的。所以计算机计算0.1+0.2的时候，实际上是计算的两个数的二进制的和。
我们可以先将其转化为整数，运算之后，然后再将其转化为小数。
解决方案
1、使用toFixed()最简单的方法，四舍五入，只保留小数点后1位，注意toFixed()返回值的类型是String(字符串) 类型。
parseFloat((0.1+0.2).toFixed(1)) === 0.3 // true
(0.1*100+0.2*100)/100 === 0.3 // true

js判断一个值是对象还是数组，数组或对象判空

1. 判断一个值是对象还是数组
 通过es6的一个方法Array.isArray()判断
let a = [1,2,3]

Array.isArray(a); //true
Array.isArray({}/null/function); //false
3. 通过 instanceof 运算符判断
 instanceof运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置，返回一个布尔值。
 let a = [];
a instanceof Array; //true
a instanceof Object; //true
let b = {};
b instanceof Array; //false
b instanceof Object; //true
4. 通过 constructor 属性判断
5.  判断一个变量是否是数组或者对象，从另一个层面讲，就是判断变量的构造函数是Array类型还是Object类型。因为一个对象的实例都是通过构造函数生成的，所以，我们可以直接判断一个变量的constructor属性。
6. let a = [];

a.constructor === Array; //true

a.constructor === Object; //false

let b = {};

b.constructor === Array; //false

b.constructor === Object; //true
二. 对象或数组判空
1. a.length === 0 判断数组是否为空

2.JSON.stringfy(b) === ' { } '  判断对象是否为空