js面试题练习

1、有一个长度未知的数组a，如果它的长度为0就把数字1添加到数组里面，否则按照先进先出的队列规则让第一个元素出队。

a.length === 0? a.push(1): a.shift()

2、下面代码输出什么

var test = (function(a) {
    this.a = a   
    return function (b) {  
        return this.a + b    
    }
}(function (a, b) {  
 return a
}(1,2)))
console.log(test(4))  // 5复制代码

3、请把<ul><li>第1行</li><li>第2行</li>...</ul>（ul之间有10个li元素）插入body里面，注意：需要考虑到性能问题。

const el = document.body
let lis = ''
let ul = document.createElement('ul')
for (let i = 0; i< 10; i++) {
    lis += `<li>${i}</li>`
}
ul.innerHTML = lis
el.appendChild(ul)复制代码

4.不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标。

var myArray;

myArray = null;
// new Array(100)  生成的是稀疏数组 返回的不是数组，需要 Array.from转换
/*
    创建空数组
    1.Array.from(new Array(100))
    2.Array.from({length:100}
    3.Array.apply(null,{length:100}
    4.[...Array(100)]
*/
// 1
myArray = Array.from(new Array(100));

myArray = myArray.map(function(item, index) {
    return index;
});

// 2
myArray = Array.apply(null, {
    length: 100
});
// Object.keys()，该方法返回一个数组传入对象，返回属性名
// r如果传递数组，返回索引（下标）
myArray = Object.keys(myArray);

// 3
// 通过Array Iterator
myArray = Array.from(Array(100).keys());

// 4 其实就是 先去掉 undefined 还是 方法1的思想
myArray = Array(100).fill('naive').map(function(v, i) {
    return i;
});

// 5
// new Int8Array(100) 是初始化都为 0 的数组 后面和方法2一样
myArray = Object.keys(new Int8Array(100));
// 上面返回的数组为string，要转成number
myArray = myArray.map(Number);


// 6 赌法 页面至少要有100个字符
myArray = document.body.innerHTML.substr(0, 100).split('').map(Object.call, Number);

// 7
myArray = ' '.repeat(100).split('').map(Object.call, Number);

// 8 new Array(100).toString() 生成 一串,,,..,, 再分割 成数组
myArray = new Array(100).toString().split(",");

myArray = myArray.map(function(v, i) {
    return i;
});

// 9
myArray = [...Array(100).keys()];

// 10 递归
function reduce(prev, curr) {
    if (curr >= 100) return prev;
    prev.push(curr);
    return reduce(prev, curr + 1);
}

myArray = reduce([], 0);复制代码

5.实现对数组进行乱序

var arr = [1,2,3,4,5,6,7,8,9,10]
arr.sort((a, b) => {    return Math.random() >0.5 ? 1: -1})
console.log(arr)复制代码

6.有一个长度为100的数组，请以优雅的方式求出该数组的前10个元素之和

var arr = [1,2,3,4,5,6,7,8,9,10, 11, 12, 13, 14]
let sum = arr.slice(10).reduce((pre, cur) => {    return pre + cur})
console.log(sum)复制代码

7.JavaScript实现继承的常用方法有哪些？你推荐的是哪一种？

https://www.cnblogs.com/humin/p/4556820.html

function Animal() {
    this.type = '动物'
}
Animal.prototype.eat = () => {
    console.log('动物吃草')
}
1.原型链继承
function Cat() {
    this.name = '猫'
}
Cat.prototype = new Animal()
Cat.prototype.constructor = Cat
let cat = new Cat()
console.log(cat.type)
cat.eat()2.构造函数继承

function Cat() {
    Animal.call(this)
}
let cat = new Cat()
console.log(cat.type)3.实例继承
function Cat() {
    let animal = new Animal()
    animal.name = 'cat'
    return animal
}
let cat = new Cat()
console.log(cat.type)
cat.eat()4.拷贝继承
function Cat() {   
var animal =  new Animal() 
   for (let i in animal) {   
    Cat.prototype[i] = animal[i]  
  }}
let cat = new Cat()
console.log(cat.type)
cat.eat()5.组合继承
function Cat() {
    Animal.call(this)
}
Cat.prototype = new Animal()
Cat.prototype.constructor = Cat

6.寄生组合继承
function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
Cat.prototype.constructor = Cat
})();
复制代码

8.在项目开发完成之后，根据雅虎性能优化规则，需要对HTML、JS、CSS、图片需要做出怎样的处理？是否可以借助构建工具实现自动化？ 

尽量减少http请求，将图片压缩或者打包在一起，将js文件尽量放置在body尾部。 而构建工具可以使用webpack，也可以使用gulp。 gulp 是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作 1.构建工具 2.自动化 3.提高效率用 gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。 PS：简单说就一个Task Runner webpack 是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案 1.打包工具 2.模块化识别 3.编译模块代码方案用 webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。 PS：webpack is a module bundle 所以定义和用法上来说 都不是一种东西，无可比性 ，更不冲突！

9.tite与h1的区别

1）title与h1区别

