level 7
我是😈乖宝宝
楼主
web前端—面试题汇总（261-265）
261、介绍js基本数据类型
1）ECMAScript中有5种基本数据类型: Undefined、Null、Boolean、Number和String
1种复杂的数据类型—Object，Object本质上是由一组无序的名值对组成的
其中Undefined、Null、Boolean、Number都属于基本类型。Object、Array和Function则属于引用类型，String有些特殊
2）变量
ES6前声明变量只有：var function
ES6声明变量有：const---声明基本类型的常量变量值不能修改，引用类型的常量内部值可以修改只是保证地址一样就可以了 let Symbol
3）typeof操作---可以检测基本数据类型，返回字符串
var a
console.log(typeof a); //'undefined'
a = 1
console.log(typeof a); //'number'
a = 'aa'
console.log(typeof a); //'string'
a = true
console.log(typeof a); //'boolean'
a = null
console.log(typeof a); //'object'
a = []
console.log(typeof a); //'object'
a = {}
console.log(typeof a); //'object'
Boolean()函数的转换
262、编写一个方法，判断字符串是否是这样组成的，第一个必须为数字，最后一个必须为 字母
// \S---匹配任何非空白字符 \s匹配任何空白字符
var c = /^[0-9][\s|\S]*[a-zA-Z]$/;
var str = '122'
console.log(c.test(str)); // true
正则表达式——判断字符串组成，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20
//判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20
var c = /^[a-zA-Z]\w{4,19}$/;
// /是转义 ^ 是开头 [a-zA-Z]是字母出现一次 \w是任意字符 {4,11}是长度 $ 是结束
var str = 'ss4442'
console.log(c.test(str)); // true
263、如何隐藏一个dom元素
css中隐藏DOM元素常见的5种方法
opacity:0 //将透明度设置为0，透明度为0的元素任然占据页面空间，响应用户交互
visibility:hidden //将元素隐藏，被隐藏的元素任然占据页面空间，不响应用户交互
diaplay:none //被隐藏的元素不在占据页面空间，不响应用户交互，相当于该元素不存在
position:absolute //通过top/right/bottom/left的值将元素移到页面不可见的地方
clip-path:polygon(0px,0px,0px,0px,0px,0px,0px,0px) //通过裁剪的方式
264、如何添加HTML事件，有几种方法？（至少两种方式）
在JavaScript中，有三种常用的绑定事件的方法：
（1）在DOM元素中直接绑定
//原生函数
<input onclick="alert('谢谢支持')" type="button" value="点击我，弹出警告框" />
//自定义函数
<input onclick="myAlert()" type="button" value="点击我，弹出警告框" />
<script type="text/javascript">
function myAlert(){
alert("谢谢支持");
}
</script>
（2）在JavaScript代码中绑定---JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发
<input id="demo" type="button" value="点击我，显示 type 属性" />
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素，这里是<div>标签
}
</script>
（3）绑定事件监听函数
function addEvent(obj,type,handle){
try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(type,handle);
}catch(e){
try{ // IE8.0及其以下版本
obj.attachEvent('on' + type,handle);
}catch(e){ // 早期浏览器
obj['on' + type] = handle;
}
}
}
265、前端常规开发优化策略（至少两种方式）(也就是性能优化的方法)
（1） 减少http请求次数：css spirit，jsć的合并，使用缓存--本地缓存、cookie
（2） JS，CSS源码压缩
（3） 用变量保存DOM节点查找的结果，减少DOM操作次数，优化javascript性能
（4）用setTimeout来避免页面失去响应
（5） 用hash-table来优化查找
（6） 当需要设置的样式很多时，设置className而不是直接操作style
（7）少用全局变量
（8）缓存DOM
（9）避免使用CSS Expression（计算频繁）
（10） 图片预加载
（11） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div css布局慢
2020年09月02日 10点09分
1
261、介绍js基本数据类型
1）ECMAScript中有5种基本数据类型: Undefined、Null、Boolean、Number和String
1种复杂的数据类型—Object，Object本质上是由一组无序的名值对组成的
其中Undefined、Null、Boolean、Number都属于基本类型。Object、Array和Function则属于引用类型，String有些特殊
2）变量
ES6前声明变量只有：var function
ES6声明变量有：const---声明基本类型的常量变量值不能修改，引用类型的常量内部值可以修改只是保证地址一样就可以了 let Symbol
3）typeof操作---可以检测基本数据类型，返回字符串
var a
console.log(typeof a); //'undefined'
a = 1
console.log(typeof a); //'number'
a = 'aa'
console.log(typeof a); //'string'
a = true
console.log(typeof a); //'boolean'
a = null
console.log(typeof a); //'object'
a = []
console.log(typeof a); //'object'
a = {}
console.log(typeof a); //'object'
Boolean()函数的转换
262、编写一个方法，判断字符串是否是这样组成的，第一个必须为数字，最后一个必须为 字母
// \S---匹配任何非空白字符 \s匹配任何空白字符
var c = /^[0-9][\s|\S]*[a-zA-Z]$/;
var str = '122'
console.log(c.test(str)); // true
正则表达式——判断字符串组成，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20
//判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20
var c = /^[a-zA-Z]\w{4,19}$/;
// /是转义 ^ 是开头 [a-zA-Z]是字母出现一次 \w是任意字符 {4,11}是长度 $ 是结束
var str = 'ss4442'
console.log(c.test(str)); // true
263、如何隐藏一个dom元素
css中隐藏DOM元素常见的5种方法
opacity:0 //将透明度设置为0，透明度为0的元素任然占据页面空间，响应用户交互
visibility:hidden //将元素隐藏，被隐藏的元素任然占据页面空间，不响应用户交互
diaplay:none //被隐藏的元素不在占据页面空间，不响应用户交互，相当于该元素不存在
position:absolute //通过top/right/bottom/left的值将元素移到页面不可见的地方
clip-path:polygon(0px,0px,0px,0px,0px,0px,0px,0px) //通过裁剪的方式
264、如何添加HTML事件，有几种方法？（至少两种方式）
在JavaScript中，有三种常用的绑定事件的方法：
（1）在DOM元素中直接绑定
//原生函数
<input onclick="alert('谢谢支持')" type="button" value="点击我，弹出警告框" />
//自定义函数
<input onclick="myAlert()" type="button" value="点击我，弹出警告框" />
<script type="text/javascript">
function myAlert(){
alert("谢谢支持");
}
</script>
（2）在JavaScript代码中绑定---JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发
<input id="demo" type="button" value="点击我，显示 type 属性" />
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素，这里是<div>标签
}
</script>
（3）绑定事件监听函数
function addEvent(obj,type,handle){
try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(type,handle);
}catch(e){
try{ // IE8.0及其以下版本
obj.attachEvent('on' + type,handle);
}catch(e){ // 早期浏览器
obj['on' + type] = handle;
}
}
}
265、前端常规开发优化策略（至少两种方式）(也就是性能优化的方法)
（1） 减少http请求次数：css spirit，jsć的合并，使用缓存--本地缓存、cookie
（2） JS，CSS源码压缩
（3） 用变量保存DOM节点查找的结果，减少DOM操作次数，优化javascript性能
（4）用setTimeout来避免页面失去响应
（5） 用hash-table来优化查找
（6） 当需要设置的样式很多时，设置className而不是直接操作style
（7）少用全局变量
（8）缓存DOM
（9）避免使用CSS Expression（计算频繁）
（10） 图片预加载
（11） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div css布局慢
