40个JS常用使用技巧案例

大家好，我是 V 哥。在日常开发中，我们经常会使用 JS 解决页面的交互，在 JS 使用过程 V 哥总结了40个小技巧，分享给大家，废话不多说，马上开干。先赞再看后评论，腰缠万贯财进门。

JS常用技巧案例

以下是 40 个常用的 JavaScript 使用技巧，包含案例代码和解释：
1. 数组去重

1. const arr = [1, 2, 2, 3, 4, 4, 5];
2. const uniqueArr = [...new Set(arr)];
3. console.log(uniqueArr); // [1, 2, 3, 4, 5]

复制代码

解释：Set 对象是一种无序且唯一的数据结构，使用扩展运算符 ... 将 Set 转换回数组，从而实现去重。
2. 合并多个数组

1. const arr1 = [1, 2];
2. const arr2 = [3, 4];
3. const arr3 = [5, 6];
4. const mergedArr = [...arr1, ...arr2, ...arr3];
5. console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

复制代码

解释：使用扩展运算符可以轻松地将多个数组合并成一个新数组。
3. 数组解构赋值

1. const arr = [1, 2, 3];
2. const [a, b, c] = arr;
3. console.log(a); // 1
4. console.log(b); // 2
5. console.log(c); // 3

复制代码

解释：通过解构赋值，可以方便地从数组中提取值并赋给变量。
4. 对象解构赋值

1. const obj = { name: 'John', age: 30 };
2. const { name, age } = obj;
3. console.log(name); // 'John'
4. console.log(age); // 30

复制代码

解释：可以从对象中提取属性并赋给变量。
5. 交换变量值

1. let a = 1;
2. let b = 2;
3. [a, b] = [b, a];
4. console.log(a); // 2
5. console.log(b); // 1

复制代码

解释：使用数组解构赋值可以简洁地交换两个变量的值。
6. 可选链操作符

1. const obj = {
2.   person: {
3.     name: 'John'
4.   }
5. };
6. const name = obj?.person?.name;
7. console.log(name); // 'John'

复制代码

解释：可选链操作符 ?. 可以避免在访问嵌套对象属性时出现 TypeError。
7. 空值合并操作符

1. const value = null;
2. const result = value ?? 'default';
3. console.log(result); // 'default'

复制代码

解释：空值合并操作符 ?? 用于在变量为 null 或 undefined 时提供默认值。
8. 箭头函数

1. const numbers = [1, 2, 3];
2. const squared = numbers.map(num => num * num);
3. console.log(squared); // [1, 4, 9]

复制代码

解释：箭头函数是一种简洁的函数定义方式，适用于简单的函数逻辑。
9. 函数默认参数

1. function greet(name = 'Guest') {
2.   console.log(`Hello, ${name}!`);
3. }
4. greet(); // 'Hello, Guest!'
5. greet('John'); // 'Hello, John!'

复制代码

解释：可以为函数参数提供默认值，当调用函数时未传递该参数时，将使用默认值。
10. 展开对象

1. const obj1 = { a: 1, b: 2 };
2. const obj2 = { ...obj1, c: 3 };
3. console.log(obj2); // { a: 1, b: 2, c: 3 }

复制代码

解释：使用扩展运算符可以将一个对象的属性展开到另一个对象中。
11. 数组过滤

1. const numbers = [1, 2, 3, 4, 5];
2. const evenNumbers = numbers.filter(num => num % 2 === 0);
3. console.log(evenNumbers); // [2, 4]

复制代码

解释：filter 方法用于创建一个新数组，其中包含满足指定条件的元素。
12. 数组映射

1. const numbers = [1, 2, 3];
2. const doubled = numbers.map(num => num * 2);
3. console.log(doubled); // [2, 4, 6]

复制代码

解释：map 方法用于创建一个新数组，其中每个元素都是原数组中对应元素经过某种处理后的结果。
13. 数组归约

1. const numbers = [1, 2, 3, 4];
2. const sum = numbers.reduce((acc, num) => acc + num, 0);
3. console.log(sum); // 10

复制代码

解释：reduce 方法用于将数组元素归约为一个值。
14. 数组查找

