前端面试题100道，内含答案（大厂校招秋招7）

六十一.冒泡排序？

最快n,最慢n的平方。

function bubbleSort(arr) {
    var len = arr.length;
    for (var i = 0; i < len; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j+1]) {        //相邻元素两两对比
                var temp = arr[j+1];        //元素交换
                arr[j+1] = arr[j];
                arr[j] = temp;
            }
        }
    }
    return arr;
}

六十二.创建新数组，向数组插入数据

数组的创建

var arrayObj = new Array();　//创建一个数组  
var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度  
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　创建一个数组并赋值  

要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。

数组元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度 
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度 
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。

数组的元素的访问

var testGetArrValue=arrayObj[1]; //获取数组的元素值  
arrayObj[1]= "这是新值"; //给数组元素赋予新的值

数组元素的删除

arrayObj.pop(); //移除最后一个元素并返回该元素值  
arrayObj.shift(); //移除最前一个元素并返回该元素值，数组中元素自动前移  
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

数组的截取和合并

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素  
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

数组的拷贝

arrayObj.slice(0); //返回数组的拷贝数组，注意是一个新的数组，不是指向  
arrayObj.concat(); //返回数组的拷贝数组，注意是一个新的数组，不是指向

数组元素的排序

arrayObj.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回数组地址  
arrayObj.sort(); //对数组元素排序，返回数组地址 

六十三.父组件子组件传参

同：都有中间介质，
异：子向父的介质是自定义事件，
父向子的介质是props中的属性
1、父组件向子组件传值：

子组件在props中创建一个属性，用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性

子组件：

父组件：

2、子组件向父组件传值

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

子组件：

父组件：

更多

六十四.es6新特性

1、变量

let定义块级作用域变量

2、函数

1）可以给形参函数设置默认值
2）箭头函数

3、数组

1）在数组之前加上三个点（…）：

var arr = [1,2,3,4,5];
console.log(arr);//[1, 2, 3, 4, 5]
console.log(...arr)// 1 2 3 4 5

2）根据数组的展开运算用数组给函数批量的传参

	function fun5(a,b,c,d,e,f){
	    //如果没有展开数组，打印结果如下
	    //console.log(a,b,c,d,e,f)//[1, 2, 3, 4, 5] undefined undefined undefined undefined undefine
	    console.log(a,b,c,d,e,f)//11 22 33 44 55 66
	    //return a+b+c+d+e+f
	}
	//fun5([1,2,3,4,5])
	fun5(...[11,22,33,44,55,66])

4、apply和call
同：两者都可以改变this的属性
异：apply(this的指向，数组/arguments)
call(this的指向，参数1，参数2，参数3)

var name ="window的name";
var obj = {
    name:"obj的name",
    showName:function(v1,v2,v3){

        console.log(v1,v2,v3)
    }
}
obj.showName();
obj.showName.apply(window,[10,20,30]);//10 20 30
//apply括号里的是谁，调用的前面的函数里面的this就是谁
obj.showName.call(window,10,20,30)//10  20  30

5、解构赋值

1）数组的解构赋值
	var [a,b,c]=[11,22,33]
	console.log(a,b,c)//11 22 33
2）对象的解构赋值
	var{name,age}={name:"张三",age:"20"}
	console.log(name,age)//张三 20

6、string中加入include方法

includes("字符"); 用于判断字符串中是否包含某个字符。存在返回true 不存在返回false
includes("字符",startIndex); 用于判断字符串中下标startIndex是否是某个字符。是返回true 不是返回false

var str = "hello";
console.log( str.includes("e") )//true
console.log( str.includes("e",3) );//false

7、创建对象

class 类名{
        //肯定存在一个构造函数
        //如果不写构造函数，有一个默认的构造函数,内容为空
    constructor(){}  //注意：这里不需要逗号
        //下面是函数属性 比如属性有run  dark
    run(){}
    dark(){}
}

拓展：

ES5中创建对象的几种方法:
1.字面量法
2.工厂模式
3.构造函数
4.组合方式 构造函数+原型模式

8、继承

class Animal{
    constructor(age,sex){
        this.age = age;
        this.sex = sex;
    }
    eat(){
        console.log("吃吃吃")
    }
}
class Dog extends Animal{
    constructor(name,age,sex){
        //super指的是父类，先调用父类的构造函数，然后再去添加属性
        super(age,sex)
        //console.log(super);//不能打印只能使用
        this.name=name;
    }
    bark(){
        console.log("哇哇哇")
    }
    //重写：在子类中重新定义父类中的方法
    // eat(){
    //  console.log("喝喝喝")
    // }
}
var d = new Dog("妞妞","男",5)
console.log(d)
d.bark();
d.eat();
//ES6的继承，有两条继承链，构造函数  和  原型函数条  
console.log( Dog.prototype)//Animal {}
console.log( Dog.constructor==Animal.constructor)//true
console.log( Dog.prototype.__proto__==Animal.prototype)//true

9、Set（）和Map（）

拓展：this的认识

1.在函数体外，this指的就是window对象
2.在函数体内，谁调用函数this就指向谁
3.在构造函数中，this指的是新创建的对象
4.在html标签中，this指的是当前的这个标签元素
5.在ES6中，对于箭头函数，要看它在哪里创建的，和当前函数的作用域。

65.js对数组有哪些操作方法

六十六.什么是ajax，可以用来做什么

a表示异步
j表示jscript
x表示xml
AJAX全称“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
1）ajax主要是实现页面和web服务器之间数据的异步传输。
2）采用ajax的页面，可以实现页面的局部更新，而不是整个页面的更新;并且发起请求后，用户还可以进行页面上的其他操作。这就是异步的方式。客户端和服务端间只传递需要的数据，效率高，用户体验性好。

六十七.讲下你做轮播图的思路，无缝轮播

六十八.http协议

http（超文本传输协议）是一个基于请求与响应模式的、无状态的、应用层的协议，常基于TCP的连接方式
http请求由三部分组成，分别是：请求行、消息报头、请求正文

六十九.css3新特性

七十.css选择器的权重

css中有很多选择器，比如
类选择器、标签选择器、ID选择器、后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等，
常见的选择器有id选择器、类选择器、标签选择器三大类。

权重4个等级的定义如下：

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

拓展更多面试题（100道前端面试题练手）：

1、前端近年面试题（1）
2、前端近年面试题（2）
3、前端近年面试题（3）
4、前端近年面试题（4）
5、前端近年面试题（5）
6、前端近年面试题（6）
7、前端近年面试题（7）
8、前端近年面试题（8）
9、前端近年面试题（9）