1.JS包括哪些数据类型，请分别编写3种以上类型的判断函数，如isString（）

A:Js数据类型分为基本类型和引用数据类型
值类型——Number、String、Boolean、Null、Undefined、Symbol
引用类型——Object、Array、Function

判断方式:

typeof

console.log(typeof 1); //number
console.log(typeof '1'); //string
console.log(typeof undefined); //undefined
console.log(typeof new Function());//function
console.log(typeof  Symbol()); //symbol
console.log(typeof true); // booleanconsole.log(typeof null); //object
console.log(typeof [1]); //object
console.log(typeof {}); //object

其中 number、string、undefined、boolean、function、symbol都可以直接判断出来
null可以通过 ===null 判断是否为null

区分对象和数组
(1) isArray (2).length (3).contructor() (4).tostring()

2.编写一个JS函数，实时显示当前时间，格式“年-月-日时:分:秒”

const current_time = ()=>{const date = new Date()console.log(date.toLocaleString()); //2021/6/18下午8:56:43let d = date.getDate()let m = date.getMonth()+1let y = date.getFullYear()let h = date.getHours() let min = date.getMinutes()    let s = date.getSeconds()return y+'-'+m+'-'+d+' ' + h+':'+min+':'+s //2021-6-18 20:56:43
}

3.如何显示/隐藏一个dom元素

display:none/除了none以外:隐藏元素并脱离文档流,隐藏该区域,不占实际空间,但对后台来说真实存在,可以获取该元素
visibility:hidden/visible ：只是可见或不可见，占用文档空间

4.如何添加html元素的事件处理，有几种方法

通过HTML元素属性。简单说来就是在html结构中，给你要添加事件的元素添加一个属性。属性名为 ‘on’ + 事件名。比如onclick

<div  onclick="alert('fucku')">aaa</div>

