path---2013-unaryoperator-d58cbee8240ce039f01c.js

webpackJsonp([0xf9c3b4a52a5],{367:function(a,n){a.exports={data:{site:{siteMetadata:{title:"Step Over",subtitle:"有趣的灵魂终会相遇",copyright:"© All rights reserved.",author:{name:"周骅",rss:"#",email:"zhou--hua@163.com",github:"zhouhua-js"}}},markdownRemark:{id:"/work/playground/www.zhouhua.site/src/pages/articles/2013/unaryoperator.md absPath of file >>> MarkdownRemark",html:'<p>在偶然打开<a href="http://d3js.org">d3</a> 的源代码的时候，我看到了这样一段代码。</p>\n<div class="gatsby-highlight">\n      <pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>Date<span class="token punctuation">.</span>now<span class="token punctuation">)</span> Date<span class="token punctuation">.</span><span class="token function-variable function">now</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token operator">+</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre>\n      </div>\n<p>大体上可以看出这是在<code>Date</code>对象中加入一个<code>now</code>方法以获得当前时间。但是<code>return +new Date;</code>似乎是一种很不合常规的写法，这个<code>+</code>是干什么用的呢？其实这里并没有用到很高级的javascript技巧，相反，只是用到了一个极其简单的一元操作符，只不过这样的用法比较少见，用法与其他编程语言太不一样，所以让人们有一种陌生的感觉。</p>\n<p>翻开<em>ECMAScript</em>的规范，如果不算<em>NOT</em>运算的<code>~</code>操作符，一共有8个一元操作符。让我们逐一了解下。</p>\n<h2>+操作符</h2>\n<hr>\n<p>我们从开篇的<code>+操作符</code>开始介绍。使用方法上，这个操作符与各位从初中数学中见过的“正号”类似，放在一个变量或表达式的前面。对数字类型的变量而言，<code>+操作符</code>对结果没有影响，对于其他类型的变量则是转化成数字类型的变量，如果转化失败，则为特殊数字类型常量<code>NaN</code>。那么运算<code>+a</code>——假设<code>a</code>为一个非数字类型的对象——究竟对a执行了怎样的操作呢？一种说法是默认调用valueOf方法，相当于<code>a.valueOf()</code>；不过经过我的具体实验，似乎另一种说法更可信，即<code>+a=Number(a)</code>。</p>\n<h2>-操作符</h2>\n<hr>\n<p>与<code>+操作符</code>类似，<code>-操作符</code>就像是数学里的负号，所以我们可以知道<code>-a=0-(+a)</code>，以上两个符号为一组。</p>\n<h2>++操作符</h2>\n<hr>\n<p>这个段落里其实会包含两种操作符，分别是类似<code>a++</code>和类似<code>++a</code>。熟悉C语言或者Java的读者都很了解<code>++</code>的含义。的确，这两操作符是EmacScript直接借鉴java的自增操作符，表示将操作数加上1，即<code>a++</code>等价于<code>++a</code>等价于<code>a+1</code>。然而数值上运算结果的等价不代表这两种操作符是相同的，其实它们之间还明差异的，相信了解C语言或Java的读者听说过它们之间“先赋值再运算”和“先运算再赋值”的差异。</p>\n<p>那它们的差异具体是什么样的呢？还是以具体的实验结果来说明吧。</p>\n<div class="gatsby-highlight">\n      <pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>\nconsole<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token operator">++</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre>\n      </div>\n<p><img src="result1.jpg">\n图1：<code>a++</code>运算结果</p>\n<div class="gatsby-highlight">\n      <pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>\nconsole<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">++</span>a <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre>\n      </div>\n<p><img src="result2.jpg">\n图2：<code>++a</code>运算结果</p>\n<p>从以上实验结果我们知道，<code>a++ - 1</code>先执行出<code>a - 1</code>的结果，再执行<code>a = a + 1</code>，所以相当于“先运算再赋值”；而<code>++a - 1</code>则不同，它是先执行<code>a = a + 1</code>，再用新的a来参与运算<code>a - 1</code>，因而这是“先赋值再运算”。</p>\n<h2>–操作符</h2>\n<hr>\n<p>同样，这里也是<code>a--</code>和<code>--a</code>两个操作符，具体含义与<code>++操作符</code>相反，表示操作数减1，具体特点与上段相同，不再赘述。</p>\n<h2>delete操作符</h2>\n<hr>\n<p>这里的<code>delete</code>与C++中的<code>delete</code>关键字不同，这不是用来释放一个对象的内存空间，而是释放对象内部的一个自定义属性和方法的引用。对于<code>delete</code>的用法，我用一张图片来说明。</p>\n<p><img src="result3.jpg"></p>\n<p>我们定义了一个Date类型的对象<code>a</code>，并给它定义一个属性<code>name</code>和一个方法<code>speak</code>，然后我们用<code>delete</code>操作符将自定义的属性和方法删除。同时我们也发现，对于Javascript内置的属性和方法是不可以通过<code>delete</code>操作符删除的，这里我们测试的是Date对象的valueOf方法。</p>\n<p>我再抛出一个简单的问题，如果我们定义一个变量或函数，是否可以用<code>delete</code>操作符来删除这个变量或函数？为什么？</p>\n<h2>void操作符</h2>\n<hr>\n<p><code>void</code>操作符的用途是对所有的表达式返回<code>undefined</code>，这个功能似乎很奇怪，或许在防止产生意外计算结果的时候会有用吧……看到比较多的应用，一个是作为死链接，一个是打开新窗口。</p>\n<h3>void操作符制作死链接</h3>\n<div class="gatsby-highlight">\n      <pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:void(0)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>我是一个死链接<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>\n</code></pre>\n      </div>\n<p><a href="javascript:void(0)">我是一个死链接</a></p>\n<h3>打开新窗口</h3>\n<p>要打开一个新窗口，我们可以用这个代码：</p>\n<div class="gatsby-highlight">\n      <pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:window.open(<span class="token punctuation">\'</span>about:blank<span class="token punctuation">\'</span>)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>打开新窗口<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>\n</code></pre>\n      </div>\n<p>我不建议读者点这个<a href="javascript:window.open(\'about:blank\')">链接</a>，不过我测试下来，chrome浏览器是对这个问题做了处理，如果你是想故意测试这个bug，请换IE浏览器来点击前面的链接。这个时候<code>void</code>操作符就能够发挥作用了，我们把代码改为：</p>\n<div class="gatsby-highlight">\n      <pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:void(window.open(<span class="token punctuation">\'</span>about:blank<span class="token punctuation">\'</span>))<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>打开新窗口<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>\n</code></pre>\n      </div>\n<p>读者再点击<a href="javascript:void(window.open(\'about:blank\'))">链接</a>，就不会再有上面的bug了。</p>',excerpt:"在偶然打开 d3  的源代码的时候，我看到了这样一段代码。 大体上可以看出这是在 Date 对象中加入一个 now 方法以获得当前时间。但是 return +new Date; 似乎是一种很不合常规的写法，这个 + 是干什么用的呢？其实这里并没有用到很高级的javascript…",fields:{tagSlugs:["/tags/ecma-script/","/tags/javascript/","/tags/一元操作符/"]},frontmatter:{title:"从 +new Date 说起，Javascript的一元操作符",tags:["ECMAScript","Javascript","一元操作符"],date:"2013-07-09T22:16:49.000Z",description:"翻开_ECMAScript_的规范，如果不算*NOT*运算的`~`操作符，一共有8个一元操作符。让我们逐一了解下。"}}},pathContext:{slug:"/2013/unaryoperator/"}}}});
//# sourceMappingURL=path---2013-unaryoperator-d58cbee8240ce039f01c.js.map