杂七杂八的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)

 

三、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 

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

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

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

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

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

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

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

 

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

1. var a = [1,2,3,4,5];   
2. 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,... 

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

 

7、reverse:将数组反序 

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

 

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

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

 

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

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

 

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

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

 

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

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

      }

  },

}，