切身经历面试题整理(下)

相同：Less和Sass在语法上有些共性，比如下面这些：

1、混入(Mixins)——class中的class；

2、参数混入——可以传递参数的class，就像函数一样；

3、嵌套规则——Class中嵌套class，从而减少重复的代码；

4、运算——CSS中用上数学；

5、颜色功能——可以编辑颜色；

6、名字空间(namespace)——分组样式，从而可以被调用；

7、作用域——局部修改样式；

8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

不同：

vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。

使用watch时有一个特点，就是当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

我们不推荐在同一元素上使用 v-if 和 v-for。更多细节可查阅[风格指南](https://links.jianshu.com/go?to=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fstyle-guide%2F%23%25E9%2581%25BF%25E5%2585%258D-v-if-%25E5%2592%258C-v-for-%25E7%2594%25A8%25E5%259C%25A8%25E4%25B8%2580%25E8%25B5%25B7-%25E5%25BF%2585%25E8%25A6%2581)。当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

1\. jquery在iframe子页面获取父页面元素和方法代码如下:

parent.$("selector");

parent.method();

2\. jquery在父页面获取iframe子页面的元素和方法

代码如下:

iframe.$("select");

iframe.method();

js在iframe子页面获取父页面元素代码如下:

window.parent.document.getElementById("元素id");

js在父页面获取iframe子页面元素代码如下:

window.frames["iframe_ID"].document.getElementById("元素id");

方法调用

父页面调用子页面方法：FrameName.window.childMethod();

子页面调用父页面方法：parent.window.parentMethod();

捕获异常的语法如下：

try {

//运行代码

} catch(err) {

//处理错误

}

基本类型：string、number、boolean、undefined、null

复杂类型：object

splice(index,len,[item]) 注释：该方法会改变原始数组。

splice有3个参数，它也可以用来替换/删除/添加数组内某一个或者几个值

index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空

delete方法删除掉数组中的元素后，会把该下标出的值置为undefined,数组的长度不会变

var arr = ['a','b','c','d'];

delete arr[1];

arr;

//["a", undefined × 1, "c", "d"] 中间出现两个逗号，数组长度不变，有一项为undefined

slice(start,end)：方法可从已有数组中返回选定的元素，返回一个新数组，包含从start到end（不包含该元素）的数组元素。

注意：该方法不会改变原数组，而是返回一个子数组，如果想删除数组中的一段元素，应该使用Array.splice()方法。

1.slice(start,end)：方法可从已有数组中返回选定的元素，返回一个新数组，包含从start到end（不包含该元素）的数组元素。

注意：该方法不会改变原数组，而是返回一个子数组，如果想删除数组中的一段元素，应该使用Array.splice()方法。

start参数：必须，规定从何处开始选取，如果为负数，规定从数组尾部算起的位置，-1是指最后一个元素。

end参数：可选（如果该参数没有指定，那么切分的数组包含从start倒数组结束的所有元素，如果这个参数为负数，那么规定是从数组尾部开始算起的元素）。

var arr = [1,2,3,4,5];

console.log(arr.slice(1));//[2,3,4,5] 选择序列号从1到最后的所有元素组成的新数组。

console.log(arr.slice(1,3))//[2,3] 不包含end，序列号为3的元素

同时slice(start,end)可以作用于字符串的切割

2.splice()：该方法向或者从数组中添加或者删除项目，返回被删除的项目。（该方法会改变原数组）

splice（index，num，item1，...itemX）

index参数：必须，整数，规定添加或者删除的位置，使用负数，从数组尾部规定位置。

num参数：必须，要删除的数量，如果为0，则不删除项目。

tem1,...itemX参数：可选，向数组添加的新项目。

var arr = [1,2,3,4,5];

console.log(arr.splice(2,1,"hello"));//[3] 返回的新数组

console.log(arr);//[1, 2, "hello", 4, 5] 改变了原数组

push() ：可向数组的末尾添加一个或多个元素，并返回新的长度。

arrayObject.push(newelement1,newelement2,....,newelementX)

indexOf() 返回字符串中检索指定字符第一次出现的位置

replace() 替换与正则表达式匹配的子串

slice() 提取字符串的片断，并在新的字符串中返回被提取的部分

split() 把字符串分割为子字符串数组

substr() 从起始索引号提取字符串中指定数目的字符

substring() 提取字符串中两个指定的索引号之间的字符

toString() 返回字符串对象值

charAt() 返回指定索引位置的字符

concat() 连接两个或多个字符串，返回连接后的字符串

a) cookie在浏览器和服务器之间来回传递。而sessionStorage和localStroage不会自动把数据发送给服务器，仅在本地保存

b) 存储大小限制也不同，cookie数据不能超过4k，同时因为每次Http请求都会携带cookie，所以cookie只适合保存很小的数据，比如会话标识。sessionStroage和localstroage虽然也有大小限制，但是比cookie大很多，可以达到5M或更大；

c) 数据有效期也不同，sessionStroage仅在当前浏览器窗口关闭前有效；localStroage始终有效，窗口或者浏览器关闭也一直保存；cookie在设置的有效期内有效，不管窗口或者浏览器是否关闭；

