JSON.stringify会把NaN转化为null，
null / 60 0
data为null的时候，会主动负值么
indexOf方法
const ind = this.core.findIndex(w => w === data);// includes更好
const ind = this.core.findIndex(w => w.id === data.id);
解构复制需要注意的
const { bb = 123} = {bb: null};
console.log(bb); // null
const { cc = 123} = {cc: undefined};
console.log(cc); // 123
js concat 与 arguments
function arr() {
const aa = ['a'].concat(...arguments);
console.log(aa);
}
arr(1,2,3,4); // [ 'a', 1, 2, 3, 4 ]
----------
如果不带...
function arr() {
const aa = ['a'].concat(arguments);
console.log(aa);
}
arr(1,2,3,4);// [ 'a', [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 } ]
写测试代码可能会提高工作效率的代码
Object.prototype.say="cgl"; // 修改Object.prototype
var person ={ age: 18 };
for (var key in person) {
console.log(key, person[key]);//这里用person.key得不到对象key的值，用person[key] 或者 eval("person."+key);
}
// 结果： age 18
// say cgl
关于this例子
let obj = {
age: 123,
run: () => {
console.log(this.age);
},
run1: function() {
console.log(this.age);
},
run2: function() {
const aa = () => {
console.log(this.age);
}
aa();
},
}
obj.run(); // undefined
obj.run1(); // 123
obj.run2(); // 123
addEventlisten 可以使用这个方法
<html>
<div id="cc1">
<div id="aa1">
aa1-content
<div id="aa2">
aa2-content
<div id="aa3">
aa3-content
</div>
</div>
</div>
<div id="bb1"></div>
</div>
</html>
<script>
document.querySelector('#aa1').addEventListener('click',aa1,true);
document.querySelector('#aa2').addEventListener('click',aa2, true);
document.querySelector('#aa3').addEventListener('click',aa3, true);
document.querySelector('#bb1').addEventListener('click',bb1, true);
document.querySelector('#cc1').addEventListener('click',cc1, true);
function aa1() {
alert('aa1');
}
function aa2() {
alert('aa2');
}
function aa3() {
alert('aa3');
}
function bb1() {
alert('bb1');
}
function cc1() {
alert('cc1');
}
</script>
箭头函数绑定绑定this无效
function ccc () {
this.a = 123;
const aaa = (()=>{
console.log(this);
}).bind(this);
return aaa;
}
ccc()();// Window
function ddd () {
this.a = 123;
const aaa = (()=>{
console.log(this);
});
return aaa;
}
ddd()(); // Window
mouseover和mouseenter的区别
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是mouseout
mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave
js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别
clientHeight：表示的是可视区域的高度，不包含border和滚动条
offsetHeight：表示可视区域的高度，包含了border和滚动条
scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
clientTop：表示边框border的厚度，在未指定的情况下一般为0
offsetTop: 还是上面那张图，div的offsetTop为20，因为margin-top是20，距离html顶部的距离是20
scrollTop：可读可写，滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。
https://www.cnblogs.com/wenruo/p/9754576.html
iframe缺点
会阻塞主页面的onload事件
搜索引擎无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能
setTimeout
var i = 0;
function test() {
console.log(i++);
setTimeout("test()",2000);
}
test();
--------------------
var i = 0;
function test() {
console.log(i++);
setTimeout(test,2000);
}
test();
快速入门系列】一篇文章让你入门HTTP2.0
https://segmentfault.com/a/1190000016656529?utm_source=tag-newest
http1.0的缺点:
(1) 流水线(2) 单向请求(3) 请求报文与响应报文首部信息冗余量大(4)据未压缩
http2.0 的优点
(1)多路复用(2) 服务器Push(3)Header压缩(4)二进制传输
一个图片url访问后直接下载怎样实现？
- 后端设置,ctx.set(‘Content-Disposition’,“attachment;filename=FileName.txt”); 特别是attachment
2.get获取后，转化为blob处理。- a标签 download 属性。
- window.open
js拖拽功能的实现
https://codepen.io/Ai01/pen/BaNyZmL
https://segmentfault.com/a/1190000010507676
html5 实现拖拽的几个事件
在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
// e.dataTransfer
<!-- 手机拍照后 读取文件显示到桌面上 -->
<div id="drag" style="height:200px;width:200px;background:red"></div>
<script>
drag.addEventListener('dragover',(e)=>{
e.preventDefault();
})
drag.addEventListener('drop',(e)=>{
e.preventDefault();
let fr = new FileReader()
fr.readAsDataURL(e.dataTransfer.files[0]);
fr.onload = function(e){
let img = new Image()
img.src = e.target.result
document.body.appendChild(img);
}
})
</script>
首先是三个事件，分别是mousedown，mousemove，mouseup
<div id="ball" class="absolute" style="width: 20px;height:20px;background:red;border-radius: 50%;"></div>
<style>
.absolute{
position: absolute;
}
</style>
<script>
const ball = document.getElementById('ball');
let startDrag = false;
ball.addEventListener('mousedown', () => {
startDrag = true;
});
const mousemoveCb = (e) => {
if(!startDrag) return;
let x = e.pageX - ball.offsetWidth / 2;
let y = e.pageY - ball.offsetHeight / 2;
ball.style.left = `${x}px`;
ball.style.top = `${y}px`;
};
document.addEventListener('mousemove', mousemoveCb);
</script>
- 深拷贝对象遇到递归的时候，如何处理circle的
调试代码的方法.
console.log(‘flag’)
console.log(‘flagEnd’)
v8 引擎的回收 看公开课。
map 可以使用{aa: 123} 做key么。
js中的时间
GMT时间、UTC时间、CST时间
https://blog.csdn.net/sinat_21902709/article/details/86711168
new Date().toLocaleDateString()
new Date().toLocaleTimeString()
如果是函数的时候可以这么搞
var ss = [‘a’, ‘b’, ‘c’].reduce((a, b) => param => {
console.log(param[a][b]);
return param[a][b];
});
ss({ a: { b: { c: { d: 123 } } } });
这样子写reduce是不是更好一些?
tasks都是方法，然后return 返回的是第一个方法。
####### GMT时间和UTC时间。
GMT，即格林尼治标准时间，也就是世界时。GMT的正午是指当太阳横穿格林尼治子午线（本初子午线）时的时间。但由于地球自转不均匀不规则，导致GMT不精确，现在已经不再作为世界标准时间使用。
UTC，即协调世界时。UTC是以原子时秒长为基础，在时刻上尽量接近于GMT的一种时间计量系统。为确保UTC与GMT相差不会超过0.9秒，在有需要的情况下会在UTC内加上正或负闰秒。UTC现在作为世界标准时间使用。
所以，UTC与GMT基本上等同，误差不超过0.9秒。
这里不能单独写export default 必须有一个export {},要不ts会报错。
事件捕获和事件冒泡，如何先冒泡后捕获
https://www.jianshu.com/p/5c20e7462166
如何先冒泡后捕获
根据w3c标准，应先捕获再冒泡。若要实现先冒泡后捕获，给一个元素绑定两个addEventListener，其中一个第三个参数设置为false（即冒泡），另一个第三个参数设置为true（即捕获），调整它们的代码顺序，将设置为false的监听事件放在设置为true的监听事件前面即可。
####### 无脑加一个async，又不佳await导致代码异步
reduce
[{value: 123}, {value: 1}].reduce((total, i) => (total += i.value), 0)
666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
