想到啥写啥的一些JS

一、数组操作黑科技

1. 快速生成连续数字数组

// 生成1-100的数组
const arr = Array.from({length:100}, (_,i) => i+1); 

// 生成A-Z字母数组
const letters = Array.from({length:26}, (_,i) => 
  String.fromCharCode(65 + i)
);

2. 数组随机项获取

const getRandomItem = arr => 
  arr[Math.floor(Math.random() * arr.length)];

// 使用示例
const colors = ['red', 'green', 'blue'];
console.log(getRandomItem(colors)); // 随机输出颜色

二、对象处理技巧

1. 动态属性名

const dynamicKey = 'mobile';
const user = {
  id: 1,
  [dynamicKey]: '13800138000' // 属性名动态生成
};

2. 对象属性过滤

const filterObj = (obj, keys) => 
  Object.fromEntries(
    Object.entries(obj)
      .filter(([key]) => keys.includes(key))
  );

// 使用示例
const user = {name:'Alice', age:25, email:'a@b.com'};
console.log(filterObj(user, ['name', 'age'])); 
// {name: 'Alice', age: 25}

三、数字处理妙招

1. 千分位格式化

const formatNumber = num => 
  num.toLocaleString('en-US');

console.log(formatNumber(1234567.89)); // "1,234,567.89"

2. 生成随机颜色

const randomColor = () => 
  `#${Math.floor(Math.random()*0xFFFFFF).toString(16).padStart(6,'0')}`;

console.log(randomColor()); // #3a7b9f

四、字符串处理

1. HTML安全转义

const escapeHTML = str => 
  str.replace(/[&<>"']/g, 
    tag => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    }[tag]));

console.log(escapeHTML('<div>"Test"</div>')); 
// &lt;div&gt;&quot;Test&quot;&lt;/div&gt;

2. 驼峰转连字符

const camelToKebab = str => 
  str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();

console.log(camelToKebab('backgroundColor')); // background-color

五、日期处理

1. 相对时间显示

const timeAgo = date => {
  const sec = Math.floor((new Date() - date) / 1000);
  const intervals = [
    [31104000, '年'],
    [2592000, '月'],
    [86400, '天'],
    [3600, '小时'],
    [60, '分钟'],
    [1, '秒']
  ];
  
  for (const [seconds, unit] of intervals) {
    const interval = Math.floor(sec / seconds);
    if (interval >= 1) return `${interval}${unit}前`;
  }
  return '刚刚';
};

console.log(timeAgo(new Date(Date.now() - 3600000))); // "1小时前"

六、浏览器API妙用

1. 滚动到页面顶部

const scrollToTop = () => 
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });

七、函数优化技巧

1. 单次执行函数

function once(fn) {
  let called = false;
  return (...args) => {
    if (!called) {
      called = true;
      return fn(...args);
    }
  };
}

// 使用示例
const init = once(() => console.log('初始化成功'));
init(); // 输出
init(); // 无反应

2. 睡眠函数

const sleep = ms => 
  new Promise(resolve => setTimeout(resolve, ms));

// 使用示例
async function demo() {
  console.log('开始');
  await sleep(2000);
  console.log('2秒后');
}

八、DOM操作优化

1. 批量DOM更新

// 使用文档片段减少重绘
const fragment = document.createDocumentFragment();
for(let i=0; i<100; i++) {
  const div = document.createElement('div');
  div.textContent = `Item ${i}`;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

2. 事件委托

document.getElementById('list').addEventListener('click', e => {
  if(e.target.matches('li.item')) {
    console.log('点击的项ID:', e.target.dataset.id);
  }
});

九、调试技巧

1. 性能计时器

console.time('calc');
// 需要计时的代码
console.timeEnd('calc'); // 输出执行时间

2. 对象快速查看

const user = {name:'Bob', age:30};
console.log('%O', user); // 以可展开的对象格式输出