分类 标签 存档 ME! 黑客派 订阅 搜索

面试开发常用的 JavaScript 知识点总结

166 浏览

No1. 语法和类型

1. 声明定义

  变量类型:var,定义变量;let,定义块域 (scope) 本地变量;const,定义只读常量。


  变量格式:以字母、下划线 “_” 或者 $ 符号开头,大小写敏感。


  变量赋值:声明但未赋值的变量在使用时值为 undefined,未声明的变量直接使用会抛异常。


  未赋值变量作计算:结果为 NaN。例如:


<code><span class="hljs-keyword">var</span> x, y = <span class="hljs-number">1</span>;<br/><span class="hljs-built_in">console</span>.log(x + y); <span class="hljs-comment">// 结果为 NaN,因为 x 没有赋值。</span><br/></code>

2. 作用域


  变量作用域:在 ES6 之前没有块声明域,变量作用于函数块或者全局。如下面的代码输入的 x 为 5。


<code><span class="hljs-keyword">if</span> (<span class="hljs-literal">true</span>) {<br/>    <span class="hljs-keyword">var</span> x = <span class="hljs-number">5</span>;<br/>}<br/><span class="hljs-built_in">console</span>.log(x); <span class="hljs-comment">// 5</span><br/></code>

  ES6 变量作用域:ES6 支持块作用域,但需要使用 let 声明变量。下面的代码输出结果抛出异常。


<code><span class="hljs-keyword">if</span> (<span class="hljs-literal">true</span>) {<br/>    <span class="hljs-reserved">let</span> y = <span class="hljs-number">5</span>;<br/>}<br/><span class="hljs-built_in">console</span>.log(y); <span class="hljs-regexp">//</span> <span class="hljs-attribute">ReferenceError</span>: y <span class="hljs-keyword">is</span> <span class="hljs-keyword">not</span> defined1234<br/></code>

  变量上浮:在一个方法或者全局代码中,我们在生命变量之前使用变量时并没有抛异常,而是返回 undefined。这是因为 javascript 自动把变量的声明上浮到函数或者全局的最前面。如下面的代码:


<code><span class="hljs-comment">/<strong><br/><em> 全局变量上浮
</em>/</strong></span><strong><br/><span class="hljs-built_in">console</span>.log(x === <span class="hljs-literal">undefined</span>); <span class="hljs-comment">// logs "true"</span><br/><span class="hljs-keyword">var</span> x = <span class="hljs-number">3</span>;<br/><br/><span class="hljs-comment">/</span></strong><br/><em> 方法变量上浮
</em>/<br/><span class="hljs-keyword">var</span> myvar = <span class="hljs-string">"my value"</span>;<br/><span class="hljs-comment">// 打印变量 myvar 结果为:undefined</span><br/>(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{<br/>    <span class="hljs-built_in">console</span>.log(myvar); <span class="hljs-comment">// undefined</span><br/>    <span class="hljs-keyword">var</span> myvar = <span class="hljs-string">"local value"</span>;<br/>})();<br/></code>

  上面代码和下面代码是等价的:


