参考资料:
https://blog.csdn.net/xiaobing_hope/article/details/79458288
https://blog.csdn.net/ganyingxie123456/article/details/77947704
var arr = [1, 43, 4, 3, 2, 4, 3];
// 去重后
arr = [1, 43, 4, 3, 2]
// 传统方法,for循环实现
function dedupe(arr) {
var rets = [];
for (var i = 0; i < arr.length; i ++) {
if (!rets.includes(arr[i])) {
rets.push(arr[i]);
}
}
return rets;
}
// 方法二: forEach方法实现
function dedupe(arr) {
var rets = [];
arr && arr.forEach(function(item){
if (!rets.includes(item)){
rets.push(item);
}
});
return rets;
}
// ES6方法实现
// es6提供的新的数据结构Set,类似数组,但是成员的值都是唯一的,没有重复的值。
function dedupe(arr) {
var newSet = new Set(arr); // arr变成了set的数据结构,并去除了其中重复的元素
return Array.from(newSet); // Array.from方法将set数据结构转为数组数据结构
}
// [1,2,{a:1},3,2,{a:1},[1,2],[1,2]]
// 数组中的元素包含对象和数组
function unique(arr) {
const hash = {};
const res = [];
for (let i = 0; i < arr.length; i++) {
if (hash[arr[i]] == null) {
res.push(arr[i]);
hash[arr[i]] = true;
}
}
return res;
}
unique([1,2,{a:1},3,2,{a:1},[1,2],[1,2]]);
// 1, 2, {a: 1}, 3, [1, 2]
数组的扁平化,就是将一个嵌套多层的数组array(嵌套可以是任何层数)转换为只有一层的数组
var arr = [1, 2, 3, [4, 3, [2, 7], 2], 5, [5, 9, 10], 7];
// 去扁平化后
arr = [1, 2, 3, 4, 3, 2, 7, 2, 5, 5, 9, 10, 7];
(1)循环递归实现
// for循环,如果子元素还是数组,则递归调用该方法
function flatten(arr) {
var rets = [];
for(var i = 0; i < arr.length; i ++) {
if (Array.isArray(arr[i])) {
rets = rets.concat(flatten(arr[i]));
} else {
rets.push(arr[i]);
}
}
return rets;
}
// 使用forEach
function flatten(arr) {
var rets = [];
arr && arr.forEach(function(item) => {
if (Array.isArray(item)) {
rets = rets.concat(flatten(item));
} else {
rets.push(item);
}
});
return rets;
}
(2)使用reduce简化代码
function flatten(arr) {
return arr.reduce(function(pre, item){
return pre.concat(Array.isArray(item) ? flatten(item) : item);
}, [])
}
(3)如果数组元素都为数字,则可以使用toString方法
function flatten(arr) {
var newArr = arr.toString().split(',');
return newArr.map(function(item){
return +item; // 将字符串转为数字
});
}
es6提供的新方法 flat(depth)
let a = [1,[2,3]];
a.flat(); // [1,2,3]
a.flat(1); //[1,2,3]
优缺点无非是速度问题,暂时忽略
参考资料:https://www.cnblogs.com/echolun/p/7889848.html
function deepClone(obj){
let objClone = Array.isArray(obj)?[]:{};
if(obj && typeof obj==="object"){
for(key in obj){
if(obj.hasOwnProperty(key)){
//判断ojb子元素是否为对象,如果是,递归复制
if(obj[key]&&typeof obj[key] ==="object"){
objClone[key] = deepClone(obj[key]);
}else{
//如果不是,简单复制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
let a=[1,2,3,4],
b=deepClone(a);
a[0]=2;
console.log(a,b);
function deepClone(obj){
let _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone
}
let a=[0,1,[2,3],4],
b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);
$.extend( [deep ], target, object1 [, objectN ] )
deep表示是否深拷贝,为true为深拷贝,为false,则为浅拷贝
target Object类型 目标对象,其他对象的成员属性将被附加到该对象上。
object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。
let a=[0,1,[2,3],4],
b=$.extend(true,[],a);
a[0]=1;
a[2][0]=1;
console.log(a,b);
参考资料:
https://blog.csdn.net/u011500781/article/details/80004517
https://www.cnblogs.com/guolao/p/10144086.html
参考资料:https://www.cnblogs.com/eggplants/p/9592563.html
在实际开发应用中,经常会碰到高频率的事件处理,比如 window 的 scroll, resize 以及 keyup,mousemove 等事件。
这些高频率的事件触发会带来一些显著的问题。 如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。
高频率的事件处理函数中,存在着大量的DOM操作,当浏览器的渲染速度跟不上事件触发频率,容易造成页面卡顿,影响用户体验,甚至会造成 CPU 使用率过高导致页面崩溃。
高频率的事件处理函数中,每执行一次事件处理函数时,都需要和服务器通信建立 HTTP 请求,比如页面的搜索功能,那么可能存在短时间内发起了数十条 HTTP 请求的情况,容易消耗服务器资源。
针对这些问题的解决方案,可以采用函数防抖(debounce)和节流(throttle)的方案解决存在的问题,通过防抖和节流可以将多个事件的触发合并成一个,减少事件触发频率。 同时又不影响实际效果。
function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null)
clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
// 处理函数
function handle() {
console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));
参考资料:https://www.cnblogs.com/mengfangui/p/9765243.html
//方法一
function sleep1(ms, callback) {
setTimeout(callback, ms)
}
//sleep 1s
sleep1(1000, () => {
console.log(1000)
})
//方法二
function sleep2(ms) {
return new Promise(function(resolve, reject) {
setTimeout(resolve, ms)
})
}
sleep2(1000).then(() => {
console.log(2000)
})
//方法三
function sleep3(ms) {
return new Promise(function(resolve, reject) {
setTimeout(resolve, ms)
})
}
async function init() {
await sleep3(1000);
}
init().then(() => {
console.log(3000)
})