js常用小知识点

1、对象深监听

testObj:{
  handler(){
    this.setShowObj();
  },
  deep:true,
  immediate:true,
}

2、网页打断点

按F12打开，点到resources面板，然后按F8

3、定时器

_than.setIntervalId = window.setInterval(function () {
if (_than.percentage < 99) {
_than.percentage = _than.percentage + 1;
}
}, 300);

结束：

clearTimeout(_than.setIntervalId);

4、禁止点击回车enter提交表单

项目中出现的现象：鼠标放到输入框中，点击回车，会重新刷新页面，请求local接口

<el-input v-model="telNum" placeholder="临时测试" onkeydown="if(event.keyCode==13)return false;" style="width:280px"></el-input>

回车执行自己的方法：

<el-input placeholder="请输入搜索关键字" v-model="filterKey" @keydown.native.enter.stop="filterEmpData(filterKey)">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
 </el-input>

/**搜索数据 */
function filterEmpData(val) {
var event = window.event;
event.stopPropagation();
event.preventDefault();
//自己的操作
}

5、日期格式化

function dateFormat(fmt, date) {
    var o = {
        "M+": date.getMonth() + 1,                 //月份
        "d+": date.getDate(),                    //日
        "H+": date.getHours(),                   //小时
        "m+": date.getMinutes(),                 //分
        "s+": date.getSeconds(),                 //秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

使用：dateFormat(“yyyy-MM-dd”,new Date())

6、JS中拼接两个数组

var newArr = arr.concat(arr2);

7、子字符串截取

stringObject.substring(start,stop)

8、JSON和对象转换

JSON转对象

this.jsonObj= JSON.parse(this.jsonStr);

对象转JSON

this.jsonStr = JOSN.stringify(this.jsonObj);

9、监听不到数组变化或对象属性的变化

数组中为对象，通过下标改变某个对象的某个属性，有的时候监听不到
解决：

var tmp = [{id:1,name:'11'},{id:2,name:'11'}]

改变下标为0的name:

tmp[0].name='aaa';  
var ss = tmp[0];  
this.$set(tmp,0,ss)   //（数组，下标，该下标的对象）

对象：

this.$set(this.before,'adjustType',this.adjustDictData[i].name) //（对象，属性，属性值）

10、js对象属性变化页面兼听不到

this.$forceUpdate();

11、纯JS修改样式

示例：

document.querySelector(".emp_info_div .el-tabs__nav-scroll").style.paddingLeft = '245px';

12、文本域显示内容情况下换行

<div v-html="remark.replace(/(\r)|(\r\n)|(\n)/g, '<br/>')" ></div>

13、Map操作(对当前数组整理得到新数组)

 var arr = [1,2,3].map(function(number, index){
      return number * number + index
     })
     // arr 为 [1, 5, 11] 对当前数组数据进行整理得到一个映射的新数组

14、Filter（过滤得到符合条件的数组）

   var arr = [1,2,3,4,5].filter(function(item, index){
         return item > 3
       })
     // arr 为 [4, 5] 对当前数组按条件过滤，取return为true的所有项得到一个新数组。对原数组项的值引用

15、Sort（排序，返回true会交换位置）

 var arr = [{name: 'fir',value: 5},
 			{name: 'sec',value: 7},
 			{name: 'thi',value: 6}]
 			.sort(function(a, b){
                    return a.value - b.value
            })
 // arr 为 [{name: 'fir',value: 5},
 			{name: 'sec',value: 6},
 			{name: 'thi',value: 7}]
 //遍历所有项获得一个按指定方法排序的新数组 return true时会交换前后项的位置
//对原数组项的值引用

16、Slice(取指定下标之间得到一个新数组)

   var arr = [1,2,3].slice(1)   // arr 为 [2, 3]
   var arr = [1,2,3].slice(0,2) // arr 为 [1, 2]
                //取指定下标之间的项得到一个新数组
                //不传结束位置时默认截取到结束
//对原数组项的值引用

17、Splice(改变原数组得到删除项所组成的新数组)

   var arr = [1,2,3]
   var deleteItems = arr.splice(0, 2, ['a']) 
   // arr 为 ['a', 3] deleteItems 为 [1, 2]
   //改变原数组并且得到删除项所组成的新数组         
//对原数组项的值引用

18、Some（返回Boolean相当于判断数组中是否存在否元素）

var res = [1,2,3].some(function(number, index){ 
							return number > 4 
						}) // res 为false 
 //有true 即中止遍历 
 //等价于 var arr = [1,2,3];
 // var res = true for (var i = 0; i < arr.length;i++) { if (arr[i] > 0) res = true break }  

19、Find

  var res = [1,2,3].find(function(number, index){
                    return nubmer > 2
                }) // res 为 3
 // 有true 即中止遍历, 返回数组中第一个符合条件的项，没有则返回null

20、数组转为字符串

var str = [11,22,33].join(',')
// str为"11,22,33"

21、Cookie存储问题

Cookie.set('test1', this.test1, { expires: 30 })

//Cookie会长度溢出，使用localStorage来存储
// Cookie.set('reportContent', res.data.data.result.reportContent, { expires: 30 })
localStorage.setItem('reportContent', res.data.data.result.reportContent);

if(!Cookie.get('test1')) return
//若有cookie则从cookie中获取值
var _than = this;
_than.isCookie = true;
_than.test1= Cookie.get('test1') // cookieData[0].split("=")[1];
//Cookie会长度溢出，使用这种方法
_than.reportContent = JSON.parse(localStorage.getItem('reportContent')) 

持续更新中…