-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
145 lines (72 loc) · 37.2 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>老头的博客</title>
<link href="http://suplyang.xyz/atom.xml" rel="self"/>
<link href="http://suplyang.xyz/"/>
<updated>2020-11-17T12:19:02.685Z</updated>
<id>http://suplyang.xyz/</id>
<author>
<name>Geezer</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>Javascript基础知识巩固</title>
<link href="http://suplyang.xyz/2020/11/09/jsbase/"/>
<id>http://suplyang.xyz/2020/11/09/jsbase/</id>
<published>2020-11-09T02:13:12.984Z</published>
<updated>2020-11-17T12:19:02.685Z</updated>
<content type="html"><![CDATA[<h2 id="1-类型"><a href="#1-类型" class="headerlink" title="1.类型"></a>1.类型</h2><p>1.1 基本数据类型（值类型）<br>申明和赋值都会开辟一个新的栈内存位置,重新赋值后不会相互影响</p><pre><code class="js">var a = 100;var b = a;a = 101;console.log(a,b)//101,100</code></pre><p>1.2 引用数据类型</p><p>引用类型主要包括：数组，对象，函数<br> 申明和赋值只会共用一个堆内存的指针,重新赋值后会更改堆内数值</p><pre><code class="js">var a = {age:100;var b = a;b.age = 101;console.log(a.age,b.age)//101,101</code></pre><p>1.3 typeof运算符<br>typeof可区分出:undefined,string,number,boolean</p><pre><code class="js">typeof undefined ;//undefinedtypeof a; //'undefined'typeof(true); //'boolean'typeof '123'; //'string'typeof 123; //'number'typeof NaN; //'number'typeof null; //'object'typeof{}; //'object'typeof[]; //'object'type console.log //'function'</code></pre><p>注：typeof只能区分出值类型的详细类型和函数的详细类型，无法区分对象和数组，都分为对象</p>]]></content>
<summary type="html"><h2 id="1-类型"><a href="#1-类型" class="headerlink" title="1.类型"></a>1.类型</h2><p>1.1 基本数据类型（值类型）<br>申明和赋值都会开辟一个新的栈内存位置,重新赋值后不会相互影响</p>
<pre><co</summary>
</entry>
<entry>
<title>HTML详解(面试篇)</title>
<link href="http://suplyang.xyz/2020/10/31/html/"/>
<id>http://suplyang.xyz/2020/10/31/html/</id>
<published>2020-10-31T09:33:00.076Z</published>
<updated>2020-11-17T12:22:08.141Z</updated>
<content type="html"><![CDATA[<h2 id="你是如何理解-HTML-语义化的？"><a href="#你是如何理解-HTML-语义化的？" class="headerlink" title="你是如何理解 HTML 语义化的？"></a>你是如何理解 HTML 语义化的？</h2><ul><li><p>我们可以理解为：用正确的标签做正确的事情。</p><ul><li>段落用 p 标签，标题用 h 系列标签，边栏用 aside 标签，主要内容用 main 标签。</li></ul></li><li><p>优点：</p><ul><li>增强可读性，对开发者更友好，能较好地呈现网页的内容结构与代码结构，便于团队的开发和维护。有利于 SEO ，可以让搜索引擎爬虫更好地获取到更多有效信息。支持读屏软件，方便其他设备的解析，利于无障碍阅读，提高可访问性。<h2 id="meta-viewport-是做什么用的，怎么写？"><a href="#meta-viewport-是做什么用的，怎么写？" class="headerlink" title="meta viewport 是做什么用的，怎么写？"></a>meta viewport 是做什么用的，怎么写？</h2><pre><code class="html"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"></code></pre></li></ul></li><li><p>name为viewport表示供移动设备使用,content定义了viewport的属性，width表示移动设设备下显示的宽度为设备宽度(device-width)，height表示移动设设备下显示的宽度为设备宽度.user-scalable表示用户缩放能力, no表示不允许，initial-scale表示设备与视口的缩放比率,maximum和minimum分别表示缩放的最大最小值</p><h2 id="H5-是什么？"><a href="#H5-是什么？" class="headerlink" title="H5 是什么？"></a>H5 是什么？</h2></li><li><p>H5是指bai第5代HTML，也指用H5语言制作的一切数字产品。所谓HTML是“超文本标记语言”</p><h2 id="你用过哪些-HTML-5-标签？"><a href="#你用过哪些-HTML-5-标签？" class="headerlink" title="你用过哪些 HTML 5 标签？"></a>你用过哪些 HTML 5 标签？</h2></li><li><p>1、结构标签</p><p>（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；</p><p>（2）article：特殊独立区块，表示这篇页眉中的核心内容；</p><p>（3）aside：标签内容之外与标签内容相关的辅助信息；</p><p>（4）header：某个区块的头部信息/标题；</p><p>（5）hgroup：头部信息/标题的补充内容；</p><p>（6）footer：底部信息；</p><p>（7）nav：导航条部分信息</p><p>（8）figure：独立的单元，例如某个有图片与内容的新闻块。</p><ul><li>2、表单标签</li></ul><p>（1）email：必须输入邮件；</p><p>（2）url：必须输入url地址；</p><p>（3）number：必须输入数值；</p><p>（4）range：必须输入一定范围内的数值；</p><p>（5）Date Pickers：日期选择器；</p><p>a.date：选取日、月、年</p><p>b.month：选取月、年</p><p>c.week：选取周和年</p><p>d.time：选取时间（小时和分钟）</p><p>e.datetime：选取时间、日、月、年（UTC时间）</p><p>f.datetime-local：选取时间、日、月、年（本地时间）</p><p>（6）search：搜索常规的文本域；</p><p>（7）color：颜色</p><ul><li>3、媒体标签</li></ul><p>（1）video：视频</p><p>（2）audio：音频</p><p>（3）embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。</p><ul><li>4、其他功能标签</li></ul><p>（1）mark：标注（像荧光笔做笔记）</p><p>（2）progress：进度条；<progress max="最大进度条的值" value="当前进度条的值"></p><p>（3）time：数据标签，给搜索引擎使用；发布日期<time datetime="2014-12-25T09:00">9：00</time>更新日期<time datetime="2015- 01-23T04:00" pubdate>4:00</time></p><p>（4）ruby和rt：对某一个字进行注释；<ruby><rt>注释内容</rt><rp>浏览器不支持时如何显示</rp></ruby></p><p>（5）wbr：软换行，页面宽度到需要换行时换行；</p><p>（6）canvas：使用JS代码做内容进行图像绘制；</p><p>（7）command：按钮；</p><p>（8）deteils ：展开菜单；</p><p>（9）dateilst：文本域下拉提示；</p><p>（10）keygen:加密；</p></li></ul>]]></content>
<summary type="html"><h2 id="你是如何理解-HTML-语义化的？"><a href="#你是如何理解-HTML-语义化的？" class="headerlink" title="你是如何理解 HTML 语义化的？"></a>你是如何理解 HTML 语义化的？</h2><ul>
<li><p>我</summary>
</entry>
<entry>
<title>2020 JS面试合集 (02)</title>
<link href="http://suplyang.xyz/2020/10/01/js02/"/>
<id>http://suplyang.xyz/2020/10/01/js02/</id>
<published>2020-10-01T03:02:10.186Z</published>
<updated>2020-11-17T12:21:12.563Z</updated>
<content type="html"><![CDATA[<h2 id="13-实现一个模板引擎"><a href="#13-实现一个模板引擎" class="headerlink" title="13.实现一个模板引擎"></a>13.实现一个模板引擎</h2><pre><code class="js">let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';let data = { name: '姓名', age: 18}render(template, data); // 我是姓名，年龄18，性别undefinedfunction render(template,data){ // your code}// 补充代码，使代码可以正确执行// 代码实现function render(template, data) { const reg = /\{\{(\w+)\}\}/; // 模板字符串正则 if (reg.test(template)) { // 判断模板里是否有模板字符串 const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段 template = template.replace(reg, data[name]); // 将第一个模板字符串渲染 return render(template, data); // 递归的渲染并返回渲染后的结构 } return template; // 如果模板没有模板字符串直接返回}</code></pre><h2 id="14-什么是包装对象-wrapper-object-？"><a href="#14-什么是包装对象-wrapper-object-？" class="headerlink" title="14.什么是包装对象(wrapper object)？"></a>14.什么是包装对象(wrapper object)？</h2><ul><li>// 答案</li><li>1）复习一下JS的数据类型，JS数据类型被分为两大类，基本类型和引用类型</li><li>①基本类型：Undefined,Null,Boolean,Number,String,Symbol,BigInt</li><li>②引用类型：Object,Array,Date,RegExp等，说白了就是对象。</li><li>2）其中引用类型有方法和属性，但是基本类型是没有的，但我们经常会看到下面的代码</li><li>let name = “marko”;</li><li>console.log(typeof name); // “string”</li><li>console.log(name.toUpperCase()); // “MARKO”</li><li>name类型是 string，属于基本类型，所以它没有属性和方法，但是在这个例子中，我们调用了一个toUpperCase()方法，它不会抛出错误，还返回* 了对象的变量值。</li><li>原因是基本类型的值被临时转换或强制转换为对象，因此name变量的行为类似于对象。除null和undefined之外的每个基本类型都有自己包装对象。* 也就是：String，Number，Boolean，Symbol和BigInt。在这种情况下，name.toUpperCase()在幕后看起来如下：</li><li>console.log(new String(name).toUpperCase()); // “MARKO”</li><li>在完成访问属性或调用方法之后，新创建的对象将立即被丢弃。</li></ul>]]></content>
<summary type="html"><h2 id="13-实现一个模板引擎"><a href="#13-实现一个模板引擎" class="headerlink" title="13.实现一个模板引擎"></a>13.实现一个模板引擎</h2><pre><code class="js">let template = </summary>
</entry>
<entry>
<title>2020 JS面试合集 (01)</title>
<link href="http://suplyang.xyz/2020/10/01/js/"/>
<id>http://suplyang.xyz/2020/10/01/js/</id>
<published>2020-10-01T02:05:20.284Z</published>
<updated>2020-11-17T12:21:29.907Z</updated>
<content type="html"><![CDATA[<p><strong>JavaScript基础</strong></p><h2 id="1-写出代码执行结果，并解释为什么"><a href="#1-写出代码执行结果，并解释为什么" class="headerlink" title="1.写出代码执行结果，并解释为什么"></a>1.写出代码执行结果，并解释为什么</h2><pre><code class="javascript"> console.log(1 < 2 < 3); console.log(3 > 2 > 1);</code></pre><ul><li>// 答案与解析</li><li>true false</li><li>对于运算符>、<,一般的计算从左向右</li><li>第一个题：1 < 2 等于 true, 然后true < 3，true == 1 ，因此结果是true</li><li>第二个题：3 > 2 等于 true, 然后true > 1, true == 1 ，因此结果是false<h2 id="2-写出代码执行的结果，并解释为什么"><a href="#2-写出代码执行的结果，并解释为什么" class="headerlink" title="2.写出代码执行的结果，并解释为什么"></a>2.写出代码执行的结果，并解释为什么</h2></li><li>[typeof null, null instanceof Object]</li><li>//答案与解析</li><li>[“object”, false]</li><li>1）typeof操作符返回一个字符串，表示未经计算的操作数的类型</li><li>类型 结果</li><li>Undefined “undefined”</li><li>Null “object”</li><li>Boolean “boolean”</li><li>Number “number”</li><li>String “string”</li><li>Symbol “symbol”</li><li>函数对象 “function”</li><li>任何其他对象 “object”</li><li>typeof null === ‘object’;// 从最开始的时候javascript就是这样 </li><li>1)JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 null 代表的是空指针（大多数平台下值为</li><li>0x00)因此，null的类型标签也成为了 0，typeof null就错误的返回了”object”。这算一个bug,但是被拒绝修复，因为影响的web系统太多 </li><li>2）instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性</li><li>null不是以Object原型创建，因此返回false<h2 id="3-死循环陷阱"><a href="#3-死循环陷阱" class="headerlink" title="3.死循环陷阱"></a>3.死循环陷阱</h2><pre><code class="javascript">var END = Math.pow(2, 53);var START = END - 100;var count = 0;for (var i = START; i <= END; i++) { count++;}console.log(count);</code></pre></li><li>// 写出正确的打印结果，并解释为什么？ </li><li>// 答案与解析</li><li>这个会陷入一个死循环，2^53是最大的值，因此2^53+1 等于 2^53<h2 id="4-写出代码执行结果"><a href="#4-写出代码执行结果" class="headerlink" title="4.写出代码执行结果"></a>4.写出代码执行结果</h2><pre><code class="javascript">var a = Date(0);var b = new Date(0);var c = new Date();[a === b, b === c, a === c];</code></pre></li><li>// 答案与解析</li><li>[false,false,false]</li><li>需要注意的是只能通过调用 Date 构造函数来实例化日期对象：以常规函数调用它（即不加 new 操作符）将会返回一个字符串，而不是一个日期对象。另外，不像其他JavaScript 类型，Date 对象没有字面量格式。</li><li>a是字符串，b和c是Date对象，并且b代表的是1970年那个初始化时间，而c代表的是当前时间。<h2 id="5-逗号表达式"><a href="#5-逗号表达式" class="headerlink" title="5.逗号表达式"></a>5.逗号表达式</h2><pre><code class="javascript">var x = 20;var temp = { x: 40, foo: function() { var x = 10; console.log(this.x); }};(temp.foo, temp.foo)();</code></pre><h2 id="6-写出打印结果"><a href="#6-写出打印结果" class="headerlink" title="6.写出打印结果"></a>6.写出打印结果</h2></li><li>20</li><li>逗号操作符，逗号操作符会从左到右计算它的操作数，返回最后一个操作数的值。所以(temp.foo, temp.foo)();等价于var fun = temp.foo;fun();，fun调用时this指向window，所以返回20。<h2 id="7-链式调用"><a href="#7-链式调用" class="headerlink" title="7.链式调用"></a>7.链式调用</h2></li><li>// 实现 (5).add(3).minus(2) 功能</li><li>// console.log((5).add(3).minus(2)); // 6</li><li>/*</li><li>答案：12</li><li>arguments中c的值还是1不会变成10，</li><li>因为a函数加了默认值，就按ES的方式解析，ES6是有块级作用域的，所以c的值是不会改变的</li><li>*/<br>```js<br>Number.prototype.add = function (number) {<br> if (typeof number !== ‘number’) {<pre><code> throw new Error('请输入数字～');</code></pre> }<br> return this + number;<br>};<br>Number.prototype.minus = function (number) {<br> if (typeof number !== ‘number’) {<pre><code> throw new Error('请输入数字～');</code></pre> }<br> return this - number;<br>};<br>console.log((5).add(3).minus(2));<br>/*<strong><strong><strong><strong><strong><strong><strong>****</strong></strong></strong></strong></strong></strong></strong>/<br>var a = 1;<br>(function a () {<br> a = 2;<br> console.log(a);<br>})();<br>// 答案<br>ƒ a () {<br> a = 2;<br> console.log(a);<br>}<br>/*<br>立即调用的函数表达式（IIFE） 有一个 自己独立的 作用域，如果函数名称与内部变量名称冲突，就会永远执行函数本身；所以上面的结果输出是函数本身；</li><li>/<pre><code>## 8.输出什么```jsvar a = [0];if(a){ console.log(a == true);}else{ console.log(a);}</code></pre></li><li>/*</li><li>答案：false</li><li>当a出现在if的条件中时，被转成布尔值，而Boolean([0])为true,所以就进行下一步判断 a == true,在进行比较时，[0]被转换成了0，所以0==true为false</li><li>js的规则是：</li><li>如果比较的是原始类型的值，原始类型的值会转成数值再进行比较</li><li>1 == true //true 1 === Number(true)</li><li>‘true’ == true //false Number(‘true’)->NaN Number(true)->1</li><li>‘’ == 0//true</li><li>‘1’ == true//true Number(‘1’)->1</li><li>对象与原始类型值比较，对象会转换成原始类型的值再进行比较。</li><li>undefined和null与其它类型进行比较时，结果都为false，他们相互比较时结果为true。<h2 id="9-一些隐式转换"><a href="#9-一些隐式转换" class="headerlink" title="9.一些隐式转换"></a>9.一些隐式转换</h2></li><li>数组从非primitive转为primitive的时候会先隐式调用join变成“0”，string和boolean比较的时候，两个都先转为number类型再比较，最后就是0==1的比较了<pre><code class="js">var a = [1];if(a){ console.log(a == true);}else{ console.log(a);}// true!![] //true 空数组转换为布尔值是true,!![0]//true 数组转换为布尔值是true[0] == true;//false 数组与布尔值比较时却变成了falseNumber([])//0Number(false)//0Number(['1'])//1</code></pre></li><li>所以当a出现在if的条件中时，被转成布尔值，而Boolean([0])为true,所以就进行下一步判断 a == true,在进行比较时，js的规则是：</li><li>如果比较的是原始类型的值，原始类型的值会转成数值再进行比较</li><li>1 == true //true 1 === Number(true)</li><li>‘true’ == true //false Number(‘true’)->NaN Number(true)->1</li><li>‘’ == 0//true</li><li>‘1’ == true//true Number(‘1’)->1</li><li>对象与原始类型值比较，对象会转换成原始类型的值再进行比较。</li><li>undefined和null与其它类型进行比较时，结果都为false，他们相互比较时结果为true。</li><li>*/<h2 id="10-写出正确打印结果"><a href="#10-写出正确打印结果" class="headerlink" title="10.写出正确打印结果"></a>10.写出正确打印结果</h2><pre><code class="js">const a = [1,2,3], b = [1,2,3], c = [1,2,4], d = "2", e = "11";console.log([a == b, a === b, a > c, a < c, d > e]);</code></pre></li><li>// 答案</li><li>[false,false,false,true,true] </li><li>// 解析</li><li>1）JavaScript 有两种比较方式：严格比较运算符和转换类型比较运算符。</li><li>对于严格比较运算符（===）来说，仅当两个操作数的类型相同且值相等为 true，而对于被广泛使用的比较运算符（==）来说，会在进行比较之前，将两个操作数转换成相同的类型。对于关系运算符（比如 <=）来说，会先将操作数转为原始值，使它们类型相同，再进行比较运算。</li><li>当两个操作数都是对象时，JavaScript会比较其内部引用，当且仅当他们的引用指向内存中的相同对象（区域）时才相等，即他们在栈内存中的引用地址相同。</li><li>javascript中Array也是对象，所以这里a,b,c显然引用是不相同的，所以这里a==b,a===b都为false。</li><li>2）两个数组进行大小比较，也就是两个对象进行比较</li><li>当两个对象进行比较时，会转为原始类型的值，再进行比较。对象转换成原始类型的值，算法是先调用valueOf方法；如果返回的还是对象，再*接着调用toString方法。</li><li>①valueOf() 方法返回指定对象的原始值。</li><li>JavaScript调用valueOf方法将对象转换为原始值。你很少需要自己调用valueOf方法；当遇到要预期的原始值的对象时，JavaScript会自动调用它。默认情况下，valueOf方法由Object后面的每个对象继承。每个内置的核心对象都会覆盖此方法以返回适当的值。如果对象没有原始值，则* valueOf将返回对象本身。</li><li>②toString() 方法返回一个表示该对象的字符串。</li><li>每个对象都有一个 toString() 方法，当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。默认情况下，* toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 “[object type]”，其中 type 是对象的* 类型。</li><li>③经过valueOf,toString的处理，所以这里a,c最终会被转换为”1,2,3”与”1,2,4”; </li><li>3）两个字符串进行比较大小</li><li>上边的数组经转换为字符串之后，接着进行大小比较。</li><li>MDN中的描述是这样的：字符串比较则是使用基于标准字典的 Unicode 值来进行比较的。</li><li>字符串按照字典顺序进行比较。JavaScript 引擎内部首先比较首字符的 Unicode 码点。如果相等，再比较第二个字符的 Unicode 码点，以此类推。</li><li>所以这里 “1,2,3” < “1,2,4”,输出true,因为前边的字符的unicode码点都相等，所以最后是比较3和4的unicode码点。而3的Unicode码点是51,4的uniCode码点是52，所以a<c。</li><li>“2” > “11”也是同理，这个也是开发中有时会遇到的问题，所以在进行运算比较时需要注意一下。</li><li>4）关于valueOf，toString的调用顺序</li><li>①javascript中对象到字符串的转换经历的过程如下：</li><li>如果对象具有toString()方法，javaScript会优先调用此方法。如果返回的是一个原始值（原始值包括null、undefined、布尔值、字符串、数字），javaScript会将这个原始值转换为字符串，并返回字符串作为结果。</li><li>如果对象不具有toString()方法，或者调用toString()方法返回的不是原始值，则javaScript会判断是否存在valueOf()方法，如若存在则调用此方法，如果返回的是原始值，javaScript会将原始值转换为字符串作为结果。</li><li>如果javaScript无法调用toString()和valueOf()返回原始值的时候，则会报一个类型错误异常的警告。</li><li>比如：String([1,2,3]);将一个对象转换为字符串<pre><code class="js">var a = [1,2,3];a.valueOf = function(){console.log("valueOf");return this}a.toString = function(){console.log('toString')return this} String(a);</code></pre></li><li>因为这里我返回的是this，最后，所以如果javaScript无法调用toString()和valueOf()返回原始值的时候，则会报一个类型错误异常的警 告。 </li><li>②javaScript中对象转换为数字的转换过程：</li><li>javaScript优先判断对象是否具有valueOf()方法，如具有则调用，若返回一个原始值，javaScript会将原始值转换为数字并作为结果。</li><li>如果对象不具有valueOf()方法，javaScript则会调用toString()的方法，若返回的是原始值，javaScript会将原始值转换为数字并作为结 果。</li><li>如果javaScript无法调用toString()和valueOf()返回原始值的时候，则会报一个类型错误异常的警告。</li><li>比如：Number([1,2,3]);将一个对象转换为字符串 </li></ul><h2 id="11-剖析代码"><a href="#11-剖析代码" class="headerlink" title="11.剖析代码"></a>11.剖析代码</h2><pre><code class="js">var a = ?;if(a == 1 && a== 2 && a== 3){ console.log(1);}</code></pre><ul><li>/*</li><li>比较操作涉及多不同类型的值时候，会涉及到很多隐式转换，其中规则繁多即便是经验老道的程序员也没办法完全记住，特别是用到 ==和 !=运算时候。所以一些团队规定禁用 ==运算符换用===严格相等。</li><li>*/</li><li>// 答案一<pre><code class="js">var aﾠ = 1;var a = 2;var ﾠa = 3;if(aﾠ==1 && a== 2 &&ﾠa==3) { console.log("1")}</code></pre></li><li>/*</li><li>考察你的找茬能力，注意if里面的空格，它是一个Unicode空格字符，不被ECMA脚本解释为空格字符(这意味着它是标识符的有效字符)。所以它可以解释为<pre><code class="js">var a_ = 1;var a = 2;var _a = 3;if(a_==1 && a== 2 &&_a==3) {console.log("1")}</code></pre></li><li>/</li><li>//答案二<pre><code class="js">var a = {i: 1,toString: function () { return a.i++;}}if(a == 1 && a == 2 && a == 3) {console.log('1');}</code></pre></li><li>/*</li><li>如果原始类型的值和对象比较，对象会转为原始类型的值，再进行比较。</li><li>对象转换成原始类型的值，算法是先调用valueOf方法；如果返回的还是对象，再接着调用toString方法。</li><li>*/</li><li>// 答案三<pre><code class="js">var a = [1,2,3];a.join = a.shift;console.log(a == 1 && a == 2 && a == 3);</code></pre></li><li>/*</li><li>比较巧妙的方式，array也属于对象，</li><li>对于数组对象，toString 方法返回一个字符串，该字符串由数组中的每个元素的 toString() 返回值经调用 join() 方法连接（由逗号隔* 开）组成。</li><li>数组 toString 会调用本身的 join 方法，这里把自己的join方法该写为shift,每次返回第一个元素，而且原数组删除第一个值，正好可以使* 判断成立</li><li>*/</li><li>// 答案四<pre><code class="js">var i = 0;with({get a() { return ++i;}}) {if (a == 1 && a == 2 && a == 3) console.log("1");}</code></pre></li><li>/*</li><li>with 也是被严重建议不使用的对象，这里也是利用它的特性在代码块里面利用对象的 get 方法动态返回 i.</li><li>*/</li><li>// 答案五<pre><code class="js">var val = 0;Object.defineProperty(window, 'a', {get: function() { return ++val;}});if (a == 1 && a == 2 && a == 3) {console.log('1');}</code></pre></li><li>/*</li><li>全局变量也相当于 window 对象上的一个属性，这里用defineProperty 定义了 a的 get 也使得其动态返回值。和with 有一些类似。</li><li>*/</li><li>// 答案六<pre><code class="js">let a = {[Symbol.toPrimitive]: ((i) => () => ++i) (0)};if (a == 1 && a == 2 && a == 3) {console.log('1');}</code></pre></li><li>/*</li><li>ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。我们之前在定义类的内部私有属性时候习惯用 __xxx ,这种命名方式避免别人* 定义相同的属性名覆盖原来的属性，有了 Symbol 之后我们完全可以用 Symbol值来代替这种方法，而且完全不用担心被覆盖。</li><li>除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。Symbol.toPrimitive就是其中一* 个，它指向一个方法，表示该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。这里就是改变这个属性，把它的值* 改为一个 闭包 返回的函数。</li><li>*/</li><li>业务中一般不会写出这种代码,重点还是知识点的考察<h2 id="12-剖析代码"><a href="#12-剖析代码" class="headerlink" title="12.剖析代码"></a>12.剖析代码</h2><pre><code class="js">let a = {n: 1};let b = a;a.x = a = {n: 2};console.log(a.x) console.log(b.x)</code></pre></li><li>答案：</li><li>undefined {n:2}</li><li>注意点： </li><li>1: 点的优先级大于等号的优先级</li><li>2: 对象以指针的形式进行存储，每个新对象都是一份新的存储地址</li><li>解析：</li><li><ul><li><code>var b = a;</code> b 和 a 都指向同一个地址。</li></ul></li><li><ul><li><code>.</code>的优先级高于<code>=</code>。所以先执行<code>a.x</code>，于是现在的<code>a</code>和<code>b</code>都是<code>{n: 1, x: undefined}</code>。</li></ul></li><li><ul><li><code>=</code>是从右向左执行。所以是执行 <code>a = {n: 2}</code>，于是<code>a</code>指向了<code>{n: 2}</code></li></ul></li><li><ul><li>再执行 <code>a.x = a</code>。这里注意，<code>a.x</code> 是最开始执行的，已经是<code>{n: 1, x: undefined}</code>这个地址了，而不是一开的的那个<code>a</code>，所以也就不是 <code>{n: 2}</code>了。而且<code>b</code>和旧的<code>a</code>是指向一个地址的，所以<code>b</code>也改变了。</li></ul></li><li><ul><li>但是，<code>=</code>右面的a，是已经指向了新地址的新<code>a</code>。</li></ul></li><li><ul><li>所以，<code>a.x = a</code> 可以看成是<code>{n: 1, x: undefined}.x = {n: 2}</code></li></ul></li><li><ul><li>最终得出</li></ul></li><li>a = { n: 2 }，</li><li>b = {</li><li>n: 1,</li><li>x: { n: 2 }</li><li>}<h3 id="未完待续………"><a href="#未完待续………" class="headerlink" title="未完待续………."></a>未完待续……….</h3></li></ul>]]></content>
<summary type="html"><p><strong>JavaScript基础</strong></p>
<h2 id="1-写出代码执行结果，并解释为什么"><a href="#1-写出代码执行结果，并解释为什么" class="headerlink" title="1.写出代码执行结果，并解释为什么"></</summary>
</entry>
<entry>
<title>Chrome插件,被严重低估的浏览器功能！！</title>
<link href="http://suplyang.xyz/2020/09/17/chrome/"/>
<id>http://suplyang.xyz/2020/09/17/chrome/</id>
<published>2020-09-17T08:52:07.483Z</published>
<updated>2020-11-17T12:21:56.937Z</updated>
<content type="html"><![CDATA[<p><strong>温情提示：好东西！油猴内有许多神奇的，你意想不到的插件。一定要安装油猴！一定要安装油猴！一定要安装油猴！</strong><br><strong>油猴：<a href="https://greasyfork.org/zh-CN">https://greasyfork.org/zh-CN</a></strong></p><h2 id="markdown-here"><a href="#markdown-here" class="headerlink" title="markdown-here"></a>markdown-here</h2><ul><li>可以在网页版QQ邮箱、Gmail、163等邮箱里面，使用markdown格式进行书写，然后一键转换为富文本。</li></ul><h2 id="chrono"><a href="#chrono" class="headerlink" title="chrono"></a>chrono</h2><ul><li>可以非常方便的嗅探识别网页中的资源, 然后一键下载所有资源。</li></ul><h2 id="Secure-Shell-App"><a href="#Secure-Shell-App" class="headerlink" title="Secure Shell App"></a>Secure Shell App</h2><ul><li>Windows并没有自带ssh软件，有了Secure Shell App，可以让你无需下载putty或xshell，就能在chrome直接实现ssh登录服务器了。</li></ul><h2 id="Tampermonkey"><a href="#Tampermonkey" class="headerlink" title="Tampermonkey"></a>Tampermonkey</h2><ul><li>可以帮你安装脚本，从而免费查看VIP视频，清除各种网页广告，在豆瓣影评页面显示电影资源的下载地址。</li></ul><h2 id="Video-Speed-Controller"><a href="#Video-Speed-Controller" class="headerlink" title="Video Speed Controller"></a>Video Speed Controller</h2><ul><li>刷一些没营养视频的时候，而网站的在线播放器一般只提供不高于4倍的播放速度,，而Video Speed Controller可以将视频播放速度提高到16倍速。</li></ul><h2 id="SimilarSites"><a href="#SimilarSites" class="headerlink" title="SimilarSites"></a>SimilarSites</h2><ul><li>当你浏览一个很棒的站点的时候，或许你会想到，和它“差不多”的站点有哪些。尤其是针对一些资源站点，这个站点没有，而它同类的站点“往往有”。SimilarSites的作用只有一个，发现同类站点。</li></ul><h2 id="Loom"><a href="#Loom" class="headerlink" title="Loom"></a>Loom</h2><ul><li>可以一键录制浏览器的单个标签页，录制完成后自动生成在线网页，进行视频播放，可以下载刚刚录制的视频，也可以为刚刚生成的在线视频设置密码。</li></ul><h2 id="Chrome-Cleaner-Pro"><a href="#Chrome-Cleaner-Pro" class="headerlink" title="Chrome Cleaner Pro"></a>Chrome Cleaner Pro</h2><ul><li>Chrome经过最近几年的发展，强力的扩展越来越多，但软件会变慢。让Chrome变快的最简单方式就是清理垃圾，而Chrome Cleaner Pro走的是一键清理的路子。</li></ul><h2 id="vimium"><a href="#vimium" class="headerlink" title="vimium"></a>vimium</h2><ul><li>可以让你只使用键盘就可以浏览网页。</li></ul><h2 id="speedtest"><a href="#speedtest" class="headerlink" title="speedtest"></a>speedtest</h2><ul><li>在浏览器中直接测网速。</li></ul><h2 id="whatruns"><a href="#whatruns" class="headerlink" title="whatruns"></a>whatruns</h2><ul><li>如果你对当前浏览的网站非常感兴趣, 可以通过whatruns了解软件的技术栈。</li></ul><h2 id="OurStickys"><a href="#OurStickys" class="headerlink" title="OurStickys"></a>OurStickys</h2><ul><li>可以直接在网站上贴便签。</li></ul><h2 id="Quick-QR"><a href="#Quick-QR" class="headerlink" title="Quick QR"></a>Quick QR</h2><ul><li>可以不借助任何通讯软件，通过手机扫码，获取PC浏览器上任意一段文字信息。</li></ul><h2 id="超级马里奥游戏"><a href="#超级马里奥游戏" class="headerlink" title="超级马里奥游戏"></a>超级马里奥游戏</h2><ul><li>用Chrome玩超级马里奥。</li></ul><h2 id="XPath-Helper"><a href="#XPath-Helper" class="headerlink" title="XPath Helper"></a>XPath Helper</h2><ul><li>XPath是一个辅助写爬虫的小插件，比如可以帮助完成一个Bing壁纸的小爬虫。</li></ul><h2 id="MEGA"><a href="#MEGA" class="headerlink" title="MEGA"></a>MEGA</h2><ul><li>一个网盘应用，没有限速的概念，在国内可用，云端加密，官方提供了Linux客户端。</li></ul><h2 id="Boxel-Rebound"><a href="#Boxel-Rebound" class="headerlink" title="Boxel Rebound"></a>Boxel Rebound</h2><ul><li>Chrome中的跑酷游戏。可以自由创建赛道，分享赛道,，获取别人的赛道进行二次开发。</li></ul><h2 id="FireShot"><a href="#FireShot" class="headerlink" title="FireShot"></a>FireShot</h2><ul><li>一键滚动截屏整个网页。</li></ul><h2 id="Dark-Reader"><a href="#Dark-Reader" class="headerlink" title="Dark Reader"></a>Dark Reader</h2><ul><li>为任意网站启用夜间模式。</li></ul><h2 id="Quickey-Launcher"><a href="#Quickey-Launcher" class="headerlink" title="Quickey Launcher"></a>Quickey Launcher</h2><ul><li>为任意网页绑定一个快捷键，绑定完成后可通过快捷键打开网页。</li></ul>]]></content>
<summary type="html"><p><strong>温情提示：好东西！油猴内有许多神奇的，你意想不到的插件。一定要安装油猴！一定要安装油猴！一定要安装油猴！</strong><br><strong>油猴：<a href="https://greasyfork.org/zh-CN">https://greasy</summary>
</entry>
<entry>
<title>Vue实例生命周期详解</title>
<link href="http://suplyang.xyz/2020/09/16/vue/"/>
<id>http://suplyang.xyz/2020/09/16/vue/</id>
<published>2020-09-16T14:28:47.146Z</published>
<updated>2020-11-17T12:20:42.716Z</updated>
<content type="html"><![CDATA[<p><strong>vue实例的创建，运行，销毁</strong></p><ul><li>实例创建<ul><li>var vm = new Vue({})<br>—>初始化后执行beforeCreate()先于data{}和methods{}。<br>—>如果想先执行这俩内的方法或者数据可使用created（）中操作<br>—>执行Vue模板，渲染于内存中未渲染于页面，执行beforeMount()渲染到内存<br>—>内存中的模板渲染到页面，mounted()渲染到页面，实例创建完成。</li></ul></li><li>实例运行<ul><li>当数据data改变，beforeUpdata()页面不变，数据已经更新<br>—>在内存中渲染新数据DOM树，再渲染到视图层页面，updated()执行时页面已经更新。</li></ul></li><li>实例销毁<ul><li>执行beforeDestroy()进入销毁阶段，实例中的data{}和methods{}仍然可用。<br>—>Destroy()运行时，组件已经完全销毁，内部所有都不可用。</li></ul></li></ul><p><strong>生命周期函数（钩子函数）</strong></p><ul><li><p>beforeCreate()初始化</p></li><li><p>created（）先执行这俩内的方法或者数据</p></li><li><p>beforeMount()渲染到内存</p></li><li><p>mounted()渲染到页面</p></li><li><p>beforeUpdata()页面不变，数据已经更新</p></li><li><p>updated()执行时页面已经更新</p></li><li><p>beforeDestroy()进入销毁阶段 Destroy()运行时组件已经完全销毁</p></li></ul>]]></content>
<summary type="html"><p><strong>vue实例的创建，运行，销毁</strong></p>
<ul>
<li>实例创建<ul>
<li>var vm = new Vue({})<br>—&gt;初始化后执行beforeCreate()先于data{}和methods{}。<br>—&gt;如果</summary>
</entry>
</feed>