​​​​ 前端代码收集 | 苏生不惑的博客

前端代码收集

发表于 | 次
| 字数统计: 4.6k 字 | 阅读时长 ≈ 22 分钟

编辑网页

1
document.designMode = "on"

Console中的技巧

1
2
3
4
5
chrome会帮你buffer 5个你查看过的DOM对象，你可以直接在Console中用 $0, $1, $2, $3, $4来访问。
你还可以使用像jQuery那样的语法来获得DOM对象，如：$("#mydiv")
你还可使用 $$(".class") 来选择所有满足条件的DOM对象。
你可以使用 getEventListeners($("selector")) 来查看某个DOM对象上的事件
还可以使用 monitorEvents($("selector")) 来监控相关的事件

将内容复制到剪贴板

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
<input id="demoInput" value="hello world">
<button id="btn">点我复制</button>

const btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
  const input = document.querySelector('#demoInput')
  input.select()
  if (document.execCommand('copy')) {
    console.log('复制成功')
  } else {
    console.log('复制失败')
  }
})
const btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
  const input = document.createElement('input')
  document.body.appendChild(input)
  input.setAttribute('value', '复制我')
  input.select()
  if (document.execCommand('copy')) {
    console.log('复制成功')
  } else {
    console.log('复制失败')
  }
  document.body.removeChild(input)
})

https://blog.mutoe.com/2019/copy-content-to-clipboard-in-javascript/

微信分享

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
var shareLinkUlr = location.href.split("#")[0]; // 获取当前的url 去掉 # 之后的部分
shareLinkUlr = shareLinkUlr.replace(/\&/g, '%26'); // 将 & 替换成 %26
var shareImgUrl = 'http://www.abc.com/images/logo300.jpg'; // 分享的图片地址
// 获取 config 的内容
function getjssdkconfig(apis,debug,json,link){
    //console.log(apis);
    //console.log(debug);
    //console.log(json);
    //console.log(link);
    var xhr = new XMLHttpRequest();
    var url = 'http://www.abc.com/qxj_jssdkconfig'; // 这个就是easywechat生成的参数
    var data = "apis="+apis+"&debug="+debug+"&json="+json+"&url="+link; // 拼接 get 参数
    xhr.open('GET',url+"?"+data);
    xhr.onreadystatechange = function(){
        if(xhr.readyState===4 && (xhr.status >=200 && xhr.status <=300)){
            // 获取 config 之后，进行一些操作
            // 需要进行 JSON.parse 获取对象
            configJsSDKAndDoSomething(JSON.parse(xhr.responseText));
        }
    };
    xhr.send();
}
// 获取config 之后进行的操作
// 因为是使用 ajax 进行config内容，这个方法是在上面运行的
function configJsSDKAndDoSomething(config){
    wx.config(config);
    wx.ready(function() {
        // 其他的一些操作
        // ...

        //不是wifi环境下提示
        wx.getNetworkType({
            success: function (res) {
                var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
                if(networkType!="wifi"){
                    console.log("当前你网络环境为"+networkType+"");                    
                }
            }
        });
    });
    wx.error(function(error){
        console.log(error);
    });
    wx.onMenuShareTimeline({
        title: '', // 分享标题
        link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl:shareImgUrl, // 分享图标
        success: function () {
            alert('分享成功');
        }
    });
    wx.onMenuShareAppMessage({
        title: '', // 分享标题
        desc: '', // 分享描述
        link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: shareImgUrl, // 分享图标
        type: 'link', // 分享类型,music、video或link，不填默认为link
        success: function () {

        },
        cancel: function () {

        }
    });
}
// 页面加载完之后进行操作
$(document).ready(function(){
    // 注意这里的参数
    // apis 使用的参数是 字符串的拼接 这个是和 php 的方法中的处理相对应的
    getjssdkconfig("checkJsApi,onMenuShareTimeline,onMenuShareAppMessage,onMenuShareQQ,onMenuShareWeibo,onMenuShareQZone,hideMenuItems,showMenuItems,hideAllNonBaseMenuItem,showAllNonBaseMenuItem,translateVoice,startRecord,stopRecord,onVoiceRecordEnd,playVoice,onVoicePlayEnd,pauseVoice,stopVoice,uploadVoice,downloadVoice,chooseImage,previewImage,uploadImage,downloadImage,getNetworkType,openLocation,getLocation,hideOptionMenu,showOptionMenu,closeWindow,scanQRCode,chooseWXPay,openProductSpecificView,addCard,chooseCard,openCard",false,false,shareLinkUlr);
});
https://learnku.com/laravel/t/30886

