三七互娱笔试题

明天下午就要参加三七互娱的前端笔试了，但是心里没底，没有做过题，所以今天恶补一下。一下题目均为三七互娱前端题

---

一、用js写出一个冒泡排序算法。

1. 看到这个题我是懵的，因为冒泡排序我已经忘了具体是啥了。
2. 知识点：冒泡排序算法

首先解释一下冒泡排序算法：好比有一个水缸，现在有 N 个水泡在里面，并且杂乱无章的竖直排列。然后因为自然规律，水泡大的会先浮出来。所以算法来了，就是从水缸底部开始依次比较，如果最底部的大于它上面的那个，就往上浮动，然后小的那个就被挤下去。如此，就两两比较，直到最大的到最上面，第一轮结束。第二轮，又从最底部开始，与上相同，直到重复了 N-1 次。

其实跟以前学C语言做那种有形状的字母排序是一个道理。核心就是有一个空的地方可以存放大的，然后换位置。

let bubbleSort=array=>{
	let len=array.length
	let temp
	for(let i=0;i<len-1;i++){
		for(let j=0;j<len-1-i;j++){
			if(array[j]>array[j+1]){
                  temp=array[j];
                  array[j]=array[j+1];
                  array[j+1]=temp;
            }	
		}
	}
}
let array=[1,2,3,6,8,5,4]
console.log(bubbleSort(array)) //1234568

二 、CSS中的选择器的优先级是怎么样的？如何优化选择器？

优先级：行内样式>id>class>标签

优化：

1. 避免使用通配符，因为css属性是可以继承的，如果说在通配符中设置了颜色，那么有时候想让某个字颜色是继承的父级元素，那么这时不会生效，而是通配符所设置的颜色。所以通配符的使用要慎重。
   2.尽量少操作标签，而是使用class。
   3.通过继承去少写一些重复的代码。
   4.尽量少使用后代选择器，因为后代选择器不仅选择子代，还会选择孙子。。。。。哈哈哈。意思就是选择的太多了！但是，还是要分情况，因为只使用子代选择器可能会造成代码量过多，所以要灵活使用

三 、使用HTML5写出一个页面，包含头部、页头、页脚、文字内容和图片

考察的是h5的语义化标签，常用的有header、footer、nav（导航栏标签，定义导航栏）、section、video、audio、article（独立的内容区域，文本类型）、aside（页面的侧边栏去使用）、details（展示详情，使用场景比如说点击展开详情）、mark（会给一个字段添加背景色，并且不能被修改）、progress（进度条，但是丑）、section（类似于平时用div去包裹一个组件使用）、datalist（模糊查询）、canvas（大名鼎鼎的画布，还没学习哈哈哈）、dialog（聊天框）等等

<header>
    <nav></nav>
</header>

<section>
    <aside></aside>
    <article>
        <!--以下省略标签符号-->
        hgroup
        p
        dialog
    </article>
</section>

<footer>
</footer>

四 、前端页面的优化方法有哪些？有什么优化工具？

优化方法：

1. 减少http请求，特别是vue在请求http时，要将请求放在父组件中，不然每个子组件都去请求一遍就很浪费性能
2. CSS写在顶部，JavaScript写在尾部或异步
3. 延时加载图片
4. 使用iconfont
5. 使用CDN
6. 使用缓存，在vue中可以使用keep-alive，这样重复访问一个页面时就不会重新去请求，而是从缓存中取出来直接使用。

优化工具：

1. 真实用户浏览页面分析：OneAPM Browser Insight（统计分析网站流量，定位网站性能瓶颈）
2. 页面结构分析工具： PageSpeed（google官方的页面载入速度检测工具）

五 、创建子类Child，使用原型和构造函数的方式继承父类People的方法，并调用say函数说出姓名和年龄

考察原型和原型链,JS三座大山自不必说

function People(){
	this.name="edison"
	this.age=22
}

People.prototype.say=function(age,name){
	console.log("my name is "+name+" and i am "+age)
}

let child=new People()
child.say(23,"bruce") //my name is bruce and i am 23
child.__proto__.say(23,"bruce") //和上面效果一样，不过时调用了__proto__

六、2016-12-12类型的日期格式校验正则表达式

考察正则，这是短板没学过，恶补一下

七 、使用ajax（可使用jQuery框架，若使用其他框架请注明）写一个跨域异步获取JSON数据方案；说说能否使用JS进行跨域异步post数据

使用post参考https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

//使用vue
//
//这是在页面中请求axios，即ajax
axios.get("api/index.json")


//这是在webpack配置跨域
proxy:{
	//一旦遇到api开头的就直接转到target对应的网址
	"/api":{
		target:"http://localhost:8080",
		//使用正则，意思是一旦遇到api，就替换为mooc
		pathRewrite:{
			"^/api":"/mook"
		}
	}
}

八 、考察样式

常见的背景颜色、文字居中、边框、文字阴影、模糊等

九 、对数组testArray进行以下操作：a.从前面删除一个数字 b.从前面增加一个数字5 c.给数组从小到大进行排序 d. 反转数组 e.在数组61之后加入62、63、64

考察常见的数组操作，给定的数组为[3,4,61,8,1]

let testArray=[3,4,61,8,1]

// a
testArray.shift()
//b
testArray.unshift(5)
//c
testArray.sort((a,b)=>a-b)
//d
testArray.reverse()
// e.
testArray.splice(1,0,62,63,64)

来源：CSDN

作者：edisonMamba

链接：https://blog.csdn.net/edc666/article/details/104648235