练习

//实现指定多少时间后执行callback

const wait = (delay,callback) => {
    let p = new Promise((res,rej)=>{
        setTimeout(()=>{
            res(callback)
        },delay)
    }).then((callback)=>{
        callback();
    })
    return p
}
async function helloAsync(){
   await wait(3000,()=>console.log("something important"));
}
//helloAsync();

const result = wait(3000,()=>console.log("something important"));
console.log(result)//"something important"

//累加数组每一项

((arr) => {
    let tot1 = 0;
    arr.map((item)=>tot1 += item);
    console.log(tot1)

    let tot2 = arr.reduce((prve,next)=>{
        return prve+next
    },0)
    console.log(tot2)

    let tot3 = 0;
    arr.filter(item=>tot3 += item)
    console.log(tot3)

    let tot4 = eval(arr.join('+'))
    console.log(tot4)

})([1,2,3,.5,100])
//106.5     
//[1,2,3,.5,'100']只有tot4转数字相加，其他三个都是字符串拼接  

//数组每一项的平方值

((arr) => {

    let tot2 = arr.map((item)=>{
        //console.log(item)
        return item * item
    },0)
    console.log(tot2)

})([1,2,3,4,5,6,7,8,9,10])

//查找字符串出现次数

function findSameStrs(s) {
　if(typeof s !== "string") return '';
　var str = s;
  //下面对乱的字符排序，如果题目要求”连续出现”最多字符的话，不用写
  str = s.split('').sort((a,b)=>a.localeCompare(b)).join('');
    console.log(str)
  var reg = /(w)1+/g;

  var arr = str.match(reg);//捕获匹配的字符
    console.log(arr)
  if(arr){
　　// 将正则匹配到的结果继续按照字符串的长度排序(从大到小)
    arr.sort((a,b)=>b.length - a.length);

    console.log("出现次数最多的字符是：" + arr[0][0] + "出现:" + arr[0].length + "次")
  }else{
　　// 如果正则没有匹配到的，则表示该字符串没有重复出现的字符，默认打印字符串第一位
    console.log("出现次数最多的字符是：" + s[0], "出现: 1次")
  }
}
findSameStrs('aabbcccddeeeeas;dfjas;f')

//;;aaaabbcccdddeeeeffjss
//["aaaa", "bb", "ccc", "ddd", "eeee", "ff", "ss"]
//出现次数最多的字符是：a出现:4次

//一维数组和多位数组交集差集

var obj = [
    {id:1,name:'a'},
    {id:2,name:'b'},
    {id:3,name:'c'},
    {id:4,name:'d'},
    {id:5,name:'e'},
    {id:6,name:'f'},
    {id:7,name:'g'},
    {id:8,name:'h'},
    {id:9,name:'i'}
]
var ary = [1,3,5,7,9];

var temp1 = [];
var temp2 = [];
$(obj).each(function(index,item){
    var id = item.id;
    //交集
    for(var i=0;i<ary.length;i++){
        if(id == ary[i]){
            temp1.push(item);
        }
    }
    //差集
    if (ary.indexOf(id) < 0) {
        temp2.push(item);
    }
})
console.log(temp1,temp2)

//交集取权限

var obj = [
    {id:1,name:'a',child:[{id:11,name:'a1'},{id:12,name:'a2'},{id:13,name:'a3'}]},
    {id:2,name:'b',child:[{id:21,name:'b1'},{id:22,name:'b2'},{id:23,name:'b3'}]},
    {id:3,name:'c',child:[{id:31,name:'c1'},{id:32,name:'c2'},{id:33,name:'c3'}]},
    {id:4,name:'d',child:[{id:41,name:'d1'},{id:42,name:'d2'},{id:43,name:'d3'}]},
    {id:5,name:'e',child:[{id:51,name:'e1'},{id:52,name:'e2'},{id:53,name:'e3'}]},
    {id:6,name:'f',child:[{id:61,name:'f1'},{id:62,name:'f2'},{id:63,name:'f3'}]},
    {id:7,name:'g',child:[{id:71,name:'g1'},{id:72,name:'g2'},{id:73,name:'g3'}]},
    {id:8,name:'h',child:[{id:81,name:'h1'},{id:82,name:'h2'},{id:83,name:'h3'}]},
    {id:9,name:'i',child:[{id:91,name:'i1'},{id:92,name:'i2'},{id:93,name:'i3'}]}
]

var ary2 = [1,11,13,2,23,4,42,6,61,7,72,73,9,91,92,93];
var temp3 = [];

$(obj).each(function(index,item){
    $(ary2).each(function(i,t){
        if(item.id == t){
            var ary = [];
            $(item.child).each(function(a,b){
                $(ary2).each(function(c,d){
                    if(b.id == d){
                        ary.push(b)
                    }
                })
            })
            //原始数据被改变了
            item.child = ary;
            temp3.push(item);
        }
    })
})
console.log(temp3)