支付宝转账恶搞

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
(function() {
    /** 支付宝恶搞 **/
    function inc(el) { // 更新金额数字
        el.innerHTML = el.innerHTML.replace(/\d+/, function(a) {
            return +a + rnd(9);
        });
    }

    function rnd(n) { // 1-n 随机数https://www.cnblogs.com/52cik/p/js-alipay-jokes.html
        return Math.random() * n | 0;
    }

    function joke(el) { // 随机增加
        inc(el);
        setTimeout(joke, rnd(1e3), el);
    }

    var amount = document.getElementsByClassName("amount");

    joke(amount[0]); // 账户余额 随机增加
    joke(amount[1]); // 余额宝 随机增加
})();

奇葩字符（不可见字符）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 é 字符，他的 unicode 是 \u00e9, 但是也可以用 'e' + '\u0301' 实现 "é" 前者 length 是 1，后者 length 是 2。
'\u0301' 在这里起到了语调符的作用，然后我就丧心病狂的  'e'+Array(20).join('\u0301');  

 '呵呵'+Array(20).join('\u0310');  // "呵呵̐̐̐̐̐̐̐̐̐̐̐̐̐̐̐̐̐̐̐"
 '呵呵'+Array(20).join('\u031D');             // "呵呵̝̝̝̝̝̝̝̝̝̝̝̝̝̝̝̝̝̝̝"
 '呵呵'+Array(20).join('\u0E47');                          // "呵呵็็็็็็็็็็็็็็็็็็็"
 '呵呵'+Array(20).join('\u0e49');                                       // "呵呵้้้้้้้้้้้้้้้้้้้"
 '呵呵'+Array(20).join('\u0598');        // "呵呵֘֘֘֘֘֘֘֘֘֘֘֘֘֘֘֘֘֘֘"

也可以这么玩...

 '呵呵'+Array(20).join('\u0310')+Array(20).join('\u0598')+Array(20).join('\u0e49');  // "呵呵้้้้้้้้้้้้้้้้้้้̐̐̐̐̐̐̐̐̐̐̐̐̐̐̐̐̐̐̐֘֘֘֘֘֘֘֘֘֘֘֘֘֘֘֘֘֘֘"
http://www.fileformat.info/info/unicode/category/Mn/list.htm  
这里详细的列出了每个编码以及对应的意思，还有图片展现。https://www.cnblogs.com/52cik/p/unicode-mark-nonspacing.html#!comments

Chrome 监听 console 打开

1
2
3
4
5
6
7
var re = /x/;
var i = 0;
console.log(re);

re.toString = function () {
  return '第 ' + (++i) + ' 次打开控制台';//https://www.52cik.com/2016/04/27/chrome-console-open.html
};

操作之神奇的 date

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
// 获取月份天数
function getMonthDayCount(year, month) {
  return new Date(year, month, 0).getDate();
}
console.log(getMonthDayCount(2017, 10)); // 31
function getAllMonthDayCount(year) {
  var days = [31, new Date(year, 2, 0).getDate(), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  return days;
}
console.log(getAllMonthDayCount(2016));// [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
function isLeapYear(year) {
  return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);
}
function isLeapYear(year) {
  return new Date(year, 2, 0).getDate() === 29;
}
console.log([
  isLeapYear(2000),
  isLeapYear(2016),
  isLeapYear(2017),
  isLeapYear(2018)
]); // [ true, true, false, false ]
// 10天后是几月几号
var dt = new Date('2016-12-25');
dt.setDate(dt.getDate() + 10);
console.log(dt.toLocaleDateString()); // 2017/1/4


