js基础习题及答案（一）

最新推荐文章于 2024-07-29 02:07:36 发布

VickQ

最新推荐文章于 2024-07-29 02:07:36 发布

阅读量809

点赞数 3

分类专栏： js习题文章标签： js javascript

本文链接：https://blog.csdn.net/qq_43069222/article/details/104580401

版权

js习题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

this的不同应用场景，如何取值

当做普通函数被调用
this=window
使用call apply bind
this=call | apply | bing 中绑定的this
作为对象方法调用
this=对象本身
在class中的方法中调用
this=当前实例
箭头函数
this=上一个作用域的this

手写bind函数

 Function.prototype.myBind = function(context) {
    //返回一个绑定this的函数，我们需要在此保存this
    let self = this
        // 可以支持柯里化传参，保存参数
    let arg = [...arguments].slice(1)
        // 返回一个函数
    return function() {
        //同样因为支持柯里化形式传参我们需要再次获取存储参数
        let newArg = [...arguments]
        console.log(newArg)
            // 返回函数绑定this，传入两次保存的参数
            //考虑返回函数有返回值做了return
        return self.apply(context, arg.concat(newArg))
    }
  }

实际中闭包的应用

隐藏数据
制作一个缓存的应用

function createCache(){
	const data={}//需要缓存的数据
	return {
		set:(key,val)=>{
			data[key]=val
		},
		get:key=>data[key]
	}
}
const c=createCache()
c.set('name','张三')//设置缓存的数据
const name=c.get('name')//获取缓存中的数据
console.log(name)

同步和异步的区别

基于js是单线程语言
同步会阻塞代码执行
异步不会阻塞代码执行

property和attribute的区别

property:修改对象属性，不会体现html结构中
attribute:修改html属性，会改变html结构
两者都有可能引起DOM重新渲染

DOM是哪种数据结构

树（DOM结构）

DOM性能

DOM操作非常昂贵，避免频繁操作DOM
对DOM查询做缓存
将频繁操作改为一次性操作

DOM查询做缓存

//不缓存DOM查询结果
for(let i=0;i<document.getElementByTagName('p').length;i++){
	//每次循环，都会计算length,频繁进行DOM查询
}
//缓存DOM查询结果
const pList=document.getElementByTagName('p')
const pLength=pList.length
for(let i=0;i<length;i++){
	//缓存length,只进行一次DOM查询
}

将频繁操作改为一次性操作

一次插入多个节点，考虑性能

const listNode =document.getElementById('list')
//创建一个文档片段，此时还没有插入到DOM树中
const frag=document.createDocumentFragment()

//执行插入
for(let i=0;i<10;i++){
	const li=document.createElement('li')
	li.innerHTML=`第${i}个li`
	frag.appendChild(li)
}
//循环结束后再插入到dom树中
listNode.appendChild(flag)

编写一个通用的事件绑定函数

function bindEvent(elem,type,selector,fn){
	if(fn==null){//说明不需要代理
		fn=selector
		selector=null
	}
	elem.addEventListener(type,e=>{
		let target
		if(selector){
			//需要代理
			target=e.target
			//元素被指定的选择器字符串选择，Element.matches()  方法返回true; 否则返回false
			if(target.mathes(selector)){
				fn.call(target,e)
			}else{
			//不需要代理
				fn(e)
			}
		}
	})
}

描述事件冒泡

基于DOM树形结构
事件会顺着触发元素往上冒泡，一层一层往上冒
应用场景：事件代理

Cookie的缺点

存储大小，最大4KB
http 请求时需要发送到服务端，增加请求数据量
只能用document.cookie=’…’ 来修改，太简陋

localStorage和sessionStorage

html5专门为存储而设计，最大可存5M
API简单好用
不会随着http请求发送出去
localStorage数据会永久存储，除非代码或手动删除
sessionStorage数据只存在当前会话，浏览器关闭则清空