通过对象属性
document.getElementById(‘n’).onclick = function(){ //do something}
W3C监听方式
elemennt.addEventListener(事件名,回调函数,true || false)
true表示在事件传播阶段捕获事件，false表示在事件冒泡阶段捕获事件，一般为false

——事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。如果将 p 元素插入到 div 元素中，用户点击p 元素, 哪个元素的 “click” 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： p元素的点击事件先触发，然后会触发 div 元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： div 元素的点击事件先触发，然后再触发 p 元素的点击事件。

IE专属的中间模型添加事件
element.attachEvent( ‘on’ + 事件名，回调函数);

5.如何控制alert中的换行

\n 换行符 \r回车符

 <div class='b' onclick="alert('fucku\nbitch')">aaa</div>

6.判断一个字符串中出现次数最多的字符，统计这个次数

const maxchar = (s)=>{const map = new Map()for (let i of s){if(!map.has(i)) map.set(i,1)else map.set(i,map.get(i)+1)}let max = 0let maxchar = ''map.forEach((value,key) =>{if(value>max){max =  value maxchar =  key}})return [maxchar,max]
}

7.判断字符串是否是这样组成的，第一个必须是字母，后面可以使字母、数字、下划线，总长度为5-20

正则

var reg = /^[a-zA-z][a-zA-z0-9_]{4,19}$/
console.log(reg.test('a11111111111111111111'));

8.请编写一个js函数parseQueryString，把url参数解析为一个对象，如var url =“www.baidu.com?key0=0&key1=1&key2=2”

const parseQueryString = (s)=>{const res = {}let arr = s.split('?')if(arr.length !==2) return resarr = arr[1].split('&')arr.forEach(item => {let key = item.split('=')[0]let value = item.split('=')[1]res[key] = value})return res
}var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";
var params = parseQueryString(url);
console.log(params)

9.在页面中有如下html

<div id="field"><input type="text" value = "User Name" />
</div>
<span class = "red"><span/>

要求用闭包方式写一个js从文本框中取出值，并在span中显示出来


(function () {var input_value = document.getElementById('field').children[0].valuevar allspan = document.getElementsByTagName('span')for(let i = 0 ; i<allspan.length ; i++){if(allspan[i].className =='red') allspan[i].innerHTML = input_value}
})()

10.在IE6.0下面是不支持position：fixed的，请写一个JS使用

固定在页面的右下角。

思路：absolute 位置随滚动、页面变动、页面加载变动而变动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#box {position: absolute;width: 100px;height: 100px;background: red;}</style>
</head>
<body>
<div id="box" ></div>
<script>window.onscroll = window.onresize = window.onload = () => {var getDiv = document.getElementById('box');var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;getDiv.style.left = document.documentElement.clientWidth - getDiv.offsetWidth + 'px';getDiv.style.top = document.documentElement.clientHeight - getDiv.offsetHeight + scrollTop + 'px';}
</script>
</body>
</html>

11.鼠标移到页面中的任意标签，显示出这个标签的基本矩形轮廓。

思路：移动元素上时，给它加个border，移开再取消

d.onmouseover = function () {this.style.border = '1px solid red'
}
d.onmouseout = function () {this.style.border = ''
}

给每个元素都加上这俩方法

nodeType 属性返回以数字值返回指定节点的节点类型。

如果节点是元素节点，则 nodeType 属性将返回 1。

如果节点是属性节点，则 nodeType 属性将返回 2。

 function mouseBorder(t) {var c = t.childNodesfor (let i = 0; i < c.length; i++) {var d = c[i];if (d.nodeType == 1) {d.onmouseover = function () {this.style.border = '1px solid red'}d.onmouseout = function () {this.style.border = ''}mouseBorder(d);}}}mouseBorder(document.body);

12.js的基础对象有哪些，window和document的常用的方法和属性列出来

基础对象：String,Number,Boolean

Window:
方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open
属性：name,parent,screenLeft,screenTop,self,top,status

Document:
方法：createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln
属性：cookie,doctype,domain,documentElement,readyState,URL

13.对象深拷贝

递归赋值和stringfy和parse

14.js如何定义class，如何扩张prototype

通过function定义class
扩张prototype通过classname.prototype.属性或函数

15.什么是ajax，ajax的交互模型？同步和异步的区别？如何解决跨域？

ajax：异步js和xml，用于创建快速网页技术
，通过在后台和服务器进行少量数据交互，通过异步更新，实现页面的局部更新

交互模型（流程）：
1–启动获取XMlHttpRequest对象
2–open 打开url通道，并设置异步传输
3–send 发送数据到服务器
4–服务器接受数据并处理，处理完成后返回结果
5–客户端接收服务器端返回

同步：脚本会停留并等待服务器发送回复然后再继续
异步：脚本允许页面继续其进程并处理可能的回复

解决跨域：

jsonp
server端CORS - 》access-control-allow-origin
在浏览器所在服务器上设定代理（nginx反向代理）

16.请给出异步加载js的方案，不少于两种

$(document).ready
script标签的async="async"属性
script标签的defer="defer"属性
动态创建

17.多浏览器检测通过什么

Navigator 对象

navigator.appName 保存浏览器类型

navigator.appVersion 存有浏览器的版本信息

navigator.userAgent 用户代理

18.讲述一下你说了解的前端开发优化方案

http层面优化 http请求次数
图片优化：base64
浏览器缓存强缓存协商缓存
浏览器渲染减少操作DOM
js代码优化时间、空间复杂度
框架优化 hooks

2021秋招提前批笔试:

1.JS递归实现反转数组字符串

 let a = '!rekcufrehtom olleh'//递归实现字符串const rever = (s,index,res) =>{if(index == 0 ) return reselse return rever(s,--index,res+s[index])}let res = rever(a,a.length,"")console.log(res); //hello motherfucker!

2.margin合并情况

margin合并：兄弟间垂直边距取大者。

A的下边距和B的上边距取大者
父子间的上下边距取大者也可算在内？（margin塌陷）
空元素上下边距合并为大者
3的情况再遇到另外元素的外边距，再合并为大者

解决方案：直接改变其中一个外边距的值，这样不会破坏原HTML文档结构

margin塌陷：父子间垂直边距不但发生合并，若子元素设置了浮动，则会脱离文档流，导致父元素高度塌陷

这里子元素（蓝条）的上下边距取得是父子元素间的大者，即子元素的30px

解决方案：给父元素触发bfc即可

补充：触发bfc的条件——

overflow:hidden/auto/scroll
display:inline-block/flex/table-cells
position:absolute/flex
float:除none以外any

3.js判断网页是否加载完毕----包括图片

 var img_obj = new Image img_obj = src//图片的地址img_obj.complete == true //为真则加载完毕

4.多维数组扁平化的三种方法

递归

var arr = [[1, 2, 8, [6, 7]], 3, [3, 6, 9], 4]let res = []
const get_res1 = (a) =>{for(let i =0 ; i<a.length ; i++){if(Array.isArray(a[i])) get_res1(a[i])else res.push(a[i])}
}get_res1(arr)
console.log(res);//[1, 2, 8, 6, 7, 3, 3, 6, 9, 4]

ES6 的…

const get_res2 = (b) =>{while(b.some(item=> Array.isArray(item))){b = [].concat(...b)}return b
}

toString、split、map实现

const get_res3 = (c) =>{return c.toString().split(',').map(item=> item*1)
}
//如果都是数字最后还要转换一下，都是字符串就不用了

5.async函数输出顺序

注意：

async函数只是把return包装成了promise，除此以外和普通函数一样
await只能用在async函数中，当主线程执行到await时，会先执行await后的内容，然后跳出async（），等执行栈空闲的时候再回来执行

首先要理解async函数，实际上就是一个返回promise的函数，他允许使用await
所以对于await前后理解成一个new promise的过程便于理解：

这样正常按照顺序放入微任务队列执行即可。

async function async1() {console.log( '1' )console.log(await async2())console.log( '2' )console.log(await async3());console.log('14');}
async function async2() {console.log('3')setTimeout(()=>console.log('4'),0)console.log( '5' )return 11
}const async3 =async()=>{console.log(12);return Promise.resolve(13)
}console.log( '6' )
setTimeout( function () {console.log( '7' )
}, 0 )
async1();
new Promise( function ( resolve ) {console.log( '8' )resolve();
} ).then( function () {console.log( '9' )
} )
console.log( '10' )

ans: 6 1 3 5 8 10 11 2 12 9 13 14 7 4

6.ES6解构赋值

原则：

解构成对象，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。
解构成数组，等号右边必须为可迭代对象

注意点1：可以解构同一属性

let obj = {},
arr = [];({ foo: obj.prop, foo: arr[0] } = { foo: 123, bar: true });
console.log(obj,arr);//{prop:123},[123]

注意点2：

//举例一：
let {a} = {a:"a"};
console.loh(a);//'a',这个很简单
//很多人觉得，以下这种写法也是可以的：
let a;
{a} = {a:"a"};
//直接报错
//因为此时a已经声明过了，在语法解析的时候，会将这一行的{}看做块结构
//而“块=对象”，显然是语法错误，所以正确的做法是不将大括号写在开头，如下：
let a;
({a} = {a:"a"})

参考

7.Object.assign

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };const returnedTarget = Object.assign(target, source);console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

