-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 80.6 KB
/
index.html
1
<!DOCTYPE html><html class="theme-next pisces use-motion" lang="zh-Hans"><head><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 name="theme-color" content="#222"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.1.2" rel="stylesheet" type="text/css"><meta name="keywords" content="你好，我是照彦"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.2"><meta name="description" content="这里是懒人的小屋"><meta property="og:type" content="website"><meta property="og:title" content="照彦のblog"><meta property="og:url" content="http://yoursite.com/index.html"><meta property="og:site_name" content="照彦のblog"><meta property="og:description" content="这里是懒人的小屋"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="照彦のblog"><meta name="twitter:description" content="这里是懒人的小屋"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/",scheme:"Pisces",sidebar:{position:"left",display:"post",offset:12,offset_float:12,b2t:!1,scrollpercent:!1,onmobile:!1},fancybox:!0,tabs:!0,motion:!0,duoshuo:{userId:"0",author:"博主"},algolia:{applicationID:"",apiKey:"",indexName:"",hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}}}</script><link rel="canonical" href="http://yoursite.com/"><title>照彦のblog</title></head><body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans"><div class="container sidebar-position-left page-home"><div class="headband"></div><header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">照彦のblog</span><span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle">前端Copy师</p></div><div class="site-nav-toggle"> <button><span class="btn-bar"></span><span class="btn-bar"></span><span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br> 首页</a></li><li class="menu-item menu-item-about"><a href="/about" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i><br> 关于</a></li><li class="menu-item menu-item-categories"><a href="/categories" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br> 整理</a></li><li class="menu-item menu-item-tags"><a href="/tags" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br> 标签</a></li><li class="menu-item menu-item-archives"><a href="/archives" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br> 归档</a></li><li class="menu-item menu-item-commonweal"><a href="/404.html" rel="section"><i class="menu-item-icon fa fa-fw fa-heartbeat"></i><br> 404页面</a></li></ul></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><section id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2019/07/21/nginx中文url404的问题/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="照彦"><meta itemprop="description" content=""><meta itemprop="image" content="/uploads/jh.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="照彦のblog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2019/07/21/nginx中文url404的问题/" itemprop="url">nginx中文url、404的问题</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-07-21T00:00:00+08:00">2019-07-21</time></span> <span class="post-category"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/nginx/" itemprop="url" rel="index"><span itemprop="name">nginx</span></a></span> ， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/nginx/服务器/" itemprop="url" rel="index"><span itemprop="name">服务器</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><h1 id="一、查看系统语言设置"><a href="#一、查看系统语言设置" class="headerlink" title="一、查看系统语言设置"></a>一、查看系统语言设置</h1><p>输入 locale 查看当前语言环境<br>例如我的 LANG=”en_US.UTF-8 就没有问题如果不是 UTF-8 可能会有问题</p><h1 id="二、更改-nginx-设置"><a href="#二、更改-nginx-设置" class="headerlink" title="二、更改 nginx 设置"></a>二、更改 nginx 设置</h1><p>在 nginx 配置文件中,找到 sever,在里面添加 charset utf-8;</p><p>例如<br><code>server{ charset utf-8; root /data/www; }</code></p><p>同时需要将 FTP 和 shell 工具的字符集设置为 UTF-8</p><p>以上就是解决 url 中文 404 的方案=，=</p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2019/05/21/初次试用nginx/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="照彦"><meta itemprop="description" content=""><meta itemprop="image" content="/uploads/jh.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="照彦のblog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2019/05/21/初次试用nginx/" itemprop="url">初次使用nginx</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-05-21T00:00:00+08:00">2019-05-21</time></span> <span class="post-category"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/服务器/" itemprop="url" rel="index"><span itemprop="name">服务器</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><h1 id="初次使用-nginx"><a href="#初次使用-nginx" class="headerlink" title="初次使用 nginx"></a>初次使用 nginx</h1><p>闲来无事想着腾讯云服务器买着吃灰好久了。。于是便诞生了这篇文章<br>服务器是 Centos 系统然后服务器选择的 nginx<br>主要是几个步骤</p><ul><li>yum install nginx -y</li><li><p>nginx<br>这时候可以访问 IP 看到测试页了</p></li><li><p>更改静态文件存储位置</p></li></ul><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">vim /etc/nginx/nginx.conf</div></pre></td></tr></table></figure><p>对啦 vim 我也是现学的编辑 保存退出=。=<br>把 root 更改为/data/www 后还有一个事情要处理 就是处理默认配置的一条注释掉<br>nginx.conf 配置文件中有一行是 include /etc/nginx/conf.d/*.conf，把这行代码注释掉，保存退出，因为这行代码会使文件执行默认配置。</p><ul><li><p>检查配置文件是否正确 nginx -t</p></li><li><p>在 data 目录下创建 www 文件夹 mkdir -p /data/www</p></li><li>cd 到 www 文件夹下 创建 index.html 因为默认是访问 index.html</li><li>重启 nginx 命令是 nginx -s reload<br>对了 有可能发生端口被多个 nginx 占用的情况 这时候请杀掉 nginx 再重新启动</li></ul></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2019/05/10/如何扩展 Create React App 的 Webpack 配置/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="照彦"><meta itemprop="description" content=""><meta itemprop="image" content="/uploads/jh.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="照彦のblog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2019/05/10/如何扩展 Create React App 的 Webpack 配置/" itemprop="url">如何扩展 Create React App 的 Webpack 配置</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-05-10T00:00:00+08:00">2019-05-10</time></span> <span class="post-category"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/javascript/" itemprop="url" rel="index"><span itemprop="name">javascript</span></a></span> ， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/javascript/react/" itemprop="url" rel="index"><span itemprop="name">react</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><h1 id="如何扩展-Create-React-App-的-Webpack-配置"><a href="#如何扩展-Create-React-App-的-Webpack-配置" class="headerlink" title="如何扩展 Create React App 的 Webpack 配置"></a>如何扩展 Create React App 的 Webpack 配置</h1><p>Create React App（以下简称 CRA）是创建 React 应用的一个脚手架，它与其他脚手架不同的一个地方就是将一些复杂工具（比如 webpack）的配置封装了起来，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度。</p><p>但是对于一些熟悉 webpack 的开发者来说，他们可能想对 webpack 配置做一些修改，这个时候应该怎么办呢？<br>其实我们可以通过以下几种方式来修改 webpack 的配置：</p><ul><li>项目 eject</li><li>替换 react-scripts 包</li><li>使用 react-app-rewired</li><li>scripts 包 + override 组合</li></ul><h2 id="项目-eject"><a href="#项目-eject" class="headerlink" title="项目 eject"></a>项目 eject</h2><p>使用 CRA 创建完项目以后，项目在 package.json 里面提供了这样一个命令：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> ...</div><div class="line"> "scripts": {</div><div class="line"> "eject": "react-scripts eject"</div><div class="line"> },</div><div class="line"> ...</div><div class="line">}</div></pre></td></tr></table></figure><p>执行完这个命令——yarn run eject(或者 npm run eject)后会将封装在 CRA 中的配置全部反编译到当前项目，这样用户就可以完全取得 webpack 文件的控制权，想怎么修改就怎么修改了。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">config</div><div class="line">├── env.js</div><div class="line">├── jest</div><div class="line">│ ├── cssTransform.js</div><div class="line">│ └── fileTransform.js</div><div class="line">├── paths.js</div><div class="line">├── polyfills.js</div><div class="line">├── webpack.config.dev.js // 开发环境配置</div><div class="line">├── webpack.config.prod.js // 生产环境配置</div><div class="line">└── webpackDevServer.config.js</div></pre></td></tr></table></figure><p>CRA 与其他脚手架不同的另一个地方，就是可以通过升级其中的 react-scripts 包来升级 CRA 的特性。比如用老版本 CRA 创建了一个项目，这个项目不具备 PWA 功能，但只要项目升级了 react-scripts 包的版本就可以具备 PWA 的功能，项目本身的代码不需要做任何修改。</p><p>但如果我们使用了 eject 命令，就再也享受不到 CRA 升级带来的好处了，因为 react-scripts 已经是以文件的形式存在于你的项目，而不是以包的形式，所以无法对其升级。</p><h2 id="替换-react-scripts-包"><a href="#替换-react-scripts-包" class="headerlink" title="替换 react-scripts 包"></a>替换 react-scripts 包</h2><p>react-scripts 是 CRA 的一个核心包，一些脚本和工具的默认配置都集成在里面，使用 CRA 创建项目默认就是使用这个包，但是 CRA 还提供了另外一种方式来创建 CRA 项目，即使用自定义 scripts 包的方式。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"># 默认方式</div><div class="line">$ create-react-app foo</div><div class="line"></div><div class="line"># 自定义 scripts 包方式</div><div class="line">$ create-react-app foo --scripts-version 自定义包</div></pre></td></tr></table></figure><p>自定义包可以是下面几种形式：</p><ul><li>react-scripts 包的版本号，比如 0.8.2，这种形式可以用来安装低版本的 react-scripts 包。</li><li>一个已经发布到 npm 仓库上的包的名字，比如 your-scripts，里面包含了修改过的 webpack 配置。</li><li>一个 tgz 格式的压缩文件，比如/your/local/scripts.tgz，通常是未发布到 npm 仓库的自定义 scripts 包，可以用 npm pack 命令生成。<br>这种方式相对于之前的 eject 是一种更灵活地修改 webpack 配置的方式，而且可以做到和 CRA 一样，通过升级 scrips 包来升级项目特性。</li></ul><p>自定义 scripts 包的结构可以参照 react-scripts 包的结构，只要修改对应的 webpack 配置文件，并安装上所需的 webpack loader 或 plugin 包就可以了。</p><h2 id="使用-react-app-rewired"><a href="#使用-react-app-rewired" class="headerlink" title="使用 react-app-rewired"></a>使用 react-app-rewired</h2><p>虽然有这两种方式可以扩展 webpack 配置，但是很多开发者还是觉得太麻烦，有没有一种方式可以既不用 eject 项目又不用创建自己的 scripts 包呢？答案是肯定的，react-app-rewired 是 react 社区开源的一个修改 CRA 配置的工具。</p><p>在 CRA 创建的项目中安装了 react-app-rewired 后，可以通过创建一个 config-overrides.js 文件来对 webpack 配置进行扩展。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">/* config-overrides.js */</div><div class="line"></div><div class="line">module.exports = function override(config, env) {</div><div class="line"> //do stuff with the webpack config...</div><div class="line"> return config;</div><div class="line">}</div></pre></td></tr></table></figure><p>override 方法的第一个参数 config 就是 webpack 的配置，在这个方法里面，我们可以对 config 进行扩展，比如安装其他 loader 或者 plugins，最后再将这个 config 对象返回回去。</p><p>最后再修改 package.json 中的脚本命令，修改内容请见<a href="https://zhaozhiming.github.io/blog/2018/01/08/create-react-app-override-webpack-config/" target="_blank" rel="external">这里</a>。</p><h2 id="scripts-包-override-组合"><a href="#scripts-包-override-组合" class="headerlink" title="scripts 包 + override 组合"></a>scripts 包 + override 组合</h2><p>虽然 react-app-rewired 的方式已经可以很方便地修改 webpack 的配置了，但其实我们也可以在自定义的 script 包中实现类似的功能。</p><p>在 react-app-rewired 的源码中可以看到它核心的包也叫 react-app-rewired，里面重新覆盖了 react-scripts 中的几个脚本文件，包括 build.js、start.js 和 test.js。</p><p>具体过程是怎样的呢？以 build.js 为例：</p><ul><li>先获取 webpack 的基本配置，然后再调用 config-overrides.js（就是在根目录中新增的那个文件）中的 override 方法，将原先的 webpack 对象作为参数传入，</li><li>再取得经过修改后的 webpack 配置对象</li><li>最后再调用 react-scripts 中的 build.js 脚本，传入修改后的 webpack 对象来执行命令，<br>具体源码：</li></ul><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">const overrides = require('../config-overrides');</div><div class="line">const webpackConfigPath = paths.scriptVersion + "/config/webpack.config.prod";</div><div class="line"></div><div class="line">// load original config</div><div class="line">const webpackConfig = require(webpackConfigPath);</div><div class="line">// override config in memory</div><div class="line">require.cache[require.resolve(webpackConfigPath)].exports =</div><div class="line"> overrides.webpack(webpackConfig, process.env.NODE_ENV);</div><div class="line">// run original script</div><div class="line">require(paths.scriptVersion + '/scripts/build');</div></pre></td></tr></table></figure><p>知道了原理之后，我们也可以修改自定义 scripts 包的脚本文件，还是以 build.js 为例，在获取基本 webpack 配置对象和使用 webpack 对象之间加入以下代码：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">// override config</div><div class="line">const override = require(paths.configOverrides);</div><div class="line">const overrideFn = override || ((config, env) => config);</div><div class="line">const overrideConfig = overrideFn(config, process.env.NODE_ENV);</div></pre></td></tr></table></figure><p>overrideConfig 就是修改后的 webpack 对象，最后修改调用了 webpack 对象的代码，将原来的 webpack 对象替换成修改后的 webpack 对象。</p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>CRA 是一个非常棒的 React 脚手架工具，但你如果不满足于它的 webpack 默认配置，你可以通过上述几种方式来扩展自己项目的 webpack 配置，这几种方式各有优缺点，可以结合具体的使用场景来选择合适自己的方式。</p><p>本文章转自<a href="https://zhaozhiming.github.io/blog/2018/01/08/create-react-app-override-webpack-config/" target="_blank" rel="external">此处</a></p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/08/03/el-input监听事件失效/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="照彦"><meta itemprop="description" content=""><meta itemprop="image" content="/uploads/jh.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="照彦のblog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2017/08/03/el-input监听事件失效/" itemprop="url">el-input监听事件失效</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-08-03T00:00:00+08:00">2017-08-03</time></span> <span class="post-category"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/javascript/" itemprop="url" rel="index"><span itemprop="name">javascript</span></a></span> ， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/javascript/element/" itemprop="url" rel="index"><span itemprop="name">element</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><p> 在使用vue的时候使用element-ui的el-input组件的时候监听不了keyup.enter回车事件，查了一下原因应该是element-ui自身封装了一层input标签之后，把原来的事件隐藏了，所以如下代码运行是无响应的：<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><el-input v-model="input" @keyup.enter="add" placeholder="请输入内容" ></el-input></div></pre></td></tr></table></figure><p></p><p> 在@keyup.enter后加.native即可解决 如下所示<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><el-input v-model="input" @keyup.enter.native="add" placeholder="请输入内容" ></el-input></div></pre></td></tr></table></figure><p></p><p> 实验了之后发现不仅仅是keyup.enter回车事件，其他事件也被隐藏，需要在其后加.native</p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/06/22/call()和apply()/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="照彦"><meta itemprop="description" content=""><meta itemprop="image" content="/uploads/jh.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="照彦のblog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2017/06/22/call()和apply()/" itemprop="url">call()和apply()使用</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-06-22T00:00:00+08:00">2017-06-22</time></span> <span class="post-category"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/javascript/" itemprop="url" rel="index"><span itemprop="name">javascript</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><p>看到apply()和call()的时候感觉两者很像，所以整理一下用法顺便记录两者的区别</p><h1 id="apply"><a href="#apply" class="headerlink" title="apply()"></a>apply()</h1><p> Function.apply(obj,args)</p><h2 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h2><p>obj<br>在 Function 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。<br>args<br>一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 Function 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。</p><h1 id="call"><a href="#call" class="headerlink" title="call()"></a>call()</h1><p>Function.call(obj[, arg1[, arg2[, …]]])</p><h2 id="参数-1"><a href="#参数-1" class="headerlink" title="参数"></a>参数</h2><p>obj<br>在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。<br>arg1, arg2, …<br>指定的参数列表。<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line">function Product(name, price) {</div><div class="line"> this.name = name;</div><div class="line"> this.price = price;</div><div class="line">}</div><div class="line"></div><div class="line">function Food(name, price,category) {</div><div class="line"> Product.apply(this,arguments); </div><div class="line"> this.category = category;</div><div class="line">}</div><div class="line">var student = new Food("qian",21,"一年级");</div><div class="line">console.log(student);</div><div class="line">//Food {name: "qian", price: 21, category: "一年级"}</div><div class="line"></div><div class="line">function good(name, price,category) {</div><div class="line"> Product.call(this,name,price); </div><div class="line"> this.category = category;</div><div class="line">}</div><div class="line"></div><div class="line">var li = new good("jingxin",21,"一年级");</div><div class="line">console.log(li);</div><div class="line">//good {name: "jingxin", price: 21, category: "一年级"}</div></pre></td></tr></table></figure><p></p><p>在一个子构造函数中，你可以通过调用父构造函数的apply/call方法来实现继承，Product.apply(this,arguments); Product.call(this,name,price); 实际他们的作用就是将Product函数中的name,price属性继承到了自身函数中。</p><p>两者的区别很明显一个参数的形式是数组，一个指定的参数列表。</p><h1 id="apply-的其他用法"><a href="#apply-的其他用法" class="headerlink" title="apply()的其他用法"></a>apply()的其他用法</h1><p>可以将一个数组默认的转换为一个参数列表[param1,param2,param3] 转换为 param1,param2,param3</p><p>Math.max() 方法可返回指定的数中带有较大的值的那个数。<br>Math.max([param1,param2])是不支持的<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">var a = [1,2,3,4];</div><div class="line">var b = Math.max.apply(null,a);</div><div class="line">// b 4</div></pre></td></tr></table></figure><p></p><p>同理的还有Math.min()</p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/06/07/eslint配置参数/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="照彦"><meta itemprop="description" content=""><meta itemprop="image" content="/uploads/jh.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="照彦のblog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2017/06/07/eslint配置参数/" itemprop="url">ESLint配置参数</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-06-07T00:00:00+08:00">2017-06-07</time></span> <span class="post-category"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/javascript/" itemprop="url" rel="index"><span itemprop="name">javascript</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><p>ESLint 主要有以下特点：<br>默认规则包含所有 JSLint、JSHint 中存在的规则，易迁移；<br>规则可配置性高：可设置「警告」、「错误」两个 error 等级，或者直接禁用；<br>包含代码风格检测的规则（可以丢掉 JSCS 了）；<br>支持插件扩展、自定义规则。</p><p>配置<br>可以通过以下三种方式配置 ESLint:<br>使用 .eslintrc 文件（支持 JSON 和 YAML 两种语法）；<br>在 package.json 中添加 eslintConfig 配置块；<br>直接在代码文件中定义。</p><p>以下是.eslintrc 文件示例和解释：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div><div class="line">133</div><div class="line">134</div><div class="line">135</div><div class="line">136</div><div class="line">137</div><div class="line">138</div><div class="line">139</div><div class="line">140</div><div class="line">141</div><div class="line">142</div><div class="line">143</div><div class="line">144</div><div class="line">145</div><div class="line">146</div><div class="line">147</div><div class="line">148</div><div class="line">149</div><div class="line">150</div><div class="line">151</div><div class="line">152</div><div class="line">153</div><div class="line">154</div><div class="line">155</div><div class="line">156</div><div class="line">157</div><div class="line">158</div><div class="line">159</div><div class="line">160</div><div class="line">161</div><div class="line">162</div><div class="line">163</div><div class="line">164</div><div class="line">165</div><div class="line">166</div><div class="line">167</div><div class="line">168</div><div class="line">169</div><div class="line">170</div><div class="line">171</div><div class="line">172</div><div class="line">173</div><div class="line">174</div></pre></td><td class="code"><pre><div class="line">"no-alert": 0,//禁止使用alert confirm prompt</div><div class="line">"no-array-constructor": 2,//禁止使用数组构造器</div><div class="line">"no-bitwise": 0,//禁止使用按位运算符</div><div class="line">"no-caller": 1,//禁止使用arguments.caller或arguments.callee</div><div class="line">"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名</div><div class="line">"no-class-assign": 2,//禁止给类赋值</div><div class="line">"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句</div><div class="line">"no-console": 2,//禁止使用console</div><div class="line">"no-const-assign": 2,//禁止修改const声明的变量</div><div class="line">"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)</div><div class="line">"no-continue": 0,//禁止使用continue</div><div class="line">"no-control-regex": 2,//禁止在正则表达式中使用控制字符</div><div class="line">"no-debugger": 2,//禁止使用debugger</div><div class="line">"no-delete-var": 2,//不能对var声明的变量使用delete操作符</div><div class="line">"no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/</div><div class="line">"no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}</div><div class="line">"no-dupe-args": 2,//函数参数不能重复</div><div class="line">"no-duplicate-case": 2,//switch中的case标签不能重复</div><div class="line">"no-else-return": 2,//如果if语句里面有return,后面不能跟else语句</div><div class="line">"no-empty": 2,//块语句中的内容不能为空</div><div class="line">"no-empty-character-class": 2,//正则表达式中的[]内容不能为空</div><div class="line">"no-empty-label": 2,//禁止使用空label</div><div class="line">"no-eq-null": 2,//禁止对null使用==或!=运算符</div><div class="line">"no-eval": 1,//禁止使用eval</div><div class="line">"no-ex-assign": 2,//禁止给catch语句中的异常参数赋值</div><div class="line">"no-extend-native": 2,//禁止扩展native对象</div><div class="line">"no-extra-bind": 2,//禁止不必要的函数绑定</div><div class="line">"no-extra-boolean-cast": 2,//禁止不必要的bool转换</div><div class="line">"no-extra-parens": 2,//禁止非必要的括号</div><div class="line">"no-extra-semi": 2,//禁止多余的冒号</div><div class="line">"no-fallthrough": 1,//禁止switch穿透</div><div class="line">"no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3.</div><div class="line">"no-func-assign": 2,//禁止重复的函数声明</div><div class="line">"no-implicit-coercion": 1,//禁止隐式转换</div><div class="line">"no-implied-eval": 2,//禁止使用隐式eval</div><div class="line">"no-inline-comments": 0,//禁止行内备注</div><div class="line">"no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明（变量或函数）</div><div class="line">"no-invalid-regexp": 2,//禁止无效的正则表达式</div><div class="line">"no-invalid-this": 2,//禁止无效的this，只能用在构造器，类，对象字面量</div><div class="line">"no-irregular-whitespace": 2,//不能有不规则的空格</div><div class="line">"no-iterator": 2,//禁止使用__iterator__ 属性</div><div class="line">"no-label-var": 2,//label名不能与var声明的变量名相同</div><div class="line">"no-labels": 2,//禁止标签声明</div><div class="line">"no-lone-blocks": 2,//禁止不必要的嵌套块</div><div class="line">"no-lonely-if": 2,//禁止else语句内只有if语句</div><div class="line">"no-loop-func": 1,//禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）</div><div class="line">"no-mixed-requires": [0, false],//声明时不能混用声明类型</div><div class="line">"no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格</div><div class="line">"linebreak-style": [0, "windows"],//换行风格</div><div class="line">"no-multi-spaces": 1,//不能用多余的空格</div><div class="line">"no-multi-str": 2,//字符串不能用\换行</div><div class="line">"no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行</div><div class="line">"no-native-reassign": 2,//不能重写native对象</div><div class="line">"no-negated-in-lhs": 2,//in 操作符的左边不能有!</div><div class="line">"no-nested-ternary": 0,//禁止使用嵌套的三目运算</div><div class="line">"no-new": 1,//禁止在使用new构造一个实例后不赋值</div><div class="line">"no-new-func": 1,//禁止使用new Function</div><div class="line">"no-new-object": 2,//禁止使用new Object()</div><div class="line">"no-new-require": 2,//禁止使用new require</div><div class="line">"no-new-wrappers": 2,//禁止使用new创建包装实例，new String new Boolean new Number</div><div class="line">"no-obj-calls": 2,//不能调用内置的全局对象，比如Math() JSON()</div><div class="line">"no-octal": 2,//禁止使用八进制数字</div><div class="line">"no-octal-escape": 2,//禁止使用八进制转义序列</div><div class="line">"no-param-reassign": 2,//禁止给参数重新赋值</div><div class="line">"no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接</div><div class="line">"no-plusplus": 0,//禁止使用++，--</div><div class="line">"no-process-env": 0,//禁止使用process.env</div><div class="line">"no-process-exit": 0,//禁止使用process.exit()</div><div class="line">"no-proto": 2,//禁止使用__proto__属性</div><div class="line">"no-redeclare": 2,//禁止重复声明变量</div><div class="line">"no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/</div><div class="line">"no-restricted-modules": 0,//如果禁用了指定模块，使用就会报错</div><div class="line">"no-return-assign": 1,//return 语句中不能有赋值表达式</div><div class="line">"no-script-url": 0,//禁止使用javascript:void(0)</div><div class="line">"no-self-compare": 2,//不能比较自身</div><div class="line">"no-sequences": 0,//禁止使用逗号运算符</div><div class="line">"no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名</div><div class="line">"no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用</div><div class="line">"no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格</div><div class="line">"no-sparse-arrays": 2,//禁止稀疏数组， [1,,2]</div><div class="line">"no-sync": 0,//nodejs 禁止同步方法</div><div class="line">"no-ternary": 0,//禁止使用三目运算符</div><div class="line">"no-trailing-spaces": 1,//一行结束后面不要有空格</div><div class="line">"no-this-before-super": 0,//在调用super()之前不能使用this或super</div><div class="line">"no-throw-literal": 2,//禁止抛出字面量错误 throw "error";</div><div class="line">"no-undef": 1,//不能有未定义的变量</div><div class="line">"no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined</div><div class="line">"no-undefined": 2,//不能使用undefined</div><div class="line">"no-unexpected-multiline": 2,//避免多行表达式</div><div class="line">"no-underscore-dangle": 1,//标识符不能以_开头或结尾</div><div class="line">"no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;</div><div class="line">"no-unreachable": 2,//不能有无法执行的代码</div><div class="line">"no-unused-expressions": 2,//禁止无用的表达式</div><div class="line">"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数</div><div class="line">"no-use-before-define": 2,//未定义前不能使用</div><div class="line">"no-useless-call": 2,//禁止不必要的call和apply</div><div class="line">"no-void": 2,//禁用void操作符</div><div class="line">"no-var": 0,//禁用var，用let和const代替</div><div class="line">"no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注</div><div class="line">"no-with": 2,//禁用with</div><div class="line"></div><div class="line">"array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格</div><div class="line">"arrow-parens": 0,//箭头函数用小括号括起来</div><div class="line">"arrow-spacing": 0,//=>的前/后括号</div><div class="line">"accessor-pairs": 0,//在对象中使用getter/setter</div><div class="line">"block-scoped-var": 0,//块语句中使用var</div><div class="line">"brace-style": [1, "1tbs"],//大括号风格</div><div class="line">"callback-return": 1,//避免多次调用回调什么的</div><div class="line">"camelcase": 2,//强制驼峰法命名</div><div class="line">"comma-dangle": [2, "never"],//对象字面量项尾不能有逗号</div><div class="line">"comma-spacing": 0,//逗号前后的空格</div><div class="line">"comma-style": [2, "last"],//逗号风格，换行时在行首还是行尾</div><div class="line">"complexity": [0, 11],//循环复杂度</div><div class="line">"computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的</div><div class="line">"consistent-return": 0,//return 后面是否允许省略</div><div class="line">"consistent-this": [2, "that"],//this别名</div><div class="line">"constructor-super": 0,//非派生类不能调用super，派生类必须调用super</div><div class="line">"curly": [2, "all"],//必须使用 if(){} 中的{}</div><div class="line">"default-case": 2,//switch语句最后必须有default</div><div class="line">"dot-location": 0,//对象访问符的位置，换行的时候在行首还是行尾</div><div class="line">"dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号</div><div class="line">"eol-last": 0,//文件以单一的换行符结束</div><div class="line">"eqeqeq": 2,//必须使用全等</div><div class="line">"func-names": 0,//函数表达式必须有名字</div><div class="line">"func-style": [0, "declaration"],//函数风格，规定只能使用函数声明/函数表达式</div><div class="line">"generator-star-spacing": 0,//生成器函数*的前后空格</div><div class="line">"guard-for-in": 0,//for in循环要用if语句过滤</div><div class="line">"handle-callback-err": 0,//nodejs 处理错误</div><div class="line">"id-length": 0,//变量名长度</div><div class="line">"indent": [2, 4],//缩进风格</div><div class="line">"init-declarations": 0,//声明时必须赋初值</div><div class="line">"key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格</div><div class="line">"lines-around-comment": 0,//行前/行后备注</div><div class="line">"max-depth": [0, 4],//嵌套块深度</div><div class="line">"max-len": [0, 80, 4],//字符串最大长度</div><div class="line">"max-nested-callbacks": [0, 2],//回调嵌套深度</div><div class="line">"max-params": [0, 3],//函数最多只能有3个参数</div><div class="line">"max-statements": [0, 10],//函数内最多有几个声明</div><div class="line">"new-cap": 2,//函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用</div><div class="line">"new-parens": 2,//new时必须加小括号</div><div class="line">"newline-after-var": 2,//变量声明后是否需要空一行</div><div class="line">"object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格</div><div class="line">"object-shorthand": 0,//强制对象字面量缩写语法</div><div class="line">"one-var": 1,//连续声明</div><div class="line">"operator-assignment": [0, "always"],//赋值运算符 += -=什么的</div><div class="line">"operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首</div><div class="line">"padded-blocks": 0,//块语句内行首行尾是否要空行</div><div class="line">"prefer-const": 0,//首选const</div><div class="line">"prefer-spread": 0,//首选展开运算</div><div class="line">"prefer-reflect": 0,//首选Reflect的方法</div><div class="line">"quotes": [1, "single"],//引号类型 `` "" ''</div><div class="line">"quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号</div><div class="line">"radix": 2,//parseInt必须指定第二个参数</div><div class="line">"id-match": 0,//命名检测</div><div class="line">"require-yield": 0,//生成器函数必须有yield</div><div class="line">"semi": [2, "always"],//语句强制分号结尾</div><div class="line">"semi-spacing": [0, {"before": false, "after": true}],//分号前后空格</div><div class="line">"sort-vars": 0,//变量声明时排序</div><div class="line">"space-after-keywords": [0, "always"],//关键字后面是否要空一格</div><div class="line">"space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格</div><div class="line">"space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格</div><div class="line">"space-in-parens": [0, "never"],//小括号里面要不要有空格</div><div class="line">"space-infix-ops": 0,//中缀操作符周围要不要有空格</div><div class="line">"space-return-throw-case": 2,//return throw case后面要不要加空格</div><div class="line">"space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格</div><div class="line">"spaced-comment": 0,//注释风格要不要有空格什么的</div><div class="line">"strict": 2,//使用严格模式</div><div class="line">"use-isnan": 2,//禁止比较时使用NaN，只能用isNaN()</div><div class="line">"valid-jsdoc": 0,//jsdoc规则</div><div class="line">"valid-typeof": 2,//必须使用合法的typeof的值</div><div class="line">"vars-on-top": 2,//var必须放在作用域顶部</div><div class="line">"wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格</div><div class="line">"wrap-regex": 0,//正则表达式字面量用小括号包起来</div><div class="line">"yoda": [2, "never"]//禁止尤达条件</div></pre></td></tr></table></figure></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/04/04/数组合并/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="照彦"><meta itemprop="description" content=""><meta itemprop="image" content="/uploads/jh.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="照彦のblog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2017/04/04/数组合并/" itemprop="url">数组合并</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-04-04T00:00:00+08:00">2017-04-04</time></span> <span class="post-category"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/javascript/" itemprop="url" rel="index"><span itemprop="name">javascript</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><h1 id="第一种"><a href="#第一种" class="headerlink" title="第一种"></a>第一种</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">var a = [1,2], b = [3,4], c = a.concat(b); </div><div class="line">// c [1,2,3,4]</div></pre></td></tr></table></figure><h1 id="第二种"><a href="#第二种" class="headerlink" title="第二种"></a>第二种</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">var a = [4,5,6], </div><div class="line">var b = [7,8,9]; </div><div class="line">Array.prototype.push.apply(a, b); </div><div class="line">// a [4, 5, 6, 7, 8, 9]</div></pre></td></tr></table></figure></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/03/11/javascirpt defineProperty/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="照彦"><meta itemprop="description" content=""><meta itemprop="image" content="/uploads/jh.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="照彦のblog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2017/03/11/javascirpt defineProperty/" itemprop="url">Object.defineProperty()</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-03-11T00:00:00+08:00">2017-03-11</time></span> <span class="post-category"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/javascript/" itemprop="url" rel="index"><span itemprop="name">javascript</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><h1 id="学习记录"><a href="#学习记录" class="headerlink" title="学习记录"></a>学习记录</h1><h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2><p>Object.defineProperty(obj, prop, descriptor)</p><h2 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h2><p>obj<br>需要被操作的目标对象<br>prop<br>目标对象需要定义或修改的属性的名称。<br>descriptor<br>将被定义或修改的属性的描述符。</p><p>其中descriptor包括数据描述符和存取描述符</p><p>数据描述符和存取描述符均具有以下可选键值：</p><p>configurable<br>当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。<br>enumerable<br>当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false。<br>数据描述符同时具有以下可选键值：</p><p>value<br>该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。<br>writable<br>当且仅当该属性的 writable 为 true 时，该属性才能被赋值运算符改变。默认为 false。<br>存取描述符同时具有以下可选键值：</p><p>get<br>一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。<br>set<br>一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。<br>以上摘自MDN</p><h2 id="实践"><a href="#实践" class="headerlink" title="实践"></a>实践</h2><h3 id="创建属性"><a href="#创建属性" class="headerlink" title="创建属性"></a>创建属性</h3><p>如果对象中不存在指定的属性，Object.defineProperty()就创建这个属性。当描述符中省略某些字段时，这些字段将使用它们的默认值。拥有布尔值的字段的默认值都是false。value，get和set字段的默认值为undefined。定义属性时如果没有get/set/value/writable，那它被归类为数据描述符。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">const log = console.log.bind(console)</div><div class="line">function foo(){}</div><div class="line">Object.defineProperty(foo.prototype,'z',{get:function(){return 1}})</div><div class="line">var obj = new foo()</div><div class="line">log(obj.z) //1 obj 无z属性 根据原型链查找foo.prototype的z属性，因为有get方法所以return 1</div><div class="line">obj.z = 10 修改obj.z</div><div class="line">log(obj.z) //1 </div><div class="line">因为obj.z虽然无z属性，根据原型链查找的时候 发现有对应的z的get方法或者set方法 </div><div class="line">尝试赋值的时候是会通过get和set方法来走的。不会变成给当前obj添加一个z属性。</div><div class="line">Object.defineProperty(obj,'z',{value:100,configurable:true,writable:true})</div><div class="line">log(obj.z) //100 通过Object.defineProperty方式来给obj添加z属性</div><div class="line">obj.z = 200 </div><div class="line">log(obj.z) //200 200是因为writable:true 可以修改属性值</div></pre></td></tr></table></figure><h3 id="查找属性标签"><a href="#查找属性标签" class="headerlink" title="查找属性标签"></a>查找属性标签</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">Object.getOwnPropertyDescriptor({a:true},'a')</div><div class="line">// {value: true, writable: true, enumerable: true, configurable: true} </div><div class="line"></div><div class="line">Object.getOwnPropertyDescriptor({b:true},'a') //undefined 对象里无a属性</div></pre></td></tr></table></figure><h3 id="顺便上一张图"><a href="#顺便上一张图" class="headerlink" title="顺便上一张图"></a>顺便上一张图</h3><p><img src="/uploads/shuxing.png"><br>摘自imooc</p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/03/10/find/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="照彦"><meta itemprop="description" content=""><meta itemprop="image" content="/uploads/jh.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="照彦のblog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2017/03/10/find/" itemprop="url">ES6关于数组实例的一些方法</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-03-10T00:00:00+08:00">2017-03-10</time></span> <span class="post-category"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/javascript/" itemprop="url" rel="index"><span itemprop="name">javascript</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><h1 id="Array-from"><a href="#Array-from" class="headerlink" title="Array.from()"></a>Array.from()</h1><h2 id="将两类对象转为真正的数组"><a href="#将两类对象转为真正的数组" class="headerlink" title="将两类对象转为真正的数组"></a>将两类对象转为真正的数组</h2><p>Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。</p><p>一个转换类数组对象到数组的一个示例：<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">let list = document.querySelectorAll('ul.fancy li');</div><div class="line"> </div><div class="line">Array.from(list).forEach(function (li) {</div><div class="line"> document.write(li);</div><div class="line">});</div></pre></td></tr></table></figure><p></p><p>上面代码中，querySelectorAll方法返回的是一个类似数组的对象，只有将这个对象转为真正的数组，才能使用forEach方法。<br>任何有length属性的对象，都可以通过Array.from方法转为数组。<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">let array = Array.from({ 0: "a", 1: "b", 2: "c", length: 3 });</div><div class="line">document.write(array); // [ "a", "b" , "c" ]</div></pre></td></tr></table></figure><p></p><p>Array.from()还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理。<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">let array = [0,1,2,3,4];</div><div class="line">let arrNew = Array.from(array, x => x * x);</div><div class="line">console.log(arrNew);</div><div class="line">// 等同于</div><div class="line">let arrNew = Array.from(array).map(x => x * x);</div></pre></td></tr></table></figure><p></p><h1 id="Array-of"><a href="#Array-of" class="headerlink" title="Array.of()"></a>Array.of()</h1><h2 id="将值转换为数组"><a href="#将值转换为数组" class="headerlink" title="将值转换为数组"></a>将值转换为数组</h2><p>Array.of方法用于将一组值，转换为数组。<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">Array.of(3, 11, 8) // [3,11,8]</div><div class="line">Array.of(3) // [3]</div><div class="line">Array.of(3).length // 1</div></pre></td></tr></table></figure><p></p><p>这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">Array() // []</div><div class="line">Array(3) // [undefined, undefined, undefined]</div><div class="line">Array(3,11,8) // [3, 11, 8]</div></pre></td></tr></table></figure><p></p><p>上面代码说明，只有当参数个数不少于2个，Array()才会返回由参数组成的新数组。</p><h1 id="find-和findIndex"><a href="#find-和findIndex" class="headerlink" title="find()和findIndex()"></a>find()和findIndex()</h1><h2 id="找出第一个符合条件的数组成员和位置"><a href="#找出第一个符合条件的数组成员和位置" class="headerlink" title="找出第一个符合条件的数组成员和位置"></a>找出第一个符合条件的数组成员和位置</h2><h3 id="find"><a href="#find" class="headerlink" title="find()"></a>find()</h3><p>数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">let array = [1, 4, -5, 10].find((n) => n < 0);</div><div class="line">document.write("array:", array);</div></pre></td></tr></table></figure><p></p><p>上面代码找出数组中第一个小于0的成员。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">let array = [1, 5, 10, 15].find(function(value, index, arr) {</div><div class="line"> return value > 9;</div><div class="line">}) </div><div class="line">document.write(array); // 10</div></pre></td></tr></table></figure><p>上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。</p><h3 id="findIndex"><a href="#findIndex" class="headerlink" title="findIndex()"></a>findIndex()</h3><p>数组实例的findIndex方法，用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">let index = [1, 5, 10, 15].findIndex(function(value, index, arr) {</div><div class="line"> return value > 9;</div><div class="line">}) </div><div class="line">document.write(index); // 2</div></pre></td></tr></table></figure><p></p><p>这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。</p><p>另外，这两个方法都可以发现NaN，弥补了数组的IndexOf方法的不足。<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">[NaN].indexOf(NaN)</div><div class="line">// -1</div><div class="line"> </div><div class="line">[NaN].findIndex(y => Object.is(NaN, y))</div><div class="line">// 0</div></pre></td></tr></table></figure><p></p><p>上面代码中，indexOf方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到。</p><h1 id="fill"><a href="#fill" class="headerlink" title="fill()"></a>fill()</h1><p>fill()使用给定值，填充一个数组。<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">let arr = ['a', 'b', 'c'].fill(7)</div><div class="line">document.write(arr); // [7, 7, 7]</div><div class="line"> </div><div class="line">let newArr = new Array(3).fill(7)</div><div class="line">document.write(newArr); // [7, 7, 7]</div></pre></td></tr></table></figure><p></p><p>上面代码表明，fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。</p><p>fill()还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">let newArr = ['a', 'b', 'c'].fill(7, 1, 2)</div><div class="line">document.write(newArr); // ['a', 7, 'c']</div></pre></td></tr></table></figure><p></p><h1 id="三个新的方法"><a href="#三个新的方法" class="headerlink" title="三个新的方法"></a>三个新的方法</h1><p>ES6提供三个新的方法：</p><p>·entries()<br>·keys()<br>·values()<br>用于遍历数组。它们都返回一个遍历器，可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">for (let index of ['a', 'b'].keys()) {</div><div class="line"> document.write(index);</div><div class="line">}</div><div class="line">// 0</div><div class="line">// 1</div><div class="line"> </div><div class="line">for (let elem of ['a', 'b'].values()) {</div><div class="line"> document.write(elem);</div><div class="line">}</div><div class="line">// 'a'</div><div class="line">// 'b'</div><div class="line"> </div><div class="line">for (let [index, elem] of ['a', 'b'].entries()) {</div><div class="line"> document.write(index, elem);</div><div class="line">}</div><div class="line">// 0 "a"</div><div class="line">// 1 "b"</div></pre></td></tr></table></figure><p></p></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/02/15/String()与 .toString()的区别/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="照彦"><meta itemprop="description" content=""><meta itemprop="image" content="/uploads/jh.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="照彦のblog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> <a class="post-title-link" href="/2017/02/15/String()与 .toString()的区别/" itemprop="url">String()与 .toString()的区别</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-02-15T00:00:00+08:00">2017-02-15</time></span> <span class="post-category"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/javascript/" itemprop="url" rel="index"><span itemprop="name">javascript</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><p>String()与 .toString()都是可以转换为字符串类型，但是两者还是有区别的</p><h1 id="toString-可以将所有的的数据都转换为字符串，但是要排除null-和-undefined，-toString-括号中的可以写一个数字，代表进制，对应进制字符串"><a href="#toString-可以将所有的的数据都转换为字符串，但是要排除null-和-undefined，-toString-括号中的可以写一个数字，代表进制，对应进制字符串" class="headerlink" title=".toString()可以将所有的的数据都转换为字符串，但是要排除null 和 undefined，.toString() 括号中的可以写一个数字，代表进制，对应进制字符串"></a>.toString()可以将所有的的数据都转换为字符串，但是要排除null 和 undefined，.toString() 括号中的可以写一个数字，代表进制，对应进制字符串</h1><p>二进制：.toString(2);</p><p>八进制：.toString(8);</p><p>十进制：.toString(10);</p><p>十六进制：.toString(16);<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">var str = false.toString();</div><div class="line">console.log(str, typeof str);</div><div class="line">// false，string</div><div class="line"></div><div class="line">var str = null.toString();</div><div class="line">console.log(str, typeof str);</div><div class="line">// 报错</div><div class="line">var str = undefined.toString();</div><div class="line">console.log(str, typeof str);</div><div class="line">// 报错</div></pre></td></tr></table></figure><p></p><h1 id="String-可以将null和undefined转换为字符串，但是没法转进制字符串"><a href="#String-可以将null和undefined转换为字符串，但是没法转进制字符串" class="headerlink" title="String()可以将null和undefined转换为字符串，但是没法转进制字符串"></a>String()可以将null和undefined转换为字符串，但是没法转进制字符串</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">var str = String(null);</div><div class="line">console.log(str, typeof str);</div><div class="line">// null string</div><div class="line"></div><div class="line">var str = String(undefined);</div><div class="line">console.log(str, typeof str);</div><div class="line">// undefined string</div></pre></td></tr></table></figure></div><footer class="post-footer"><div class="post-eof"></div></footer></div></article></section><nav class="pagination"> <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right"></i></a></nav></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span><span class="sidebar-toggle-line sidebar-toggle-line-middle"></span><span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div class="sidebar-inner"><section class="site-overview sidebar-panel sidebar-panel-active"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"> <img class="site-author-image" itemprop="image" src="/uploads/jh.png" alt="照彦"><p class="site-author-name" itemprop="name">照彦</p><p class="site-description motion-element" itemprop="description">这里是懒人的小屋</p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"> <a href="/archives"><span class="site-state-item-count">19</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"> <a href="/categories/index.html"><span class="site-state-item-count">10</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"> <a href="/tags/index.html"><span class="site-state-item-count">10</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://github.com/LetHergo" target="_blank" title="GitHub"><i class="fa fa-fw fa-github"></i> GitHub</a></span><span class="links-of-author-item"><a href="https://www.zhihu.com/people/newlethergo" target="_blank" title="知乎"><i class="fa fa-fw fa-globe"></i> 知乎</a></span></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div> <a href="http://beian.miit.gov.cn">粤ICP备16123805号-2</a></div><div class="copyright"> © 2016 - <span itemprop="copyrightYear">2019</span><span class="with-love"><i class="fa fa-heart"></i></span> <span class="author" itemprop="copyrightHolder">照彦</span></div><div class="powered-by"> 由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动</div><div class="theme-info"> 主题 - <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script><script type="text/javascript" src="/js/src/utils.js?v=5.1.2"></script><script type="text/javascript" src="/js/src/motion.js?v=5.1.2"></script><script type="text/javascript" src="/js/src/affix.js?v=5.1.2"></script><script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.2"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.2"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.1.2"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.2"></script></body></html>