js基础习题及答案（二）
箭头函数和普通函数的区别是什么?
- 箭头函数比普通函数写法更简洁
- 箭头函数没有this，他的this是函数所处上下文中的this(call、apply等任何方式都无法改变this的指向)
- 箭头函数中没有arguments,只能基于…arg获取传递的参数集合（数组）
- 箭头函数不能被new执行（因为箭头函数没有this也没有prototype）
如何把一个字符串的大小写去反（大写变小写，小写变大写）
let str='哈哈666，HAha'
//使用正则匹配字符串中的字母
str=str.replace(/[a-zA-Z]/g,item=>{
return item.toUpperCase()===itemitem.toLowerCase():item.toUpperCase()
})
console.log(str) //哈哈666，haHA
实现一个字符串匹配算法，从字符串S中，查找是否存在字符串T，若存在返回所在位置，若不存在返回-1,（不能使用基于indexOf/includes等内置的方法）
~function(str){
function myIndexOf(str){
let reg=new RegExp(str)
let res=reg.exec(this)
return res===null?-1:res.index
}
String.prototype.myIndexOf=myIndexOf
}()
//测试
let str ='哈哈哈哈啊哈哈666啊'
let p='666'
let index=str.myIndexOf(p)
console.log(index)
在输入框中如何判断输入的是否是一个正确的网址，例如用户输入一个字符串，验证是否符合url网址的格式
let str='http://www.xxx.com/index.html?name=xxx&age=18#video'
let reg=/^(?:(http|https|ftp):\/\/)?((?:[\w-]+\.)+[a-z0-9]+)((?:\/[^/?#]*)+)?(\?[^#]+)?(#.+)?$/i
console.log(reg.exec(str))
/*url格式
* 1.协议:http/https/ftp
* 2.域名:www.baidu.com
* baidu.com
* kbs.sports.qq.com
* kbs.sports.qq.com.cn
* 3.请求路径
* /
* /index.html
* /stu/index.html
* /stu/
* 4.问号传参
* ?xxx=xxx&xxx=xxx
* 5.哈希值
* #xxx
*/
编写一条正则，用来验证规则：1个6-16位的字符串，必须同时包含有大小写字母和数字
let reg=/(?!^[a-zA-Z]+$)(?!^[0-9]+$)(?!^[a-z0-9]+$)(?!^[A-Z0-9]+$)^[a-zA-Z0-9]{6,16}$/
实现一个$attr(name,value)遍历
属性为name
值为value的元素集合
例如下面示例：
let ary=$attr(‘class’,‘box’)//获取页面中所有class为box的元素
function $attr(property,value){
//获取页面所有元素
let allObj=document.getElementByTagName(*)
//因为获取的元素是伪数组所以需要转换成数组
allObj=Array.from(allObj)
//存放符合条件的与元素
let arr=[]
//遍历所有元素
allObj.forEach(item=>{
let itemValue=item.getAttribute(property)
//如果需要获取的属性为class，则需要特殊处理
//需满足如：class='container box' 获取class为box
//需满足如：class='containerbox' 获取class为box
if(property==='class'){
//\b单词作为边界
new RegExp("\\b"+value+"\\b").test(itemValue)?arr.push(item):null
return
}
//如果itemValue===value说明property该元素符合要查找的元素
if(itemValue===value){
arr.push(item)
}
})
}
模拟内置new后的结果
new 发生了什么事情
- 像普通函数执行一样，形成一个私有的作用域
- 形参赋值
- 变量提升
- 默认创建一个对象，让函数中的this指向这个对象，这个对象就是当前类的一个实例
- 代码执行
- 默认把创建的对象返回
function Person(name){
this.name=name
}
function _new(fn,...arg){
//创建对象
//利用Object.create的特性，将obj的__proto__指向fn.prototype
let obj=Object.create(fn.prototype)
//修改fn的this指向
fn.call(obj,...arg)
//返回该对象
return obj
}
let zhangsan=_new(Person,'张三')
console.log(zhangsan.name)//张三
console.log(zhangsan.__proto__===Person.prototype)//true
某公司1到12月份的销售额存在一个对象里
例如：{
1:222,
2:123,
5:888
}
请把数据处理为如下结构：[222,123,null,null,888,null,null,null,null,null,null,null,null]
//方法一
let obj={
1:222,
2:123,
5:888
}
let arr=new Array(12).fill(null).map((item,index)=>{
return obj[index+1]||null
})
//方法二
let obj={
1:222,
2:123,
5:888
}
let arr=new Array(12).fill(null)
Object.keys(obj).forEach(item=>{
arr[item-1]=obj[item]
})
//方法三
let obj={
1:222,
2:123,
5:888
}
obj.length=13
let arr=Array.from(obj).slice(1).map(item=>typeof(item)==='undefined'?null:item)
})
mouseover和mouseenter的区别
mouseover
- 当鼠标移入元素或其子元素都会触发事件，所以有重复触发、冒泡阶段，对应的解绑事件是mouseout
mouseenter
- 当鼠标移入元素本身（不包含元素的子元素）会触发事件，对应的解绑事件是mouseleave
如何实现一个私有变量，用getName方法可以访问，不能直接访问
function Product(){
var name='张三'
this.getName=function(){
return name
}
}
var obj=new Product()
console.log(obj.name)//undefined
console.log(obj.getName())//张三
实现一个once函数，传入函数参数只执行一次
function once(func){
var tag=true
return function(){
if(tag===true){
func.apply(null,arguments)
tag=false
}
return undefined
}
}
==、===和Object.is()的区别
-
==：等同，比较运算符，两边值类型不同的时候，先进行类型转换，再比较；
-
=== 恒等，严格比较运算符，不做类型转换，类型不同就是不等；
-
Object.is()与===的行为基本一致，不过有两处不同
+0不等于-0。
NaN等于自身。
+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
Eventloop
- 任务队列中，在每一次事件循环中，macrotask只会提取一个执行，而microtask会一直提取，直到microsoft队列为空为止。
- 也就是说如果某个microtask任务被推入到执行中，那么当主线程任务执行完成后，会循环调用该队列任务中的下一个任务来执行，直到该任务队列到最后一个任务为止。而事件循环每次只会入栈一个macrotask,主线程执行完成该任务后又会检查microtasks队列并完成里面的所有任务后再执行macrotask的任务。
- macrotasks: setTimeout, setInterval, setImmediate, I/O, UI rendering
- microtasks: process.nextTick, Promise, MutationObserver
JS中string的startwith和indexof两种方法的区别
startwith(searchvalue，start)
- searchvalue 必需，要查找的字符串。
- start 可选，查找的开始位置，默认为 0。
- 返回boolean类型，未找到返回false
indexof
- searchvalue 必需，要查找的字符串。
- start 可选，查找的开始位置，默认为 0。
- 返回某个指定的字符串值在字符串中首次出现的位置。未找到返回-1