想拿高薪？2024年前端面试必问的10道挑战性JS题目！

历史管理

window.location.hash：网址的后面添加的# 字符串旧方法
如：window.location.hash = num; 读取（会加1个#）、设置（会加1个#）

window.onhashchange改变hash值时触发事件

window.onpopstate ：改变hash值时触发事件
event.state; 历史管理中，当前hash值对应的存储数据

history.pushState（data，‘‘，网址后面加的字符串）新方法存储数据data，设置hash值（不包括#）必须在服务器环境中，否则无效
参数1：存进历史管理的数据
参数2：标题；还未实现，直接用‘‘
参数3：可选参数，给网址后面加的字符串；给人网址变换的感觉；不添加时，网址不发生改变
网址时虚拟的，刷新时找不到页面

event事件

event事件的兼容如：var ev = ev || event;

event.currentTarget 事件绑定的元素
event.target 事件触发的元素，不一定是事件绑定的元素，可能是发生事件冒泡的下级元素
event.clientX / event.clientY ：鼠标到页面可视区（屏幕），左边/顶部的距离（只有数字，没有单位）
event.pageX / event.pageY 到整个网页的值

event.stopPropagation() 阻止冒泡标准浏览器
event.cancelBubble = true 阻止冒泡只支持IE
event.stopImmediatePropagation() 阻止冒泡，阻止本身的事件（阻止在该语句之后的事件，之前的事件无法阻止）标准浏览器

event.preventDefault(); 阻止默认
return false;阻止默认行为、阻止冒泡只能阻止obj.on事件名称=fn 、attachEvent（IE）所触发的默认行为

event.which 键盘的键值、鼠标值 keydown、keyup、mousedown、mouseup事件中使用
鼠标左键、滚轮、鼠标右键分别对应1、2、3（测鼠值时必须使用mousedown、或者mouseup，否则出现问题）
event.ctrlKey 按ctr时，返回true，否则返回false
event.shiftKey 按shift时，返回true，否则返回false
event.keyCode 返回键值的编码值

sessionStorage、localStorage：本地存储、本地会话

localStorage永久存储，关闭浏览器，本地存储都不会消失（只针对相同的浏览器）能多个相同的页面共享数据
sessionStorage临时存储，关闭浏览器，本地会话消失不能多个相同的页面共享数据
必须是服务器环境，否则相关的事件无效

window.sessionStorage、window.localStorage：方法一样
注意：数据名称、数据具体值，必须加上引号，除非是变量，或者表达式，否则出错

window.localStorage.getItem(‘name‘)：获取数据，通过key来获取到相应的value
window.localStorage.setItem(‘name‘，‘value‘)：设置数据，keyvalue类型，类型都是字符串

window.localStorage.removeItem(‘name‘)：删除数据，通过key来删除相应的value
window.localStorage.clear()：删除全部存储的值

原始js操作html元素

父级元素：
元素.parentNode

子级元素：
元素.children
元素.firstElementChild || 元素.firstChild：（只读）第一个子节点
元素.lastElementChild || 元素.lastChild

兄弟元素：
元素.nextElementSibling || 元素.nextSibling （只读）下一个兄弟节点
元素.previousElementSibling || 元素.previousSibling （只读）上一个兄弟节点

删除、替换、插入元素：
父级.removeChild(要删除的元素); 删除子元素（通过父级删除子集）
父级.replaceChild(新节点，被替换的子节点) 替换子节点
父级.appendChild(要添加的元素) 追加子元素
父级.insertBefore(新的元素，被插入的元素) 在指定子元素前面插入一个新元素

canvas绘图

var oc=document.querySelector(‘#c1‘);
oGc=oc.getContext(“2d“); //必须设置绘制环境，否则绘制图案

context.toDataURL() 将canvas内的图像，转成img.src

context.downloadimage(ocanvas1，“png“); 下载图片
context.drawImage(img，x，y); 在画布上定位图像。复制图片、视频
context.drawImage(img，x，y，width，height); 在画布上定位图像，并规定图像的宽度和高度
context.drawImage(img，sx，sy，swidth，sheight，x，y，width，height); 剪切图像，并在画布上定位被剪切的部分

context.getImageData()：复制画布上指定矩形的像素数据，获取图像每个像素的数据
如果你的img_url和你的页面不是同源的，那么getImageData会导致错误
context.putImageData()：将图像数据放回画布