骚气的JavaScript单行代码

这是我参与更文挑战的第17天，活动详情查看： 更文挑战

什么是单行代码？

• 单行代码是一种代码实践，其中我们仅用一行代码执行某些功能。

三元运算符

// Longhand
const age = 18;
let greetings;

if (age < 18) {
  greetings = '你还不够老';
} else {
  greetings = '你很年轻!';
}

// Shorthand
const greetings = age < 18 ? '你还不够老' : '你很年轻!';
复制代码

大写字符串

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
console.log(capitalize('hello world'));
// Hello world
复制代码

短路评估速记（很常用）

• 在将变量值分配给另一个变量时，可能要确保源变量不为null，未定义或为空。

可以编写带有多个条件的long if语句，也可以使用短路评估。

// Longhand
if (name !== null || name !== undefined || name !== '') {
  let fullName = name;
}

// Shorthand
const fullName = name || 'buddy';
复制代码

检测设备类型

• 使用正则表达式来检测 navigator.userAgent 属性判断设备是在移动设备还是在台式机/笔记本电脑打开。

const detectDeviceType = () =>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop';
复制代码

检查用户是否在Apple设备上

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
// true/false
复制代码

检查用户是否在Android设备上

const isAndroidDevice = () => /android/.test(navigator.platform);
console.log(isAndroidDevice);
// true/false
复制代码

反转字符串

const reverse = str => str.split(‘‘).reverse().join(‘‘);
reverse(‘hello world‘);
复制代码

从中间截断字符串

const truncateStringMiddle = (string, length, start, end) => {
  return `${string.slice(0, start)}...${string.slice(string.length - end)}`;
};

console.log(
  truncateStringMiddle(
    'A long story goes here but then eventually ends!', // string
    25, // 需要的字符串大小
    13, // 从原始字符串第几位开始截取
    17, // 从原始字符串第几位停止截取
  ),
);
// A long story ... eventually ends!
复制代码

在结尾处截断字符串

const truncateString = (string, length) => {
  return string.length < length ? string : `${string.slice(0, length - 3)}...`;
};

console.log(
  truncateString('Hi, I should be truncated because I am too loooong!', 36),
);
// Hi, I should be truncated because...
复制代码

获取变量的实际类型(常用)

const trueTypeOf = (obj) => {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
};

console.log(trueTypeOf(''));
// string
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf());
// undefined
console.log(trueTypeOf(null));
// null
console.log(trueTypeOf({}));
// object
console.log(trueTypeOf([]));
// array
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf(() => {}));
// function
复制代码

检查变量是否为数组

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

console.log(isArray([1, 2, 3]));
// true
console.log(isArray({ name: 'Ovi' }));
// false
console.log(isArray('Hello World'));
// false
复制代码

获取数组中的唯一值(数组去重)

const uniqueArr = (arr) => [...new Set(arr)];

console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5]));
// [1, 2, 3, 4, 5]
复制代码

数组对象去重

const uniqueElementsBy = (arr, fn) =>arr.reduce((acc, v) => {if (!acc.some(x => fn(v, x))) acc.push(v);return acc;}, []);
 
uniqueElementsBy([{id: 1, name: 'Jhon'}, {id: 2, name: 'sss'}, {id: 1, name: 'Jhon'}], (a, b) => a.id == b.id)
// [{id: 1, name: 'Jhon'}, {id: 2, name: 'sss'}]
复制代码

合并多个数组的不同方法

• 有两种合并数组的方法。其中之一是使用concat方法。另一个使用扩展运算符（…）。

// Merge but don't remove the duplications
const merge = (a, b) => a.concat(b);
// Or
const merge = (a, b) => [...a, ...b];

// Merge and remove the duplications
const merge = [...new Set(a.concat(b))];
// Or
const merge = [...new Set([...a, ...b])];
复制代码

将文字复制到剪贴板

const copyTextToClipboard = async (text) => {
  await navigator.clipboard.writeText(text);
};
复制代码

交换两个变量

[foo, bar] = [bar, foo];
复制代码

删除Boolean 为 false 值

const clean = dirty.filter(Boolean);
const clean = [0, false, true, undefined, null, '', 12, 15].filter(Boolean);
// [true, 12, 15]
复制代码

随机生成六位数字验证码

const code = Math.floor(Math.random() * 1000000).toString().padStart(6, "0");
// 941377
复制代码

身份证正则

onst IDReg= /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/;
复制代码

window.location.search 转 JS 对象

const searchObj = search => JSON.parse(`{"${decodeURIComponent(search.substring(1)).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`);
 
// 假如请求url为
// 'https://www.baidu.com?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=js&rsv_pq=a86b5e5f0007bceb&rsv_t=1e1fAVan%2BVlnkhJHFB0BIGLdLM2slszYMJBTTfFkmyyBUzBpw0ggeuVDE50&rqlang=cn&rsv_enter=0&inputT=1287&rsv_sug3=5&rsv_sug1=3&rsv_sug7=101&rsv_sug2=0&rsv_sug4=1907'
// 那么 window.location.search 就为：
let search = '?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=js&rsv_pq=a86b5e5f0007bceb&rsv_t=1e1fAVan%2BVlnkhJHFB0BIGLdLM2slszYMJBTTfFkmyyBUzBpw0ggeuVDE50&rqlang=cn&rsv_enter=0&inputT=1287&rsv_sug3=5&rsv_sug1=3&rsv_sug7=101&rsv_sug2=0&rsv_sug4=1907'
searchObj(search)
复制代码

获取url上的参数，上面一种的另外实现

 const searchObj = () => {
   let q = {};
   location.search.replace(/([^?&=]+)=([^&]*)/g,(_,k,v)=>q[k]=v);
   return q;
 }
复制代码

将数字转化为千分位格式

const toDecimalMark = num => num.toLocaleString('en-US');
toDecimalMark(25305030399.8790); // "25,305,030,399.879"
复制代码

多维数组转一维数组

const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));
deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5]
复制代码

过滤对象数组

const reducedFilter = (data, keys, fn) =>data.filter(fn).map(el =>keys.reduce((acc, key) => {acc[key] =el[key];return acc;}, {}));
const data = [
  {
    id: 1,
    name: 'john',
    age: 24
  },
  {
    id: 2,
    name: 'mike',
    age: 50
  }
];
 
let a = reducedFilter(data, ['id', 'name'], item => item.age > 24); // [{ id: 2, name: 'mike'}]
复制代码

RGB 颜色转 16进制颜色

const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
 
RGBToHex(255, 165, 1); // 'ffa501'
复制代码

密码组合正则

const passwordReg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{8,20}$/;
// -长度8~20位字符，支持大小写字母、数字、符号三种字符中任意两种字符的组合
复制代码

浏览器开发者工具控制台选取当前页所有的对应元素 $$

$$('a')
//所有的a元素
复制代码

神奇的js代码

 (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]
 //sb
复制代码