高级前端开发需要知道的 25 个 JavaScript 单行代码

let a = 1, b = 2;
// 交换值[a, b] = [b, a];
// 结果: a = 2, b = 1

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

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

const obj1 = { name: '张三' };const obj2 = { age: 22 };
const mergedObj = { ...obj1, ...obj2 };
// 结果: mergedObj = { name: '张三', age: 22 }

const arr = [ 0, 1, false, 2, '', 3 ];
const cleanedArray = arr.filter(Boolean);
// 结果: cleanedArray = [1, 2, 3]

const nodesArray = [ ...document.querySelectorAll('div') ];

const arr = [ 1, 2, 3, -5, 4 ];
// 数组中是否有负数const hasNegativeNumbers = arr.some(num => num < 0);
// 结果: hasNegativeNumbers = true

const arr = [ 1, 2, 3, -5, 4 ];
// 数组元素是否全部为正const allPositive = arr.every(num => num > 0);
// 结果: allPositive = false

navigator.clipboard.writeText('Text to copy');

const arr = [1, 2, 2, 3, 4, 4, 5];
const unique = [...new Set(arr)];
// 结果: unique = [1, 2, 3, 4, 5]

const arr1 = [1, 2, 3, 4];const arr2 = [2, 4, 6, 8];
// 取两个数组中公共的元素const intersection = arr1.filter(value => arr2.includes(value));
// 结果: intersection = [2, 4]

const arr = [1, 2, 3, 4];
// 求总和const sum = arr.reduce((total, value) => total + value, 0);
// 结果: sum = 10

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

const dynamicKey = 'name';const value = '张三';
// 使用一个动态的变量作为 keyconst obj = {[dynamicKey]: value};
// 结果: obj = { name: '张三' }

const isOnline = navigator.onLine ? '在线' : '离线';
// 结果: isOnline = '在线' 或 '离线'

window.onbeforeunload = () => '你确定要离开吗？';

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

const query = 'name=John&age=30';
// 将字符串解析为对象const parseQuery = query => Object.fromEntries(new URLSearchParams(query));
// 结果: parseQuery = { name: 'John', age: '30' }

const seconds = 3661; // 一小时是 3600 秒，多出 61 秒
const toTimeString = seconds => new Date(seconds * 1000).toISOString().substr(11, 8);
toTimeString(seconds));
// 结果: '01:01:01'

// 数学、语文、英语成绩const scores = { math: 95, chinese: 99, english: 88 };
const maxObjectValue = obj => Math.max(...Object.values(obj));
// 最高分maxObjectValue(scores));
// 结果: 99

const person = { name: '张三', age: 30 };
const hasValue = (obj, value) => Object.values(obj).includes(value);
hasValue(person, 30);
// 结果: true

const user = { profile: { name: '张三' } };
const userName = user.profile?.name ?? '匿名';
// 结果: userName = '张三'

const isEligible = true;
isEligible && performAction();
// 如果 isEligible 为真，则调用 performAction()

const isEligible = true;let value = '';
// 需要将赋值语句用用括号括起来isEligible && (value = '条件达成');
// 如果 isEligible 为真，则执行 (value = '条件达成') 语句

const range = Array.from({ length: 5 }, (_, i) => i + 1);
// 结果: range = [1, 2, 3, 4, 5]

const fileName = 'example.png';
const getFileExtension = str => str.slice(((str.lastIndexOf(".") - 1) >>> 0) + 2);
// 结果: getFileExtension = 'png'

const element = document.querySelector('.my-element');
const toggleClass = (el, className) => el.classList.toggle(className);
toggleClass(element, 'active');