#秋日生活打卡季#

我们不得不承认：JavaScript 有点“怪”，但掌握它却非常值得。这篇文章是你的 JavaScript 宝藏，我们将深入探索数组操作，并解锁一些编程技巧，让你成为真正的 JavaScript 达人。

掌控 JavaScript 数组：从基础到精彩

数组是无数程序的支柱。我们将从基础开始，深入探讨让代码更简洁高效的技术。

1. 声明和初始化多维数组

你已经掌握了一维数组，但如何处理强大的矩阵呢？这里有一种优雅的方式：

const matrix = Array(5).fill(0).map(() => Array(5).fill(0)); 

// 输出
(5) [Array(5), Array(5), Array(5), Array(5), Array(5)]
0: (5) [0, 0, 0, 0, 0]
1: (5) [0, 0, 0, 0, 0]
2: (5) [0, 0, 0, 0, 0]
3: (5) [0, 0, 0, 0, 0]
4: (5) [0, 0, 0, 0, 0]
长度: 5

2. 移除 Falsy 值

过滤掉那些烦人的 Falsy 值（0，undefined，null，false，""，''）非常简单：

const array = [3, 0, 6, 7, '', false];
array.filter(Boolean); 
// 输出: [3, 6, 7] - 干净利落！

3. 优雅地查找元素

告别笨重的 indexOf() 比较。试试强大的按位非运算符（~）或优雅的 includes() 方法：

// 旧方法 - 有点笨重
if(arr.indexOf(item) > -1) { }

// 现代方法 - 简洁高效
if(~arr.indexOf(item)) { }

// 或者更好
if(arr.includes(item)) { }

4. 随机打乱数组

想要随机化一个数组？用 Math.random() 吧：

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
list.sort(() => Math.random() - 0.5);

5. 集合的力量：并集、交集和差集

JavaScript 的 Set 可以简化集合操作：

let a = new Set([1, 2, 3]); 
let b = new Set([4, 3, 2]); 

let union = new Set([...a, ...b]); // Set {1, 2, 3, 4} 
let intersect = new Set([...a].filter(x => b.has(x))); // Set {2, 3} 
let difference = new Set([...a].filter(x => !b.has(x))); // Set {1}

超越数组：现代开发者的 JavaScript 技巧

接下来，我们来看看如何提升整体的 JavaScript 编码水平。

6. 对象掌控：检查是否为空和动态键

曾经为判断对象是否为空而苦恼吗？这个单行代码解决了问题：

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;

记住，你可以用变量作为对象的键，实现最大的灵活性：

const key = 'name';  
const person = { [key]: 'Alice' };

7. 掌握可选链和空值合并

告别繁琐的空值检查。可选链（?.）和空值合并运算符（??）让你的生活更简单：

// 可选链
user.employee?.name; 

// 空值合并
const foo = null ?? '默认值';

8. 数字技巧：转换与技巧

轻松在十进制、二进制和十六进制之间转换：

const num = 10;
num.toString(2);  // 二进制
num.toString(16); // 十六进制

需要生成一定范围内的随机整数？不用再找了：

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

9. 字符串魔法：大写、反转等

掌握字符串操作是必不可少的。这里有几个实用技巧：

// 首字母大写
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);

// 优雅反转
const reverse = str => str.split('').reverse().join('');

10. 浏览器技巧：剪贴板、Cookie 等

在浏览器中工作？看看如何处理常见任务：

// 复制到剪贴板
const copyToClipboard = (text) => navigator.clipboard.writeText(text);

// 清除所有 Cookie 
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/,'').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));

提升你的编码习惯

11. 控制台清晰度

告别 console.log('name', name)，试试 console.log({ name })。代码更简洁，更易读，对象处理也更方便。

// 之前
console.log('name', name);

// 之后
console.log({ name });

12. 提前返回，让代码更清晰

用策略性的 return 语句替换深层嵌套的 if...else 块，代码的可读性会大大提升。

// 之前
if (condition1) {
  // 处理 condition1 
} else if (condition2) {
  // 处理 condition2
} else if(condition3) {
  // 处理 condition3
}

// 之后
if (condition1) {
  // 处理 condition1 
  return;
}

if (condition2) {
  // 处理 condition2
  return;
}

if (condition3) {
  // 处理 condition3  
  return;
}

13. JS 隐式类型转换

利用 JavaScript 的灵活类型，使用快捷方式：

• +'32' 快速转换为数字。
• +new Date() 获取当前时间戳。
• !!value 进行简洁的布尔检查。

// 字符串转数字的代码对比
const price = parseInt('32'); // 传统方法
const price = Number('32'); // 传统方法
const price = +'32'; // 新方法

// 日期转时间戳代码对比
const timeStamp = new Date().getTime(); // 传统方法
const timeStamp = +new Date(); // 新方法

// 布尔值转数字新方法
console.log(+true); // 输出: 1
console.log(+false); // 输出: 0

// 布尔值转换代码对比
const isTrue = Boolean(''); // 传统方法
const isTrue = !!''; // 新方法

14. 防抖与节流

实现这些关键技术，处理快速事件触发（如滚动或输入字段）并防止性能瓶颈。

// 防抖函数
const debounce = (func, delay) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
};

// 节流函数
const throttle = (func, limit) => {
  let inThrottle;
  return (...args) => {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
};

15. 正则表达式的力量

准备好一组常见验证任务的正则表达式，如邮箱、手机号和密码验证。

// 检查 2 到 9 个字符
const validateName = (name) => {
  const reg = /^[\u4e00-\u9fa5]{2,9}$/;
  return reg.test(name);
};

// 检查手机号
const validatePhoneNum = (mobile) => {
  const reg = /^1[3-9]\d{9}$/;
  return reg.test(mobile);
};

// 检查由 6 到 18 个字符、大小写字母、数字和下划线组成的密码
const validatePassword = (password) => {
  const reg = /^[a-zA-Z0-9_]{6,18}$/;
  return reg.test(password);
};