var obj = [
    {id:1,name:'a',child:[{id:11,name:'a1'},{id:12,name:'a2'},{id:13,name:'a3'}]},
    {id:2,name:'b',child:[{id:21,name:'b1'},{id:22,name:'b2'},{id:23,name:'b3'}]},
    {id:3,name:'c',child:[{id:31,name:'c1'},{id:32,name:'c2'},{id:33,name:'c3'}]},
    {id:4,name:'d',child:[{id:41,name:'d1'},{id:42,name:'d2'},{id:43,name:'d3'}]},
    {id:5,name:'e',child:[{id:51,name:'e1'},{id:52,name:'e2'},{id:53,name:'e3'}]},
    {id:6,name:'f',child:[{id:61,name:'f1'},{id:62,name:'f2'},{id:63,name:'f3'}]},
    {id:7,name:'g',child:[{id:71,name:'g1'},{id:72,name:'g2'},{id:73,name:'g3'}]},
    {id:8,name:'h',child:[{id:81,name:'h1'},{id:82,name:'h2'},{id:83,name:'h3'}]},
    {id:9,name:'i',child:[{id:91,name:'i1'},{id:92,name:'i2'},{id:93,name:'i3'}]}
]

var ary2 = [1,11,13,2,23,4,42,6,61,7,72,73,9,91,92,93];
var temp1 = [];

$.each(obj,function(index,item){
    if(ary2.indexOf(item.id) >= 0){
        var temp = [];
        $.each(item.child,function(i,t){
            if(ary2.indexOf(t.id) >= 0){
                temp.push(t)
            }
        })
        item.child = temp;
        temp1.push(item)
    }
})

console.log(temp1)

var obj = [
    {id:1,name:'a',child:[{id:11,name:'a1'},{id:12,name:'a2'},{id:13,name:'a3'}]},
    {id:2,name:'b',child:[{id:21,name:'b1'},{id:22,name:'b2'},{id:23,name:'b3'}]},
    {id:3,name:'c',child:[{id:31,name:'c1'},{id:32,name:'c2'},{id:33,name:'c3'}]},
    {id:4,name:'d',child:[{id:41,name:'d1'},{id:42,name:'d2'},{id:43,name:'d3'}]},
    {id:5,name:'e',child:[{id:51,name:'e1'},{id:52,name:'e2'},{id:53,name:'e3'}]},
    {id:6,name:'f',child:[{id:61,name:'f1'},{id:62,name:'f2'},{id:63,name:'f3'}]},
    {id:7,name:'g',child:[{id:71,name:'g1'},{id:72,name:'g2'},{id:73,name:'g3'}]},
    {id:8,name:'h',child:[{id:81,name:'h1'},{id:82,name:'h2'},{id:83,name:'h3'}]},
    {id:9,name:'i',child:[{id:91,name:'i1'},{id:92,name:'i2'},{id:93,name:'i3'}]}
]

var ary2 = [1,11,13,2,23,4,42,6,61,7,72,73,9,91,92,93];

for(var i=0;i<obj.length;i++){
    if(ary2.indexOf(obj[i].id) < 0){
        obj.splice(i,1);
        i--;
    }else{
        var temp = obj[i].child;
        for(var j=0;j<temp.length;j++){
            if(ary2.indexOf(temp[j].id) < 0){
                temp.splice(j,1);
                j--;
            }
        }
    }
}

console.log(obj)

多行展开收起自动隐藏（css）

.wrapper {
  display: flex;
  margin: 50px auto;
  width: 800px;
  overflow: hidden;
  border-radius: 8px;
  padding: 15px ;
border:1px solid #ff9900;
}
.text {
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  position: relative;
  line-height: 1.5;
  max-height: 4.5em;
  transition: 3s max-height;
}
.text::before {
  content: '';
  height: calc(100% - 26px);
  float: right;
}
.text::after {
  content: '';
  width: 999vw;
  height: 999vw;
  position: absolute;

    margin-left: -100px;
}
.btn{
  position: relative;
  float: right;
  clear: both;
  margin-left: 20px;
  font-size: 16px;
  padding: 0 8px;
  background: #3F51B5;
  line-height: 24px;
  border-radius: 4px;
  color:  #fff;
  cursor: pointer;
}
.btn::after{
  content:'展开'
}
.exp{
  display: none;
}
.exp:checked+.text{
  max-height: none;
}
.exp:checked+.text::after{
  visibility: hidden;
}
.exp:checked+.text .btn::before{
  visibility: hidden;
}
.exp:checked+.text .btn::after{
  content:'收起'
}
.btn::before{
  content: '...';
  position: absolute;
  left: -5px;
  color: #333;
  transform: translateX(-100%)
}

<div class="wrapper">
    <input id="exp1" class="exp"  type="checkbox">
    <div class="text">
        <label class="btn" for="exp1"></label>
        浮动元素是如何定位的正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。
    </div>
</div>