// 10天前是几月几号https://www.52cik.com/2017/10/11/js-date-month.html
var dt = new Date('2017-01-04');
dt.setDate(dt.getDate() - 10);
console.log(dt.toLocaleDateString()); // 2016/12/25

日期是否是连续

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
let days = [
  '2016-02-28',
  '2016-02-29', // 闰月
  '2016-03-01', // 跨月
  '2016-03-02',
  '2016-03-03',
]

// 先排序，然后转时间戳
let _days = days.sort().map((d, i) => {
  let dt = new Date(d)
  dt.setDate(dt.getDate() + 4 - i) // 处理为相同日期

  return +dt
})

// 比较时间戳是否一致
console.log(
  _days[0] == _days[1] &&
  _days[0] == _days[2] &&
  _days[0] == _days[3] &&
  _days[0] == _days[4]
)
let days = [
  '2016-02-28 12:00:00',
  '2016-02-29 12:00:01', // 闰月
  '2016-03-01 12:00:02', // 跨月
  '2016-03-02 12:00:03',
  '2016-03-03 12:00:04',
  '2016-03-04 12:00:04',
]

console.log(continueDays(days))

function continueDays(arr_days) {
  // 先排序，然后转时间戳
  let days = arr_days.sort().map((d, i) => {
    let dt = new Date(d)
    dt.setDate(dt.getDate() + 4 - i) // 处理为相同日期

    // 抹去 时 分 秒 毫秒
    dt.setHours(0)
    dt.setMinutes(0)
    dt.setSeconds(0)
    dt.setMilliseconds(0)

    return +dt
  })

  let ret = true

  days.forEach(d => {
    if (days[0] !== d) {
      ret = false
    }
  })

  return ret
}https://www.52cik.com/2016/07/10/consecutive-dates.html

跨域代理工具

1
2
3
4
5
6
7
8
9
bing每日分享接口 
http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1
        http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN
        直接在浏览器打开是如下的json,要拿到的就是url，直接在一个页面用js获取存在跨域问题，可以用代理工具 https://jsonp.afeld.me/ 我用的是第二个方法,把上面的api输入，
        
        点击go得到一个经过代理后的api，如下
         
        https://jsonp.afeld.me/?url=http%3A%2F%2Fcn.bing.com%2FHPImageArchive.aspx%3Fformat%3Djs%26idx%3D0%26n%3D1
https://codepen.io/fazero/pen/KzooBZ  https://blog.fazero.me/2016/04/14/js-get-bing-photo/

网易云音乐刷听歌量

1
2
setInterval('document.getElementsByClassName("nxt")[0].click();console.log("Play OJBK. Next")',90000);
https://www.mmuaa.com/post/cd44019a0e569d64.html

emoji

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// JavaScript 字符串编码使用 UTF-16 https://gist.github.com/justjavac/a5aa1c0d0d111cf19e852037f4c483db
"💩".length === 2;
"💩" === "\u{1F4A9}";    // es6
"💩" === "\uD83D\uDCA9"; // es5

// 同一个编码可能使用不同的码位
"ò" === "ò";       // ❎
"ò" === "\xF2";    // ✅
"ò" === "o\u0300"; // ✅
"o\u0300".normalize("NFC") === "\xF2"; // ✅ es6 提供了 normalize 函数

"👨‍👩‍👧‍👦".length === 11;
"👨‍👩‍👧‍👦" === "\u{1F468}\u200D\u{1F469}\u200D\u{1F467}\u200D\u{1F466}";
"👨" === "\u{1F468}";
"👩" === "\u{1F469}";
"👧" === "\u{1F467}";
"👦" === "\u{1F466}";

本地存储websql

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
34
35
36
37
38
39
40
41
42
43
openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。
首先要想使用 WebSQL 首先得判断浏览器是否支持

<script type="text/javascript">
if(!window.openDatabase)
{
    alert('您的浏览器不支持 WebSQL');
}
</script>
打开数据库
var db = window.openDatabase(dbname, version, dbdesc, dbsize,function() {});
openDatabase 方法中一共包括了 5 个参数,分别为数据库名、版本号、描述、数据库大小、创建回调。其中创建回调可以省略

