js之零碎工具（一）

1、字符串超出8字显示 “…”(三目)

{{ scope.row.projectName?(scope.row.projectName.length>8?(scope.row.projectName.substring(0,8))+"...":scope.row.projectName):""}}

2.提取数字

"A12".replace(/[^0-9]/ig,"");

3.比较26个英文字母的大小

fromCharCode() 方法,可接受一个指定的 Unicode 值，然后返回一个字符串

var n = String.fromCharCode(65);  //  A

charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。字符串中第一个字符的位置为 0， 第二个字符位置为 1，以此类推。

var str = "HELLO WORLD";
var n = str.charCodeAt(0);  // 72

• 先写出 26 个英文字母

computed:{
    numbers() {
      let arr = [];
      for (var i = 1; i < 100; i++) {
        arr.push(i);
      }
      return arr;
    },
    alphas() {
      let arr = [];
      for (var i = 0; i < 26; i++) {
        arr.push(String.fromCharCode(65 + i));
      }
      return arr;
    }
  }, 

根据计算属性打印出 this.alphas 的值为

• 对 26 个英文字母进行排序判断, 转化为数字值可以进行比较判断

 Number(startValue.charCodeAt()) - Number(value.charCodeAt())

4.vue模拟tab切换【动态绑定class】

使得点击高亮的下标与数组循环中的下标一致 即 this.activeIndex = i

html

<div class="projectList">
      <ul>
        <li v-for="(item,i) in projectData" :key="i" :class="activeIndex == i?'active':''" @click="projectChoose(i)">{{item.name}}</li>
      </ul>
      <el-button size="small" plain type="success" class="btn-more">更多>></el-button>
    </div>

js

data() {
    return {
      activeIndex:0,
      activeName: "1",
       projectData:[
            {
                name:"项目一",
                id:"1111"
            },
            {
                name:"项目二",
                id:"2222"
            },
            {
                name:"项目三",
                id:"3333"
            },
            {
                name:"项目四",
                id:"4444"
            }  ],
    };
  },
  methods:{
      projectChoose(i){
          this.activeIndex = i
          console.log(i,this.activeIndex)
      }
  }

5. 对象的解构

此处{…obj}是把obj对象复制一份， 也可以修改obj 里的b的值，

打印结果：

连续解构赋值

还可以重命名b为data

6.es6获取数组中，键值对的下标和对应内容

const fruits = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];


const index = fruits.findIndex(fruit => fruit.name === 'cherries');


console.log(index); // 2
console.log(fruits[index]); // {name: 'cherries', quantity: 5}

7. 获取地址栏中？后面的参数

function getLocationParams(routeUrl) {
  let paramsArray = 'backlogServiceId=1526556818799632386&backlogServiceType=SUP_MSG&showLeftMenu=0'.split('&');
  let i;
  const paramsObj = {};
  paramsArray.forEach((item) => {
    i = item.indexOf('=');
    paramsObj[item.slice(0, i)] = item.slice(i + 1);
  });
  return paramsObj;
}
getLocationParams()

打印结果：