iotcat
/
EEE.DOG-public
mirror of https://github.com/IoTcat/EEE.DOG-public.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3 Commits
1 Branch
0 Tags
18 MiB
 
 
 
 
Tag: Branch: Tree: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
EEE.DOG-public/tech/js-notes.html

956 lines
45 KiB
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="">
<head>
<title>JS中那些惊艳的操作 - EEE.DOG</title><meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">
<meta name="description" content="JS中那些惊艳的操作"/><meta name="keywords" content="iotcat,yimian,blog" /><link rel="alternate" href="/atom.xml" title="EEE.DOG"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=1.0.0" /><script>lang = ['zh', 'en'];</script>
<script type="text/javascript" src="https://cdn.yimian.xyz/ushio-js/ushio-head.min.js"></script>
<script>page.proj = 'iotcat/eee.dog-public';</script>
<!--<link rel="stylesheet" type="text/css" href="https://cdn.yimian.xyz/kayo/lib/iziModal/iziModal.min.css" />-->
<!--<link rel="stylesheet" type="text/css" href="https://cdn.yimian.xyz/kayo/lib/iziToast/iziToast.min.css" />-->
<link rel="stylesheet" media="none" onload="this.media='all'" type="text/css" href="https://cdn.yimian.xyz/shaky/shaky.css">
<link rel="canonical" href="https://www.eee.dog/tech/js-notes.html"/>
<link rel="stylesheet" media="none" onload="this.media='all'" type="text/css" href="https://cdn.yimian.xyz/kayo/lib/fancybox/jquery.fancybox.css" /><script type="text/x-mathjax-config">
MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] } });
</script>
<script type="text/javascript" async src="https://cdn.yimian.xyz/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.yimian.xyz/kayo/css/style.css?v=1.0.0" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-169276192-1" data-pjax></script>
<script>
pjax_google_analytics = () => {
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-169276192-1');
}
</script><script id="baidu_push">
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
<script>
window.config = {"leancloud":"","toc":true,"fancybox":true,"pjax":{"enable":true,"loadingbar":true},"latex":true};
</script>
<meta name="generator" content="Hexo 4.2.1"><link rel="alternate" href="/atom.xml" title="EEE.DOG" type="application/atom+xml">
</head>
<body><div id="mobile-navbar" class="mobile-navbar">
<div class="mobile-header-logo">
<a href="/." class="logo">EEE.DOG</a>
</div>
<div class="mobile-navbar-icon">
<span></span>
<span></span>
<span></span>
</div>
<div class="loading-bar">
<div class="progress"></div>
</div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
<ul class="mobile-menu-list"><div id="mobile-menu-Home">
<a href="/">
<li class="mobile-menu-item"><span class=".en">Home</span><span class=".zh">主页</span>
</li>
</a></div><div id="mobile-menu-Archives">
<a href="/archives/">
<li class="mobile-menu-item"><span class=".en">Archives</span><span class=".zh">归档</span>
</li>
</a></div><div id="mobile-menu-Categories">
<a href="/categories/">
<li class="mobile-menu-item"><span class=".en">Categories</span><span class=".zh">分类</span>
</li>
</a></div><div id="mobile-menu-Projects">
<a href="#">
<li class="mobile-menu-item"><span class=".en">Projects</span><span class=".zh">项目</span>
</li>
</a><ul class="sub-menu" style="display: none;">
<li>
<a href="https://fp.js.org/" target="_blank" rel="noopener">
<span class=".en">fp</span><span class=".zh">fp</span>
</a>
</li>
<li>
<a href="https://wiot.js.org/" target="_blank" rel="noopener">
<span class=".en">wIoT</span><span class=".zh">wIoT</span>
</a>
</li>
<li>
<a href="https://github.com/iotcat/kms" target="_blank" rel="noopener">
<span class=".en">kms</span><span class=".zh">kms</span>
</a>
</li>
<li>
<a href="https://ushio.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">ushio</span><span class=".zh">Ushio</span>
</a>
</li>
</ul>
<script>$('#mobile-menu-Projects').click(function(){
$("#mobile-menu-Projects ul").toggle();
})</script>
</div><div id="mobile-menu-Map">
<a href="#">
<li class="mobile-menu-item"><span class=".en">Map</span><span class=".zh">导航</span>
</li>
</a><ul class="sub-menu" style="display: none;">
<li>
<a href="https://api.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">APIs</span><span class=".zh">接口</span>
</a>
</li>
<li>
<a href="https://img.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">Imgs</span><span class=".zh">图库</span>
</a>
</li>
<li>
<a href="/">
<span class=".en">Imgbed</span><span class=".zh">图床</span>
</a>
</li>
<li>
<a href="https://share.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">Fileshare</span><span class=".zh">文件分享</span>
</a>
</li>
<li>
<a href="https://monitor.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">Server Monitor</span><span class=".zh">服务器监控</span>
</a>
</li>
<li>
<a href="https://status.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">Service Status</span><span class=".zh">服务状态</span>
</a>
</li>
<li>
<a href="https://acg.watch/" target="_blank" rel="noopener">
<span class=".en">ACG.WATCH</span><span class=".zh">视频</span>
</a>
</li>
<li>
<a href="https://onedrive.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">Oneindex</span><span class=".zh">网盘</span>
</a>
</li>
<li>
<a href="https://chat.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">Chat</span><span class=".zh">聊天室</span>
</a>
</li>
<li>
<a href="https://proxy.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">Proxy</span><span class=".zh">下载代理</span>
</a>
</li>
<li>
<a href="https://shorturl.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">ShortenURL</span><span class=".zh">短链</span>
</a>
</li>
</ul>
<script>$('#mobile-menu-Map').click(function(){
$("#mobile-menu-Map ul").toggle();
})</script>
</div><div id="mobile-menu-About">
<a href="#">
<li class="mobile-menu-item"><span class=".en">About</span><span class=".zh">关于</span>
</li>
</a><ul class="sub-menu" style="display: none;">
<li>
<a href="/links/">
<span class=".en">links</span><span class=".zh">友链</span>
</a>
</li>
<li>
<a href="https://iotcat.me/" target="_blank" rel="noopener">
<span class=".en">Me</span><span class=".zh">关于我</span>
</a>
</li>
<li>
<a href="https://cv.yimian.xyz/contact.html" target="_blank" rel="noopener">
<span class=".en">Contact</span><span class=".zh">留言板</span>
</a>
</li>
</ul>
<script>$('#mobile-menu-About').click(function(){
$("#mobile-menu-About ul").toggle();
})</script>
</div></ul>
</nav>
<div class="container" id="mobile-panel">
<header id="header" class="header"><div class="logo-wrapper">
<a href="/." class="logo">EEE.DOG</a>
</div>
<nav class="site-navbar"><ul id="menu" class="menu"><li class="menu-item">
<a id="menu-Home" class="menu-item-link" href="/">
<span class=".en">Home</span><span class=".zh">主页</span>
</a>
</li>
<li class="menu-item">
<a id="menu-Archives" class="menu-item-link" href="/archives/">
<span class=".en">Archives</span><span class=".zh">归档</span>
</a>
</li>
<li class="menu-item">
<a id="menu-Categories" class="menu-item-link" href="/categories/">
<span class=".en">Categories</span><span class=".zh">分类</span>
</a>
</li>
<li class="menu-item">
<a id="menu-Projects" class="menu-item-link" href="#">
<span class=".en">Projects</span><span class=".zh">项目</span>
</a>
<script>
$("#menu-Projects").click(function(){
tips.question({
timeout: 20000,
close: false,
overlay: true,
displayMode: 'once',
//id: 'question',
zindex: 999,
title: 'Projects',
message: '',
position: 'center',
buttons: [
['<button><b>'+((page.tran.getLang() != 'zh')?'fp':'fp')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://fp.js.org/");
else
window.location.href="https://fp.js.org/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'wIoT':'wIoT')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://wiot.js.org/");
else
window.location.href="https://wiot.js.org/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'kms':'kms')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://github.com/iotcat/kms");
else
window.location.href="https://github.com/iotcat/kms";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'ushio':'Ushio')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://ushio.yimian.xyz/");
else
window.location.href="https://ushio.yimian.xyz/";
}, true],
['<button><b>close</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
}, true],
]
});
});
</script>
</li>
<li class="menu-item">
<a id="menu-Map" class="menu-item-link" href="#">
<span class=".en">Map</span><span class=".zh">导航</span>
</a>
<script>
$("#menu-Map").click(function(){
tips.question({
timeout: 20000,
close: false,
overlay: true,
displayMode: 'once',
//id: 'question',
zindex: 999,
title: 'Map',
message: '',
position: 'center',
buttons: [
['<button><b>'+((page.tran.getLang() != 'zh')?'APIs':'接口')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://api.yimian.xyz/");
else
window.location.href="https://api.yimian.xyz/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Imgs':'图库')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://img.yimian.xyz/");
else
window.location.href="https://img.yimian.xyz/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Imgbed':'图床')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("/");
else
window.location.href="undefined";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Fileshare':'文件分享')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://share.yimian.xyz/");
else
window.location.href="https://share.yimian.xyz/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Server Monitor':'服务器监控')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://monitor.yimian.xyz/");
else
window.location.href="https://monitor.yimian.xyz/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Service Status':'服务状态')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://status.yimian.xyz/");
else
window.location.href="https://status.yimian.xyz/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'ACG.WATCH':'视频')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://acg.watch/");
else
window.location.href="https://acg.watch/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Oneindex':'网盘')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://onedrive.yimian.xyz/");
else
window.location.href="https://onedrive.yimian.xyz/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Chat':'聊天室')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://chat.yimian.xyz/");
else
window.location.href="https://chat.yimian.xyz/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Proxy':'下载代理')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://proxy.yimian.xyz/");
else
window.location.href="https://proxy.yimian.xyz/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'ShortenURL':'短链')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://shorturl.yimian.xyz/");
else
window.location.href="https://shorturl.yimian.xyz/";
}, true],
['<button><b>close</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
}, true],
]
});
});
</script>
</li>
<li class="menu-item">
<a id="menu-About" class="menu-item-link" href="#">
<span class=".en">About</span><span class=".zh">关于</span>
</a>
<script>
$("#menu-About").click(function(){
tips.question({
timeout: 20000,
close: false,
overlay: true,
displayMode: 'once',
//id: 'question',
zindex: 999,
title: 'About',
message: '',
position: 'center',
buttons: [
['<button><b>'+((page.tran.getLang() != 'zh')?'links':'友链')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("true" == "true")
pjax.loadUrl("/links/");
else
window.location.href="/links/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Me':'关于我')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://iotcat.me/");
else
window.location.href="https://iotcat.me/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Contact':'留言板')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://cv.yimian.xyz/contact.html");
else
window.location.href="https://cv.yimian.xyz/contact.html";
}, true],
['<button><b>close</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
}, true],
]
});
});
</script>
</li>
</ul></nav>
</header>
<main id="main" class="main">
<div class="content-wrapper">
<div id="content" class="content"><article class="post">
<header class="post-header">
<h1 class="post-title"><span class=".zh">JS中那些惊艳的操作</span><span class=".en" hidden>Those amazing operations in JS</span>
</h1>
<div class="post-meta">
<span class="post-time">
2019-03-19
</span><span class="post-category">
<a href="/categories/tech/">tech</a>
</span>
</div>
</header>
<style>.toc-level-2 > .toc-child {display: none !important; }</style>
<div class="post-toc" id="post-toc">
<h2 class="post-toc-title">Contents</h2>
<div class="post-toc-content">
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#JS中的那些萌点"><span class="toc-text">JS中的那些萌点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#小心得"><span class="toc-text">小心得</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Those-cute-points-in-JS"><span class="toc-text">Those cute points in JS</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Be-careful"><span class="toc-text">Be careful</span></a></li></ol>
</div>
</div>
<script>var arr = [];var ts = '';if($('.post-toc-content').children().length>1){var el = '.post-toc-content';ts = ($(el).children('ol')[0].outerHTML);}else{var el = '.toc';};for(var i = 0; i < $(el).children('li').length; i++){arr.push($(el).children('li')[i].outerHTML);}; arr.splice(arr.length / 2, 0, '</span><span class=".en">');arr.unshift(ts);arr.unshift('<span class=".zh">');arr.push('</span>');$(el).html(arr.join(''));</script><div class="post-content"><span class=".zh">
<p>教你如何一步步迷上JS.. ╮(╯▽╰)╭ </p>
</span>
<span class=".en">
<p>Teach you how to fall in love with JS step by step.. ╮(╯▽╰)╭</p>
</span>
<a id="more"></a>
<script>
session.onload(function(){
if(page.tran.getLang() == 'en'){
tips.warning({
title: 'Caution',
position: 'topRight',
message: 'This page was translated by Machine!!',
buttons: [['<button>Show Original Page</button>', function (instance, toast) {
page.tran.setLang('zh');
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
}, true]]
});
}
});
</script>
<span class=".zh">
<p>好嘀,只是一些总结 </p>
<h2 id="JS中的那些萌点"><a href="#JS中的那些萌点" class="headerlink" title="JS中的那些萌点"></a>JS中的那些萌点</h2><ul>
<li><code>&lt;script&gt;</code>标签中，合理使用<code>defer=&quot;defer&quot;</code>(延迟执行)，<code>async=&quot;async&quot;</code>(异步执行)</li>
<li>外部JS可以使用其它扩展名(如.php)，但必须返回正确MINE类型</li>
<li>使用<code>var obj = preferredObj || backupObj;</code> 提供后备值 ::aru:surprised:: </li>
<li>函数中使用<code>arguements[]</code>获取参数</li>
<li>无函数签名，再见吧重载 ::aru:meditation:: </li>
<li>函数无引用传参，只要不作死用全局变量，封装就很完美</li>
<li>神奇的垃圾收集功能，开发时无需考虑手动释放内存</li>
<li>函数传参使用<code>function hh({})</code>直接传包含参数的对象，更加灵活</li>
<li>数组每一个位置可以存不同类型的数据 ::aru:blood2:: </li>
<li>数组支持模拟栈操作，如<code>push()</code>和<code>pop()</code></li>
<li>数组支持模拟队列操作，如<code>push()</code>和<code>shift()</code></li>
<li>数组支持从相反方向模拟队列，如<code>unshift()</code>和<code>pop()</code></li>
<li><code>sort()</code>可自定义比较函数为参数</li>
<li>数组<code>splice()</code>可太好用了吧</li>
<li>函数是对象，函数名是指针</li>
<li>可以像传递参数一样把一个函数传给另一个函数，也可以将一个函数作为另一个函数的结果返回</li>
<li>函数中可通过<code>arguments.callee</code>获取当前函数名指针</li>
<li>使用<code>arguments.callee.caller</code>获取调用当前函数的引用</li>
<li>使用<code>function.apply(this/*作用域*/, arguments)</code>或<code>function.call(this, arg1, arg2...)</code>指定作用域运行函数</li>
<li>使用函数固有属性<code>function.length</code>获取其期待的参数个数</li>
<li>通过函数继承属性<code>toLocaleString()``toString()``valueOf()</code>返回代码，方便调试</li>
<li>使用<code>indexOf()``lastIndexOf()</code>查找元素出现位置</li>
<li><code>trim()</code>删除字符串开头结尾空格</li>
<li>支持正则<code>RegExp</code></li>
<li>神奇但可怕的<code>eval(&quot;&quot;)</code>可将字符串转译成代码并就地执行</li>
<li><code>encodeURI()/decodeURI()</code>与<code>encodeURIComponent()/decodeURICompoent()</code>处理uri</li>
<li>立即调用函数<code>function(){}();</code></li>
<li>内置Math对象</li>
<li>Math中<code>ceil()``floor()``round()</code>向上，向下，标准舍入</li>
<li><code>Math.random()</code>大于零小于一随机数</li>
<li>对象中使用<code>functionName: function(){}</code>直接定义函数</li>
<li>ES6中<code>(x)=&gt;x+1</code>等价于<code>function(x){return x+1;}</code></li>
<li>使用<code>;(function(name, context, definition){moudle.exports = definition();})(&#39;funationName&#39;, this, function(){});</code>封装模块</li>
</ul>
<h2 id="小心得"><a href="#小心得" class="headerlink" title="小心得"></a>小心得</h2><ul>
<li>不建议使用<code>with</code>语句</li>
<li><code>label</code>标签少用</li>
<li><code>0.1 + 0.2 != 0.3</code> 浮点型天坑，与C类似</li>
<li><code>~26 == -27</code> 利用按位非提高效率</li>
<li>标识符查询由内部环境向外部环境进行</li>
<li>没有块级作用域，与C++不同</li>
<li><code>var obj2 = obj1;</code>实际是引用</li>
<li>函数传参时传对象，实际传的是指针</li>
<li>全局变量用完及时置为null以提性能</li>
<li>使用变量属性访问对象只能使用<code>obj[var]</code></li>
<li><code>var sum = function sum(){};</code>在Safari中会报错</li>
<li>不能为基本类型值添加属性和方法</li>
<li><code>new Number(&quot;25&quot;)</code>返回对象，而<code>Number(&quot;25&quot;)</code>返回25</li>
<li>布尔表达式中对象均为true</li>
</ul>
</span>
<span class=".en">
<p>Okay, just some summary</p>
<h2 id="Those-cute-points-in-JS"><a href="#Those-cute-points-in-JS" class="headerlink" title="Those cute points in JS"></a>Those cute points in JS</h2><ul>
<li>In the <code>&lt;script&gt;</code> tag, reasonably use <code>defer=&quot;defer&quot;</code> (delayed execution) and <code>async=&quot;async&quot;</code> (asynchronous execution)</li>
<li>External JS can use other extensions (such as .php), but must return the correct MINE type</li>
<li>Use <code>var obj = preferredObj || backupObj;</code> to provide a backup value ::aru:surprised::</li>
<li>Use <code>arguements[]</code> to get parameters in the function</li>
<li>No function signature, goodbye overload ::aru:meditation::</li>
<li>The function has no reference to pass parameters, as long as the global variable is not used for deadly, the encapsulation is perfect</li>
<li>Magic garbage collection function, no need to consider manually releasing memory during development</li>
<li>Use <code>function hh({})</code> to pass parameters directly to functions, which is more flexible</li>
<li>Each position of the array can store different types of data ::aru:blood2::</li>
<li>Array supports simulated stack operations, such as <code>push()</code> and <code>pop()</code></li>
<li>Array supports simulated queue operations, such as <code>push()</code> and <code>shift()</code></li>
<li>Array supports simulating queues from the opposite direction, such as <code>unshift()</code> and <code>pop()</code></li>
<li><code>sort()</code> can customize the comparison function as a parameter</li>
<li>The array <code>splice()</code> is so easy to use, right?</li>
<li>Functions are objects and function names are pointers</li>
<li>You can pass a function to another function as parameters, or you can return a function as the result of another function</li>
<li>In the function, the current function name pointer can be obtained through <code>arguments.callee</code></li>
<li>Use <code>arguments.callee.caller</code> to get a reference to call the current function</li>
<li>Use <code>function.apply(this/*scope*/, arguments)</code> or <code>function.call(this, arg1, arg2...)</code> to specify the scope to run the function</li>
<li>Use the function intrinsic property <code>function.length</code> to get the number of expected parameters</li>
<li>Inherit the property <code>toLocaleString(), toString(), and valueOf()</code> return code through the function to facilitate debugging</li>
<li>Use <code>indexOf() and lastIndexOf()</code> to find the element’s appearance</li>
<li><code>trim()</code> delete spaces at the beginning and end of the string</li>
<li>Support regular <code>RegExp</code></li>
<li>The magical but terrible <code>eval(&quot;&quot;)</code> can translate the string into code and execute it in place</li>
<li><code>encodeURI()/decodeURI()</code> and <code>encodeURIComponent()/decodeURICompoent()</code> handle uri</li>
<li>Call the function immediately <code>function()()();</code></li>
<li>Built-in Math object</li>
<li><code>ceil(), floor(), round()</code> in Math up, down, standard rounding</li>
<li><code>Math.random()</code> is a random number greater than zero and less than one</li>
<li>Use <code>functionName: function(){}</code> in the object to directly define the function</li>
<li>In ES6 <code>(x)=&gt;x+1</code> is equivalent to <code>function(x){return x+1;}</code></li>
<li>Use <code>;(function(name, context, definition){moudle.exports = definition();})(&#39;funationName&#39;, this, function()());</code> to encapsulate the module</li>
</ul>
<h2 id="Be-careful"><a href="#Be-careful" class="headerlink" title="Be careful"></a>Be careful</h2><ul>
<li>It is not recommended to use <code>with</code> statement</li>
<li>Less use of <code>label</code></li>
<li><code>0.1 + 0.2 != 0.3</code> floating point tiankeng, similar to C</li>
<li><code>~26 == -27</code> Use bitwise not to improve efficiency</li>
<li>Identifier query is carried out from the internal environment to the external environment</li>
<li>No block-level scope, different from C++</li>
<li><code>var obj2 = obj1;</code> is actually a reference</li>
<li>The object is passed when the function is passed, but the pointer is actually passed</li>
<li>Set global variables to null when used up to improve performance</li>
<li>Use variable attributes to access objects can only use <code>obj[var]</code></li>
<li><code>var sum = function sum(){};</code> will report an error in Safari</li>
<li>You cannot add attributes and methods to basic type values</li>
<li><code>new Number(&quot;25&quot;)</code> returns the object, and <code>Number(&quot;25&quot;)</code> returns 25</li>
<li>All objects in Boolean expressions are true</li>
</ul>
</span>
</div>
<div class="post-copyright">
<p class="copyright-item">
<span>Author: </span>
<a href="https://iotcat.me/" target="_blank" rel="noopener">IoTcat</a>
</p>
<p class="copyright-item">
<span>Link: </span>
<a href="https://www.eee.dog/tech/js-notes.html">https://www.eee.dog/tech/js-notes.html</a>
</p>
<p class="copyright-item">
<span>License: </span><a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/" target="_blank">知识共享署名-非商业性使用 4.0 国际许可协议</a>
</p>
</div>
<footer class="post-footer">
<div class="post-tags">
<a href="/tags/nodeJS/">nodeJS</a>
</div>
<nav class="post-nav"><a class="prev" href="/tech/mail-api.html">
<i class="iconfont icon-left"></i>
<span class="prev-text nav-default"><span class=".zh">自动发邮件API</span><span class=".en">Auto email API</span></span>
<span class="prev-text nav-mobile">Prev</span>
</a>
<a class="next" href="/tech/ssl-auto-apply.html">
<span class="next-text nav-default"><span class=".zh">Centos7下 Nginx 配置ssl证书自动续期</span><span class=".en">Nginx configure ssl certificate automatic renewal under Centos7</span></span>
<span class="prev-text nav-mobile">Next</span>
<i class="iconfont icon-right"></i>
</a>
</nav></footer>
</article><script>$(()=>{var p = window.location.pathname;setTimeout(()=>{if(window.location.pathname == p)tips.show({
title: 'tips',
position: 'topRight',
message: ((page.tran.getLang() == 'zh')?"此文章预计阅读 4 分钟哦~": "Read this page will spend around 8 minutes~")
})}, 6000)})</script>
</div><div class="comments" id="comments"><div id="vcomments"></div>
</div></div>
</main>
<footer id="footer" class="footer">
<script>
page_obj = {
layout: "post",
comments: "true"
};
</script><div class="social-links"><a href="mailto:i@iotcat.me" class="iconfont icon-email" title="email"></a>
<a href="https://github.com/iotcat" target="_blank" rel="noopener" class="iconfont icon-github" title="github"></a>
<a href="/atom.xml" class="iconfont icon-rss" title="rss"></a>
</div><div class="copyright"><span id="/tech/js-notes.html" class="statistic leancloud_visitors">
<em>Visitors </em> <i class="leancloud-visitors-count">??</i>
<span class="division"> |</span>
<em>Reading </em> 8 min
</span>
<br>
<span class="power-by">
Powered by <a class="hexo-link" href="https://ushio.yimian.xyz/" target="_blank" rel="noopener">Ushio</a>
</span>
<span class="division">|</span>
<span class="theme-info">
Theme -
<a class="theme-link" href="https://github.com/iotcat/kayo" target="_blank" rel="noopener">Kayo</a>
</span>
<span class="copyright-year">&copy;2018 - 2021<span class="heart shaky">
<i class="iconfont icon-heart"></i>
</span>
<span class="author"><a href="https://iotcat.me/" target="_blank" rel="noopener">IoTcat</a></span>
</span>
</div>
</footer>
<div class="back-to-top" id="back-to-top">
<i class="iconfont icon-up"></i>
</div>
</div>
<script src="https://cdn.yimian.xyz/kayo/lib/valine/valine.min.js" data-pjax></script>
<style>
/* 背景图片 */
#veditor {
background-image: url(https://cdn.yimian.xyz/img/blog/comments_bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-position: right;
background-color: rgba(255, 255, 255, 0);
resize: vertical
}
/* 头像旋转 */
img.vimg {
transition: all 1s /* 旋转时间为 1s */
}
img.vimg:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
/* 盒子模式 */
#vcomments .vcards .vcard {
padding: 15px 20px 0 20px;
border-radius: 10px;
margin-bottom: 15px;
box-shadow: 0 0 4px 1px rgba(0, 0, 0, .12);
transition: all .3s
}
#vcomments .vcards .vcard:hover {
box-shadow: 0 0 8px 3px rgba(0, 0, 0, .12)
}
#vcomments .vcards .vcard .vh .vcard {
border: none;
box-shadow: none;
}
</style>
<script>
pjax_valine = () => {
$.get('https://auth.yimian.xyz/getEmailHash.php', function(res){
if(page.tran.getLang() == 'zh'){
var lan = 'zh-CN';
var metaPlaceholder = {"nick":"昵称/QQ号","mail":"邮箱（完全保密）"};
var tagMeta = ["博主","小伙伴","访客"];
var placeholder = "填写邮箱可以及时收到回复哦(●'◡'●)";
}else{
var lan = 'en';
var metaPlaceholder = {"nick":"Nickname/QQ","mail":"EMail"};
var tagMeta = ["Master","Friend","Visitor"];
var placeholder = "Leave some comments here (●'◡'●)";
}
new Valine({
el: '#vcomments',
appId: 'eVzpK7EyT6OafJvXWIRminWT-gzGzoHsz',
appKey: '2qjuEBgVE0BscTQnTmoS9roU',
master: '9b616ff4cd6c305e5970bee7b1bd9b1f', //博主邮箱md5
tagMeta: tagMeta, //标识字段名
friends: res, //["b6ddef7c7e1c647e7767afeacdfb7b64","46dd4e6fef4f9591736c4723a965ca2e","6132d77f9f0ae060bc733090991acecb","3e00e104b79d7c6e866c6b23c6ba6dfc"], //小伙伴邮箱Md5
metaPlaceholder: metaPlaceholder,
placeholder: placeholder,
lang: lan,
path: window.location.pathname,
enableQQ: true,
visitor: true,
emojiCDN: '//i0.hdslb.com/bfs/emote/',
emojiMaps: {
"tv_doge": "6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png",
"tv_亲亲": "a8111ad55953ef5e3be3327ef94eb4a39d535d06.png",
"tv_偷笑": "bb690d4107620f1c15cff29509db529a73aee261.png",
"tv_再见": "180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png",
"tv_冷漠": "b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png",
"tv_发怒": "34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png",
"tv_发财": "34db290afd2963723c6eb3c4560667db7253a21a.png",
"tv_可爱": "9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png",
"tv_吐血": "09dd16a7aa59b77baa1155d47484409624470c77.png",
"tv_呆": "fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png",
"tv_呕吐": "9f996894a39e282ccf5e66856af49483f81870f3.png",
"tv_困": "241ee304e44c0af029adceb294399391e4737ef2.png",
"tv_坏笑": "1f0b87f731a671079842116e0991c91c2c88645a.png",
"tv_大佬": "093c1e2c490161aca397afc45573c877cdead616.png",
"tv_大哭": "23269aeb35f99daee28dda129676f6e9ea87934f.png",
"tv_委屈": "d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png",
"tv_害羞": "a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png",
"tv_尴尬": "7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png",
"tv_微笑": "70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png",
"tv_思考": "90cf159733e558137ed20aa04d09964436f618a1.png",
"tv_惊吓": "0d15c7e2ee58e935adc6a7193ee042388adc22af.png",
"tv_打脸": "56ab10b624063e966bfcb76ea5dc4794d87dfd47.png",
"tv_抓狂": "fe31c08edad661d63762b04e17b8d5ae3c71a757.png",
"tv_抠鼻": "c666f55e88d471e51bbd9fab9bb308110824a6eb.png",
"tv_斜眼笑": "911f987aa8bc1bee12d52aafe62bc41ef4474e6c.png",
"tv_无奈": "ea8ed89ee9878f2fece2dda0ea8a5dbfe21b5751.png",
"tv_晕": "5443c22b4d07fb1907ccc610c8e6db254f2461b7.png",
"tv_流汗": "cead1c351ab8d79e9f369605beb90148db0fbed3.png",
"tv_流泪": "7e71cde7858f0cd50d74b0264aa26db612a8a167.png",
"tv_流鼻血": "c32d39db2737f89b904ca32700d140a9241b0767.png",
"tv_点赞": "f85c354995bd99e28fc76c869bfe42ba6438eff4.png",
"tv_生气": "26702dcafdab5e8225b43ffd23c94ac1ff932654.png",
"tv_生病": "8b0ec90e6b86771092a498c54f09fc94621c1900.png",
"tv_疑问": "0793d949b18d7be716078349c202c15ff166f314.png",
"tv_白眼": "c1d59f439e379ee50eef488bcb5e5378e5044ea4.png",
"tv_皱眉": "72ccad6679fea0d14cce648b4d818e09b8ffea2d.png",
"tv_目瞪口呆": "0b8cb81a68de5d5365212c99375e7ace3e7891b7.png",
"tv_睡着": "8b196675b53af58264f383c50ad0945048290b33.png",
"tv_笑哭": "1abc628f6d4f4caf9d0e7800878f4697abbc8273.png",
"tv_腼腆": "89712c0d4af73e67f89e35cbc518420380a7f6f4.png",
"tv_色": "61822c7e9aae5da76475e7892534545336b23a6f.png",
"tv_调侃": "4bc022533ef31544ca0d72c12c808cf4a1cce3e3.png",
"tv_调皮": "b9c41de8e82dd7a8515ae5e3cb63e898bf245186.png",
"tv_鄙视": "6e72339f346a692a495b123174b49e4e8e781303.png",
"tv_闭嘴": "c9e990da7f6e93975e25fd8b70e2e290aa4086ef.png",
"tv_难过": "87f46748d3f142ebc6586ff58860d0e2fc8263ba.png",
"tv_馋": "fc7e829b845c43c623c8b490ee3602b7f0e76a31.png",
"tv_鬼脸": "0ffbbddf8a94d124ca2f54b360bbc04feb6bbfea.png",
"tv_黑人问号": "45821a01f51bc867da9edbaa2e070410819a95b2.png",
"tv_鼓掌": "1d21793f96ef4e6f48b23e53e3b9e42da833a0f6.png"
// ... 更多表情
}
});
});
};
</script><script type="text/javascript" src="https://cdn.yimian.xyz/ushio-js/ushio-footer.min.js"></script>
<script>
session.onload(function(){
if(session.get('group') != 'anonymous'){
function insertNick(){
if($('.vnick').length){
$('.vnick').val(session.get('nickname'));
}else{
setTimeout(insertNick, 500);
}
}
function insertMail(){
if($('.vmail').length){
$('.vmail').val(session.get('email'));
}else{
setTimeout(insertMail, 500);
}
}
if(session.get('nickname')){
insertNick();
}
if(session.get('email')){
insertMail();
}
}
});
</script>
<script type="text/javascript" src="https://cdn.yimian.xyz/kayo/lib/slideout/slideout.js"></script>
<script type="text/javascript" src="https://cdn.yimian.xyz/kayo/lib/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="https://cdn.yimian.xyz/kayo/lib/iziToast/iziToast.min.js"></script>
<script type="text/javascript" src="https://cdn.yimian.xyz/kayo/lib/iziModal/iziModal.min.js"></script>
<script type="text/javascript" src="https://cdn.yimian.xyz/kayo/lib/mermaid/mermaid.min.js"></script>
<script type="text/javascript" src="https://cdn.yimian.xyz/kayo/js/src/kayo.js?v=1.0.0" data-pjax></script>
<script type="text/javascript" src="https://cdn.yimian.xyz/kayo/js/src/kayo-no-pjax.js?v=1.0.0"></script>
<script src="https://cdn.yimian.xyz/kayo/lib/pjax/pjax.min.js"></script>
<script>window.pjax = new Pjax({
elements: 'a[href]:not([href^="#"]):not([href="javascript:void(0)"])',
selectors: ["head title, #main", "#footer"],
});/* lazyload */
window.imageLazyLoadSetting = {
isSPA: false,
processImages: null,
};
window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});
/* 第一次载入页面加载的函数 */
pjax_ini = () => {
/* 关闭侧边栏 */
window.slideout.close();
if(page_obj.comments == "true"){pjax_valine();}pjax_google_analytics();mermaid.init(undefined, $(".mermaid"));/* lazy load */
!function(n){n.imageLazyLoadSetting.processImages=o;var i=n.imageLazyLoadSetting.isSPA,r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]"));function o(){i&&(r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")));for(var t,e,a=0;a<r.length;a++)t=r[a],e=void 0,0<=(e=t.getBoundingClientRect()).bottom&&0<=e.left&&e.top<=(n.innerHeight||document.documentElement.clientHeight)&&function(){var t,e,n,i,o=r[a];t=o,e=function(){r=r.filter(function(t){return o!==t})},n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,e&&e()},n.src=i}()}o(),n.addEventListener("scroll",function(){var t,e;t=o,e=n,clearTimeout(t.tId),t.tId=setTimeout(function(){t.call(e)},500)})}(this);
!function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})}();
};
/* 第一次 执行 */
pjax_ini();var loadingBar = document.querySelector(".loading-bar");
var progress = document.querySelector(".loading-bar .progress");
var timer = null;
// Pjax 开始时执行的函数
var loadingbarStart = function () {
// 进度条默认已经加载 20%
var loadingBarWidth = 20;
// 进度条的最大增加宽度
var MAX_LOADING_WIDTH = 95;
// 显示进度条
loadingBar.classList.add("loading");
// 初始化进度条的宽度
progress.style.width = loadingBarWidth + "%";
clearInterval(timer);
timer = setInterval(function () {
// 进度条的增加速度（可以改为一个随机值，显得更加真实）
loadingBarWidth += 3;
// 当进度条到达 95% 后停止增加
if (loadingBarWidth > MAX_LOADING_WIDTH) {
loadingBarWidth = MAX_LOADING_WIDTH;
}
progress.style.width = loadingBarWidth + "%";
}, 500);
};
// Pjax 完成之后执行的函数
var loadingbarStop = function () {
clearInterval(timer);
progress.style.width = "100%";
loadingBar.classList.remove("loading");
setTimeout(function () {
progress.style.width = 0;
}, 400);
};/* Pjax 开始时，重新加载的函数 */
document.addEventListener("pjax:send", function () {loadingbarStart();
});
/* Pjax 完成后，重新加载的函数 */
document.addEventListener("pjax:complete", function () {
/* 重载带data-pjax的script，或者.pjax-reload属性内容的script */
$("script[data-pjax], .pjax-reload script").each(function () {
$(this).parent().append($(this).remove());
});
pjax_ini();loadingbarStop();
page.tran.setLang();
});
/* Pjax 出错，执行的函数 */
document.addEventListener("pjax:error", function () {
});</script>
</body>
</html>