例如创建 王者荣耀数据库

var db = openDatabase('wucai', '1.0', '王者荣耀数据库', 1024 * 1024);
事务操作
使用 transaction 对事务进行处理、执行提交、回滚操作

transaction(callback, errorCallback, successCallback); 
创建数据表
db.transaction(function (tx) {
     tx.executeSql('CREATE TABLE IF NOT EXISTS heros (id unique, name, hp_max, mp_max, role_main)');
});
插入数据
db.transaction(function (tx) {
    tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10000, "夏侯惇", 7350, 1746, " 坦克 ")');
    tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10001, "钟无艳", 7000, 1760, " 战士 ")');
    tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10002, "张飞", 8341, 100, " 坦克 ")');
    tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10003, "牛魔", 8476, 1926, " 坦克 ")');
    tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10004, "吕布", 7344, 0, " 战士 ")');
});
查找数据
db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM heros', [], function (tx, data) {
    var len = data.rows.length;
    console.log('查找到：' +len +'条记录');
    console.log(data.rows);
    });
});
https://laravelcode.cn/posts/99/simple-use-of-websql

玩坏Chrome小恐龙游戏

1
2
3
4
5
chrome://dino/
F12执行以下代码：
var dino=Runner.prototype
dino.gameOver=()=>{}
Runner.instance_.setSpeed(233)

朗读文字

1
var ssu={init:function(){ssu.speech(window.getSelection().toString())},speech:function(e){e&&""!=e.trim()||(e="未选择文字");var s=new window.SpeechSynthesisUtterance(e);window.speechSynthesis.speak(s)}};ssu.init();

###

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
34
35
36
37
38
如果我们想要调整数组的大小：

var entries = [1, 2, 3, 4, 5, 6, 7];  
console.log(entries.length); 
// 7  
entries.length = 4;  
console.log(entries.length); 
// 4  
console.log(entries); 
// [1, 2, 3, 4]
如果我们想要空数组：

var entries = [1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length); 
// 7  
entries.length = 0;   
const dynamic = 'flavour';
var item = {
    name: 'Coke',
    [dynamic]: 'Cherry'
}
console.log(item); 
// { name: "Coke", flavour: "Cherry" }
var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = [].concat(...entries); 
// [1, 2, 5, 6, 7, 9]
var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function() {
    return Math.random() - 0.5
})); 
// [4, 8, 2, 9, 1, 3, 6, 5, 7]
var converted_number = 5 + "";
console.log(converted_number);
var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries = [...new Set(entries)];
console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]
https://learnku.com/f2e/t/38128

Fetch 代替 Ajax 的浏览器 API

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
fetch(url, [{options}])
  .then(response => response.json())
  .then(data => console.log(data))

fetch('https://wp.hellocode.name')
  .then(response => response.text())
  .then(data => console.log(data))
fetch('https://wp.hellocode.name')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(err => console.log(err))
GET 请求

fetch('http://httpbin.org/ip', { 
    method: 'GET'
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })
POST 请求

fetch(url, { 
    method: 'POST',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    },
    body: JSON.stringify({ name: 'a', password: 'b',})
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })
完整示例

fetch(url, { 
    method: 'POST',
    credentials: 'include',
    mode: 'cors',
    cache: 'default',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    },
    body: JSON.stringify({ name: 'a', password: 'b',})
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })
  https://learnku.com/articles/34681

JavaScript 正则表达式

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
let regex;

/* 匹配特定的字符串 */
regex = /hello/; // 查找斜杠中的字符串（大小写敏感）……匹配 "hello", "hello123", "123hello123", "123hello"，但不匹配 "hell0", "Hello"
regex = /hello/i; // 查找斜杠中的字符串（大小写不敏感）……匹配 "hello", "HelLo", "123HelLO"
regex = /hello/g; // 全局查找斜杠中的字符串……

/* 通配符 */
regex = /h.llo/; // "." 匹配除了换行外的任何一个字符……匹配 "hello", "hallo"，但不匹配 "h\nllo"
regex = /h.*llo/; // "*" 匹配任何字符零次或多次，如 "hello", "heeeeeello", "hllo", "hwarwareallo"

