40个JS常用使用技巧案例

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

JS常用技巧案例

以下是 40 个常用的 JavaScript 使用技巧，包含案例代码和解释：

1. 数组去重

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

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

2. 合并多个数组

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

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

3. 数组解构赋值

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

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

4. 对象解构赋值

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

解释：可以从对象中提取属性并赋给变量。

5. 交换变量值

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

解释：使用数组解构赋值可以简洁地交换两个变量的值。

6. 可选链操作符

const obj = {
  person: {
    name: 'John'
  }
};
const name = obj?.person?.name;
console.log(name); // 'John'

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

7. 空值合并操作符

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

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

8. 箭头函数

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

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

9. 函数默认参数

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

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

10. 展开对象

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

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

11. 数组过滤

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

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

12. 数组映射

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

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

13. 数组归约

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

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

14. 数组查找

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

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

15. 数组查找索引

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

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

16. 字符串转数字

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

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

17. 数字转字符串

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

解释：toString 方法可以将数字转换为字符串。

18. 检查变量是否为数组

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

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

19. 检查变量是否为对象

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

解释：使用 typeof 检查变量类型，并排除 null 的情况。

20. 动态创建对象属性

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

解释：使用方括号语法可以动态创建对象属性。

21. 延迟执行函数

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

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

22. 定时执行函数

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

解释：setInterval 方法用于每隔指定的时间执行一次函数。

23. 取消定时任务

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

解释：使用 clearInterval 方法可以取消由 setInterval 创建的定时任务。

24. 浅拷贝对象

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

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

25. 深拷贝对象

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

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

26. 检查对象是否有某个属性

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

解释：使用 in 运算符可以检查对象是否有某个属性。

27. 获取对象的所有属性名

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

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

28. 获取对象的所有属性值

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

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

29. 获取对象的所有属性键值对

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

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

30. 类的继承

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Buddy');
dog.speak(); // 'Buddy barks.'

解释：使用 extends 关键字可以实现类的继承。

31. 模块化导入导出

// module.js
export const message = 'Hello!';

// main.js
import { message } from './module.js';
console.log(message); // 'Hello!'

解释：使用 export 关键字导出模块中的变量或函数，使用 import 关键字导入模块。

32. 三元运算符

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

解释：三元运算符是一种简洁的条件判断语句。

33. 短路求值

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

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

34. 函数柯里化

function add(a, b) {
  if (b === undefined) {
    return function (b) {
      return a + b;
    };
  }
  return a + b;
}

const add5 = add(5);
console.log(add5(3)); // 8

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

35. 防抖函数

function debounce(func, delay) {
  let timer;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

function search() {
  console.log('Searching...');
}

const debouncedSearch = debounce(search, 500);
window.addEventListener('input', debouncedSearch);

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

36. 节流函数

function throttle(func, limit) {
  let inThrottle;
  return function () {
    const context = this;
    const args = arguments;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

function scroll() {
  console.log('Scrolling...');
}

const throttledScroll = throttle(scroll, 500);
window.addEventListener('scroll', throttledScroll);

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

37. 异步函数

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

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

38. 生成器函数

function* generateNumbers() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const generator = generateNumbers();
console.log(generator.next().value); // 0
console.log(generator.next().value); // 1

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

39. 事件委托

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

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

40. 随机数生成

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

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

最后

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