四十一.js对数组的操作，包括向数组中插入删除数据
删除最后一项：pop（）
var a = [1,2,3,4,5];
a.pop();//a：[1, 2, 3, 4]（如果数组为空则返回undefine）
删除第一项：shift（）
var a = [1,2,3,4,5];
a.shift(); //a：[2,3,4,5] （如果数组为空则返回undefine）
增加到最后：push（）
var a = [1,2,3,4,5];
a.push(6);//[1, 2, 3, 4, 5, 6]
aa.push('xx');//[1, 2, 3, 4, 5, 6, "xx"]
增加到最前：unshift（）
var a = [1,2,3,4,5];
a.unshift();//[1, 2, 3, 4, 5]
a.unshift("cc");//["cc", 1, 2, 3, 4, 5] 返回长度6
数组翻转：reverse（）
var a = [1,2,3,4,5];
a.reverse()//a：[5, 4, 3, 2, 1]
join数组转成字符串并返回字符串，原数组不变
var a = [1,2,3,4,5];
var b=a.join('||');//b:"1||2||3||4||5"
a:[1,2,3,4,5]
indexOf数组元素索引（并返回元素索引，不存在返回-1,索引从0开始）
var a = ['a','b','c','d','e'];
a.indexOf('a');//0
a.indexOf(a);//-1
slice截取(切片)数组 得到截取的数组
返回从原数组中指定开始索引(包含)到结束索引(不包含)之间的项组成的新数组,原数组不变 ，索引从0开始
var a = ['a','b','c','d','e'];
a.slice(1,3);//["b", "c"] a:['a','b','c','d','e']
a.slice(0,4);//["a", "b", "c", "d"]
a.slice(3,4);//["d"]
四十二.组件之间的传参（例如子组件和父组件之间的传参）
同：都有中间介质，
异：子向父的介质是自定义事件，
父向子的介质是props中的属性
1、父组件向子组件传值：
子组件在props中创建一个属性，用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性
子组件：
父组件：
2、子组件向父组件传值
子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
子组件：
父组件：
四十三.css3的新特性
1、属性选择器(三个,它们允许子串选择。)
2、伪类选择器(您可能已经熟悉了一些用户交互伪类，即：link，：visited，：hover，：active和：focus。)
:root根选择器。它允许设计者指向文档的根元素
:last-child。有了它，可以选择父元素命名的最后一个元素。
:target目标选择器
3、CSS3颜色
RGBA,HSL(代表色调，饱和度和亮度)，HSLA,Opacity
4、圆角：边界半径
5、阴影
box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
6、文字阴影
text-shadow: topOffset leftOffset blurRadius color;
7、线性渐变
Syntax: background: linear-gradient(direction, color-stop1, color-stop2, ...);
e.g. #grad {
background: linear-gradient(to right, red , yellow);
}
8、径向渐变（椭圆或圆型）
9、背景(多个背景图甚至伪元素)
四十四.localstore和sessionstore的区别
同：
都是用来存储客户端临时信息的对象。
均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
不同浏览器无法共享localStorage或sessionStorage中的信息。
异：
生命周期：
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
相同浏览器的不同页面或标签：
可以共享相同的 localStorage（页面属于相同域名和端口），
无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
拓展：
（1）同源的判断规则：
http://www.test.com
https://www.test.com （不同源，因为协议不同）
http://my.test.com（不同源，因为主机名不同）
http://www.test.com:8080（不同源，因为端口不同）
（2）枚举localStorage的方法：
for(var i=0;i<localStorage.length;i++){
var name = localStorage.key(i);
var value = localStorage.getItem(name);
}
（3）删除localStorage中存储信息的方法：
localStorage.removeItem("key");//删除名称为“key”的信息。
localStorage.clear();//清空localStorage中所有信息
四十五.盒子模型（怪异模型）
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。
CSS盒模型和IE盒模型（怪异盒子模型）的区别：
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
转换方式：
当设置box-sizing:content-box时，采用标准模式进行计算，默认就是这种模式；
当设置box-sizing:border-box时，采用怪异模式进行计算；
拓展：用border画三角
四十六.谈谈fixed ，relative ， absolute
1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
47.js的选择器
原生JS选择器
getElementById、
getElementsByName、
getElementsByTagName
getElementsByClassName
Jq选择器
常见的选择器：
1.标签选择器，也就是没有任何标点，直接的标签名的匹配； eg:$("input").css();
2.类选择器，也就是类属性名称前加点“.”； eg:$(".tab").css();
3.id选择器，也就是在id属性名称前加井号“#”； eg:$("#userName").css();
4.通配行选择器，匹配该元素下面的所有的元素； eg:$("form *").css();
层级选择器：
1.$("a b").css(); 表示a里所有是b的直系子元素；
2.$("a>b").css(); a下的所有b的元素；
3.$("a+next").css(); 紧接着该元素的下一个名为next的元素；
4.$("a~b").css(); a之后的所有的名称为b的所有后代元素；（直系和间接的都是）
过滤选择器：
1.选择器的前面加“：”，代表过滤器
四十八.两种定时器，setinterval和settimeout。因为settimeout是只执行一次的，如果要执行多次怎么做。（答案：设置一个回调函数，多次调用，大概是这样，你可以去查查）
function al(){
alert("1111");
setTimeout(al,3000);
}
al();
四十九.bookstrap的响应式是怎么实现的。
网页布局方式
1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。
2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。
3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。
注：以上几种布局方式并不是独立存在的，实际开发过程中往往是相互结合使用的。
实现方式：通过查询screen的宽度来指定某个宽度区间的网页布局。
超小屏幕 （移动设备） w<768px
小屏设备 768px-992px 768 <= w <992
中等屏幕 992px-1200px 992 =< w <1200
宽屏设备 1200px以上 w>=1200
五十.js的数据类型
基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）
引用数据类型：对象(Object)、函数(Function)
拓展更多面试题（100道前端面试题练手）：
1、前端近年面试题（1）
2、前端近年面试题（2）
3、前端近年面试题（3）
4、前端近年面试题（4）
5、前端近年面试题（5）
6、前端近年面试题（6）
7、前端近年面试题（7）
8、前端近年面试题（8）
9、前端近年面试题（9）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