/* 简略字符类 */
regex = /\d/; // 匹配数字
regex = /\D/; // 匹配非数字
regex = /\w/; // 匹配单词字符 (a-z, A-Z, 0-9, _)
regex = /\W/; // 匹配非单词字符
regex = /\s/; // 匹配空白字符（\r (回车),\n (换行), \t (制表符), \f (换页符)）
regex = /\S/; // 匹配非空白字符

/* 特定字符 */
regex = /[aeiou]/; // 匹配方括号中的任意字符
regex = /[ck]atherine/; // 匹配 catherine 或 katherine
regex = /[^aeiou]/; // 匹配除方括号内以外的字符

/* 字符范围 */
regex = /[a-z]/; // 匹配小写字母
regex = /[A-Z]/; // 匹配大写字母
regex = /[e-l]/; // 匹配从 e 到 l 的字母
regex = /[F-P]/; // 匹配 F 到 P 的字母
regex = /[0-9]/; // 匹配数字
regex = /[5-9]/; // 匹配 5 至 9 的数字
regex = /[a-zA-Z]/; // 匹配大小写字母
regex = /[^a-zA-Z]/; // 匹配非字母

/* 使用量词重复匹配 */
regex = /(hello){4}/; // 匹配 "hellohellohellohello"
regex = /hello{3}/; // 匹配 "hellooo" 和 "helloooo"，但不匹配 "helloo"
regex = /\d{3}/; // 匹配三个数字 (匹配 "312", "122", "111", "12312321"，但不匹配 "12")
regex = /\d{3,7}/; // 匹配三到七个数字
regex = /\d{3,}/; // 匹配至少三个数字

/* 使用星号和加号匹配重复 */
regex = /ab*c/; // 匹配零个或多个重复的 "b"（匹配 "abc", "abbbbc", "ac"）
regex = /ab+c/; // 匹配一个或多个重复的 "b"（匹配 "abc", "abbbbc", 但不匹配 "ac"）

/* 匹配开头或结尾的项目 */
regex = /^[A-Z]\w*/; // 匹配 "H", "Hello", 但不匹配 "hey"
regex = /\w*s$/; // 匹配 "cats", "dogs", "avocados", 但不匹配 "javascript"

/* 匹配单词分界
   单词分界位置
   1. 首字符是单词字符的字符串之前
   2. 末字符是单词字符的字符串之后
   3. 两个字符间，其中一个属于单词字符而另一个不是 */
regex = /\bmeow\b/; // 匹配 "hey meow lol", "hey:meow:lol", 但不匹配 "heymeow lol"

/* 分组 */
regex = /it is (ice )?cold outside/; // 匹配 "it is ice cold outside" 和 "it is cold outside"
regex = /it is (?:ice )?cold outside/; // 跟上面一样，但这是一个非捕获分组
regex = /do (cats) like taco \1/; // 匹配 "do cats like taco cats"
regex = /do (cats) like (taco)\? do \2 \1 like you\?/; // 匹配 "do cats like taco? do taco cats like you?"

//分支重置分组（Perl, PHP, R, Delphi 等语言支持此功能，JS 不支持，因此注释掉）
// regex = /(?|(cat)|(dog))\1/; // 匹配 "catcat" 和 "dogdog"

/* 多选匹配 */
regex = /i like (tacos|boba|guacamole)\./; // 匹配 "i like tacos.", "i like boba.", and "i like guacamole."

/* 向前引用（Perl, PHP, R, Delphi 等语言支持此功能，JS 不支持，因此注释掉）*/
// regex = /(\2train|(choo))+/; // 匹配 "choo", "choochoo", "chootrain", choochootrain", 但不匹配 "train"

/* 顺序环视 */
regex = /z(?=a)/; // 肯定型顺序环视……匹配在 "a" 之前的 "z" (比如 pizza)，但不匹配首字符 "z"
regex = /z(?!a)/; // 否定型顺序环视……匹配首字符 "z"，除了在 "a" 之前的 "z"

