本文共 3942 字，大约阅读时间需要 13 分钟。

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接口

回车执行自己的方法：

/**搜索数据 */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、文本域显示内容情况下换行

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'))

持续更新中…

转载地址：http://eayai.baihongyu.com/