描述cookie localStorage sessionStorage的区别

cookie容量为4KB,localStorage和sessionStorage容量为5M
localStorage数据会永久存储，除非代码或手动删除
sessionStorage数据只存在当前会话，浏览器关闭则清空
cookie会请求服务端，localStorage、sessionStorage不会请求服务端

window.onload 和 DOMContentLoaded区别

window.onload 在页面全部资源加载完成后才能执行，包括图片视频
DOMContentLoaded 在DOM加载完成即可，图片可能尚未加载

页面渲染过程

根据HTML代码生成DOM Tree
根据CSS代码生成CSSOM
将DOM Tree 和CSSOM结合形成Rander Tree
根据Rander Tree 渲染页面
遇到script则暂停渲染，优先加载并执行js代码，完成后再继续
直至把Rander Tree 渲染完成

编写防抖函数

防止频繁向服务器发送请求

 // 防抖
  debounce(fn, delay = 500) {
    // timer是闭包中的
    let timer = null
    return function () {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        fn.apply(this, arguments)
        timer = null
      }, delay)
    }
  }

编写节流函数

每隔一段时间触发一次

 // 节流
  throttle(fn, delay = 100) {
    // timer是闭包中的
    let timer = null
    return function () {
      if (timer) {
        return
      }
      timer = setTimeout(() => {
        fn.apply(this, arguments)
        timer = null
      }, delay)
    }
  }

let、const、var的区别

使用var声明的变量，其作用域为该语句所在的函数内，并且存在变量提升
使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
使用const声明的是常量，不能修改这个常量，且需要赋初始值

typeof能判断哪些类型

undefined 、string、number、boolean、symbol
object(注意typeof null===‘object’)
function

列举强制类型转换和隐式类型转换

强制:parseInt、parseFloat、toString等
隐式:if、逻辑运算、==、+拼接字符串

手写深度比较，模拟lodash.isEqual

//判断是否为对象类型
function isObject(obj){
	return typeof obj==='object'&&obj!==null
}
//深度比较两个值
function isEqual(obj1,obj2){
	//判断是否为对象
	if(!isObject(obj1)||!isObject(obj2)){
		//说明是值类型
		return obj1===obj2 //直接比较
	}
	
	//说明传入的两个元素为同一个元素直接返回true
	if(obj1===obj2){
		return true
	}
	
	//判断两个对象属性个数是否相等
	//如果不相等则返回false
	const obj1Keys=Object.keys(obj1)
	const obj2Keys=Object.keys(obj2)
	if(obj1Keys.length!==obj2Keys.length){
		return false
	}
	
	//使用递归进行深度比较,以obj1为基准作比较
	for(let key in obj1){
		const res=isEqual(obj1[key],obj2[key])
		//判断res结果，如果为false说明不相等，直接返回false
		if(!res){
			return false
		}
	}
	return true
}

split()和join()的区别

例如:

'1-2-3'.split('-')//[1,2,3]
[1,2,3].join('-')//'1-2-3'

split是将字符串按指定字符分割成数组
join是将数组按指定字符并结成字符串

数组的pop push shift unshift分别做什么

pop

弹出数组最后一个元素,返回结果为弹出的元素

const arr=[10,20,30,40]
const arrRes=arr.pop()
console.log(arrRes)//40

push

添加元素到数组最后一个,返回结果为数组长度

const arr=[10,20,30,40]
const arrRes=arr.push(50)
console.log(arrRes)//返回为数组长度

unshift

添加元素到数组第一个,返回结果为数组长度

const arr=[10,20,30,40]
const arrRes=arr.unshift(50)
console.log(arrRes)//返回为数组长度

shift

移除数组第一个元素,返回结果为数组长度

const arr=[10,20,30,40]
const arrRes=arr.unshift(50)
console.log(arrRes)//返回为数组长度

这些函数都会改变原数组

补充：
纯函数

不改变原数组（没有副作用）
返回一个数组

