20个javascript一行代码帮助你更专业

160 阅读4分钟

随着javascript不断发展,为很多新技术想法摊开了大门,因为它是最容易学的语言。

javascript可以做很多意想不到的事情,它也有很多学习的地方。

不管你是初学者还是资深开发者,学习新的东西总是好的。

接下来我将介绍20个一行代码方法,来提高你的生产率,助你开发。

什么是一行代码?

就是只需一行代码就可以实现的函数功能

01-得到一个随机的布尔值

该函数使用Math.random()方法返回一个布尔值, Math.random创建一个0到1的随机数,然后我们判断它是否大于或者小于0.5。意思就是百分之50的机会得到true或false

const getRandomBoolean = () => Math.random() >= 0.5;
console.log(getRandomBoolean());
// 百分之50的机会得到true或false

02-判断某个日期是否是周末

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

console.log(isWeekend(new Date(2021, 4, 14)));
// false (星期五)
console.log(isWeekend(new Date(2021, 4, 15)));
// true (星期六)

03-判断奇偶数

const isEven = (num) => num % 2 === 0;

console.log(isEven(5));
// false
console.log(isEven(4));
// true

04-数组去重

这个一个非常简单的方法从重复的数组中去掉重复的值。这个函数先把数组转换成set对象然后再转成数组

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

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

05-判断是否是数组

一个简洁,容易的方法去判断一个变量是否是数组

当然,很多方式也可以做到😉

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

06-在两个数之间生产一个随机数

拿两个数作为参数,就可以得到它们之间的随机数!

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

console.log(random(1, 50));
// 1-50的任何数

07-产生随机的字符串

有时候你需要创建一个临时唯一的Id,下面的这个技巧,你可以用来生成一个随机的字符串

const randomString = () => Math.random().toString(36).slice(2);

console.log(randomString());
// 任何字符串!!!

08-滚动到页面顶部

window.scrollTo()方法配合x轴,y轴的值去滚动。如果我们设置了0,0,那将会滚动到页面顶部

const scrollToTop = () => window.scrollTo(0, 0);
scrollToTop();

09-改变布尔值

改变布尔值是一个非常基础的编程之一,可以用非常多方法去做。 不一定用if语句去设置布尔值,可以在一个函数中用!操作符去改变它的值。

// bool 是存在其他地方的变量
const toggleBool = () => (bool = !bool);

10-交换两个变量的值

下面的代码是一个简单的方法去交换两个变量的值,不需要定义第三个变量,而且只需要一行代码

[foo, bar] = [bar, foo];

11-计算两个日期之间的天数

计算两个日期直接的天数,我们先取两个日期相减的绝对值除86400000,得到一个带有小数的天数,最后向下取整得到结果。

const daysDiff = (date, date2) => Math.ceil(Math.abs(date - date2) / 86400000);

console.log(daysDiff(new Date('2021-05-10'), new Date('2021-11-25')));
// 199

12-复制到剪贴板

ps: 你需要先检查navigator.clipboard.writeText是否可用

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

13-不同的方式合并数组

下面是两个合并数组的方法,一个是用contact方法,一个使用展开操作符...

ps: 可以用Set对象去重

// 合并数组但是没有去重
const merge = (a, b) => a.concat(b);
// Or
const merge = (a, b) => [...a, ...b];

// 合并且去重
const merge = [...new Set(a.concat(b))];
// Or
const merge = [...new Set([...a, ...b])];

14-获取javascript常见的原始类型

开发者有时候需要用到库来判断常见的javascript类型,下面是小技巧来节省你的时间和代码量

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

15-截断最后的字符串

妈妈再也不用担心截取最后的字符串了

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...

16-截断中间的字符串

如何从中间截断字符串呢?

这个函数拿到字符串作为第一个参数,如何保留字符串长度作为第二个参数,开始需要多少个,结尾需要多少字符,作为第三,第四参数。

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!', // 字符串
    25, // 需要保留字符的总数
    13, // 字符开始位置
    17, // 字符结束位置
  ),
);
// A long story ... eventually ends!

17-首字母大写

很不幸,javascript没有内置方法来做到,下面方法可以达到目的

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

console.log(capitalize('hello world'));
// Hello world

18-判断当前页面是否显示

这是简单帮助的方法放回true或者false,取决于页面是否显示

const isTabInView = () => !document.hidden;  // Not hidden

isTabInView();
// true/false

19-判断是否为苹果设备

如果用户使用苹果设备就返回true

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

console.log(isAppleDevice);
// true/false

20-三元操作符

这个是非常棒的代码方法,如果你想写if..else语句,只需要一行

// 长写法
const age = 18;
let greetings;

if (age < 18) {
  greetings = 'You are not old enough';
} else {
  greetings = 'You are young!';
}

// 短写法
const greetings = age < 18 ? 'You are not old enough' : 'You are young!'

题外-||操作符简写

当你想赋值给一个变量,希望变量不是null,undefind和空字符。你可以写一个很长的if判断语句,或者用||

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

// 短写法
const fullName = name || 'buddy';

支持一下博主