Ⅰ web前端面试经常问到的面试题有哪些
Web前端经常被问到的面试题及答案
一、HTML+CSS
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外
链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维
护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
最主要的不同:
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档
加入XMl声明可触发,解析方式更改为IE5.5 拥有IE5.5的bug
4.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素:div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容,border ,margin,padding
5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 :同时加载
前者无兼容性,后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式,后者不可
6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
7.前端页面有哪三层构成,分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
8.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
二、Javascript
1.javascript的typeof返回哪些数据类型
Object number function boolean underfind
2.例举3种强制类型转换和2种隐式类型转换?
强制(parseInt,parseFloat,number)
隐式(== – ===)
3.split() join() 的区别
前者是切割成数组的形式,后者是将数组转换成字符串
4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
5.事件绑定和普通事件有什么区别
6.IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
7.IE和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的,一个是类似修改密码的
9.call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax请求时,如何解释json数据
使用eval parse 鉴于安全性考虑 使用parse更靠谱
11.b继承a的方法
12.写一个获取非行间样式的函数
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
Ⅱ 前端经典面试题(包含JS、CSS、React、浏览器等)
防抖
节流
误区:我们经常说get请求参数的大小存在限制,而post请求的参数大小是无限制的。
实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器,浏览器或web服务器限制了url的长度。为了明确这个概念,我们必须再次强调下面几点:
补充补充一个get和post在缓存方面的区别:
可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Mole、
vue和react都是采用diff算法来对比新旧虚拟节点,从而更新节点。在vue的diff函数中(建议先了解一下diff算法过程)。在交叉对比中,当新节点跟旧节点 头尾交叉对比 没有结果时,会根据新节点的key去对比旧节点数组中的key,从而找到相应旧节点(这里对应的是一个key => index 的map映射)。如果没找到就认为是一个新增节点。而如果没有key,那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射,另一种是遍历查找。相比而言。map映射的速度更快。vue部分源码如下:
创建map函数
遍历寻找
在React中, 如果是由React引发的事件处理(比如通过onClick引发的事件处理),调用setState不会同步更新this.state,除此之外的setState调用会同步执行this.state 。所谓“除此之外”,指的是绕过React通过addEventListener直接添加的事件处理函数,还有通过setTimeout/setInterval产生的异步调用。
**原因:**在React的setState函数实现中,会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说,而isBatchingUpdates默认是false,也就表示setState会同步更新this.state,但是, 有一个函数batchedUpdates,这个函数会把isBatchingUpdates修改为true,而当React在调用事件处理函数之前就会调用这个batchedUpdates,造成的后果,就是由React控制的事件处理过程setState不会同步更新this.state 。
虚拟dom相当于在js和真实dom中间加了一个缓存,利用dom diff算法避免了没有必要的dom操作,从而提高性能。
具体实现步骤如下:
用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中
当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了。
结构:display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击, visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,不能点击 opacity: 0: 不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,可以点击
继承:display: none:是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示。visibility: hidden:是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式。
性能:displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容,性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 :修改元素会造成重绘,性能消耗较少
联系:它们都能让元素不可见
常用的一般为三种 .clearfix , clear:both , overflow:hidden ;
比较好是 .clearfix ,伪元素万金油版本,后两者有局限性.
clear:both :若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷
overflow:hidden :这种若是用在同个容器内,可以形成 BFC 避免浮动造成的元素塌陷
概念:将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
优点:
缺点:
block 元素特点:
1.处于常规流中时,如果 width 没有设置,会自动填充满父容器 2.可以应用 margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间(独占一个水平空间) 5.忽略 vertical-align
inline 元素特点
1.水平方向上根据 direction 依次布局
2.不会在元素前后进行换行
3.受 white-space 控制
4. margin/padding 在竖直方向上无效,水平方向上有效
5. width/height 属性对非替换行内元素无效,宽度由元素内容决定
6.非替换行内元素的行框高由 line-height 确定,替换行内元素的行框高由 height , margin , padding , border 决定 7.浮动或绝对定位时会转换为 block 8. vertical-align 属性生效
GIF :
JPEG :
PNG :
七种数据类型
(ES6之前)其中5种为基本类型: string , number , boolean , null , undefined ,
ES6出来的 Symbol 也是原始数据类型 ,表示独一无二的值
Object 为引用类型(范围挺大),也包括数组、函数,
输出结果是:
工厂模式
简单的工厂模式可以理解为解决多个相似的问题;
单例模式
只能被实例化(构造函数给实例添加属性与方法)一次
沙箱模式
将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值
发布者订阅模式
就例如如我们关注了某一个公众号,然后他对应的有新的消息就会给你推送,
代码实现逻辑是用数组存贮订阅者, 发布者回调函数里面通知的方式是遍历订阅者数组,并将发布者内容传入订阅者数组
1.字面量
2.Object构造函数创建
3.使用工厂模式创建对象
4.使用构造函数创建对象
HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件onclick、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。
什么是事件流:事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。
addEventListener : addEventListener 是DOM2 级事件新增的指定事件处理程序的操作,这个方法接收3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。
IE只支持事件冒泡 。
获取一个对象的原型,在chrome中可以通过__proto__的形式,或者在ES6中可以通过Object.getPrototypeOf的形式。
那么Function.proto是什么么?也就是说Function由什么对象继承而来,我们来做如下判别。
我们发现Function的原型也是Function。
我们用图可以来明确这个关系:
这里来举个栗子,以 Object 为例,我们常用的 Object 便是一个构造函数,因此我们可以通过它构建实例。
则此时, 实例为instance , 构造函数为Object ,我们知道,构造函数拥有一个 prototype 的属性指向原型,因此原型为:
这里我们可以来看出三者的关系:
在 JS 中,继承通常指的便是 原型链继承 ,也就是通过指定原型,并可以通过原型链继承原型上的属性或者方法。
在函数式编程中,函数是一等公民。那么函数柯里化是怎样的呢?
函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数,并且返回接收余下参数且返回结果的新函数的技术。
函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。
在一个函数中,首先填充几个参数,然后再返回一个新的函数的技术,称为函数的柯里化。通常可用于在不侵入函数的前提下,为函数 预置通用参数 ,供多次重复调用。
call 和 apply 都是为了解决改变 this 的指向。作用都是相同的,只是传参的方式不同。
除了第一个参数外, call 可以接收一个参数列表, apply 只接受一个参数数组。
bind 和其他两个方法作用也是一致的,只是该方法会返回一个函数。并且我们可以通过 bind 实现柯里化。
如何实现一个 bind 函数
对于实现以下几个函数,可以从几个方面思考
如何实现一个call函数
如何实现一个apply函数
箭头函数其实是没有 this 的,这个函数中的 this 只取决于他外面的第一个不是箭头函数的函数的 this 。在这个例子中,因为调用 a 符合前面代码中的第一个情况,所以 this 是 window 。并且 this 一旦绑定了上下文,就不会被任何代码改变。
在函数中,我们首先使用 var 关键字声明了 name 变量。这意味着变量在创建阶段会被提升( JavaScript 会在创建变量创建阶段为其分配内存空间),默认值为 undefined ,直到我们实际执行到使用该变量的行。我们还没有为 name 变量赋值,所以它仍然保持 undefined 的值。
使用 let 关键字(和 const )声明的变量也会存在变量提升,但与 var 不同,初始化没有被提升。在我们声明(初始化)它们之前,它们是不可访问的。这被称为“暂时死区”。当我们在声明变量之前尝试访问变量时, JavaScript 会抛出一个 ReferenceError 。
关于 let 的是否存在变量提升,我们何以用下面的例子来验证:
let 变量如果不存在变量提升, console.log(name) 就会输出 ConardLi ,结果却抛出了 ReferenceError ,那么这很好的说明了, let 也存在变量提升,但是它存在一个“暂时死区”,在变量未初始化或赋值前不允许访问。
变量的赋值可以分为三个阶段:
关于 let 、 var 和 function :
依次输出:undefined -> 10 -> 20
答案: D
colorChange 方法是静态的。静态方法仅在创建它们的构造函数中存在,并且不能传递给任何子级。由于 freddie 是一个子级对象,函数不会传递,所以在 freddie 实例上不存在 freddie 方法:抛出 TypeError 。
1.使用第一次push,obj对象的push方法设置 obj[2]=1;obj.length+=1 2.使用第二次push,obj对象的push方法设置 obj[3]=2;obj.length+=1 3.使用console.log输出的时候,因为obj具有 length 属性和 splice 方法,故将其作为数组进行打印 4.打印时因为数组未设置下标为 0 1 处的值,故打印为empty,主动 obj[0] 获取为 undefined
undefined {n:2}
首先,a和b同时引用了{n:2}对象,接着执行到a.x = a = {n:2}语句,尽管赋值是从右到左的没错,但是.的优先级比=要高,所以这里首先执行a.x,相当于为a(或者b)所指向的{n:1}对象新增了一个属性x,即此时对象将变为{n:1;x:undefined}。之后按正常情况,从右到左进行赋值,此时执行a ={n:2}的时候,a的引用改变,指向了新对象{n:2},而b依然指向的是旧对象。之后执行a.x = {n:2}的时候,并不会重新解析一遍a,而是沿用最初解析a.x时候的a,也即旧对象,故此时旧对象的x的值为{n:2},旧对象为 {n:1;x:{n:2}},它被b引用着。后面输出a.x的时候,又要解析a了,此时的a是指向新对象的a,而这个新对象是没有x属性的,故访问时输出undefined;而访问b.x的时候,将输出旧对象的x的值,即{n:2}。
在比较相等性,原始类型通过它们的值进行比较,而对象通过它们的引用进行比较。 JavaScript 检查对象是否具有对内存中相同位置的引用。
我们作为参数传递的对象和我们用于检查相等性的对象在内存中位于不同位置,所以它们的引用是不同的。
这就是为什么 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。
所有对象键(不包括 Symbols )都会被存储为字符串,即使你没有给定字符串类型的键。这就是为什么 obj.hasOwnProperty(Ƈ') 也返回 true 。
上面的说法不适用于 Set 。在我们的 Set 中没有 “1” : set.has(Ƈ') 返回 false 。它有数字类型 1 , set.has(1) 返回 true 。
这题考察的是对象的键名的转换。
catch 块接收参数 x 。当我们传递参数时,这与变量的 x 不同。这个变量 x 是属于 catch 作用域的。
之后,我们将这个块级作用域的变量设置为 1 ,并设置变量 y 的值。现在,我们打印块级作用域的变量 x ,它等于 1 。
在 catch 块之外, x 仍然是 undefined ,而 y 是 2 。当我们想在 catch 块之外的 console.log(x) 时,它返回 undefined ,而 y 返回 2 。
Ⅲ BAT 前端工程师面试对算法一般有怎样的要求
当我是实习生时,我遇到了BAT三,所以我对算法没有要求。当然,实习生的要求也可能比较低。
阿里面试:
一边使用电脑直接连接到互联网看到面试官网站,博客之类的,然后选择一些问,并帮助考背后的标签组件的实现和JS类继承,等等。在第二个方面,我也看到了,GitHub,博客等等。
实际上,在工作的前端使用的算法并不多,即使像jQuery这样的公共库的实现对算法的应用也不是很好。至于何时使用,请使用NodeJs偶尔编写自动化工具,前端WebGL矩阵操作,图像处理,如需要,但我认为这些都超出了一般前端工程师的能力。
Ⅳ 会js能刷算法题吗
leecode可以用js刷题了,我大js越来越被认可了是吧。但是刷题中会因为忽略js的一些特性掉入坑里。
前端算法入门一:刷算法题常用的JS基础扫盲
前端算法入门二:时间空间复杂度&8大数据结构的JS实现
前端算法入门三:5大排序算法&2大搜索&4大算法思想
前端面试算法高频100题(附答案,分析思路,一题多解)。
Ⅳ 零基础学前端还是java还是python
首推Java。真的,Python当然是好,但是对于一个新入门的人,最重要的是先找到工作不是吗?而找工作的话,Java无疑是最容易的。相比较PHP与Python而言,Java程序员的岗位需求要大的很多,对于跨行业的人而言,最困难的其实是第一步,那就是如何进入这个行业。如果你连进都进不来,第一份工作迟迟无法开始,那么好好努力,补上数据结构,设计模式,算法设计这些差距就根本无从说起,不是吗?
接着,我来谈谈具体的规划。
1.
了解Java的运行环境。搞清楚path和classpath是干什么的,怎么在命令行进行编译,执行。知道IDE的各个按钮后面真正发生了什么事情。
2.
掌握Java的语法。搞清楚包,接口,类,继承这些基本概念。掌握多态,overwrite,死背下IO的接口,包括InputStream/OutputStream和Writer/Reader,死背下网络编程和GUI编程的接口,背JDBC接口。这一步,推荐的书是《
疯狂Java讲义》。
3.
掌握多线程编程。弄明白ConcurrencyHashMap是怎么实现的,搞清楚synchronized是怎么回事,弄明白为什么要有Runnable接口。
在第二步和第三步掌握到80%的时候,你就可以考虑找工作了。
4. 在工作中体会一下设计模式。推荐《轻量级Java
EE企业应用实战》这本书。看完里面的Decorator,IO接口你再也不会去死记硬背了。用的时候,根据Adaptor和Decorator的命名规则,自己临时推都推得出来。
5. 恶补数据结构。 搞清楚 LinkedList和
ArrayList的实现机制,了解它们的每一个接口的时间复杂度。同样的还有其他容器,Map啊,Set啊,都是一样的。栈,队列,二叉树,图贯穿编程始终,如果这一步你迈不过去,那就只能在低阶程序员里打转。
6.
如果有可能,最好对一些算法设计也有所涉猎。比如动态规则的思路,贪心算法,诸如KMP这种奇妙的算法等。这一步没有数据结构那么重要,学得好当然好,学不好也不用太挫败。
到了这一步,你和科班程序员之间的差距就不大了。可以在工作中独立承担开发任务了。
疯狂软件教育中心专注于Java培训,疯狂软件Java培训可以有效的帮助你提升相关技能。名师讲解Java设计和编程、Web前端开发、JavaEE进阶、大数据核心知识等,让你在5个半月内快速获得理论和实践的双重提升。
7.
进阶,这时候就可以有自己的思考了。Java发展到现在,被用在各种各样的情景之中,说它是应用最广泛的编程语言并不过分。你在打好基础以后,就可以考虑应该向哪个方向发展了。比如服务端的架构,最好能学习一下JavaEE。JEE一直以来,都是让人觉得门槛太高。这个其实可以从Spring入手,搞清楚反射,控制反转,依赖注射都是什么鬼(这些神叨叨的名词其实都是为了解决Java本身不够动态这个缺陷而出现的,这里不展开,我只想提醒的是,这些概念没有什么大不了的东西,不要被爱装逼的家伙吓住了)。还有消息这个东西,还有ORM这个东西,都去搞搞清楚。想一下它们要解决什么问题,再猜一下他们是怎么实现的。我面试的时候发现,其实大多数优秀的开发者,即使以前没思考过这个问题,让他现场设计一下Hibernate,都能设计得差不多。这说明,这些框架性的东没有什么大不了的。有了基础,你也能设计出来。关键是要去动脑筋想。以上是以服务端开发举例,那么对于客户端,你就去思考事件响应机制是如何工作的(这个我不熟悉,就不再多说了)。还可以深入研究一下JVM的源代码,以及其实现机制,了解一下垃圾回收算法等等。
到了这一步,你就可以应聘Java高级开发了。如果运气好,年薪30万是有可能的。保底也要20万了。
8.
架构。到了这一步,你就算是登堂入室,真正迈入高级开发人员了。这一步,你要思考更多的东西,比如,如何处理高并发,如何应对分布式系统,如何提供更健壮的数据服务。到了这一步,那就没有什么可以参考的,现成的东西了。全靠自己的悟性了。那最后能达到什么高度,就不是我这个层次能点评的了。
编程的世界永远向所有热爱编程的人开放,这是一个自由,平等,共享的世界,我始终是这样坚信的。
Ⅵ 前端面试一般问什么
web前端面试会问人事方面的内容和web前端技术的内容;
人事的面试
web前端人事面试方面,需要注意如何自我介绍、性格有哪些优劣势、职业规划方向是什么、你的特长是什么、对于加班之类你是怎么看待等人事面试内容;
web前端技术的面试
技术面试,需要注意HTML+CSS+JavaScript以及JS主流框架的使用,比如Vue、React等,前端相关技术,比如tcp握手协议、网络安全、后端技术等;
对于web前端面试准备,建议你去看“决胜前端”(min app),它里面包含了很多web前端技术面试、人事面试等面试真题,而且针对面试题做了详细的分析与解答。
我给你截图看一下例子吧
Ⅶ 前端面试常见算法总结(上)
近期准备面试,看了一些常见的算法,俗话说得好,好记性不如烂笔头,记下来好让自己可以随时回顾复习,写到哪算到哪吧~
方法一:for循环
方法二:用rece高级算法
方法一:for循环加splice方法
方法二:for循环加创建新数组
方法三:利用rece高级算法 (emm......感慨一下,rece很牛逼呀)
/*--arr.rece(callback,[initialValue]) --*/ rece这里就先不详细介绍了!
方法四:es6
Array.from()就是把一个类数组对象或者可迭代的对象转换成一个真正的数组;
Set对象:
1.允许存储任何类型的 唯一值 ,无论是原始值或者是对象引用。
2.set中的值的集合,你可以按照插入的顺序迭代它的元素。
3.set中的元素只会出现一次,即 Set 中的元素是唯一的。
下面就是先用new set将数组去重存在set对象里,结果返回一个set对象,然后再用Array.from把set对象转换成数组。
Ⅷ web前端工程师需要掌握哪些技术
1、开发语言
HTML发展历史有二十多年,历经多次版本更新,HTML5和CSS3的出现又是一次革新。有些人认为前端开发要掌握的技能简单,不就是网页制作嘛。其实不然,web前端需要掌握的核心语言HTML+CSS+JavaScript,JavaScript作为最难的语言之一,许多编程高手也不敢妄自菲薄自封精通。由于JavaScript与html的差异性,以及静态分开处理的一些好处。在大公司编写静态效果和动态效果往往是分开由不同的人完成的。小公司因为需要压缩成本,就需要每个人会的越多越好,如果你向往项目经理发展,能懂一两门后端语言,绝对是锦上添花。
2、浏览器兼容性
互联网目前主流浏览器有IE6/7/8/9,Firefox,Chrome,Opera,Safari,遨游,包括国内主流的搜狗,腾讯TT,360,the word等等;从内河上讲主要有IE的,遨游版IE,Safari,Firefox以及opera的,这些都是大家常见的,如果你身边有老网虫喜欢收藏浏览器,你翻翻他的硬盘,相信十几款肯定是有的。每种内核对代码的解析是不完全一样的,即使同样内核也可能存在很大差异,如IE和遨游版IE。不说非主流的浏览器,就主流的浏览器,要做到完全兼容,也并非易事,需要长时间的积累和测试,需要前端开发工程师对前端端开发的热爱和激情。
目前移动互联网的发展趋势也不容小觑,将慢慢占据互联网的主要份额。移动互联网最突出的好处是方便和及时,试想一下,走在某地风景很好,拍下来后自 动分享给各路好友,因此手机上的浏览器兼容也看刻不容缓,现在手机上的浏览器也是纷繁复杂,主流的UCWEB,safari,IE,3G门户的,以及 symbian低端机的“残缺儿童”,包括国外流行手机我们不知道的一些浏览器,更糟糕的是这些浏览器解析因为手机硬件的不同,每个浏览器得到的结果都是 完全不同的。
3.hack技术
由于不同的浏览器对CSS的解析认识不一样,因此会导致生成的页面效果不一样,这个时候就需要针对不同的浏览器写不同的CSS,这个过程叫CSS hack。虽然我们写代码都要求按照标准,不写hack代码,但实际工作中为了兼容主流浏览器,hack代码是免不了的,所以这也应该是每个前端开发人员 必备的技能。
4.业内标准
目前Web前端开发中提到最多的就是W3C标准,这是一系列标准的集合,代表了互联网发展的方向,也代表了前端开发的一种信仰。写的代码都要100%通过标准验证,为通过标准验证而感到自豪,会有效推动互联网的快速发展。
5.开发工具
目前比较流行的是Dreamweaver, 其曾经风靡一时,到现在也没有退出历史舞台,证明DW还是有很大优势的,尤其是针对初学者,其强大的提示功能可以帮助我们很快的熟悉并掌握网页布局,但现 在更提倡的是纯手写代码,既体现技能方面的卓越,也可有效避免使用DW等工具产生的冗余代码。此外再掌握一些photoshop技能,即使没有美工,也能 简单处理一些图像。
小结,掌握以上技能,可以说你是一个合格的前端开发人员,能够参与到一个大的项目中,或者自己独立写出一个网页。虽然这看起来和网页制作设计差不多,从效果上来看,都是制作网页的,但实际上,技术上所超出的已经是好几个档次的东西了。
Ⅸ 前端算法入门:刷算法题常用的 JS 基础扫盲
此篇属于前端算法入门系列的第一篇,主要介绍常用的 数组方法 、 字符串方法 、 遍历方法 、 高阶函数 、 正则表达式 以及相关 数学知识 。
在尾部追加,类似于压栈,原数组会变。
在尾部弹出,类似于出栈,原数组会变。数组的 push & pop 可以模拟常见数据结构之一:栈。
在头部压入数据,类似于入队,原数组会变。
在头部弹出数据,原数组会变。数组的 push (入队) & shift (出队) 可以模拟常见数据结构之一:队列。
concat 会在当前数组尾部拼接传入的数组,然后返回一个新数组,原数组不变。
在数组中寻找该值,找到则返回其下标,找不到则返回 -1 。
在数组中寻找该值,找到则返回 true ,找不到则返回 false 。
将数组转化成字符串,并返回该字符串,不传值则默认逗号隔开,原数组不变。
翻转原数组,并返回已完成翻转的数组,原数组改变。
从 start 开始截取到 end ,但是不包括 end
可参考 MDN:Sort [5]
将数组转化成字符串,并返回该字符串,逗号隔开,原数组不变。
返回指定索引位置处的字符。类似于数组用中括号获取相应下标位置的数据。
类似数组的concat(),用来返回一个合并拼接两个或两个以上字符串。原字符串不变。
indexOf ,返回一个字符在字符串中首次出现的位置, lastIndexOf 返回一个字符在字符串中最后一次出现的位置。
提取字符串的片断,并把提取的字符串作为新的字符串返回出来。原字符串不变。
使用指定的分隔符将一个字符串拆分为多个子字符串数组并返回,原字符串不变。
match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,并返回一个包含该搜索结果的数组。
注意事项 :如果 match 方法没有找到匹配,将返回 null 。如果找到匹配,则 match 方法会把匹配到以数组形式返回,如果正则规则未设置全局修饰符 g ,则 match 方法返回的数组有两个特性: input 和 index 。 input 属性包含整个被搜索的字符串。 index 属性包含了在整个被搜索字符串中匹配的子字符串的位置。
replace 接收两个参数,参数一是需要替换掉的字符或者一个正则的匹配规则,参数二,需要替换进去的字符,仔实际的原理当中,参数二,你可以换成一个回调函数。
在目标字符串中搜索与正则规则相匹配的字符,搜索到,则返回第一个匹配项在目标字符串当中的位置,没有搜索到则返回一个 -1 。
toLowerCase 把字母转换成小写, toUpperCase() 则是把字母转换成大写。
includes 、 startsWith 、 endsWith , es6 的新增方法, includes 用来检测目标字符串对象是否包含某个字符,返回一个布尔值, startsWith 用来检测当前字符是否是目标字符串的起始部分,相对的 endwith 是用来检测是否是目标字符串的结尾部分。
返回一个新的字符串对象,新字符串等于重复了指定次数的原始字符串。接收一个参数,就是指定重复的次数。原字符串不变。
最常用的 for 循环,经常用的数组遍历,也可以遍历字符串。
while 、 do while 主要的功能是,当满足 while 后边所跟的条件时,来执行相关业务。这两个的区别是, while 会先判断是否满足条件,然后再去执行花括号里面的任务,而 do while 则是先执行一次花括号中的任务,再去执行 while 条件,判断下次还是否再去执行 do 里面的操作。也就是说 do while 至少会执行一次操作 .
拷贝一份遍历原数组。
for…of 是 ES6 新增的方法,但是 for…of 不能去遍历普通的对象,** for…of 的好处是可以使用 break 跳出循环。**
面试官:说一下 for...in 和 for...of 区别?
返回一个布尔值 。当我们需要判定数组中的元素是否满足某些条件时,可以使用 every / some 。这两个的区别是, every 会去判断判断数组中的每一项,而 some 则是当某一项满足条件时返回。
rece 从左到右将数组元素做“叠加”处理,返回一个值。 receRight 从右到左。
Object.keys 方法的参数是一个对象,返回一个数组。该数组的成员都是该对象自身的(而不是继承的)所有属性名,且只返回可枚举的属性。
Object.getOwnPropertyNames 方法与 Object.keys 类似,也是接受一个对象作为参数,返回一个数组,包含了该对象自身的所有属性名。但它能返回不可枚举的属性。
这里罗列一些我在刷算法题中遇到的正则表达式,如果有时间可认真学一下 正则表达式不要背 [7] 。
持续更新,敬请期待……
若一个正整数无法被除了 1 和它自身之外的任何自然数整除,则称该数为质数(或素数),否则称该正整数为合数。