常见纯函数有

concat()
map()
filter()
slice()

非纯函数有

push()
pop()
shift()
unfhift()
foreach()
some()
every()
reduce()

数组slice()和splice区别

slice()

截取数组元素
参数1：开始截取的索引位置
参数2(可选)：结束截取的索引位置
不写参数2将截取参数1后所有元素
返回一个新的数组

const arr=[10,20,30,40]
const arrRes=arr.slice(1,3)
console.log(arrRes)//[20,30,40]

splice()

截取数组元素
参数1：开始剪贴的索引位置
参数2：剪贴的个数
参数n（可选）：在剪贴的位置插入的元素
会改变原数组

const arr=[10,20,30,40]
const arrRes=arr.splice(1,2,'a','b')
console.log(arrRes)//[10,'a','b',40]

get和post的区别

get一般用于查询操作，post一般用于用户提交操作
get参数拼接在url上，post参数放在请求体内（数据体积更大）
post易于防止CSRF

函数call和apply的区别

fn.call(this,p1,p2,p3)
fn.apply(this,arguments)

传参形式不同，call以依次传入方式传参，而apply以数组形式传参

闭包是什么？有何特性？有何影响？

闭包

闭包是指有权访问另一个函数作用域中的变量的函数

特性

外界无法访问闭包内部的数据
一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在

影响

使用闭包会占有内存资源，过多的使用闭包会导致内存泄露等。

如何阻止事件冒泡和默认行为

event.stopPropagation() 阻止事件冒泡
event.preventDefault() 阻止默认行为

函数声明和函数表达式的区别

函数声明function fn(){…}
函数表达式 const fn=function(){…}
函数声明在代码执行前会预加载，而函数表达式不会

new Object() 和 Object.create()的区别

{} 等同于 new Object(),原型Object.prototype
Object.create(null)没有原型
Object.create({…})可以指定原型

判断字符串以字母开头，后面是字母数字下划线，长度6-30

const reg=/^ [a-zA-z]\w{5,29}/

手写字符串trim(),保证浏览器兼容性

String.prototype.trim=function(){
	return this.replace(/^\s+/,'').replace(/\s+$/,'')
}

什么是JSON

JSON是一种数据格式，本质是一段字符串
JSON格式和js对象结构一致，对js语言更友好
window.JSON是全局对象：JSON.stringify() JSON.parse()

获取当前页面url参数

function getUrl(url) {
        var urlObj={}
        var arr=url.split("?")[1].split('&')
       for(var i=0;i<arr.length;i++){
           var newArr=arr[i].split('=')
           urlObj[newArr[0]]=newArr[1]
        }
        return urlObj
    }

手写flatern 考虑多层级

let arr=[1,2,3,[4,5,[6,7]]]
//方式一：递归
function flat(arr){
	//验证arr是否存在深层嵌套
	const isDeep=arr.some(item=>item instanceof Array)
	if(!isDeep){//说明不存在深层嵌套
		return arr
	}
	const res=[].concat(...arr)
	return flat(res)//使用递归
}
//方式二：字符串tostring
function flat(arr){
	return arr.toString().split(',').map(item=>{
		return Number(item)
	})
}
//方式三：json.stringify(更麻烦)
//JSON.stringify(arr):"[1,2,3,[4,5,[6,7]]]"
//replace(/\[|\]/ig,"") '"1","2","3","4","5","6""7"'
//最后使用map将字符串类型转换成数字类型
function flat(arr){
	return JSON.stringify(arr).replace(/\[|\]/g,"").split(',').map(item=>{
		return Number(item)
	})
}

数组去重

方式一 (传统方式)

function unique(arr){
	const res=[]
	arr.foreach(item=>{
		if(res.indexOf(item)<0){//说明不存在
			res.push(item)
		}
	})
	return res
}

方式二 (set)

function unique(arr){
	const set=new Set(arr)
	return [...set]
}

VickQ

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录