zoukankan      html  css  js  c++  java
  • 数组乱序、多行省略号、mongoose-update

    1、数组乱序

    function shuffle(arr){
        var len = arr.length,
            temp;
        for(var i=0,rand;i<len;i++){
            rand = i + ~~(Math.random()*(len - i));
            temp = arr[i];
            arr[i] = arr[rand];
            arr[rand] = temp;
        }
        return arr;
    }
    
    console.log(shuffle([5,4,0,1,2,7]));

    由于使用sort加Math.random()*0.5实现的排序乱序有很大机会在同一个位置出现的几率比较高,而且每个位置的几率都不平均。

    而以上的实现可以证实比较优的方法。

    数学归纳法:

    证明: i/(i+1)*(i-1/i)...2/3*1/2 = 1/(i+1)

    1、n=2时,替换几率为1/2,不替换为1/2.

    2、n=i,i>2时,每个位置替换与不替换的几率为1/i.

    3、n=i+1,i+1>2时,每个位置替换与不替换的几率为1/(i+1),而假设每个与最后一个替换的概率为1/(i+1),那么最后一个与每个不替换的概率就是

    i/(i+1),那么循环每一个与最后一位替换,第一次的不替换为i/(i+1),第二次就为i,而且根据2假设,每一个位置不替换为1/i,那么循环i次为 i/(i+1)*1/i=1/(i+1)

    2、多行省略号

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        .mutil-line-ellipsis {
        width: 400px;
        height: 50px;
        line-height: 25px;
        margin: 20px 20px 50px 300px;
        border: 5px solid #AAA;
        line-height: 25px;
        overflow: hidden;
    }
    /*相当于之前的prop*/
    .mutil-line-ellipsis:before {
        content: '';
        float: left;
        width: 5px;/*缩小宽度为5px,其余属性不变*/
        height: 50px;
    }
    /*相当于之前的main*/
    .mutil-line-ellipsis > :first-child {
        float: right;
        width: 100%;
        margin-left: -5px;/*让main元素左移5px,这样main元素在宽度上就完全占满了父元素;*/
        word-break: break-all;
    }
    /*相当于之前的realEnd*/
    .mutil-line-ellipsis:after {
        content: '...';
        box-sizing: content-box;
        float: right;
        position: relative;
        width: 50px;
        height: 25px;
        top: -25px; /*等于高度的负值,就是文字的行高*/
        left: 100%;
        /*而设置margin-left: -50px、padding-right: 5px则是为了让realend元素的盒模型的最终宽度计算为5px。*/
        margin-left: -50px;
        padding-right: 5px;
        font-size: 13px;
        text-align: right;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 40px);
    }
        </style>
    </head>
    <body>
    <div class="mutil-line-ellipsis">
        <div>
            2.main 这里是要多行文本溢出省略的,内容多一点,内容多一点,内容多一点,内容多一点
            内容多一点,内容多一点,内容多一点,内容多一点,内容多一点,内容多一点
        </div>
    </div>
    </body>
    </html>

    巧妙使用了relative、margin-left、float,首先使用before挤出5px,然后margin-left:-5px占回去,而且100%,那么右边就会出现一点点空间让after占着当内容溢出时,而...为英文默认不换行,那么

    就实现了内容溢出出现省略号了。

    当然里面还有很多有意思的样式。

    3、mongoose-update

    更新子文档内容,
    如以下,由于cartList为数组结构,所以cartList.$.productNum更新到具体某个位置的值,而$为占位符,代表某一行数据下的productNum数据更新
    参数:
    条件 «Object»
    更新内容 «Object»
    [操作参数] «Object» 参考https://mongoosejs.com/docs/api.html#query_Query-setOptions
    [回调] «Function»
    例子:
      User.update({"userId":userId,"cartList.productId":productId},{
        "cartList.$.productNum":productNum,
        "cartList.$.checked":checked,
      }, function (err,doc) {
        if(err){
          res.json({
            status:'1',
            msg:err.message,
            result:''
          });
        }else{
          res.json({
            status:'0',
            msg:'',
            result:'suc'
          });
        }
      })
      删除某一条信息,使用update与原子操作$pull实现,先查询到然后删除符合条件的子文档
      $pull删除符合条件的内容
      User.update({
        userId:userId
      },{
        $pull:{
          'cartList':{
            'productId':productId
          }
        }
      }, function (err,doc) {
        if(err){
          res.json({
            status:'1',
            msg:err.message,
            result:''
          });
        }else{
          res.json({
            status:'0',
            msg:'',
            result:'suc'
          });
        }
      })

    MongoDB 原子操作

    序列化

    将对象的状态信息转换为可以存储或传输的形式的过程。在序列化期间,对象将其当前状态写入到临时或持久性存储区。以后,可以通过从存储区中读取或反序列化对象的状态,重新创建该对象。可序列化的对象在安全上需要注意。

  • 相关阅读:
    ZendStudio 解决svn导出项目乱码问题
    Linux常用命令
    php类与对象
    Apache shutdown unexpectedly启动错误解决方法
    php构造函数和析构函数
    MySQL基本概念
    Javascript中常用事件的命名
    网页布局
    页面的自动滚动效果
    表单验证和事件(2)
  • 原文地址:https://www.cnblogs.com/zhangzhicheng/p/9941087.html
Copyright © 2011-2022 走看看