本文发表于 227 天前，其中的信息可能已经事过境迁
深拷贝 (ES6)
在现代浏览器中，可以使用 structuredClone 方法来实现深拷贝，它是一种更高效、更安全的深拷贝方式。
js
const original = {
a: 1,
b: [1, 2, 3],
c: new Map([
[1, "one"],
[2, "two"],
]),
};
const cloned = structuredClone(original);
console.log(cloned); // 输出克隆后的对象记录一段代码运行所花时间
js
console.time("计时器");
for (let i = 0; i < 1000; i++) {
console.log(i);
}
console.timeEnd("计时器");快速去除数组中的 undefined 和 null
filter(Boolean)
js
const arr = [1, 2, undefined, 3, null, 4];
const filteredArr = arr.filter(Boolean);
console.log(filteredArr); // 输出 [1, 2, 3, 4]文档注释
在写函数时，可以使用文档注释来描述函数的功能和参数。
js
/**
* 这是一个函数
* @author 兜兜里有糖
* @param {number} num 第一个参数为数字
* @return {void} 没有返回值
* @example
* jian(10); // 输出10 - 0
*/
function jian(num) {
console.log(num);
if (num === 0) return;
num--;
jian(num);
}
jian(num);快捷字符串转数字
js
let string = "2";
console.log(+string); // 2ForOf中使用两个参数
js
let data = [1, 2, 3];
for (const [item, index] of data.entries()) {
console.log(item, index);
}
// entries 将数组转换为可迭代对象可选链式操作符
js
const obj = {};
console.log(obj.name ?? 2); // 输出2
let obj2 = {
name: "兜兜",
};
console.log(obj2.name ?? 2); // 输出 兜兜
console.log(obj2.name?.children); // 输出 undefined
console.log(obj2.name?.children ?? 2); // 输出2访问数组末尾的元素
at 支持负数索引
js
let arr = [1, 2, 3];
console.log(arr[-1]); // undefined
console.log(arr.at(-1)); // 输出 3快速从一个对象中剔除某些属性
通过解构可以快速剔除对象中某些属性
js
const obj = {
name: "兜兜",
age: 18,
sex: "男",
address: "河南",
};
// 剔除age和address
const { age, address, ...newObj } = obj;
console.log(newObj); // 输出 {age: 18, address: '河南'}快速合并数组嵌套列表
通过flat方法可以快速合并数组嵌套列表
js
const arr = [1, [2, [3, [4, [5]]]]];
console.log(arr.flat(Infinity)); // 输出 [1, 2, 3, 4, 5]封装可链式调用函数/类
js
class Chainable {
constructor(value) {
this.value = value;
}
a() {
this.value += "A";
return this;
}
b() {
this.value += "B";
return this;
}
}
console.log(new Chainable(1).a().b()); // 1AB封装创建单例类函数
该函数用于创建单例类，确保同一个类只有一个实例。
js
function singleton(className) {
let ins = null;
return new Proxy(className, {
construct(target, args) {
if (!ins) {
ins = new target(...args);
}
return ins;
},
});
}控制台
在控制台(DevTools)中，可以通过不同的方法来获取我们想要的内容。
获取当前高亮元素属性
可以通过 console.dir($0) 来获取当前选中的元素属性。
其中 $0 是当前选中的元素，可以通过 $1 $2 $3 $4 来获取之前选中的元素。
打印对象/数组结构
console.table(obj) 可以打印对象/数组结构。 这样打印出来的内容更加清晰，适合打印对象/数组结构。
在控制台(DevTools)中，可以通过 console.table(obj) 来打印对象/数组结构。
打印当前函数堆栈
console.trace() 可以打印当前函数堆栈。
可看到当前函数调用链，非常适合查事件触发源头。
js
function a() {
b();
}
function b() {
c();
}
function c() {
d();
}
function d() {
e();
}
function e() {
console.trace(); // 输出当前函数堆栈
}
a(); 评论 隐私政策