25个JavaScript One-Liner让你更专业

电玩女神 2024-02-05 21:29 19阅读 0赞

今天我们分享一些单行代码技巧，了解这些技巧，可以提升我们的工作效率，现在，我们一起来看一下今天的这些单行代码技巧吧。

**数组**

### **1. 检查变量是否是数组** ###

const isArray = Array.isArray(arr);const isArray = arr instanceof Array;

### **2. 数字数组的和** ###

const sum = (arr) => arr.reduce((a, b) => a + b);

### **3.从数组中删除Falsy值** ###

const removeFalsyValues = (arr) => arr.filter(x => x);// or const removeFalsyValues = (arr) => arr.filter(Boolean);

### **4. 数字数组的平均值** ###

const average = (arr) => arr.reduce((a, b) => a + b) / arr.length;

### **5. 合并并删除重复项** ###

const merge = (arr1, arr2) => [...new Set(arr1.concat(arr2))];// orconst merge = (arr1, arr2) => [...new Set([...arr1, ...arr2])];

### **6. 合并两个数组** ###

const merge = (arr1, arr2) => [].concat(arr1, arr2);// orconst merge = (arr1, arr2) => [...arr1, ...arr2];

### **7. 打乱数组** ###

const shuffle = (arr) => arr.slice().sort(() => Math.random() - 0.5);

### **8. 获取数组的最后一个元素** ###

const lastElement = (arr) => arr[arr.length-1];// orconst lastElement = (arr) => arr.slice(-1)[0];// orconst lastElement = (arr) => arr.slice().pop();

### **9. 查找数组中的唯一值** ###

const findUniqueValues = (arr) => arr.filter((i) => arr.indexOf(i) === arr.lastIndexOf(i));

### **10. 克隆数组** ###

const clone = (arr) => arr.slice();// orconst clone = (arr) => [...arr];

**字符串**

### **11. 将字符串大写** ###

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

### **12. 字符串反转** ###

const reverseString = (str) => str.split("").reverse().join("");// orconst reverseString = (str) => [...str].reverse().join();

### **13. 将字符串转换为数字** ###

const toNumber = (str) => Number(str);// orconst toNumber = (str) => +str;

### **14. 将字符串转换为字符数组** ###

const toCharArray = (str) => str.split('');// orconst toCharArray = (str) => [...str];// orconst toCharArray = (str) => Array.from(str);// orconst toCharArray = (str) => Object.assign([], str);

### **15. 将 Snake 大小写转换为 Camel 大小写** ###

const snakeToCamel = (str) => str.toLowerCase().replace(/(_\w)/g, (word) => word.toUpperCase().substr(1));

**日期**

### **16. 两个日期之间的天数** ###

const daysBetweenDates = (date1, date2) => Math.ceil(Math.abs(date1 - date2) / (1000 * 60 * 60 * 24));

### **17. 工作日约会时间** ###

const getWeekday = (date) => ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][date.getDay()];// or const getWeekday = (date) => date.toLocaleString('en-US', {weekday: 'long'});

**随机**

### **18. 随机数生成器** ###

const randomNumber = (rangeStart, rangeEnd) => new Date().getTime() % rangeEnd + rangeStart;// orconst randomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

### **19.随机十六进制颜色生成器** ###

const randomHexColor = () => `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`;

###    **20. 随机布尔生成器** ###

const randomBoolean = () => Math.random() >= 0.5;

**验证**

### **21. 检查数组是否为空** ###

const isEmpty = (arr) => !Array.isArray(arr) || !arr.length;

### **22. 检查数组是否包含值** ###

const includes = (arr, value) => arr.indexOf(value) != -1;// orconst includes = (arr, value) => arr.includes(value);

### **23. 检查日期是否是周末** ###

const isWeekend = (date) => [5, 6].indexOf(date.getDay()) !== -1;

**网络实用程序**

### **24.复制到剪贴板** ###

const copyToClipboard = (text) =>  navigator.clipboard?.writeText && navigator.clipboard.writeText(text);
    // TestingcopyToClipboard("Hello World!");

### **25.检测深色模式** ###

const isDarkMode = () =>  window.matchMedia &&  window.matchMedia("(prefers-color-scheme: dark)").matches;
    // Testingconsole.log(isDarkMode());

### **总结** ###

以上内容，就是我今天想与你分享的全部内容，希望这些内容，能够对你有所帮助。

### **更多精彩教程欢迎B站搜索“千锋教育”** ###

千锋前端浠浠呀老师HTML+CSS教程，零基础web前端开发入门必看视频