杂七杂八的JavaScript

一、input 焦点定位

1、定位input：(this.$refs.searchInput as HTMLInputElement).focus();

 

2、定位search，根据css选择器：

(document.querySelector('.search .van-field__control') as HTMLInputElement)!.focus()

<input

ref="searchInput"

class="search"

autofocus>

 

二、截取字符串

截取字段ClassName的字符，ClassName长度大于4时，取前4位字符，其余显示...

ClassName.length > 4 ? ClassName.substring(0,4) + '...'

控制字符显示小数点后两位

testNumber.toFixed(2)

补全字符串

padStart: 前补--"23".padStart(6, '0') // 000023

padEnd：后补--"23".padEnd(6, '0') // 230000

 

 

 

三、vue手机号码344格式化

Mobile: 17853560672

userPhone: Mobile.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3') }

 

四、vue字符串转换

let testString = "230.98"---转成数字类型

   Number(testString)  // 230.98

   parseInt(testString) // 230

   parseFloat(testString) // 230.98

   + testString //230.98

   ~~ testString //230

var testArray = [ 1, 2, 3 ] ---数组转成字符串

   testArray.join('，')  // “1,2,3”

   testArray.join('  ')  // “1 2 3”

 

五、数组操作

1、shift:删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 

var a = [1,2,3,4,5];
var b = a.shift();     //a:[2,3,4,5] b:1

2、unshift:将参数添加到原数组开头，并返回数组的长度

var a = [1,2,3,4,5];
var b = a.unshift(-2,-1);    //a:[-2,-1,1,2,3,4,5] b:7

3、pop:删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined

var a = [1,2,3,4,5];
var b = a.pop(); //a:[1,2,3,4] b:5

4、push:将参数添加到原数组末尾，并返回数组的长度

var a = [1,2,3,4,5];
var b = a.push(6,7);    //a:[1,2,3,4,5,6,7] b:7

 

5、concat:返回一个新数组，是将参数添加到原数组中构成的 

var a = [1,2,3,4,5];
var b = a.concat(6,7);    //a:[1,2,3,4,5] b:[1,2,3,4,5,6,7]

 

6、splice(start,deleteCount,val1,val2,...):从start位置开始删除deleteCount项，并从该位置起插入val1,val2,... 

var a = [1,2,3,4,5];
var b = a.splice(2,2,7,8,9);     //a:[1,2,7,8,9,5] b:[3,4]
var b = a.splice(0,1);    //同shift
a.splice(0,0,-2,-1);   var b = a.length;       //同unshift
var b = a.splice(a.length-1,1);    //同pop
a.splice(a.length,0,6,7); var b = a.length;    //同push

 

7、reverse:将数组反序 

var a = [1,2,3,4,5];
var b = a.reverse();       //a:[5,4,3,2,1] b:[5,4,3,2,1]

 

8、sort(orderfunction):按指定的参数对数组进行排序 

var a = [1,2,3,4,5];
var b = a.sort();     //a:[1,2,3,4,5] b:[1,2,3,4,5]

 

9、slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组 

var a = [1,2,3,4,5];
var b = a.slice(2,5);     //a:[1,2,3,4,5] b:[3,4,5]

 

10、join(separator):将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符 

var a = [1,2,3,4,5];
var b = a.join("|");      //a:[1,2,3,4,5] b:"1|2|3|4|5"

七、数组去重

1.  ES6 Set()方法

Array.from(new Set(arr))

2. 利用for嵌套for，然后splice去重

function unique(arr){       
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){ //第一个等同于第二个，splice方法删除第二个
                    arr.splice(j,1);
                    j--;
                }
            }
        }
  return arr;
}

3. indexOf() 或 includes()

// 循环数据；newArray如果没有该值，则push插入，否则跳过。
// if (!array.includes( arr[i])){} // includes方法
var newArray = [];
for (var i = 0; i < arr.length; i++) {
        if (newArray.indexOf(arr[i]) === -1) {
            newArray.push(arr[i]);
     }
}
return array;

4. sort() 

// 利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return;
    }
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}

七、页面滚动事件监听，超出一屏显示“返回”

mounted () {

     this.$nextTick(() => {

          window.addEventListener('scroll', this.handleScroll, true) // 监听滚动

    })

},

destroyed () {

         window.removeEventListener('scroll', this.handleScroll)

},

methods: {

   handleScroll () {

      let scrollObj = document.getElementById('contentBox') as HTMLElement  // 根据绑定div的id获取滚动区域

      let scrollHeight = scrollObj.scrollHeight // 滚动条的总高度

      let scrollObjTop = scrollObj.scrollTop // contentDiv到头部的距离

      console.log('scrollHeight', scrollHeight)

      console.log('scrollObjTop', scrollObjTop)

      if (scrollObjTop > 850) {   // 850是滚动div的一屏高度，超出一屏时isShowBack设置为true

           this.isShowBack = true

      } else {

          this.isShowBack = false

      }

  },

}，

 

八、js字母大小写转换方法

1、转换成大写：toUpperCase() // 'a7bN'.toUpperCase()  ==>  'A7BN'
2、转换成小写：toLowerCase() // 'ABCD'.toLowerCase()  ==>  'abcd'