/* 逆序环视 */
regex = /(?<=[aeiou])\w/; // 肯定型逆序环视……匹配在元音后的单词字符
regex = /(?<![aeiou])\w/; // 否定型逆序环视……匹配不在原因后的单词字符

/* 我觉得很有用的函数 */
regex.test("hello"); // 如果有匹配则返回真
regex.execute("hello"); // 有匹配返回数组，反之为 null
"football".replace(/foot/, "basket"); // 用第二个参数取代匹配
https://learnku.com/f2e/t/38217

分享十个珍藏的单行 JS 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
打印键盘 
(_=>[..."`1234567890-=~~QWERTYUIOP[].~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}.|`,m+=y+(x+'    ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()

for(i=0;++i<101;console.log(i%5?f||i:f+'Buzz'))f=i%3?'':'Fizz'
 16进制
 '#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');
乱序
(arr) => arr.slice().sort(() => Math.random() - 0.5)

<body onload="setInterval(()=>document.body.innerHTML=new Date().toGMTString().slice(17,25))"></body>
 ?foo=bar&baz=bing => {foo: bar, baz: bing}
 
 // Set the current page's query parameters to `q`
 q={};location.search.replace(/([^?&=]+)=([^&]*)/g,(_,k,v)=>q[k]=v);q;
Math.random().toString(36).substring(2);
最近7天
[...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days));

https://learnku.com/f2e/t/38309

JavaScript 中的防抖与节流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
当用户触发某次事件后，若在规定时间内不再触发该事件，则这个事件才会被真正响应。我们称这样的机制为防抖
/**
 * @desc 函数防抖
 * @param func 函数https://learnku.com/articles/38190
 * @param wait 延迟执行毫秒数
 */
function debounce(func, wait) {
    let timeout;

    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

setTimeout写法替代setInterval

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
setInterval实现

//每分钟查询一次
var timer = function () {
    setInterval(function () {
        getMessageNum(); //异步获取后台数据
    }, 60000);
};
setTimeout方法替换

var timer = function (fn, time) {
    return function walk(){
        setTimeout(function () {
            fn();
            walk();
        }, time);
    }
};
https://www.shanyuliang.com/archives/297
timer(getMessageNum, 60000)();

###

1
2
3
4
5
6
安装包 npm i package  npm i -g package 
测试npm t 
新项目，无需打开 package.json 只需要运行 npm run 即可获取可用命令列表
运行 npm ls - - depth 0 即可罗列所有已安装的包信息
npm home your_package，这个命令将 直接带到主页文档
npm repo your-package 将直接带你进入包官方 GitHub 地址https://learnku.com/f2e/t/39046

JavaScript 数组操作

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

// 第一种方法
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]
// 第二种方法
var uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]

var friends = [
    { name: ‘John’, age: 22 },
    { name: ‘Peter’, age: 23 },
    { name: ‘Mark’, age: 24 },
    { name: ‘Maria’, age: 22 },
    { name: ‘Monica’, age: 21 },
    { name: ‘Martha’, age: 19 },
]

var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”]
fruits.length = 0;
var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]
var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]
var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]
随机
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]
var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14
https://learnku.com/f2e/t/38978
个数组的交集
var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]
数组转对象
var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

JavaScript 中正则表达式

浏览器中做人脸识别

https://bestofjs.org/

利用 JavaScript 来学数据结构和算法算法

简单直接的 Javascript 开发环境 http://lixiaolai.com/2016/07/31/makecs-simplest-js-dev-environment/

前后端都开源的h5快速制作平台，类似于开源版本的易企秀、人人秀，可以通过拖拽的形式，快速生成H5，前端和后端都已经开源了，而且在持续迭代中 https://github.com/ly525/luban-h5

alert xss https://alf.nu/alert1

通过文件分片解决大文件上传

JS 数据结构

CHROME开发者工具的小技巧

chrome开发者工具各种骚技巧

webpack笔记-服务及热更新

JavaScript编程黑科技

中文文案排版规范

前端每日 30 秒

Chrome断点JS寻找淘宝签名sign

HTML 实现采集拍照功能

微信分享踩坑之旅

字符编码那些事儿