"开启前端新纪元：2024年WEB前端面试必问的10个巧妙JavaScript问题"

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()：删除全部存储的值

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 返回键值的编码值

历史管理

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：可选参数，给网址后面加的字符串；给人网址变换的感觉；不添加时，网址不发生改变
网址时虚拟的，刷新时找不到页面

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()：将图像数据放回画布

原始js操作html元素

父级元素：
元素.parentNode

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

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

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

前端数据存储有那些

url参数
cookie
localStorage
sessionStorage
indexedDB

for in、for of的区别

for in总是得到对象的key或数组、字符串的下标
for of总是得到对象的value或数组、字符串的值

().attr与().prop()的区别?

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

document load 和document ready的区别

document.onload是在结构和样式，外部js以及图片加载完才执行js
document.ready是 dom 树创建完成就执行的方法，原生中没有这个方法，jquery中有$().ready(function)

js中，数字形式的字符串和数字相加的规则

把数字和数字相加
把字符串和字符串相加
所有其他类型的值都会被自动转换成这两种类型的值

console.log(-1 ‘5‘); // -15
console.log(1 ‘5‘); // 15

console.log(1 - ‘5‘); // -4
console.log(-1 - ‘5‘); // -6

手动实现 Object.assign

创建新对象，循环赋值

打散合并在新的对象中