1. const numbers = [1, 2, 3, 4, 5];
2. const found = numbers.find(num => num > 3);
3. console.log(found); // 4

复制代码

解释：find 方法用于查找数组中第一个满足指定条件的元素。
15. 数组查找索引

1. const numbers = [1, 2, 3, 4, 5];
2. const index = numbers.findIndex(num => num > 3);
3. console.log(index); // 3

复制代码

解释：findIndex 方法用于查找数组中第一个满足指定条件的元素的索引。
16. 字符串转数字

1. const str = '123';
2. const num = +str;
3. console.log(num); // 123

复制代码

解释：使用一元加号 + 可以将字符串转换为数字。
17. 数字转字符串

1. const num = 123;
2. const str = num.toString();
3. console.log(str); // '123'

复制代码

解释：toString 方法可以将数字转换为字符串。
18. 检查变量是否为数组

1. const arr = [1, 2, 3];
2. const isArray = Array.isArray(arr);
3. console.log(isArray); // true

复制代码

解释：Array.isArray 方法用于检查一个变量是否为数组。
19. 检查变量是否为对象

1. const obj = { a: 1 };
2. const isObject = typeof obj === 'object' && obj!== null;
3. console.log(isObject); // true

复制代码

解释：使用 typeof 检查变量类型，并排除 null 的情况。
20. 动态创建对象属性

1. const key = 'name';
2. const value = 'John';
3. const obj = { [key]: value };
4. console.log(obj); // { name: 'John' }

复制代码

解释：使用方括号语法可以动态创建对象属性。
21. 延迟执行函数

1. function greet() {
2.   console.log('Hello!');
3. }
4. setTimeout(greet, 2000); // 2 秒后输出 'Hello!'

复制代码

解释：setTimeout 方法用于在指定的时间后执行一个函数。
22. 定时执行函数

1. function greet() {
2.   console.log('Hello!');
3. }
4. setInterval(greet, 2000); // 每 2 秒输出一次 'Hello!'

复制代码

解释：setInterval 方法用于每隔指定的时间执行一次函数。
23. 取消定时任务

1. function greet() {
2.   console.log('Hello!');
3. }
4. const intervalId = setInterval(greet, 2000);
5. clearInterval(intervalId); // 取消定时任务

复制代码

解释：使用 clearInterval 方法可以取消由 setInterval 创建的定时任务。
24. 浅拷贝对象

1. const obj1 = { a: 1, b: 2 };
2. const obj2 = { ...obj1 };
3. console.log(obj2); // { a: 1, b: 2 }

复制代码

解释：使用扩展运算符可以实现对象的浅拷贝。
25. 深拷贝对象

1. const obj1 = { a: 1, b: { c: 2 } };
2. const obj2 = JSON.parse(JSON.stringify(obj1));
3. console.log(obj2); // { a: 1, b: { c: 2 } }

复制代码

解释：使用 JSON.parse 和 JSON.stringify 可以实现对象的深拷贝，但这种方法有局限性，不能处理函数、正则表达式等特殊对象。
26. 检查对象是否有某个属性

1. const obj = { name: 'John' };
2. const hasName = 'name' in obj;
3. console.log(hasName); // true

复制代码

解释：使用 in 运算符可以检查对象是否有某个属性。
27. 获取对象的所有属性名

1. const obj = { a: 1, b: 2 };
2. const keys = Object.keys(obj);
3. console.log(keys); // ['a', 'b']

复制代码

解释：Object.keys 方法用于获取对象的所有属性名。
28. 获取对象的所有属性值

1. const obj = { a: 1, b: 2 };
2. const values = Object.values(obj);
3. console.log(values); // [1, 2]

复制代码

解释：Object.values 方法用于获取对象的所有属性值。
29. 获取对象的所有属性键值对

1. const obj = { a: 1, b: 2 };
2. const entries = Object.entries(obj);
3. console.log(entries); // [['a', 1], ['b', 2]]

复制代码

解释：Object.entries 方法用于获取对象的所有属性键值对。
30. 类的继承