1. H1是大标题的意思，一般在网页文章页面，作用如同一张报纸的大标题，使用读者在没看清内容之前就大概了解本文的旨意，它是直接给用户看的。而且在SEO中，搜索引擎也非常重视H1，目的是告诉搜索引擎，这个地方的内容很重要，H1要求贴近文章内容，突出主题，言简意赅。
2. title是用来面对的搜索引擎和用户，其范围相对于H1来说要广，title中可以包含H1，在搜索引擎中，title的权重要高于H1，一般来说，H1做到突出主题目，title修饰主题关键字。

2）H1与title之间的关系

1. 从网站角度而言，title则侧重于网站信息标题，突出网站标题或关键字用title，一篇文章，一个页面最好只用一个H1，H1用的太多，会稀释主题，一个网站可以有多个title，最好一个单页用一个title以便突出网站页面。
2. 从文章角度而言，H1则概括的是文章主题，突出文章主题，用H1，面对的用户，要突出其视觉效果。
3. 从SEO角度而言，title的权重高于H1，其适用性要比H1广

10.b与strong的区别

b与strong标签，在网页中默认的情况下均是加粗字体的作用。

二者不同在的是，<b>标签是一个实体标签，它所包围的字符江北设为bold (粗体)，而

<strong>标签是一个逻辑标签，它的作用是加强字符的语气，一般来说，加强字符的语气是通过将字符变为bold（粗体）来实现的。

简单的说strong是web标准中xhtml的标签，strong的意思是“强调”；b是html的，b的意思是bold（粗体）。web标准主张 xhtml不涉及具体的表现形式，“强调”可以用加粗来强调，也可以用其它方式来强调，比如下划线，比如字体加大，比如红色，等等，可以通过css来改变 strong的具体表现。

并不是说有了strong，就淘汰了b，只是这个b很无辜，就因为自己表示的是字体加粗，恰巧跟strong默认情况下强调的效果一致，其实这个strong完全可以定义成别的样式的强调效果

结论：对于搜索引擎来说<strong>和<em>比<b>和<i>要重视的多。为了符合现在W3C的标准，还是推荐使用strong标签。

11.i与em的区别

<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。

在文本中加入强调也需要有技巧。如果强调太多，有些重要的短语就会被漏掉；如果强调太少，就无法真正突出重要的部分。这与调味品一样，最好还是不要滥用强调。

尽管现在 <em> 标签修饰的内容都是用斜体字来显示，但这些内容也具有更广泛的含义，将来的某一天，浏览器也可能会使用其他的特殊效果来显示强调的文本。如果你只想使用斜体字来显示文本的话，请使用 <i> 标签。除此之外，文档中还可以包括用来改变文本显示的级联样式定义。

除强调之外，当引入新的术语或在引用特定类型的术语或概念时作为固定样式的时候，也可以考虑使用 <em> 标签。例如，W3School 经常对重要的术语使用 <em> 标签。<em> 标签可以用来把这些名称和其他斜体字区别开来。

结论，为了符合现在W3C的标准，还是推荐使用<em>标签。

12. web前端优化

一、减少过多的HTTP外部请求

一个完整的HTTP请求就是一个网络资源占用的过程，从DNS、数据传输到最终的服务器响应，以及数据的接收需要一定的时间，随主机的硬件、服务器的架构以及工作环境的不同，响应的时间也是不一样的。这一过程决定着用户的使用体验，一般情况下，页面加载在一秒以内是可以接受的，当然0.5秒以内响应会更好提升用户体验。那么这样，最简单的办法就是设计一个简洁的页面，合并和压缩一些图片，减少多余的CSS和多余的插件，巧妙利用浏览器的缓存技术，减少第二次浏览所需加载的时间。如果是大型的网站，服务器有多个并且分布于不同的地理位置，可以利用CDN服务器缓存技术，将站内文件分发到离用户最近的服务器当中。浏览器缓存也是利用类似的原理，这也是当前最常用的减少外部请求的方法。

二、在恰当的位置使用CSS

在一般情况下的网页设计中，设计者们习惯于在建立好HTML的框架之后来引入CSS。这样的做法是可行的，这样也可以节约设计者的构思时间，方便管理整个网页的设计流程；但如果要是从优化的角度考虑，笔者还是建议将带有样式的CSS文件独立出来，不用写在HTML中，而且样式的设计尽量使用代码。这样，通常可以将CSS放在HTML的上面，加快了网络加载速度。同时，合并CSS图片也是减少HTTP请求数的好办法。

三、优化代码

代码的优化核心思想就是让代码变得简洁高效。代码越多，页面文件就越大，这样不利于提高页面的加载速度。所以在精简代码，减少不必要标签的同时也要善于合理利用标签。比如在做粗体字的时候我们可以使用B标签而不是Strong标签，B标签的使用可以大大缩减无关的冗余代码；在合理使用标签的同时也要减少嵌套语句的使用和with、eval与 Function等，因为这些函数变量会使网页的响应速度大大降低，也不利于后期的维护和优化；还有就是建议使用轻量级的框架，类似于Pure、Skeleton等，减少使用javascript、ajax、iframe框架，这样可以简化代码，避免出现错误。

② 事件冒泡（选项卡的实现）

③ CSS布局相关

④ 应该用float吗？

⑤ 模块化编程

⑥ 为什么有闭包

⑦ 延迟请求