js各种实际场景的使用案例合集（四）

1、元素拖拽

场景1：sortablejs实现el-table行数据拖拽

场景结果：

代码示例：

<template>
  <div class="test">
    <el-table :data="tableData" style="width: 80%" border row-index>
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="price" label="单价"></el-table-column>
      <el-table-column prop="num" label="数量" width="150"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sourtable from 'sortablejs';

export default {
  name: 'EltableNumber',
  data() {
    return {
      tableData:[
        {
          name:'fdgfb',
          price:24.87,
          num:0,

        },
        {
          name:'ukium',
          price:54.76,
          num:0,

        },
        {
          name:'bn',
          price:35.6,
          num:0,

        },
        {
          name:'ry',
          price:38,
          num:0,

        },
        {
          name:'nrh',
          price:7.35,
          num:0,

        },
      ],
    };
  },
  mounted(){
    this.rowDrag();
  },
  methods: {
    rowDrag(){
      let tbody = document.querySelector(".test .el-table__body-wrapper tbody");
      Sourtable.create(tbody, {
        group: { // 相同的组之间可以相互拖拽
          name: "table",
          pull: true,
          put: true,
        },
        animation: 150, // ms, number 单位：ms，定义排序动画的时间
        onAdd: function (e) {
          // 拖拽时候添加有新的节点的时候发生该事件
          console.log("onAdd.foo:", e);
        },
        onUpdate: function (e) {
          // 拖拽更新节点位置发生该事件
          console.log("onUpdate.foo:", e);
        },
        onRemove: function (e) {
          // 删除拖拽节点的时候促发该事件
          console.log("onRemove.foo:", e);
        },
        onStart: function (e) {
          // 开始拖拽出发该函数
          console.log("onStart.foo:", e);
        },
        onSort: function (e) {
          // 发生排序发生该事件
          console.log("onUpdate.foo:", e);
        },
        onEnd(e) {
          // 结束拖拽
          console.log("结束表格拖拽", e);
          // 如果拖拽结束后顺序发生了变化，则对数据进行修改
          if (e.oldIndex !== e.newIndex) {
            console.log("旧序号；", e.oldIndex + 1, "新序号：", e.newIndex + 1) // 排序后和后端的交互函数
          }
        },
      });
    },
  },
};
</script>

2、随机数

场景1：随机生成4位不重复的数

场景结果：

代码示例：

<template>
  <div>
    <span class="r-text m-right">{{num}}</span>
    <span class="b-text" @click="reGetNum">重新获取</span>
  </div>
</template>

<script>
export default {
  name: 'RandomNum',
  data() {
    return {
      num:'3565',
    };
  },
  methods: {
    // 重新获取密码
    reGetNum(){
      let randomNum;
      do {
        randomNum = Math.floor(Math.random() * 10000);
      } while(randomNum.toString() === this.num.toString())
      this.num= randomNum.toString().padStart(4,'0');
    },
  },
};
</script>

<style scoped lang="scss">
.r-text{
  color: #FC4F49;
}
.b-text{
  color: #0066FF;
  cursor: pointer;
}
.m-right{
  margin-right: 12px;
}
</style>

3、对象属性完全相等

场景1：判断两个对象的所有属性值是否相等，如果全部相等则执行下一步操作

代码示例：

function deepEqual(a, b) {  
    if (a === b) return true;  
  
    if (a == null || b == null) return false;  
  
    if (a.constructor !== b.constructor) return false;  
  
    // 处理日期和正则表达式对象  
    if (a.prototype !== b.prototype) return false;  
  
    let length, i, keysA, keysB, subKey;  
  
    // 如果两个对象都是对象或数组，比较它们的长度和属性  
    if (Array.isArray(a)) {  
        length = a.length;  
        if (length !== b.length) return false;  
  
        for (i = 0; i < length; i++) {  
            if (!deepEqual(a[i], b[i])) return false;  
        }  
        return true;  
    } else if (typeof a === 'object') {  
        keysA = Object.keys(a);  
        keysB = Object.keys(b);  
  
        if (keysA.length !== keysB.length) return false;  
  
        for (i = 0; i < keysA.length; i++) {  
            subKey = keysA[i];  
            if (!(subKey in b)) return false;  
            if (!deepEqual(a[subKey], b[subKey])) return false;  
        }  
        return true;  
    }  
  
    // 基本数据类型比较  
    return a !== a && b !== b; // 处理 NaN  
}  
  
// 使用示例  
const obj1 = { a: 1, b: { c: 2 }, d: [3, 4] };  
const obj2 = { a: 1, b: { c: 2 }, d: [3, 4] };  
const obj3 = { a: 1, b: { c: 3 }, d: [3, 4] };  
  
if (deepEqual(obj1, obj2)) {  
    console.log('obj1 和 obj2 完全相等，执行下一步操作');  
} else {  
    console.log('obj1 和 obj2 不相等');  
}  
  
if (deepEqual(obj1, obj3)) {  
    console.log('obj1 和 obj3 完全相等');  
} else {  
    console.log('obj1 和 obj3 不相等');  
}

4、小数取整

场景1：num1 = 9.74、num2 = -9.74进行取整

代码示例：

<script>
export default {
  name: 'DecimalRound',
  data() {
    return {
      num1: 9.74,
      num2: -9.74,
      newNum1: null,
      newNum2: null,
    };
  },
  created(){
    this.setNum();
  },
  methods: {
    setNum(){
      // 法①：Math.floor()
      this.newNum1 = Math.floor(this.num1);
      console.log(this.newNum1);//9
      this.newNum2 = Math.floor(this.num2);
      console.log(this.newNum2);//-10

      // 法②：Math.ceil()
      this.newNum1 = Math.ceil(this.num1);
      console.log(this.newNum1);//10
      this.newNum2 = Math.ceil(this.num2);
      console.log(this.newNum2);//-9
      
      // 法③：Math.round()
      this.newNum1 = Math.round(this.num1);
      console.log(this.newNum1);//10
      this.newNum2 = Math.round(this.num2);
      console.log(this.newNum2);//-10

      // 法④：Math.trunc()
      this.newNum1 = Math.trunc(this.num1);
      console.log(this.newNum1);//9
      this.newNum2 = Math.trunc(this.num2);
      console.log(this.newNum2);//-9

      // 法⑤：Number.prototype.toFixed()
      this.newNum1 = parseFloat(this.num1.toFixed(0));
      console.log(this.newNum1);//10
      this.newNum2 = parseFloat(this.num2.toFixed(0));
      console.log(this.newNum2);//-10

      // 法⑥：位运算符
      this.newNum1 = this.num1 | 0;
      console.log(this.newNum1);//9
    },
  },
};
</script>

方法解析：

• Math.floor() 方法：返回小于/等于给定数的最大整数。对于负数，会返回更小的整数
• Math.ceil() 方法：返回大于/等于给定数的最小整数。对于负数，会返回更大的整数
• Math.round() 方法：返回最接近给定数的整数。如果数字的小数部分恰好为0.5，则结果将四舍五入到最接近的偶数
• Math.trunc() 方法：移除一个数的小数部分，返回整数部分
• toFixed() 方法：不是直接取整，但可以将数字四舍五入到指定的小数位数，并返回一个字符串。然后结合 parseFloat() 或 Number() 方法
• 位运算符：对于正数，可以使用 << 和 >> 进行取整（但这种方法只适用于32位整数范围内的正数）