1. class Animal {
2.   constructor(name) {
3.     this.name = name;
4.   }
5.   speak() {
6.     console.log(`${this.name} makes a noise.`);
7.   }
8. }
10. class Dog extends Animal {
11.   speak() {
12.     console.log(`${this.name} barks.`);
13.   }
14. }
16. const dog = new Dog('Buddy');
17. dog.speak(); // 'Buddy barks.'

复制代码

解释：使用 extends 关键字可以实现类的继承。
31. 模块化导入导出

1. // module.js
2. export const message = 'Hello!';
4. // main.js
5. import { message } from './module.js';
6. console.log(message); // 'Hello!'

复制代码

解释：使用 export 关键字导出模块中的变量或函数，使用 import 关键字导入模块。
32. 三元运算符

1. const age = 20;
2. const canVote = age >= 18? 'Yes' : 'No';
3. console.log(canVote); // 'Yes'

复制代码

解释：三元运算符是一种简洁的条件判断语句。
33. 短路求值

1. const name = null;
2. const displayName = name || 'Guest';
3. console.log(displayName); // 'Guest'

复制代码

解释：使用逻辑或 || 运算符可以实现短路求值，当第一个值为假时，返回第二个值。
34. 函数柯里化

1. function add(a, b) {
2.   if (b === undefined) {
3.     return function (b) {
4.       return a + b;
5.     };
6.   }
7.   return a + b;
8. }
10. const add5 = add(5);
11. console.log(add5(3)); // 8

复制代码

解释：函数柯里化是指将一个多参数函数转换为一系列单参数函数。
35. 防抖函数

1. function debounce(func, delay) {
2.   let timer;
3.   return function () {
4.     const context = this;
5.     const args = arguments;
6.     clearTimeout(timer);
7.     timer = setTimeout(() => {
8.       func.apply(context, args);
9.     }, delay);
10.   };
11. }
13. function search() {
14.   console.log('Searching...');
15. }
17. const debouncedSearch = debounce(search, 500);
18. window.addEventListener('input', debouncedSearch);

复制代码

解释：防抖函数用于限制函数的调用频率，在一定时间内只执行最后一次调用。
36. 节流函数

1. function throttle(func, limit) {
2.   let inThrottle;
3.   return function () {
4.     const context = this;
5.     const args = arguments;
6.     if (!inThrottle) {
7.       func.apply(context, args);
8.       inThrottle = true;
9.       setTimeout(() => (inThrottle = false), limit);
10.     }
11.   };
12. }
14. function scroll() {
15.   console.log('Scrolling...');
16. }
18. const throttledScroll = throttle(scroll, 500);
19. window.addEventListener('scroll', throttledScroll);

复制代码

解释：节流函数用于限制函数的调用频率，在一定时间内只执行一次调用。
37. 异步函数

1. async function fetchData() {
2.   try {
3.     const response = await fetch('https://api.example.com/data');
4.     const data = await response.json();
5.     console.log(data);
6.   } catch (error) {
7.     console.error(error);
8.   }
9. }
11. fetchData();

复制代码

解释：异步函数使用 async/await 语法，可以更方便地处理异步操作。
38. 生成器函数

1. function* generateNumbers() {
2.   let i = 0;
3.   while (true) {
4.     yield i++;
5.   }
6. }
8. const generator = generateNumbers();
9. console.log(generator.next().value); // 0
10. console.log(generator.next().value); // 1

复制代码

解释：生成器函数使用 function* 定义，使用 yield 关键字暂停和恢复函数执行。
39. 事件委托

1. const ul = document.querySelector('ul');
2. ul.addEventListener('click', function (event) {
3.   if (event.target.tagName === 'LI') {
4.     console.log('Clicked on a list item:', event.target.textContent);
5.   }
6. });

复制代码

解释：事件委托是指将事件监听器添加到父元素上，利用事件冒泡机制处理子元素的事件。
40. 随机数生成

1. const randomNum = Math.floor(Math.random() * 10);
2. console.log(randomNum); // 0 - 9 之间的随机整数

复制代码

解释：使用 Math.random() 生成 0 到 1 之间的随机小数，使用 Math.floor() 向下取整。
最后

以上是 V 哥总结的40个常用的 JS 小案例，日常开发中也许能用得着，收藏起来，以备不时之需，关注威哥爱编程，全栈开发就你行。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！