d) 作用域不同，sessionStroage不能在不同的浏览器窗口共享，即使是同一个页面；localStroage在所有的同源窗口中都是共享的；cookie也是在所有的同源窗口中共享的；

e) Web storage 支持事件通知机制，可以将数据更新的通知发送给监听者；

f) Web storage 的api接口使用更方便。

同

computed和watch都是观察页面的数据变化的。

异：

1. computed只有当页面数据变化时才会计算，当数据没有变化时，它会读取缓存。而watch每次都需要执行函数，methods也是每次都需要执行
2. 数据变化时执行异步操作，这个时候使用watch是合适的

添加属性deep，进行深度监听

• 部分命令发生了变化：

创建项目 vue create

启动项目 npm run serve

• 默认项目目录结构也发生了变化：

移除了配置文件目录，config 和 build 文件夹

移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中

在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

• 配置

配置信息在根目录下 vue.config.js

token 值: 登录令牌.利用 token 值来判断用户的登录状态.

一、为什么要使用路由懒加载

　　为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。

二、定义

　　懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。

三、使用

　　常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import

四、组件懒加载

npm run build --report 查看项目各部分所占大小

1.组件按需加载

2.路由懒加载

3.异步组件

4.图片的压缩合并

可以下载一个无损图片压缩工具,如有可能，将图片制作成精灵图

5.CDN加速

在index.html中引入cdn资源

6.不生成.map文件，修改config/index.js文件中的productionSourceMap属性值为false

7.webpack优化 -- compression-webpack-plugin 开启gzip

1.系统库的引入

{

Es5：需要先使用require导入React包，成为对象，再去进行真正引用；

Es6：可以使用import方法来直接实现系统库引用，不需要额外制作一个类库对象

}

2.导出及引用单个类

{

Es5：要导出一个类给别的模块用，一般通过module.exports来实现。引用时，则依然通过 require方法来获取；

Es6：可以使用用export default来实现相同的功能，使用import方法来实现导入

注意:ES5和ES6的导入导出方法是成对出现的，不可以混用。

}

3.定义组件

{

Es5：组件类的定义通过React.createClass实现；

Es6：让组件类去继承React.Component类就可以了。

注意;ES5中React.createClass后面是需要小括号的，且结尾必须有分号

这里结尾时不会出现小括号，也不需要添加分号。

}

4.组件内部定义方法

{

Es5：采用的是 ###:function()的形式，方法大括号末尾需要添加逗号；

Es6：省略了【: function】这一段，并且结尾不需要加逗号来实现分隔。

注意:使用ES6定义的规则的话，外层必须用【class #### extend React.Component】的 方式来申明这个类，否则会报错。

}

5.定义组件的属性类型和默认属性

{

Es5：属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现(这两个方法应 该是固定名称的)；

Es6：统一使用static成员来实现。

}

6.初始化STATE

{

Es5：初始化state的方法是固定的getInitialState；

Es6：第一种，直接构造state函数；第二种，相当于OC中的方法重写，重写constructor方法

}

54.vue的render函数

简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM

异步组件就是定义的时候什么都不做，只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存，缓存是以备下次访问。

js的常见的三种密码加密方式-MD5加密、Base64加密和解密和sha1加密

• box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度

1.区别

基本数据类型把数据名和值直接存储在栈当中

复杂数据类型在栈中存储数据名和一个堆的地址，在堆中存储属性及值，访问时先从栈中获取地址，再到堆中拿出相应的值

基本数据类型作为参数时，函数内部对参数值的修改不会改变外部变量的值

复杂数据类型作为参数时，函数内部对参数值的修改会改变外部变量的值

因为复杂数据类型赋值是把栈中对象的地址赋给变量，函数内外两个变量指向同一个对象，所以只要对象的属性值改变，两个变量值都会改变

61.原生处理字符串的一些方法

1.转换为字符串类型(三种实现方式)


2.字符串分割返回新的数组


3.字符串替换


5.查询子字符串


6.返回指定位置的字符或其字符编码值


7\. 字符串匹配


8、字符串连接


9、字符串切割和提取

62.vue自定义指令

63.深拷贝和浅拷贝

64.watch一个普通对象和watch一个object有什么区别

65.父组件如何调用子组件的方法

66.import和require有什么区别

67.css的计算属性

这里DIV CSS 继承是指我们设置上级(父级)的[CSS样式](http://www.divcss5.com/rumen/r29.shtml)，上级（父级）及以下的子级（下级）都具有此属性。

一般只有文字文本具有继承特性，如文字大小、文字[加粗](http://www.divcss5.com/rumen/r116.shtml)、文字颜色、字体等

变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组

push() // 向数组末尾添加一个或多个元素，返回新长度

pop() //删除并返回数组的最后一个元素

shift() // 把数组的第一个元素从其中删除，并返回第一个元素的值

unshift() // 可向数组的开头添加一个或更多元素，并返回新的长度

splice() //方法向/从数组中添加/删除项目，然后返回被删除的项目。

sort() // sort() 方法用于对数组的元素进行排序

reverse() // 用于颠倒数组中元素的顺序

非变异 (non-mutating method) 方法：filter(), concat() 和 slice() 。

这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组