01. IntersectionObserver实现滚动效果
当元素滚动到可视区之后，给元素添加一个动画
代码如下：
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
observer.unobserve(entry.target);
}
});
});
const elements = document.querySelectorAll('.animate');
elements.forEach(element => observer.observe(element));
02. 代理的使用
代理如何使用，相信大家都会，下面这段代码我也演示了
代码如下：
const handler = {
get(target, prop) {
if (prop === "name1") {
return "world";
}
return Reflect.get(...arguments);
}
};
const proxy = new Proxy({ name1: 'lice', name2: 'Alice' }, handler);
console.log(proxy.name1, proxy.name2); // 输出: wold Alice
03. ES6模块化
模块化导出，是JS代码必备技能
代码如下：
// math.js
export function add(a, b) {
return a + b;
}
// app.js
import { add } from './math.js';
console.log(add(2, 3)); // 输出: 5
04. 缓存提速
用过的数据，进行缓存，下次在循环使用，想到递归了吗？
代码如下：
function fibonacci(n, memo = {}) {
if (n in memo) return memo[n];
if (n <= 2) return 1;
memo[n] = fibonacci(n - 1, memo) + fibonacci(n - 2, memo);
return memo[n];
}
console.log(fibonacci(10)); // 输出: 55
05. 闭包创建私有变量
写过闭包的同学都知道，闭包的其中一个作用就是保护变量
代码如下：
function createCounter() {
let count = 0;
return function () {
count++;
console.log(count);
};
}
const counter = createCounter();
counter(); // 输出: 1
counter(); // 输出: 2
06. 使用async和await处理异步
最简洁处理异步变同步的方式就是async/await
代码如下：
async function fetchData() {
try {
const response = await fetch('url');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();
07. Console输出技巧
debugger的时候，更友好的信息输出，会提升我们效率
代码如下：
const users = [{ name: 'Alice' }, { name: 'Bob' }];
console.table(users);
console.groupCollapsed('Details');
console.log('Name: Alice');
console.log('Age: 30');
console.groupEnd();
08. JSON.parse转换数据
在转化JSON数据时，同时可以将数据处理成你想要的样子
代码如下：
const data = '{"age":"30"}';
const parsed = JSON.parse(data, (key, value) => {
if (key === 'age') return Number(value);
return value;
});
console.log(parsed.age); // 输出: 30
09. 善于使用正则匹配
正则表达式的强大之处，大家都应该知道，我们需要善于使用正则表达式帮我们解决问题
代码如下：
const text = 'Hello, world!';
const pattern = /Hello/g;
console.log(text.match(pattern)); // 输出: ['Hello']
10. 可选链处理未定义的值
可选链处理未定义的值，是处理ifelse多嵌套的方式之一，也是最简洁的方式之一
代码如下：
const user = { info: { name: 'Alice' } };
console.log(user.info?.age); // 输出: undefined
11. NaN更安全判断
变量类型判断越准确，代码安全性越高
代码如下：
const notANumber = 'Not a number';
console.log(Number.isNaN(notANumber)); // 输出: false
12. 字符串拼接
ES6给出字符串拼接优雅的处理方式${}
代码如下：
const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting); // 输出: Hello, Alice!
13. 动态属性名称
给对象设置动态属性名称，也是我们日常代码里经常碰到的问题
代码如下：
const key = 'name';
const person = { [key]: 'Alice' };
console.log(person.name); // 输出: Alice
14. 处理多个Promises
同时处理多个Promises的方式，是使用Promise.all
代码如下：
const promise1 = fetch('url1');
const promise2 = fetch('url2');
Promise.all([promise1, promise2])
.then(responses => console.log(responses))
.catch(error => console.error(error));
15. 简单且强大的箭头函数
箭头函数 ( () => {}) 不仅简洁，而且还保留this值
代码如下：
const greet = name => `Hello, ${name}!`;
console.log(greet('Alice')); // 输出: Hello, Alice!
16. 封装延迟执行功能
使用setTimeout封装一个延迟操作函数
代码如下：
function delayedLog(message, time) {
setTimeout(() => {
console.log(message);
}, time);
}
delayedLog('Hello', 1000); // 输出 (after 1 second): Hello
17. 短路判断
使用&&和||创建清晰简洁的条件语句
代码如下：
const name = user.name || 'Guest';
console.log(name); // 输出: Guest
18. 数据转换
map()方法是转换数据的最好方式
代码如下：
const numbers = [1, 2, 3];
const squared = numbers.map(num => num * num);
console.log(squared); // 输出: [1, 4, 9]
19. 扩容操作操作
不管是对象还是数组，都可以使用扩展符来进行数据添加
代码如下：
const originalArray = [1, 2, 3];
const clonedArray = [...originalArray];
console.log(clonedArray); // 输出: [1, 2, 3]
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // 输出: { a: 1, b: 3, c: 4 }
20. 解构提值
解构允许您轻松地从数组或对象中获取值
代码如下：
const person = { name: 'Alice', age: 30 };
const { name, age } = person;
console.log(name); // 输出：Alice
console.log(age); // 输出：30