<code><span class="hljs-comment">/<strong><br/><em> 全局变量上浮
</em>/</strong></span><strong><br/><span class="hljs-keyword">var</span> x;<br/><span class="hljs-built_in">console</span>.log(x === <span class="hljs-literal">undefined</span>); <span class="hljs-comment">// logs "true"</span><br/>x = <span class="hljs-number">3</span>;<br/><br/><span class="hljs-comment">/</span></strong><br/><em> 方法变量上浮
</em>/<br/><span class="hljs-keyword">var</span> myvar = <span class="hljs-string">"my value"</span>;<br/>(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{<br/>    <span class="hljs-keyword">var</span> myvar;<br/>    <span class="hljs-built_in">console</span>.log(myvar); <span class="hljs-comment">// undefined</span><br/>    myvar = <span class="hljs-string">"local value"</span>;<br/>})();<br/></code>

  全局变量:在页面中,全局对象是 window,所以我们访问全局变量可通过 window.variable。例如:


<code>version = <span class="hljs-string">"1.0.0"</span>;<br/><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">window</span>.version); <span class="hljs-comment">// 输出 1.0.0</span><br/></code>

No2. 数据结构和类型


1. 数据类型


  6 个基础类型:Boolean(true 或者 false)、null(js 大小写敏感,和 Null、NULL 是有区别的)、undefined、Number、String、Symbol(标记唯一和不可变)


  一个对象类型:object。


  object 和 function:对象作为值的容器,函数作为应用程序的过程。


2. 数据转换


  函数:字符串转换为数字可使用 parseInt 和 parseFloat 方法。


  parseInt:函数签名为 parseInt(string, radix),radix 是 2-36 的数字表示数字基数,例如十进制或者十六进制。返回结果为 integer 或者 NaN,例如下面输出结果都为 15。


<code><span class="hljs-built_in">parseInt</span>(<span class="hljs-string">"0xF"</span>, <span class="hljs-number">16</span>);<br/><span class="hljs-built_in">parseInt</span>(<span class="hljs-string">"F"</span>, <span class="hljs-number">16</span>);<br/><span class="hljs-built_in">parseInt</span>(<span class="hljs-string">"17"</span>, <span class="hljs-number">8</span>);<br/><span class="hljs-built_in">parseInt</span>(<span class="hljs-number">021</span>, <span class="hljs-number">8</span>);<br/><span class="hljs-built_in">parseInt</span>(<span class="hljs-string">"015"</span>, <span class="hljs-number">10</span>);<br/><span class="hljs-built_in">parseInt</span>(<span class="hljs-number">15.99</span>, <span class="hljs-number">10</span>);<br/>arseInt(<span class="hljs-string">"15,123"</span>, <span class="hljs-number">10</span>);<br/><span class="hljs-built_in">parseInt</span>(<span class="hljs-string">"FXX123"</span>, <span class="hljs-number">16</span>);<br/><span class="hljs-built_in">parseInt</span>(<span class="hljs-string">"1111"</span>, <span class="hljs-number">2</span>);<br/><span class="hljs-built_in">parseInt</span>(<span class="hljs-string">"15*3"</span>, <span class="hljs-number">10</span>);<br/><span class="hljs-built_in">parseInt</span>(<span class="hljs-string">"15e2"</span>, <span class="hljs-number">10</span>);<br/><span class="hljs-built_in">parseInt</span>(<span class="hljs-string">"15px"</span>, <span class="hljs-number">10</span>);<br/></code>

  parseFloat:函数签名为 parseFloat(string),返回结果为数字或者 NaN。例如:


<code><span class="hljs-built_in">parseFloat</span>(<span class="hljs-string">"3.14"</span>); <span class="hljs-comment">// 返回数字</span><br/><span class="hljs-built_in">parseFloat</span>(<span class="hljs-string">"314e-2"</span>); <span class="hljs-comment">// 返回数字</span><br/><span class="hljs-built_in">parseFloat</span>(<span class="hljs-string">"more non-digit characters"</span>); <span class="hljs-comment">// 返回 NaN</span><br/></code>

3. 数据类型文本化


  文本化类型:Array、Boolean、Floating-point 、integers、Object、RegExp、String。


  Array 中额外的逗号情况:[“Lion”, , “Angel”],长度为 3,[1] 的值为 undefiend。[‘home’, , ‘school’,],最后一个逗号省略所以长度为 3。[, ‘home’, , ‘school’],长度为 4。[‘home’, , ‘school’, ,],长度为 4。


  integer 整数:整数可以表达为十进制、八进制、十六进制、二进制。例如:


<code><span class="hljs-number">0</span>, <span class="hljs-number">117</span> <span class="hljs-keyword">and</span> -<span class="hljs-number">345</span> <span class="hljs-comment">// 十进制</span><br/><span class="hljs-number">015</span>, <span class="hljs-number">0001</span> <span class="hljs-keyword">and</span> -<span class="hljs-number">0</span>o77 <span class="hljs-comment">// 八进制</span><br/><span class="hljs-number">0x1123</span>, <span class="hljs-number">0x00111</span> <span class="hljs-keyword">and</span> -<span class="hljs-number">0xF1A7</span> <span class="hljs-comment">// 十六进制</span><br/><span class="hljs-number">0b11</span>, <span class="hljs-number">0b0011</span> <span class="hljs-keyword">and</span> -<span class="hljs-number">0b11</span> <span class="hljs-number">1234</span> <span class="hljs-comment">// 二进制</span><br/></code>

  浮点数:[(+|-)][digits][.digits][(E|e)[(+|-)]digits]。例如:


<code>3<span class="hljs-class">.1415926</span>,<span class="hljs-tag">-</span><span class="hljs-class">.123456789</span>,<span class="hljs-tag">-3</span><span class="hljs-class">.1E</span>+12(3100000000000),<span class="hljs-class">.1e-23</span>(1<span class="hljs-tag">e-24</span>)<br/></code>

  对象:对象的属性获取值可通过 “. 属性” 或者 “[属性名]” 获取。例如:


<code><span class="hljs-keyword">var</span> car = { manyCars: {a: <span class="hljs-string">"Saab"</span>, <span class="hljs-string">"b"</span>: <span class="hljs-string">"Jeep"</span>}, <span class="hljs-number">7</span>: <span class="hljs-string">"Mazda"</span> };<br/><span class="hljs-built_in">console</span>.log(car.manyCars.b); <span class="hljs-comment">// Jeep</span><br/><span class="hljs-built_in">console</span>.log(car[<span class="hljs-number">7</span>]); <span class="hljs-comment">// Mazda</span><br/></code>

  对象属性:属性名可以是任意字符串或者空字符串,无效的名字可通过引号包含起来。复杂的名字不能通过. 获取,但可以通过 [] 获取。例如:


<code><span class="hljs-keyword">var</span> unusualPropertyNames = {<br/>    <span class="hljs-string">""</span>: <span class="hljs-string">"An empty string"</span>,<br/>    <span class="hljs-string">"!"</span>: <span class="hljs-string">"Bang!"</span><br/>}<br/><span class="hljs-built_in">console</span>.log(unusualPropertyNames.<span class="hljs-string">""</span>); <span class="hljs-comment">// SyntaxError: Unexpected string</span><br/><span class="hljs-built_in">console</span>.log(unusualPropertyNames[<span class="hljs-string">""</span>]); <span class="hljs-comment">// An empty string</span><br/><span class="hljs-built_in">console</span>.log(unusualPropertyNames.!); <span class="hljs-comment">// SyntaxError: Unexpected token !</span><br/><span class="hljs-built_in">console</span>.log(unusualPropertyNames[<span class="hljs-string">"!"</span>]); <span class="hljs-comment">// Bang!</span><br/></code>

  转意字符:下面的字符串输出结果包含了双引号,因为使用了转意符号 “"”。


<code><span class="hljs-reserved">var</span> quote = <span class="hljs-string">"He read \"The Cremation of Sam McGee\"by R.W. Service."</span>;<br/><span class="hljs-built_in">console</span>.log(quote);<br/><span class="hljs-regexp">//</span>输出:He read <span class="hljs-string">"The Cremation of Sam McGee"</span> <span class="hljs-keyword">by</span> R.W. Service.1。<br/></code>

  字符串换行法:直接在字符串行结束时添加 “\”,如下代码所示:


<code><span class="hljs-reserved">var</span> str = <span class="hljs-string">"this string \<br/>is broken \<br/>across multiple\<br/>lines."</span><br/><span class="hljs-built_in">console</span>.log(str); <span class="hljs-regexp">//</span> <span class="hljs-keyword">this</span> string <span class="hljs-keyword">is</span> broken across multiplelines.<br/></code>

No3. 控制流和错误处理


1. 块表达式


  作用:块表达式一般用于控制流,像 if、for、while。下面的代码中 {x++;} 就是一个块声明。


<code><span class="hljs-keyword">while</span> (x < <span class="hljs-number">10</span>) {<br/>    x++;<br/>}<br/></code>

  ES6 之前没有块域范围:在 ES6 之前,在 block 中定义的变量实际是包含在方法或者全局中,变量的影响超出了块作用域的范围。例如下面的代码最终执行结果为 2,因为 block 中声明的变量作用于方法。


<code><span class="hljs-keyword">var</span> x = <span class="hljs-number">1</span>;<br/>{<br/>    <span class="hljs-keyword">var</span> x = <span class="hljs-number">2</span>;<br/>}<br/><span class="hljs-built_in">console</span>.log(x); <span class="hljs-comment">// outputs 2</span><br/></code>

  ES6 之后有块域范围:在 ES6 中,我们可以把块域声明 var 改成 let,让变量只作用域 block 范围。


2. 逻辑判断


  判断为 false 的特殊值:false、undefined、null、0、NaN、""。


  简单 boolean 和对象 Boolean 类型:简单 boolean 类型的 false 和 true 与对象 Boolean 类型的 false 和 true 是有区别,两者是不相等的。如下面的例子:


<code><span class="hljs-keyword">var</span> b = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Boolean</span>(<span class="hljs-literal">false</span>);<br/><span class="hljs-keyword">if</span> (b) <span class="hljs-comment">// 返回 true</span><br/><span class="hljs-keyword">if</span> (b == <span class="hljs-literal">true</span>) <span class="hljs-comment">// 返回 false</span><br/></code>

No4. 异常处理


1. 异常类型


  抛出异常语法:抛异常可以是任意类型。如下所示。


<code><span class="hljs-keyword">throw</span> <span class="hljs-string">"Error2"</span>; <span class="hljs-comment">// 字符串类型</span><br/><span class="hljs-keyword">throw</span> <span class="hljs-number">42</span>; <span class="hljs-comment">// 数字类型</span><br/><span class="hljs-keyword">throw</span> <span class="hljs-literal">true</span>; <span class="hljs-comment">// 布尔类型</span><br/><span class="hljs-keyword">throw</span> {toString: <span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{ <span class="hljs-keyword">return</span> <span class="hljs-string">"I'm an object!"</span>; } }; <span class="hljs-comment">// 对象类型</span><br/></code>

  自定义异常:


<code><span class="hljs-comment">// 创建一个对象类型 UserException</span><br/><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">UserException</span>(<span class="hljs-params">message</span>) </span>{<br/>    <span class="hljs-keyword">this</span>.message = message;<br/>    <span class="hljs-keyword">this</span>.name = <span class="hljs-string">"UserException"</span>;<br/>}<br/><br/><span class="hljs-comment">// 重写 toString 方法,在抛出异常时能直接获取有用信息</span><br/>UserException.prototype.toString = <span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{<br/>    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.name + <span class="hljs-string">':"'</span> + <span class="hljs-keyword">this</span>.message + <span class="hljs-string">'"'</span>;<br/>}<br/><br/><span class="hljs-comment">// 创建一个对象实体并抛出它</span><br/><span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> UserException(<span class="hljs-string">"Value too high"</span>);<br/></code>

2. 语法


  关键字:使用 try{}catch(e){}finally{} 语法,和 C# 语法相似。


  finally 返回值:如果 finaly 添加了 return 语句,则不管整个 try.catch 返回什么,返回值都是 finally 的 return。如下所示:


<code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">f</span>() </span>{<br/>    <span class="hljs-keyword">try</span> {<br/>        <span class="hljs-built_in">console</span>.log(<span class="hljs-number">0</span>);<br/>        <span class="hljs-keyword">throw</span> <span class="hljs-string">"bogus"</span>;<br/>    } <span class="hljs-keyword">catch</span>(e) {<br/>        <span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span>);<br/>        <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>; <span class="hljs-comment">// 返回语句被暂停,直到 finally 执行完成</span><br/>        <span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span>); <span class="hljs-comment">// 不会执行的代码</span><br/>    } <span class="hljs-keyword">finally</span> {<br/>        <span class="hljs-built_in">console</span>.log(<span class="hljs-number">3</span>);<br/>        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-comment">// 覆盖 try.catch 的返回</span><br/>        <span class="hljs-built_in">console</span>.log(<span class="hljs-number">4</span>); <span class="hljs-comment">// 不会执行的代码</span><br/>    }<br/>    <span class="hljs-comment">// "return false" is executed now </span><br/>    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">5</span>); <span class="hljs-comment">// not reachable</span><br/>}<br/>f(); <span class="hljs-comment">// 输出 0, 1, 3; 返回 false</span><br/></code>

  finally 吞并异常:如果 finally 有 return 并且 catch 中有 throw 异常。throw 的异常不会被捕获,因为已经被 finally 的 return 覆盖了。如下代码所示:


<code><span class="hljs-reserved">function</span> f() {<br/>    <span class="hljs-keyword">try</span> {<br/>        <span class="hljs-keyword">throw</span> <span class="hljs-string">"bogus"</span>;<br/>    } <span class="hljs-keyword">catch</span>(e) {<br/>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'caught inner"bogus"'</span>);<br/>        <span class="hljs-keyword">throw</span> e; <span class="hljs-regexp">//</span> <span class="hljs-keyword">throw</span>语句被暂停,直到<span class="hljs-keyword">finally</span>执行完成<br/>    } <span class="hljs-keyword">finally</span> {<br/>        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-regexp">//</span> 覆盖<span class="hljs-keyword">try</span>.<span class="hljs-keyword">catch</span>中的<span class="hljs-keyword">throw</span>语句<br/>    }<br/>    <span class="hljs-regexp">//</span> 已经执行了<span class="hljs-string">"return false"</span><br/>}<br/><br/><span class="hljs-keyword">try</span> {<br/>    f();<br/>} <span class="hljs-keyword">catch</span>(e) {<br/>    <span class="hljs-regexp">//</span>这里不会被执行,因为<span class="hljs-keyword">catch</span>中的<span class="hljs-keyword">throw</span>已经被<span class="hljs-keyword">finally</span>中的<span class="hljs-keyword">return</span>语句覆盖了<br/>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'caught outer"bogus"'</span>);<br/>}<br/><span class="hljs-regexp">//</span> 输出<br/><span class="hljs-regexp">//</span> caught inner <span class="hljs-string">"bogus"</span><br/></code>

  系统 Error 对象:我们可以直接使用 Error{name, message} 对象,例如:throw (new Error(‘The message’));


转自 WEB 开发者


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

评论  
留下你的脚步
推荐阅读