-
Notifications
You must be signed in to change notification settings - Fork 1
/
js_type.html
1 lines (1 loc) · 11.9 KB
/
js_type.html
1
<!doctype html><html lang="zh-CN" class="night"><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1,maximum-scale=4,user-scalable=0" name="viewport"><title>Ede's Blog</title><meta name="description" content="Try to be a qualified programmer"><meta property="og:type" content="website"><meta property="og:description" content="Try to be a qualified programmer"><meta property="og:title" content="Ede's Blog"><meta property="og:site_name" content="Ede's Blog"><meta property="og:url" content="https://ede.ink"><meta property="og:image" content="https://edeity.oss-cn-shenzhen.aliyuncs.com/public/edeity_o.png"><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"><link rel="mainfest" href="/mainfest.json"><link rel="stylesheet" href="/public/css/common.css"><link rel="stylesheet" href="//at.alicdn.com/t/font_707055_4b9og9sc5lx.css"><script>!function(){var e=-1!==window.location.search.indexOf("theme=night")||"night"===window.localStorage.getItem("edeity-theme_theme"),t=-1!==window.location.search.indexOf("theme=light")||"light"===window.localStorage.getItem("edeity-theme_theme");(new Date).getHours();var n=document.querySelector("html");e?n.classList.add("night"):t?n.classList.remove("night"):n.classList.add("night")}(),document.addEventListener("DOMContentLoaded",function(){null!==document.querySelector("ol.toc")&&(document.querySelector("#nav-bar").style.cssText="display: block")})</script><script async src="https://www.googletagmanager.com/gtag/js?id=G-M3J9QSEE2Z"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-M3J9QSEE2Z")</script><meta name="generator" content="Hexo 5.0.0"></head><body><div class="loading"></div><div id="switch" data-switch="{"toc":true,"use_pwa":false}"></div><header class="fullscreen"><div class="toolbar"><i class="iconfont icon-menu"></i></div><h1><a href="/">Ede's Blog</a></h1><div class="head-link"><a class="btn waves" href="/"><span><i class="iconfont icon-home">Home </i></span></a><a class="btn waves" href="/about/index.html"><span><i class="iconfont icon-me">About </i></span></a><a class="btn waves" target="_blank" rel="noopener" href="https://github.com/edeink"><span><i class="iconfont icon-github">Github</i></span></a></div></header><div class="some-link"><a class="btn" id="light-or-not"><i class="iconfont icon-light"></i> </a><a style="display:none" class="btn" id="up-to-top"><i class="iconfont icon-up"></i></a></div><div id="nav-bar" style="display:none"><div class="toc"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#type-VS-toString"><span class="toc-number">1.</span> <span class="toc-text">type VS toString</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#typeof"><span class="toc-number">1.1.</span> <span class="toc-text">typeof</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-prototype-toString"><span class="toc-number">1.2.</span> <span class="toc-text">Object.prototype.toString</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%BC%E5%AE%B9%E6%80%A7"><span class="toc-number">2.</span> <span class="toc-text">兼容性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#JQuery-type"><span class="toc-number">2.1.</span> <span class="toc-text">JQuery.type</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Function"><span class="toc-number">2.2.</span> <span class="toc-text">Function</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Array"><span class="toc-number">2.3.</span> <span class="toc-text">Array</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%81%8D%E5%8E%86"><span class="toc-number">3.</span> <span class="toc-text">遍历</span></a></li></ol></div></div><main id="content-main" class="section"><div class="list-item"><h1 class="post-title"><a id="JS基本类型 & 遍历" class="article-link" href="">JS基本类型 & 遍历</a></h1><div class="post-meta"><time class="meta published">Sep 27, 2016</time></div><div class="article"><div class="post-excerpt markdown-body"><p>基本功不实，于此小记：</p><h2 id="type-VS-toString"><a href="#type-VS-toString" class="headerlink" title="type VS toString"></a>type VS toString</h2><h3 id="typeof"><a href="#typeof" class="headerlink" title="typeof"></a>typeof</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">typeof</span> <span class="number">1</span>; <span class="comment">// "number"</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="string">'1'</span>; <span class="comment">// "string"</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="literal">null</span>; <span class="comment">// "object"</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="literal">undefined</span>; <span class="comment">// "undefined"</span></span><br><span class="line"><span class="keyword">typeof</span> {}; <span class="comment">// "object"</span></span><br><span class="line"><span class="keyword">typeof</span> []; <span class="comment">// "object"</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{}; <span class="comment">// "function"</span></span><br></pre></td></tr></table></figure><h3 id="Object-prototype-toString"><a href="#Object-prototype-toString" class="headerlink" title="Object.prototype.toString"></a>Object.prototype.toString</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="number">1</span>); <span class="comment">// "[object Number]"</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="string">'1'</span>); <span class="comment">// "[object String]"</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="literal">null</span>); <span class="comment">// "[object Null]"</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="literal">undefined</span>); <span class="comment">// "[object Undefined]"</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call({}); <span class="comment">// [object Object]</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call([]); <span class="comment">// "[object Array]"</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{}); <span class="comment">// "[object Function]"</span></span><br></pre></td></tr></table></figure><p>由此可见，<code>Object.prototype.toString</code>的可靠性要高于<code>typeof</code></p><h2 id="兼容性"><a href="#兼容性" class="headerlink" title="兼容性"></a>兼容性</h2><h3 id="JQuery-type"><a href="#JQuery-type" class="headerlink" title="JQuery.type"></a>JQuery.type</h3><p>在JQuery中，对类型的判断主要基于<code>type</code>方法：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">type</span>(<span class="params">obj</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> ( obj == <span class="literal">null</span> ) { <span class="keyword">return</span> obj + <span class="string">""</span>;}</span><br><span class="line"><span class="comment">// Support: Android<4.0, iOS<6 (functionish RegExp)</span></span><br><span class="line"><span class="keyword">return</span> <span class="keyword">typeof</span> obj === <span class="string">"object"</span> || <span class="keyword">typeof</span> obj === <span class="string">"function"</span> ?</span><br><span class="line"> class2type[ toString.call( obj ) ] || <span class="string">"object"</span> :</span><br><span class="line"> <span class="keyword">typeof</span> obj; </span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="Function"><a href="#Function" class="headerlink" title="Function"></a>Function</h3><p>如，据史书记载，<code>typeof</code>在判断<code>Function</code>时，存在兼容性问题：</p><blockquote><ul><li>FireFox：在HTML的<code><object></code>元素上使用typeof的话，会返回function</li><li>IE：如果对其他窗口（比如iframe）的不存在的对象进行类型判断，该类型会返回unknown</li><li>Safari：DOM的NodeList是一个<code>function</code></li></ul></blockquote><h3 id="Array"><a href="#Array" class="headerlink" title="Array"></a>Array</h3><p>毫无疑问，<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray">Array.isArray()</a>是最好用的方法，</p><h2 id="遍历"><a href="#遍历" class="headerlink" title="遍历"></a>遍历</h2><p>鉴于总是忘记用法，特总结于此：</p><p>对于一般的遍历，JS已提供具有可读性的API，如下：</p><ul><li>some：<code>IE9+</code> <code>boolean</code> ：某一项满足，返回<code>true</code>，不继续执行</li><li>every：<code>IE9+</code> <code>boolean</code> ：某一项不满足，返回<code>false</code>， 不继续执行，所有项目满足，返回<code>true</code></li><li>forEach: <code>IE9+</code> <code>boolean</code> ：执行所有项，无返回值，<code>undefined</code></li><li>map: <code>IE9+</code> <code>object</code> ：返回index数组，并标记是否满足条件</li><li>filter: <code>IE not support</code> <code>object</code> ：返回满足条件的项</li></ul><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> numArr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br><span class="line"><span class="keyword">const</span> test = <span class="function">(<span class="params">num</span>) =></span> { <span class="built_in">console</span>.log(num); <span class="keyword">return</span> num > <span class="number">2</span>}}</span><br><span class="line">numArr.some( test ) <span class="comment">// log: 1, 2, 3; return: true</span></span><br><span class="line">numArr.every( test ) <span class="comment">// log: 1; return: false</span></span><br><span class="line">numArr.forEach(( test ) <span class="comment">// log: 1, 2, 3, 4; return : undefined</span></span><br><span class="line">numArr.map( test ) <span class="comment">// log: 1, 2, 3, 4; return [0: false, 1: false, 2: true, 3: true]</span></span><br><span class="line">numArr.filter( test) <span class="comment">// log: 1, 2, 3, 4; return [3, 4]</span></span><br></pre></td></tr></table></figure></div></div></div><div class="more section"><div class="pre"><a class="article-link" href="/byd_2016_and_hi_2017.html"><i class="iconfont icon-right"></i> <span>Bye 2016, Hi 2017</span></a></div><div class="next"><a class="article-link" href="/dev_for_patch_system.html">React实践：NC资源管理系统 <i class="iconfont icon-right"></i></a></div></div></main></body><footer class="section fullscreen"><div class="footer-desc">Edeink © 2015-2022 · Powered by Hexo</div></footer><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script src="/public/js/init.js"></script></html>