JavaScript 单行代码

---

1、不使用临时变量来交换变量的值

let a = 1, b = 2;

// 交换值
[a, b] = [b, a];

// 结果: a = 2, b = 1

2、对象解构，让数据访问更便捷

const { name, age } = { name: '张三', age: 23 };

// 结果: name = '张三', age = 23

3、浅克隆对象

const originalObj = { name: '张三', age: 24 };

const clonedObj = { ...originalObj };

// 结果: clonedObj = { name: '张三', age: 24 }
// 此时改变 clonedObj 的属性，将不会影响到原始对象 originalObj

4、合并对象

const obj1 = { name: '张三' };
const obj2 = { age: 22 };

const mergedObj = { ...obj1, ...obj2 };

// 结果: mergedObj = { name: '张三', age: 22 }
// 如果有重叠的属性，则最后一个对象的属性将覆盖前一个对象的属性。

5、清理数组

const arr = [ 0, 1, false, 2, '', 3 ];

const cleanedArray = arr.filter(Boolean);

// 结果: cleanedArray = [1, 2, 3]
// 通过Array.prototype.filter()函数并使用Boolean函数作为回调。它将会从数组中删除所有假值（ 0，false，null，undefined，''，NaN）。

6、将 NodeList 转换为数组

const nodesArray = [ ...document.querySelectorAll('div') ];
// 通过扩展运算符将NodeList( document.querySelectorAll函数的返回值) 转换为 JavaScript 数组，从而能够使用数组的map方法filter去操作查找到的元素。

7、删除数组重复项

const arr = [1, 2, 2, 3, 4, 4, 5];

const unique = [...new Set(arr)];

// 结果: unique = [1, 2, 3, 4, 5]
// 这里利用了Set对象存储的值会保持唯一，以及扩展运算符能将Set转换回数组的特性。这是一种优雅的删除数组中重复项的方式。

8、取两个数组的交集

const arr1 = [1, 2, 3, 4];
const arr2 = [2, 4, 6, 8];

// 取两个数组中公共的元素
const intersection = arr1.filter(value => arr2.includes(value));

// 结果: intersection = [2, 4]

9、求数组元素的总和

const arr = [1, 2, 3, 4];

// 求总和
const sum = arr.reduce((total, value) => total + value, 0);

// 结果: sum = 10
// reduce方法接收一个回调函数和一个初始值（即前一个回调函数累加值的初始值），这个回调函数有两个参数：累加值total和当前值value。它将会遍历数组所有元素，将每个元素添加到总和中（总和初始为0）。

10、根据指定条件判断，是否给对象的属性赋值

const condition = true;
const value = '你好，世界';

// 如果条件为真，则将 value 变量的值赋给 newObject.key 属性
const newObject = {...(condition && {key: value})};

// 结果: newObject = { key: '你好，世界' }

11、使用变量作为对象的键

const dynamicKey = 'name';
const value = '张三';

// 使用一个动态的变量作为 key
const obj = {[dynamicKey]: value};

// 结果: obj = { name: '张三' }
// 这种语法称为计算属性名，它允许使用变量作为对象的键。方括号内的dynamicKey表达式会计算其值，以将其用作属性名称。

12、离开页面弹出确认对话框

window.onbeforeunload = () => '你确定要离开吗？';
// 这行代码与window的onbeforeunload事件挂钩，当用户离开页面时会弹出一个确认对话框，一般用于防止用户因未保存更改就关闭页面而导致数据丢失。

13、对象数组，根据对象的某个key求对应值的总和

const arrayOfObjects = [{x: 1}, {x: 2}, {x: 3}];

// 指定要求和的 key值
const sumBy = (arr, key) => arr.reduce((acc, obj) => acc + obj[key], 0);

// 传入 'x'，求元素对象 key 为 'x' 的值的总和
sumBy(arrayOfObjects, 'x'));

// 结果: 6

14、将 url 问号后面的查询字符串转为对象

const query = 'name=John&age=30';

// 将字符串解析为对象
const parseQuery = query => Object.fromEntries(new URLSearchParams(query));

// 结果: parseQuery = { name: 'John', age: '30' }
// URLSearchParams会进行字符串解析，它将返回一个可迭代对象，然后在通过Object.fromEntries将它转换为对象

15、求某对象所有属性值的最大值

// 数学、语文、英语成绩
const scores = { math: 95, chinese: 99, english: 88 };

const maxObjectValue = obj => Math.max(...Object.values(obj));

// 最高分
maxObjectValue(scores));

// 结果: 99
// Object.values(obj)将对象所有的属性值提取为数组，然后使用展开运算符将数组的所有元素作为Math.max函数的参数进行最大值查找

16、判断对象的值中是否包含有某个值

const person = { name: '张三', age: 30 };

const hasValue = (obj, value) => Object.values(obj).includes(value);

hasValue(person, 30);

// 结果: true

17、安全访问深度嵌套的对象属性

const user = { profile: { name: '张三' } };

const userName = user.profile?.name ?? '匿名';

// 结果: userName = '张三'

// 此代码首先演示了如何使用可选链运算符 (?.) 安全地访问user.profile的name值。如果user.profile是undefined或null，它会短路并返回undefined，从而避免潜在的类型错误TypeError。

//然后，使用空值合并运算符 (??) 检查左侧是否为null或undefined，如果是，则使用默认值'匿名'。这可确保后备值不会是其他假值（如''或0）。这对于访问数据结构中可能不存在某些中间属性的深层嵌套属性非常有用。

//在 JavaScript 中，空值合并运算符 (??) 和逻辑或 (||) 都可以用于提供默认值，但它们处理假值的方式有所不同。

//在上面的例子中，如果把??改为||，行为会稍微有些不同。||的左侧如果为假值，它将会返回右侧的值。JavaScript 中的假值包括null、undefined、0、NaN、''（空字符串）和false。这意味着||左边的值不仅仅是null或undefined，如果还是其他假值，那么都将返回右侧的值。

18、条件执行语句

const isEligible = true;

isEligible && performAction();

// 如果 isEligible 为真，则调用 performAction()

// 利用逻辑 AND ( &&) 运算符，函数performAction()仅会在isEligible结果为true时执行。这是一种无需if语句即可有条件地执行函数的简介语法。这对于根据某些条件执行函数非常有用，尤其是在事件处理或回调中
// 如果想要条件赋值，则可以这样写
const isEligible = true;
let value = '';

// 需要将赋值语句用用括号括起来
isEligible && (value = '条件达成');

// 如果 isEligible 为真，则执行 (value = '条件达成') 语句

19、切换元素的 class

const element = document.querySelector('.my-element');

const toggleClass = (el, className) => el.classList.toggle(className);

toggleClass(element, 'active');
// toggleClass函数使用classList.toggle()方法从一个元素的 class 列表中添加或移除某个 class。如果该 class 存在，则删除，否则添加。这是一种根据用户交互或应用程序状态动态更新 class 的方法。非常适合实现响应式设计元素，例如菜单根据用户操作显示或隐藏。

20、检查对象是否为空

const isEmptyObject = obj => Object.keys(obj).length === 0;
isEmptyObject({}) // true
isEmptyObject({ name: 'John' }) // false

21、滚动到页面顶部

const goToTop = () => window.scrollTo(0, 0)
goToTop()

22、

....后续更新