蓝桉云顶

在JavaScript的世界里，掌握一些经典的小技巧可以帮助开发者更高效地编写代码、提升性能和增强用户体验，以下是55个经典且实用的JavaScript小技巧，涵盖了各种场景，从基本语法到高级特性，希望能对您的编程之旅有所帮助。

1.立即执行函数表达式 (IIFE)

   !function() {
       // Your code here
   }();

用于创建一个独立的作用域，避免污染全局命名空间。

**严格模式

   'use strict';

帮助检测潜在的错误并防止某些不安全的操作。

**短路求值

逻辑与 (&&):a && b 如果a 为假值，则返回a；否则返回b。

逻辑或 (||):a || b 如果a 为真值，则返回a；否则返回b。

**三元运算符

   const age = 18;
   const canVote = age >= 18 ? 'Yes' : 'No';

简化条件判断语句。

**数组去重

   const uniqueArray = [...new Set(array)];

使用Set 对象自动去重。

**数组扁平化

   const flatArray = array.flat();

将嵌套数组展平为一维数组。

**数组乱序

   const shuffledArray = array.sort(() => Math.random() 0.5);

随机打乱数组元素顺序。

**检查是否为空对象

   const isEmptyObject = Object.keys(obj).length === 0;

**深拷贝对象

   const deepCopy = JSON.parse(JSON.stringify(obj));

注意：此方法不适用于包含函数、undefined、循环引用等复杂对象。

**合并对象

   const mergedObject = Object.assign({}, obj1, obj2);

或使用扩展运算符...。

**对象属性遍历

   for (let key in obj) {
       if (obj.hasOwnProperty(key)) {
           // Your code here
       }
   }

**对象解构赋值

   const { a, b } = { a: 1, b: 2 };

简洁地从对象中提取属性值。

**默认参数值

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

**模板字符串

   const message =Hello, ${name}!;

支持多行和内嵌变量。

**箭头函数

   const add = (a, b) => a + b;

更简洁的函数定义方式，不绑定自己的this。

**Promise

   const promise = new Promise((resolve, reject) => {
       // Your async code here
   });

处理异步操作。

**async/await

   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 fetching data:', error);
       }
   }

使异步代码看起来更像同步代码。

**防抖函数

   function debounce(func, wait) {
       let timeout;
       return function(...args) {
           clearTimeout(timeout);
           timeout = setTimeout(() => func.apply(this, args), wait);
       };
   }

限制函数调用频率。

**节流函数

   function throttle(func, limit) {
       let lastFunc;
       let lastRan;
       return function(...args) {
           const context = this;
           if (!lastRan) lastRan = Date.now();
           if (Date.now() lastRan >= limit) {
               func.apply(context, args);
               lastRan = Date.now();
           } else {
               clearTimeout(lastFunc);
               lastFunc = setTimeout(function() {
                   func.apply(context, args);
               }, limit (Date.now() lastRan));
           }
       };
   }

限制函数执行次数。

**事件委托

   document.body.addEventListener('click', function(e) {
       if (e.target && e.target.matches('.button')) {
           // Handle click
       }
   });

提高性能，减少事件监听器数量。

**动态添加/删除CSS类

   element.classList.add('active');
   element.classList.remove('active');
   element.classList.toggle('active');

**获取/设置元素的样式

   const style = window.getComputedStyle(element);
   element.style.property = 'value';

**滚动到视图顶部

   window.scrollTo(0, 0);

**滚动到指定元素

   element.scrollIntoView();

**获取浏览器视口大小

   const width = window.innerWidth;
   const height = window.innerHeight;

**获取文档高度

   const docHeight = document.documentElement.scrollHeight;

**创建唯一ID

   const uniqueId = () => '_' + Math.random().toString(36).substr(2, 9);

**获取当前时间戳

   const timestamp = Date.now();

**深比较两个对象

   const deepEqual = (obj1, obj2) => JSON.stringify(obj1) === JSON.stringify(obj2);

**数组最大/最小值

   const max = Math.max(...array);
   const min = Math.min(...array);

**数组反转

   const reversedArray = array.reverse();

**数组填充

   const filledArray = array.fill(value, start, end);

**数组映射

   const mappedArray = array.map(item => item * 2);

**数组过滤

   const filteredArray = array.filter(item => item > 10);

**数组归约

   const sum = array.reduce((acc, val) => acc + val, 0);

**数组查找

   const foundIndex = array.findIndex(item => item === target);

**数组排序

   const sortedArray = array.sort((a, b) => a b);

**数组切片

   const slicedArray = array.slice(start, end);

**数组拼接

   const combinedArray = array1.concat(array2);

**数组去重（保留顺序）

   const uniqueArray = [...new Set(array)];

**数组扁平化（保留顺序）

   const flatArray = array.flat();

**数组乱序（保留顺序）

   const shuffledArray = array.sort(() => Math.random() 0.5);

**检查数组是否包含某元素

   const contains = array.includes(element);

**数组迭代

   array.forEach(item => {
       // Your code here
   });

**数组索引

   const index = array.indexOf(element);

**数组最后一个元素

   const lastElement = array[array.length 1];

**数组第一个元素

   const firstElement = array[0];

**数组长度

   const length = array.length;

**数组清空

   array.length = 0; // or array.splice(0, array.length);

**数组插入元素

   array.splice(index, 0, newElement); // 在指定位置插入新元素

**数组删除元素

   array.splice(index, count); // 从指定位置删除count个元素