「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」
前言
代码写出来是给人看的，只是恰好电脑可以运行～让我们一起努力！
正文
快速实现浅拷贝和深拷贝
还有人不知道怎么区分深拷贝和浅拷贝吗？
可以这样去理解：
浅：b复制了a, 但是b懒的管理，当a发生改变的时候b也跟着发生改变
深：b复制了a, 但是b比较勤快，偷师学艺成功都是b的，当a发生改变的时候b不会跟着发生改变
好了，原理大家明白了，那么就让我们来实现吧：
// 浅拷贝直接 = 即可
const a = [...Array(5).keys()]
const b = a
console.log(a) // [0, 1, 2, 3, 4]
a[0] = '哈哈'
console.log(a) // ['哈哈', 1, 2, 3, 4]
console.log(b) // ['哈哈', 1, 2, 3, 4]
// 深拷贝利用JSON的方法一句话实现
const a = [...Array(5).keys()]
const b = JSON.parse(JSON.stringify(a))
console.log(a) // [0, 1, 2, 3, 4]
a[0] = '哈哈'
console.log(a) // ['哈哈', 1, 2, 3, 4]
console.log(b) // [0, 1, 2, 3, 4]
判断用户的滑动方向
在我们做手机端项目的时候经常会遇到需要判断用户的滑动方向去处理不同的逻辑，那么我今天就把我经常使用的函数分享给大家：
private initMoveListener(className: string) {
const myDom: any = document.getElementsByClassName(className)[0]
let startX = 0
let startY = 0
let moveEndX = 0
let moveEndY = 0
let X = 0
let Y = 0
myDom.addEventListener('touchstart', (e: any) => {
startX = e.touches[0].pageX
startY = e.touches[0].pageY
}, false)
myDom.addEventListener('touchmove', (e: any) => {
// e.preventDefault();
moveEndX = e.changedTouches[0].pageX
moveEndY = e.changedTouches[0].pageY
X = moveEndX - startX
Y = moveEndY - startY
// Math.abs(X) > Math.abs(Y) && X > 0 // left
// Math.abs(X) > Math.abs(Y) && X < 0 // right
// Math.abs(Y) > Math.abs(X) && Y > 0 // down
// Math.abs(Y) > Math.abs(X) && Y < 0 // up
})
}
window.close()在哪些情况是不可以关闭当前标签页的
前段时间，朋友问我说window.close为啥关闭不了当前页面呀，是我哪里写的不对么？
别慌，让我们先来看看控制台：
// Can't close the window since it was not opened by JavaScript
很好，控制台已经给出了提示，说是这个页面不是由js打开的，而是用户自己输入url打开的标签页，js是无法调用close事件的
正常在我们的需求中，一般不会关闭自己的网站，最多是跳转到登录页面，因此我们可以和产品商量下这个方案
解决方法有吗？ 至少我目前没找到（safari）
经过实验，js跳转页面后调用close这种，可能有的浏览器可以，在最新版已经修复此问题
最后给大家整理下常见浏览器调用close的各个情况
JSON转URL参数
const realTypeof = context => Object.prototype.toString.call(context).match(/(\w+)\]$/)[1].toLowerCase()
const paramsToUrlQuery = (params = {}) {
if (realTypeof(params) === 'object') {
let queryArr = [];
for (let key in params) {
queryArr.push(`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`);
}
return queryArr.join('&');
} else {
throw '类型不正确';
}
}
当然你也可以使用qs库，用法：
qs.stringify(params)
去除字符串空格
const newTrim = (funName = 'default', txt = '') => {
return({
all: txt => txt.replace(/\s/g, ''),
around: txt => txt.replace(/(^\s)|(\s*$)/g, ''),
before: txt => txt.replace(/(^\s)/g, ''),
after: txt => txt.replace(/(\s$)/g, '')
}[funName])(txt)
};
console.log(newTrim('all', ' 啊 啊 啊 ')) // 啊啊啊
console.log(newTrim('around', ' 啊 啊 啊 ')) // 啊 啊 啊
console.log(newTrim('before', ' 啊 啊 啊 ')) // 啊 啊 啊
console.log(newTrim('after', ' 啊 啊 啊 ')) // 啊 啊 啊
事件的绑定3种方式
<div onclick="xx"> </div>
xx.onclick = () => {}
// 第三个参数为：需不需要阻止冒泡
xx.addEventListence('click', () => {}, false)
结语：
大家都学会了么？让我们一起期待下一次的更新～
