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