京东2017校招前端主观题汇总

最新推荐文章于 2025-05-30 13:02:20 发布

明致成

最新推荐文章于 2025-05-30 13:02:20 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：各大公司面试题文章标签：前端开发 javascript

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/LiyangBai/article/details/77140503

各大公司面试题专栏收录该内容

28 篇文章

订阅专栏

本文介绍了前端开发中的优雅降级与渐进增强的区别，详细解释了cookies、sessionStorage和localStorage的特点，并提供了一个图片轮播组件的实现代码。此外，还讨论了盒模型、行内元素与块级元素的概念，分享了前端性能优化的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、谈谈优雅降级与渐进增强的区别。
解：
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
2、描述cookies，sessionStorage和localStorage的区别。
解：
cookies是在浏览器端存储数据，有大小限制，每个大小一般为4k，每个域名下大约能存20个；不安全，每次请求都会讲cookies发送到服务器，无形中浪费了带宽。
sessionStorage和localStorage是h5提供的新的客户端存储数据的方式，是通过JS脚本存储数据；
localStorage存储的数据在同源的各个页面间可以共享，数据永久存储，除非认为删除；而sessionStorage不可以，默认存储的数据在当前窗口关闭后就会消失。
3、如何设计开发一个图片轮播组件？简述要点或写代码。
解：
将所有图片并排放到一个div中然后再放到展示固定大少的窗口当中，让所有图片的div左右来回切换达到图片滑动
展示窗口的div设置overflow:hidden;只显示窗口的一张图片，把左右两边的都隐藏起来。

利用循环实现。

class Slider{
constructor(id){
this.container=document.getElementById(id);//获取图片容器
this.items=this.container.querySelectorAll('.list-item');
}
getSelectorItem(){ //获取当前展示的图片
let selected=this.container.querySelector('.current');
return selected;
}
getSelectorItemIndex(){ //获取当前选中的图片的索引
return Array.from(this.items).indexOf(this.getSelectorItem());
}
slideTo(idx){ //跳转到idx这一张图片
let selected=this.getSelectorItem();
if(selected){
selected.className="list-item";//将当前展示的图片设置'隐藏样式'
}
let item=this.items[idx];
if(item){
item.className="current";//将要展示的图片设置'显示样式'
}
}
slideNext(){ //下一张
let currentIdx=this.getSelectorItemIndex();
let nextIdx=(currentIdx+1)%this.items.length;//防止最后一张，使其循环显示
this.slideTo(nextIdx);
}
slidePrevious(){ //上一张
let currentIdx=this.getSelectorItemIndex();
let previousIdx=(this.items.length+currentIdx-1)%this.items.length;//防止第一张，使其循环显示
this.slideTo(previousIdx);
}
}
//创建实例，绑定作用域
let slider=new Slider('list');
setInterval(slider.slideNext.bind(slider),3000);
//或者setInterval(slider.slidePrevious.bind(slider),3000);

4、简要解释盒模型、行内元素与块级元素的概念。
解：
盒模型：w3c的标准盒模型是指外边距+边框+内边距+内容宽/高。盒内的元素行为不会影响其他盒子中的元素。
行内元素：占据行内的一部分，宽度和高度随内容变化，不主动换行；
块级元素：占据一行，个元素都会换行显示，可设置宽高。
5、如何进行前端性能优化？简述几种常用的方法。
解：
1.JS代码通过外联样式的方式写在body标签的最后。
2.将多张图片放在一张图片中，不仅可以减少代码，还可以减少对服务器的请求次数，提高性能。
3.不要使用css表达式，尽量使用具体的数值。
4.利用本地变量存储请求成功的数据，减少请求。
5.动态改变DOM结构时，利用DOM片段，先将要创建的DOM节点放在一个DOM片段上，最后一次性插入。用 innerHTML 代替 DOM 操作，减少 DOM 操作次数。缓存DOM节点查找的结果
6.防止页面的重绘与重写。
6、给你两个集合，要求{A} + {B}。注：同一个集合中不会有两个相同的元素。
解：

//将数据按行读取到input_array数组中
function concatArr(input_array){
    var arr1=input_array[1].split(' ');
    var arr2=input_array[2].split(' ');
    var arr=arr1.concat(arr2);
    arr.sort(function(a,b){
        return a-b;
    });
    var str=arr.join(' ');
    console.log(str);
}

7、尽管是一个CS专业的学生，小B的数学基础很好并对数值计算有着特别的兴趣，喜欢用计算机程序来解决数学问题，现在，她正在玩一个数值变换的游戏。她发现计算机中经常用不同的进制表示一个数，如十进制数123表达为16进制时只包含两位数7、11（B），用八进制表示为三位数1、7、3，按不同进制表达时，各个位数的和也不同，如上述例子中十六进制和八进制中各位数的和分别是18和11,。小B感兴趣的是，一个数A如果按2到A-1进制表达时，各个位数之和的均值是多少？她希望你能帮她解决这个问题？所有的计算均基于十进制进行，结果也用十进制表示为不可约简的分数形式。
解：

//将输入数据按行的形式存储到数组input_array中
function getMid(input_array){
    var len=input_array.length;
    for(var i=0;i<len;i++){
        var temp=input_array[i];
        var data=0;
        var nums=[];
        for(var j=2;j<temp;j++){
            var arr=temp.toString(j).split('');
            var sum=0;
            for(var k=0;k<arr.length;k++){
                sum+=parseInt(arr[k]);
            }
            nums.push(sum);
        }
        for(var m=0;m<nums.length;m++){
            data+=nums[m];
        }
        console.log(data+'/'+nums.length);
    }
}