脚本宝典收集整理的这篇文章主要介绍了

2018年前端面试题(秋季面试随意整理的)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>1.html和css</p> <blockquote><p><strong>引入 css 有哪几种方式</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="1.使用<link>标签,引入外部<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>文件(1.通过@<a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a>,引入<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>文件(性能较差)<br /> 2.将css的样式代码放在html文档的</p> <style></style> <p>标签中,引入css)<br /> 3.内联样式(标签内部书写)<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>1.使用<span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/link" title="浏览关于“link”的文章" target="_blank" class="tag_link">link</a></span>&gt;</span>标签,引入外部<a href="http://www.js-code.com/tag/css" title="浏览关于“CSS”的文章" target="_blank" class="tag_link">CSS</a>文件(1.通过@import,引入CSS文件(性能较差) 2.将css的样式代码放在html文档的<span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>标签中,引入css) 3.内联样式(标签内部书写) </code></pre> <blockquote><p><strong>position 属性有哪些值,分别什么含义</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="1.position: relative;相对定位(相对于自身) 2.position: absolute;绝对定位(相对于最近一个有定位的父元素偏移) 3.position: fixed;固定定位(相对于浏览器窗口) 4.position:static:默认值 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-number">1.</span><span class="hljs-string">position:</span> relative;相对定位(相对于自身) <span class="hljs-number">2.</span><span class="hljs-string">position:</span> absolute;绝对定位(相对于最近一个有定位的父元素偏移) <span class="hljs-number">3.</span><span class="hljs-string">position:</span> fixed;固定定位(相对于浏览器窗口) <span class="hljs-number">4.</span><span class="hljs-string">position:</span><span class="hljs-keyword"><a href="http://www.js-code.com/tag/static" title="浏览关于“static”的文章" target="_blank" class="tag_link">static</a></span>:默认值 </code></pre> <blockquote><p><strong>css 响应式布局</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="1.接在l<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>k中判断设备的尺寸,然后引用不同的css文件(<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styleB.css&quot; media=&quot;screen and (min-width: 600px) and (max-width: 800px)&quot;>)<br /> 2.直接写在</p> <style>标签里(@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/<br /> .class {<br /> background: #ccc;<br /> }<br /> })<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>1.接在l<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>k中判断设备的尺寸,然后引用不同的css文件(<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>/css"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"styleB.css"</span> <span class="hljs-attr">media</span>=<span class="hljs-string">"screen and (min-width: 600px) and (max-width: 800px)"</span>&gt;</span>) 2.直接写在<span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">标签里(@<span class="hljs-keyword">media</span> screen and (max-width: <span class="hljs-number">600px</span>) { <span class="hljs-comment">/*当屏幕尺寸小于600px时,应用下面的CSS样式*/</span> <span class="hljs-selector-class">.class</span> { <span class="hljs-attribute">background</span>: <span class="hljs-number">#ccc</span>; } }) </span></code></pre> <blockquote><p><strong><a href="http://www.js-code.com/tag/flex" title="flex" target="_blank">flex</a>:1是什么意思</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="1.让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code>1.让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容 </code></pre> <blockquote><p><strong>CSS 弹性布局,哪些地方用到过</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="1.flex布局 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>1<span class="hljs-selector-class">.<a href="http://www.js-code.com/tag/flex" title="浏览关于“flex”的文章" target="_blank" class="tag_link">flex</a></span>布局 </code></pre> <blockquote><p><strong>如何实现不定宽高水平和垂直居中</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="1.最简单的flex布局 display: flex; justify-content: center; align-items: center; 2.利用table-cell 外层容器 display:table-cell; text-align:center; vertical-align:middle; 内部元素 vertical-align:middle; display:inline-block; 3.使用CSS3 transform 外层容器 display:relative 内部元素 transform: translate(-50%,-50%); position: absolute; top: 50%; left: 50%; " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-number">1.</span>最简单的flex布局 <span class="hljs-string">display:</span> flex; just<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>y-<span class="hljs-string">content:</span> center; align-<span class="hljs-string">items:</span> center; <span class="hljs-number">2.</span>利用table-cell 外层容器 <span class="hljs-string">display:</span>table-cell; text-<span class="hljs-string">align:</span>center; vertical-<span class="hljs-string">align:</span>middle; 内部元素 vertical-<span class="hljs-string">align:</span>middle; <span class="hljs-string">display:</span>inline-block; <span class="hljs-number">3.</span>使用CSS3 trans<a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a> 外层容器 <span class="hljs-string">display:</span>relative 内部元素 <span class="hljs-string">trans<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>m:</span> translate(<span class="hljs-number">-50</span>%,<span class="hljs-number">-50</span>%); <span class="hljs-string">position:</span> absolute; <span class="hljs-string"><a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>:</span> <span class="hljs-number">50</span>%; <span class="hljs-string">left:</span> <span class="hljs-number">50</span>%; </code></pre> <blockquote><p><strong>什么是盒子模型</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="由content、padding、border、margin组成的元素就是盒子模型,用来设置元素在网页中的大小和位置。 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code>由content、padding、border、margin组成的元素就是盒子模型,用来设置元素在网页中的大小和位置。 </code></pre> <p>2.js问题</p> <blockquote><p><strong><a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> 和 <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> 区别,可以改变 <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> 定义的某个对象的属性吗</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="let与const都是只在声明所在的块级作用域内有效。 let:无变量提升(未到let声明时,是无法访问该变量的) const:无变量提升,声明一个基本类型的时候为常量,不可修改;声明对象可以修改 const arr = {name:'小可爱', age:'21'} arr.name = '萱萱' console.log(arr) 因为对象是引用类型的,arr中保存的仅是对象的指针,这就意味着,const仅保证指针不发生改变,修改对象的属性不会改变对象的指针,所以是被允许的。也就是说const定义的引用类型只要指针不发生改变,其他的不论如何改变都是允许的。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span>与<span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span>都是只在声明所在的块级作用域内有效。 <span class="hljs-keyword">let</span>:无变量提升(未到<span class="hljs-keyword">let</span>声明时,是无法访问该变量的) <span class="hljs-keyword">const</span>:无变量提升,声明一个基本类型的时候为常量,不可修改;声明对象可以修改 <span class="hljs-keyword">const</span> arr = {<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>:<span class="hljs-string">'小可爱'</span>, age:<span class="hljs-string">'21'</span>} arr.name = <span class="hljs-string">'萱萱'</span> <span class="hljs-built_in">console</span>.log(arr) 因为对象是引用类型的,arr中保存的仅是对象的指针,这就意味着,<span class="hljs-keyword">const</span>仅保证指针不发生改变,修改对象的属性不会改变对象的指针,所以是被允许的。也就是说<span class="hljs-keyword">const</span>定义的引用类型只要指针不发生改变,其他的不论如何改变都是允许的。</code></pre> <p><span class="img-wrap"><img data-src="/img/bVbo1KC?w=298&amp;h=114" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <blockquote><p><strong>对闭包的理解,以及哪些地方用过闭包,以及闭包的缺点</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="闭包 是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变量不会被垃圾回收机制回收 优点是可以避免全局变量的污染,变量和方法私有化,不让外部修改这些属性 缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code>闭包 是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变量不会被垃圾回收机制回收 优点是可以避免全局变量的污染,变量和方法私有化,不让外部修改这些属性 缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露 </code></pre> <blockquote><p><strong>对跨域了解吗,jsonp 的限制</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="跨域就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下的对象或数据。简单理解同一个 域名、相同端口、相同协议! JSONP(JSON with Padding),就是异步请求跨域的服务器端时,不是直接返回数据,而是返回一个js方法,把数据作为参数 jsonp只支持get请求而不支持post请求 在登录模块中需要用到session来判断当前用户的登录状态,这时候由于是跨域的原因,前后台的取到的session是不一样的,那么就不 能就行session来判断. " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>跨域就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下的对象或数据。简单理解同一个 域名、相同端口、相同协议! JSONP(JSON <span class="hljs-keyword">with</span> Padding),就是异步请求跨域的服务器端时,不是直接返回数据,而是返回一个js方法,把数据作为参数 jsonp只支持<span class="hljs-keyword">get</span>请求而不支持post请求 在登录模块中需要用到<span class="hljs-keyword">session</span>来判断当前用户的登录状态,这时候由于是跨域的原因,前后台的取到的<span class="hljs-keyword">session</span>是不一样的,那么就不 能就行<span class="hljs-keyword">session</span>来判断. </code></pre> <blockquote><p><strong>1-10之间的随机数</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var num=Math.floor(Math.random()*10+1); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> num=<span class="hljs-built_in"><a href="http://www.js-code.com/tag/Math" title="浏览关于“Math”的文章" target="_blank" class="tag_link">Math</a></span>.floor(<span class="hljs-built_in">Math</span>.ran<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>m()*<span class="hljs-number">10</span>+<span class="hljs-number">1</span>); </code></pre> <blockquote><p><strong><a href="http://www.js-code.com/tag/java" title="java" target="_blank">java</a>script的<a href="http://www.js-code.com/tag/typeof" title="typeof" target="_blank">typeof</a>返回哪些数据类型</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="string,boolean,number,undefined,function,object " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-built_in">string</span>,<span class="hljs-built_in"><a href="http://www.js-code.com/tag/boolean" title="浏览关于“boolean”的文章" target="_blank" class="tag_link">boolean</a></span>,<span class="hljs-built_in">number</span>,<span class="hljs-literal"><a href="http://www.js-code.com/tag/undefined" title="浏览关于“undefined”的文章" target="_blank" class="tag_link">undefined</a></span>,<span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span>,<span class="hljs-title">object</span> </span></code></pre> <blockquote><p><strong>ES6 用到过吗,新增了哪些东西,你用到过什么</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="定义变量加入了 let const 箭头函数 Array.from() 将类数组对象与可遍历对象转换为数组 类class " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>定义变量加入了 <span class="hljs-keyword">let</span> <span class="hljs-keyword">const</span> <a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="浏览关于“箭头函数”的文章" target="_blank" class="tag_link">箭头函数</a> <span class="hljs-built_in"><a href="http://www.js-code.com/tag/array" title="浏览关于“Array”的文章" target="_blank" class="tag_link">Array</a></span>.from() 将类<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>对象与可遍历<a href="http://www.js-code.com/tag/%e5%af%b9%e8%b1%a1%e8%bd%ac%e6%8d%a2%e4%b8%ba%e6%95%b0%e7%bb%84" title="浏览关于“对象转换为数组”的文章" target="_blank" class="tag_link">对象转换为数组</a> 类<span class="hljs-keyword">class</span> </code></pre> <blockquote><p><strong><a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="箭头函数" target="_blank">箭头函数</a>,<a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="箭头函数" target="_blank">箭头函数</a>的特点,应该是 <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a> 的指向</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="箭头函数是匿名函数,不绑定自己的this,arguments,super,new.target 箭头函数会捕获其所在上下文的this值,作为自己的this值,在使用call/apply绑定时,相当于只是传入了参数,对this没有影响 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>箭头函数是匿名函数,不绑定自己的<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>,<a href="http://www.js-code.com/tag/arguments" title="浏览关于“arguments”的文章" target="_blank" class="tag_link">arguments</a>,<span class="hljs-keyword"><a href="http://www.js-code.com/tag/super" title="浏览关于“super”的文章" target="_blank" class="tag_link">super</a></span>,<a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a>.target 箭头函数会捕获其所在上下文的<span class="hljs-keyword">this</span>值,作为自己的<span class="hljs-keyword">this</span>值,在使用c<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a>/apply绑定时,相当于只是传入了参数,对<span class="hljs-keyword">this</span>没有影响 </code></pre> <blockquote><p> <strong>了解 MVVM 吗,和 MVC 的区别</strong></p> <p><strong>对象和类的区别,举个现实中的例子</strong></p> <p><strong>你理解的面向对象</strong></p> <p><strong>说一下原型链</strong></p> <p><strong>ES6 新增的 set() 和 map() 有什么区别</strong></p> <p><strong><a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>去重</strong></p> </blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="ES6:<a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a>.from(<a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Set(arr));<br /> <script type=&quot;text/javascript&quot;> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> arr = ['1',2,1,3,5,6,5] <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> arr<a href="http://www.js-code.com/tag/String" title="String" target="_blank">String</a> = arr.<a href="http://www.js-code.com/tag/toString" title="toString" target="_blank">toString</a>() console.log(arrStr<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>g) arrSplit = arr1.split(',') // 把一个字符串分割成字符串<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>。 //join() 把数组中的所有元素放入一个字符串。 console.log(arrSplit) <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> set = <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Set(arrSplit) console.log(set) let newArr = <a href="http://www.js-code.com/tag/Array" title="Array" target="_blank">Array</a>.from(set) console.log(newArr) </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>ES6:<span class="hljs-built_in">Array</span>.from(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Set</span>(arr)); <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/<a href="http://www.js-code.com/tag/java" title="浏览关于“java”的文章" target="_blank" class="tag_link">java</a>script"</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">let</span> arr = [<span class="hljs-string">'1'</span>,<span class="hljs-number">2</span>,<span class="hljs-number">1</span>,<span class="hljs-number">3</span>,<span class="hljs-number">5</span>,<span class="hljs-number">6</span>,<span class="hljs-number">5</span>] <span class="hljs-keyword">let</span> arr<a href="http://www.js-code.com/tag/String" title="浏览关于“String”的文章" target="_blank" class="tag_link">String</a> = arr.<a href="http://www.js-code.com/tag/toString" title="浏览关于“toString”的文章" target="_blank" class="tag_link">toString</a>() <span class="hljs-built_in">console</span>.log(arrString) arrSplit = arr1.split(<span class="hljs-string">','</span>) <span class="hljs-comment">// 把一个字符串分割成字符串数组。</span> <span class="hljs-comment">//join() 把数组中的所有元素放入一个字符串。</span> <span class="hljs-built_in">console</span>.log(arrSplit) <span class="hljs-keyword">let</span> set = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Set</span>(arrSplit) <span class="hljs-built_in">console</span>.log(set) <span class="hljs-keyword">let</span> newArr = <span class="hljs-built_in">Array</span>.from(set) <span class="hljs-built_in">console</span>.log(newArr) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> </code></pre> <blockquote><p><strong>哪些方法会改变原数组</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="shift:将第一个元素删除并且返回删除元素,空即为undefined unshift:向数组开头添加元素,并返回新的长度 pop:删除最后一个并返回删除的元素 push:向数组末尾添加元素,并返回新的长度 reverse:颠倒数组顺序 sort:对数组排序 splice:splice(start,length,item)删,增,替换数组元素,返回被删除数组,无删除则不返回 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs perl"><code><span class="hljs-keyword">shift</span>:将第一个元素删除并且返回删除元素,空即为undefined <span class="hljs-keyword">unshift</span>:向数组开头添加元素,并返回新的长度 <span class="hljs-keyword">pop</span>:删除最后一个并返回删除的元素 <span class="hljs-keyword">push</span>:向数组末尾添加元素,并返回新的长度 <span class="hljs-keyword">reverse</span>:颠倒数组顺序 <span class="hljs-keyword">sort</span>:对数组排序 <span class="hljs-keyword">splice</span>:<span class="hljs-keyword">splice</span>(start,<span class="hljs-keyword"><a href="http://www.js-code.com/tag/length" title="浏览关于“length”的文章" target="_blank" class="tag_link">length</a></span>,item)删,增,替换数组元素,返回被删除数组,无删除则不返回 </code></pre> <blockquote><p> <strong>深拷贝和浅拷贝</strong></p> <p><strong>async 和 await 了解吗,(不太了解,只知道返回的是 promsie 对象)</strong><br /><strong>c<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a>() 和 apply() 的区别和作用?</strong></p> </blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="区别:apply()与call()作用没有区别,用法与call()方法稍有区别,就是call()的第二个参数(调用函数使用的参数),是一个一个传入的;而apply()的第二个参数的值是使用数组的形式传入的 作用:在Javascript中,每个函数都包含两个非继承而来的方法,call和apply。这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内的this对象的值。 apply方法接收两个参数,第一个参数是在其中运行函数的作用域,第二个是一个参数数组或者arguments对象。 call方法与apply方法作用相同,第一个参数也相同,区别在于,其余的参数需要逐个列出。 apply(thisArg, argArray); call(thisArg[,arg1,arg2…]); 是使用call还是apply要看具体的情况。如果你知道所有参数或者参数的数量不多,可以使用call; 如果参数的数量不确定,或者数量很大,或者你收到的是一个数组或者是个arguments对象,则需要使用apply。 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>区别:apply()与<span class="hljs-keyword">call</span>()作用没有区别,用法与<span class="hljs-keyword">call</span>()方法稍有区别,就是<span class="hljs-keyword">call</span>()的第二个参数(调用函数使用的参数),是一个一个传入的;而<span class="hljs-keyword">apply</span>()的第二个参数的值是使用数组的形式传入的 作用:在Javascript中,每个函数都包含两个非继承而来的方法,<span class="hljs-keyword">call</span>和<span class="hljs-keyword">apply</span>。这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内的this对象的值。 <span class="hljs-keyword">apply</span>方法接收两个参数,第一个参数是在其中运行函数的作用域,第二个是一个参数数组或者arguments对象。 <span class="hljs-keyword">call</span>方法与<span class="hljs-keyword">apply</span>方法作用相同,第一个参数也相同,区别在于,其余的参数需要逐个列出。 <span class="hljs-keyword">apply</span>(thisArg, argArray); <span class="hljs-keyword">call</span>(thisArg[,arg1,arg2…]); 是使用<span class="hljs-keyword">call</span>还是<span class="hljs-keyword">apply</span>要看具体的情况。如果你知道所有参数或者参数的数量不多,可以使用<span class="hljs-keyword">call</span>; 如果参数的数量不确定,或者数量很大,或者你收到的是一个数组或者是个arguments对象,则需要使用<span class="hljs-keyword">apply</span>。 </code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

2018年前端面试题(秋季面试随意整理的)

全部内容,希望文章能够帮你解决

2018年前端面试题(秋季面试随意整理的)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过