同花顺软件前端开发笔试题目相关推荐

2014中兴笔试题 java_中兴2013Java开发笔试题目及答案.doc
中兴2013Java开发笔试题目及答案.doc 中兴2013-Java幵发笔试题目及答案 1.请看以下代码,关于这段代码描述正确的是:0 publicclassAccount{ privateStri ...
两个整数集合的交集 ———— 腾讯2014软件开发笔试题目
题目: A.B两个整数集合,设计一个算法求他们的交集,尽可能的高效. 思想: 位图标示数字 1 遍历集合A,求出最值,效率 1.5n ,计算最大值与最小值的差为LA.对B一样求出最值的差为LB. ...
腾讯2014软件开发笔试题目
简答题: 1.请设计一个排队系统,能够让每个进入队伍的用户都能看到自己在中所处的位置和变化.队伍可能随时有人加入和退出,当有人退出影响到用户的位置排名时需要即时反馈到用户. 2.A.B两个整数集合, ...
软件性能测试模拟笔试题目
欢迎关注我的公众号:造火箭的程序猿.收罗各种学习资源,分享科技趣事,推广好用但不是很大众的软件应用! 简答题(2*10=20分) 客户交付一个性能测试项目,请阐述你的实施流程. 答案: 测试设计阶段: ...
2019瓜子网后台开发笔试题目
填空题: 1.有三道概率题,感觉后台开发的很喜欢考概率题呀 2.树的前序遍历.后序遍历.中序遍历 3.两道网络题目,求掩码和确认序号的 4.数据库ACID的意义是什么: 原子性(Atomicity). ...
XX软件前端开发面试
面试时间: 2020年12月18日晚上7.45点-8.15点面试形式: 语音面试(二面) 自我介绍参考模板: 你好,我是XX,毕业于XX大学.现就职于XX公司,有X年开发经验,公司主要使用技术栈为 ...
大疆前端开发笔试总结
A卷问答题: 1.防止JS对象被修改 2.CSS选择符有哪些?哪些属性可以继承? 3.前端存储方式有哪些? 4.什么是面向对象?面向对象有哪些基本特征? 5.千位符 B卷问答题: 1.千位符 2.快排 ...
银联商务技术开发笔试题目
转载于:https://www.cnblogs.com/q1002938237/p/5897579.html
最全BAT前端开发面试80题：算法+html+js+css！含答案大赠送！
最全前端开发面试题目:包含算法+网络+css面试+js+h5面试题目,尾部有最全BAT前端面试经典77题和答案,想要的就快来领走吧~(领取方式见文末) 一.前端算法面试 1.基本排序的方式冒泡.快排 ...

同花顺软件前端开发笔试题目

1.JS包括哪些数据类型，请分别编写3种以上类型的判断函数，如isString（）

2.编写一个JS函数，实时显示当前时间，格式“年-月-日时:分:秒”

3.如何显示/隐藏一个dom元素

4.如何添加html元素的事件处理，有几种方法

5.如何控制alert中的换行

6.判断一个字符串中出现次数最多的字符，统计这个次数

7.判断字符串是否是这样组成的，第一个必须是字母，后面可以使字母、数字、下划线，总长度为5-20

8.请编写一个js函数parseQueryString，把url参数解析为一个对象，如var url =“www.baidu.com?key0=0&key1=1&key2=2”

9.在页面中有如下html

10.在IE6.0下面是不支持position：fixed的，请写一个JS使用

固定在页面的右下角。

11.鼠标移到页面中的任意标签，显示出这个标签的基本矩形轮廓。

12.js的基础对象有哪些，window和document的常用的方法和属性列出来

13.对象深拷贝

14.js如何定义class，如何扩张prototype

15.什么是ajax，ajax的交互模型？同步和异步的区别？如何解决跨域？

16.请给出异步加载js的方案，不少于两种

17.多浏览器检测通过什么

18.讲述一下你说了解的前端开发优化方案

2021秋招提前批笔试:

1.JS递归实现反转数组字符串

2.margin合并情况

3.js判断网页是否加载完毕----包括图片

4.多维数组扁平化的三种方法

5.async函数输出顺序

6.ES6解构赋值

7.Object.assign

同花顺软件前端开发笔试题目相关推荐

最新文章

热门文章

同花顺软件前端开发笔试题目

1.JS包括哪些数据类型，请分别编写3种以上类型的判断函数，如isString（）

2.编写一个JS函数，实时显示当前时间，格式“年-月-日 时:分:秒”

3.如何显示/隐藏一个dom元素

4.如何添加html元素的事件处理，有几种方法

5.如何控制alert中的换行

6.判断一个字符串中出现次数最多的字符，统计这个次数

7.判断字符串是否是这样组成的，第一个必须是字母，后面可以使字母、数字、下划线，总长度为5-20

8.请编写一个js函数parseQueryString，把url参数解析为一个对象，如var url =“www.baidu.com?key0=0&key1=1&key2=2”

9.在页面中有如下html

10.在IE6.0下面是不支持position：fixed的，请写一个JS使用

固定在页面的右下角。

11.鼠标移到页面中的任意标签，显示出这个标签的基本矩形轮廓。

12.js的基础对象有哪些，window和document的常用的方法和属性列出来

13.对象深拷贝

14.js如何定义class，如何扩张prototype

15.什么是ajax，ajax的交互模型？同步和异步的区别？如何解决跨域？

16.请给出异步加载js的方案，不少于两种

17.多浏览器检测通过什么

18.讲述一下你说了解的前端开发优化方案

2021秋招提前批笔试:

1.JS递归实现反转数组字符串

2.margin合并情况

3.js判断网页是否加载完毕----包括图片

4.多维数组扁平化的三种方法

5.async函数输出顺序

6.ES6解构赋值

7.Object.assign

同花顺软件前端开发笔试题目相关推荐

最新文章

热门文章

2.编写一个JS函数，实时显示当前时间，格式“年-月-日时:分:秒”