前端JSON数组根据某个字段分割,返回新的数组

一、第一种方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
sort_pro(data, keys = []) {
     //keys可以传一个数组
     var c = [];
     var d = {};
     for (var element of data) {
       let element_keyStr = "";
       let element_key = [];
       let element_keyObj = {};
       for (var key of keys) {
         element_key.push(element[key]);
         element_keyObj[key] = element[key];
       }
       element_keyStr = element_key.join("_");
       if (!d[element_keyStr]) {
         c.push({
           ...element_keyObj,
           children: [element],
         });
         d[element_keyStr] = element;
       } else {
         for (var ele of c) {
           let isTrue = keys.some((key) => {
             return ele[key] != element[key];
           });
           if (!isTrue) {
             ele.children.push(element);
           }
         }
       }
     }
     return c;
   },
   this.sort_pro(list, ["showMonth"]); //第一个参数是数组，第二个是需要分割的元素名称

二、第二种方法

1
2
3
4
5
6
7
8
9
10
11
12
13
let map = {};
for (let i = 0; i <  this.dataList.length; i++) {
  let ai =  this.dataList[i];
  if (!map[ai.showMonth]) {
    map[ai.showMonth] = [ai];
  } else {
    map[ai.showMonth].push(ai);
  }
}
let newRes = [];
Object.keys(map).forEach((key) => {
  newRes.push(...map[key]);
});

展开全文 >>

前端常用工具总结

一 、图片压缩工具可以成批量压缩，图片清晰度不变

二 、视频，音频剪辑工具，可免费剪辑，压缩

三 、二维码生成工具

四 、在线RGB、HEX颜色代码生成器

五 、正则表达式在线生成工具

六 、ICO图标在线生成工具

七 、Unix时间戳(timestamp)转换工具

八 、图片放大工具，放大图片大小

展开全文 >>

前端js禁止鼠标右键及F12禁止查看源代码

在前端开发中，F12审查元素的情况下，大家都可以随机更改一部分页面的代码，注入恶意JS等等，这种情况避免也不难，虽然还能看到一部分H5源码，但是无法修改。

一、屏蔽F12 审查元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.onkeydown = function () {
        if (window.event && window.event.keyCode == 123) {
            alert("F12被禁用");
            event.keyCode = 0;
            event.returnValue = false;
        }
        if (window.event && window.event.keyCode == 13) {
            window.event.keyCode = 505;
        }
        if (window.event && window.event.keyCode == 8) {
            alert(str + "\n请使用Del键进行字符的删除操作！");
            window.event.returnValue = false;
        }
    }

二、屏蔽右键菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.oncontextmenu = function (event) {
        if (window.event) {
            event = window.event;
        }
        try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }

三、屏蔽粘贴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.onpaste = function (event) {
        if (window.event) {
            event = window.event;
        }
        try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }

四、屏蔽复制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.oncopy = function (event) {
        if (window.event) {
            event = window.event;
        }
        try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }

五、屏蔽剪切

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.oncut = function (event) {
        if (window.event) {
            event = window.event;
        }
        try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }

六、屏蔽选中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.onselectstart = function (event) {
        if (window.event) {
            event = window.event;
            
            
        }
        try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }

展开全文 >>

ES6新特性总结

在日常做项目中用了一些很好用的ES6新的属性方法,我总结了一部分,想了解更多内容的请去ES6教程查看

es6之扩展运算符 三个点（…）

  • 展开数组
1
2
let arr = ['apple','banana','orange'];
console.log(...arr); // 'apple','banana','orange'
  • 当使用数组传参时可以合成数组
1
2
3
4
5
6
function show(...a){
   console.log(a);
   // [1, 2, 3, 4, 5]
}

show(1,2,3,4,5);

es6之字符串模板（``）

  • 这个字符串模板使用场景很多变量拼接时经常用到，使用时按键盘Tab键上面的那个按键
1
2
3
4
5
let name ='dqq';
let age = 18;
let str = `这个人叫${name}, 年龄是 ${age}岁`;
console.log(str);
// 这个人叫dqq, 年龄是18岁

es6之过滤（filter）

  • 过滤掉符合条件的,返回自己想要的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let arr = [
            {title:'aaaaa', read:100, hot:true},
            {title:'bbbb', read:100, hot:false},
            {title:'cccc', read:100, hot:true},
            {title:'dddd', read:100, hot:false}
      ];
let newArr = arr.filter((item, index, arr)=>{
      return item.hot==false;
});
console.log(newArr);
//[
   {title:'bbbb', read:100, hot:false},
   {title:'dddd', read:100, hot:false}
]

es6之数组重构（map）

  • 循环数组，返回自己想要的格式和对象名称
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let arr = [
           {title:'aaaaa', read:100, hot:true},
           {title:'bbbb', read:100, hot:true},
           {title:'cccc', read:100, hot:true},
           {title:'dddd', read:100, hot:true}
       ];

let newArr = arr.map((item, index, arr)=>{
           let json={}
           json.t = `^_^${item.title}-----`;
           json.r = item.read+200;
           json.hot = item.hot == true && '真棒!!!';
           return json;
       });

es6之数组的操作（find()，findIndex()，from()，of()，Set()，）

arr.find(): 查找，找出第一个符合条件的数组成员，如果没有找到，返回undefined

1
2
3
4
let arr = [23,900,101,80,100];
let res = arr.find((val, index) =>{
       return val>100;
});

arr.findIndex(): 找的是位置， 没找到返回-1

1
2
3
4
 let arr = [23,900,101,80,100];
let res = arr.findIndex((val, index) =>{
     return val>100;
});

Array.from:
作用: 把类数组(获取一组元素、arguments…) 对象转成数组
个人观点： 具备 length这个东西，就靠谱

1
2
3
let str = 'Strive';
let arr = Array.from(str);
 console.log(arr);

Array.of(): 把一组值，转成数组

1
let arr = Array.of('apple','banana','orange');

Set数组去重,返回新的数组

1
2
let arr = [1,2,3,4,5,6,7,6,5,4,3,2,1,2,3,4,4];
let newArr = [...new Set(arr)];

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

年少有为的<br>BUG制造者<br>一只帅气的MONKEY<br>切勿盲目崇拜