[前端面试套餐css+js+vue+es6]第一天

css：说说你对css盒子模型的理解？

是什么？

当对一个文档进行布局(layout)的时候，浏览器的渲染引擎会根据标准之一的css基础框盒模型，将所有元素表示为一个个矩形的盒子

一个盒子由四部分组成：content，padding，border，margin

• content，即文本和图像
• border，边框，由粗细，样式，颜色组成
• padding，内边距，清楚内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响
• margin，外边距，再元素外创建额外的空白，空白通常指不能放其他元素的区域

标准模型

• 盒子的总宽度=width+padding+border+margin
• 盒子的总高度=height+padding+border+margin
  简而言之，width/height只是内容高度，不包含padding和border指

怪异模型

• 盒子的总宽度=width+margin
• 盒子的总高度=height+margin
  也就是，width/height包含了padding和border值

box-sizing

css中的box-sizing属性定义了引擎应该如何计算一个蒜素的总宽度和总高度
语法：box-sizing: content-box|border-box|inherit

• content-box默认值，标准盒模型
• border-box，怪异盒模型
• inherit，继承父元素

es6：说说var，let，const之间的区别

var

在es5中，顶层对象的属性和全局变量是等价的，用var声明的变量即是全局变量，也是顶层变量。
注意:顶层对象，在浏览器环境指的是window对象，在Node指的是global对象

• var的变量提升

console.log(a)
var a=20
/*等价于*/
var a
console.log(a)
a=20

• 可以多次声明，后面声明的变量会覆盖前面的变量声明

var a=20
var a=30
console.log(a) // 30

• 函数中使用var声明变量时候，该变量是局部的

var a=20
function change(){
	var a=30
}
console.log(a) // 20

• 如果函数内不使用var，该变量是全局的

var a =20
function change(){
	a=30
}
change()
console.log(a) // 30

let

let是es6新增的命令，用来声明变量

• 用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效

{
	let a=20
}
console.log(a) // undefined

• 不存在变量提升
• 块级作用域内存在let命令，这个区域就不再受外部影响

var a=123
if(true){
	a='abc' // ReferenceError
	let a
}

• let不允许在相同作用域中重复声明

const

• const声明一个只读的变量，一旦声明，常量的值就不能改变
• 这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值
• 如果之前用var或let声明过两边，再用const声明同样会报错
• const实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动
  • 对于简单类型的数据，值就保存在变量指向的那个内存地址，因此等同于常量
  • 对于复杂类型的数据，变量指向的是内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是给固定的，并不能改变变量的结构不变

区别

• 变量提升
• 暂时性死区
• 块级作用域
• 重复声明
• 修改声明的变量
• 使用

区别	var	let	const
变量提升	存在	不存在	不存在
暂时性死区	不存在	存在	存在
块级作用域	不存在	存在	存在
重复声明	允许重复声明	不允许	不允许
修改声明的变量	可以	可以	不可以
使用	避免使用var	大多数使用let	能用const的情况尽量使用const

js：Javascript数据的常用方法有哪些？

数组的基本操作可以归纳为增删改查

操作方法

增

• push() 末尾加
• unshift() 开头加
• splice()
  传入三个参数，分别是开始位置，删除的元素数量，插入的元素，返回空数组
• concat()
  首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数据，不会影响原始数组

删

• pop() 末尾删
• shift() 开头删
• splice() 同上
• slice()
  用于创建一个包含原有数组中一个或多个元素的新数组，不会影响原始数组

改

• splice()

查

• indexOf()
• includes()
• find()
  个人感觉用indexOf()就够了，没找到返回-1

排序方法

• reverse()
• sort()

转换方法

• join()
  常常配合split()一起使用

迭代方法

• some()
• every()
• forEach()
• filter()
• map()

vue

MVVM模型

• model：模型
• view：视图
• viewmodel：视图模型

vue和react的对比

相同点

• 都有组件化思想
• 都支持服务器端渲染
• 都有Virtual DOM(虚拟dom)
• 数据驱动视图
• 都有支持native的方案：vue的weex，react的react native
• 都有自己的构建工具：vue的vue-cli，react的create react app

区别

区别	vue	react
数据流向不同	双向数据流	单向数据流
数据变化的实现原理不同	可变的数据	不可变的数据
组件化通信不同	子组件向父组件传递消息有两种方式：事件和回调函数（$ref和$emit）	使用回调函数进行通信
diff算法不同	使用双向指针，边对比，变更新DOM	diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM