JAVAScript常见方法

获取字符串中的字符数

获取字符数是一个有用的实用程序，在许多情况下都很有用。你可以使用它来获取空格数和随后的单词数，或者这可用于获取字符串中某个分隔符的计数。

const characterCount = (str, char) => str.split(char).length - 1

这个想法非常简单。我们使用传递的参数 char 拆分字符串并获得返回数组的长度。因为每一次分割字符串，都会比分割器多一根；所以减去 1，我们有一个 characterCount 单行。

检查对象是否为空

检查对象的空性实际上比看起来要困难得多。每次检查对象是否等于 {} 都会返回 false，即使该对象为空。

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object

**Reflect.ownKeys()**返回一个由目标对象自身的属性键组成的数组。

在这一行中，我们检查对象的键的长度是否等于 0，以及传递的参数是否为实际对象。

等待一定时间后执行

在这个单行代码中，我们将接触一些异步编程。这个想法很简单。

在运行代码时，如果你想等待一定的时间，这里是wait one-liner：

const wait = async (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
const test = async()=>{
    await wait(1000)
    console.log("hello world")
}
test()

在wait one-liner中，我们创建一个promise并在给定的时间后使用setTimeout函数解决它。

获取两个日期之间的天差

在开发 Web 应用程序时，日期通常是最容易混淆的部分，因为有许多概念很容易被误算。

这是一个强大的单行程序来计算两个日期之间的天差。但还有更多的事情要做。和我一样，你可以创建自己的单线来计算月、年差等。

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

daysBetween(new Date('2021-8-26'),new Date('2021-8-16'))

这种单行背后的逻辑很容易理解。当两个日期相减时，返回值是以毫秒为单位的差值。要将毫秒转换为天，我们必须将其分别除以毫秒、秒、分钟和小时。

重定向到另一个 URL

如果你曾经创建过一个真实的网站，我敢肯定你会遇到身份验证逻辑。例如，非管理员用户不应该能够访问 /admin 路由。如果用户尝试，那么，你必须将其重定向到另一个 URL。

这种单线正好适用于我上面提到的情况，但我认为你可以找到更多的用例。

const redirect = url => location.href = url

redirect('https://www.baidu.com/')

location 是全局 window 对象上的一个方法，设置 href 属性的行为与用户点击链接的行为相同。

检查设备上的触摸支持

随着可以连接到互联网的设备越来越多，创建响应式网站的必要性也越来越高。20 年前，开发者应该考虑过桌面版网站，但今天超过 50% 的网络流量来自触摸设备。

因此，基于设备的触摸支持采取一些行动是一个如此重要的概念。

const touchSupported = () => ('ontouchstart' in window || DocumentTouch && document instanceof DocumentTouch)

console.log(touchSupported()) // true or false

在这一行中，我们正在检查文档是否支持 touchstart 事件。

最简单的单行评级组件

"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);

JS 错误处理的方式的正确姿势（直接定位错误原因）

try {
    // something
} catch (e) {
    window.location.href =
        "http://stackoverflow.com/search?q=[js]+" + e.message;
}

从一行代码里面学点 JavaScript（如何快速知道所有元素边框）

[].forEach.call($$("*"),function(a){
    a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

换成另一种比较常见的写法就是：

Array.prototype.forEach.call(document.querySelectorAll( * ),
 dom => dom.style.outline = `1px solid #${parseInt(Math.random() *
 Math.pow(2,24)).toString(16)}`)

史上最快清除缓存方法

<a href="javascript:alert( 清除成功 );">清除缓存</a>

单行 If-Else 语句

这是许多编程语言的共同特征。你可以使用三元运算符用一行代码编写整个语句，而不是在多行上编写 if-else。

例如：

const age = 12;
let ageGroup;
// LONG FORM
if (age > 18) {
  ageGroup = "An adult";
} else {
  ageGroup = "A child";
}
// SHORTHAND
ageGroup = age > 18 ? "An adult" : "A child";

但是，不要过度使用它。它会使你的代码更加冗长。明智的做法是仅用此替换简单的表达式以提高可读性并减少代码行数。

从数组中删除重复项

在 JavaScript 中，Set 是一个集合，它允许你仅存储唯一值。这意味着删除任何重复的值。

因此，要从数组中删除重复项，你可以将其转换为集合，然后再转换回数组。

const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]

困惑吗？让我解释一下它是如何工作的：

1)、new Set(numbers)从数字列表中创建一个集合。创建集合会自动删除所有重复值。

2）、展开运算符...将任何可迭代对象转换为数组。这意味着将集合转换回数组。[...new Set(numbers)]

较短的 If-Else 的空合并

这也是 if-else 的简写。

你可以使用看涨合并，而不是使用 if-else 构造来检查值是否为空。该nullish合并操作 ??，如果没有定义左侧返回右侧。如果是，则返回左侧：

let maybeSomething;
// LONG FORM
if(maybeSomething){
  console.log(maybeSomething)
} else {
  console.log("Nothing found")
}
//SHORTHAND
console.log(maybeSomething ?? "Nothing found")

防止崩溃的可选链

如果访问未定义的属性，则会产生错误。这就是可选链的用武之地。

在未定义属性时使用可选链运算符，undefined将返回而不是错误。这可以防止你的代码崩溃。

例如：

const student = {
  name: "Matt",
  age: 27,
  address: {
    state: "New York"
  },
};
// LONG FORM
console.log(student && student.address && student.address.ZIPCode); // Doesn't exist - Returns undefined
// SHORTHAND
console.log(student?.address?.ZIPCode); // Doesn't exist - Returns undefined

在没有第三个变量的情况下交换两个变量

在 JavaScript 中，你可以使用解构从数组中拆分值。这可以应用于交换两个变量而无需第三个：

let x = 1;let y = 2;// LONGER FORM
let temp = x;
x = y;
y = temp;
// SHORTHAND
[x, y] = [y, x];

将任何值转换为布尔值

在 JavaScript 中，你可以使用 !! 在 JS 中将任何内容转换为布尔值。

例如，这里有一些例子：

!!true    // true
!!2       // true
!![]      // true
!!"Test"  // true
!!false   // false
!!0       // false
!!""      // false

扩展运算符

使用扩展运算符组合两个数组...：

const nums1 = [1, 2, 3];
const nums2 = [4, 5, 6];
// LONG FORM
let newArray = nums1.concat(nums2);
// SHORTHAND
newArray = [...nums1, ...nums2];

也可以使用此语法代替将值推送到数组：

let numbers = [1, 2, 3];
// LONGER FORM
numbers.push(4);
numbers.push(5);
// SHORTHAND
numbers = [...numbers, 4, 5];

传播解构

使用扩展运算符将剩余元素分配给变量：

const student = {
  name: "Matt",
  age: 23,
  city: "Helsinki",
  state: "Finland",
};
// LONGER FORM
const name = student.name;
const age = student.age;
const address = { city: student.city, state: student.state };
// SHORTHAND
const { name, age, ...address } = student;

使用 && 进行短路评估

不必用if语句检查某事是否为真，你可以使用&&运算符：

var isReady = true;
function doSomething(){
  console.log("Yay!");
}
// LONGER FORM
if(isReady){
  doSomething();
}
// SHORTHAND
isReady && doSomething();

类固醇的字符串

通过将字符串包装在反引号内并${}用于嵌入值，从而在字符串之间插入变量。

例如：

const age = 41;
const sentence = `I'm ${age} years old`;
// result: I'm 41 years old

从数组中查找特定元素

使用find()方法查找匹配特定条件的元素：

const fruits = [
  { type: "Banana", color: "Yellow" },
  { type: "Apple", color: "Green" }];
// LONGER FORM
let yellowFruit;
for (let i = 0; i < fruits.length; ++i) {
  if (fruits[i].color === "Yellow") {
    yellowFruit = fruits[i];
  }
}
// SHORTHAND
yellowFruit = fruits.find((fruit) => fruit.color === "Yellow");

对象属性赋值

你是否希望对象键与值具有相同的名称？你可以省略对象文字来执行此操作：

const name = "Luis", city = "Paris", age = 43, favoriteFood = "Spaghetti";
// LONGER FORM
const person = {
  name: name,
  city: city,
  age: age,
  favoriteFood: favoriteFood
};
// SHORTHAND
const person = { name, city, age, favoriteFood };

压缩 For 循环

使用内置forEach()方法通过一行代码循环遍历数组：

const numbers = [1, 2, 3, 4, 5];
// LONGER FORM
for(let i = 0; i < numbers.length; i++){
  console.log(numbers[i]);
}
// SHORTHAND
numbers.forEach(number => console.log(number));

默认功能参数

你可以为函数参数提供默认值：

// LONG FORM
function pickUp(fruit) {
  if(fruit === undefined){
    console.log("I picked up a Banana");
  } else {
    console.log(`I picked up a ${fruit}`);
  }
}
// SHORTHAND
function pickUp(fruit = "Banana") {
  console.log(`I picked up a ${fruit}`)
}
pickUp("Mango"); // -> I picked up a Mango
pickUp();        // -> I picked up a Banana

将对象的值收集到数组中

用于Object.values()将对象的所有值收集到一个新数组中：

const info = { name: "Matt", country: "Finland", age: 35 };
// LONGER FORM
let data = [];for (let key in info) {
  data.push(info[key]);
}
// SHORTHAND
const data = Object.values(info);

检查一个项目是否存在于数组中

这不一定是速记，因为你几乎不会保存几个字符。但这是一种更清洁的方法。

你可以使用 includes() 方法，而不是使用 indexOf() 方法来检查元素是否在数组中。这使你的意图非常明确：

let numbers = [1, 2, 3];
// LONGER FORM
const hasNumber1 = numbers.indexOf(1) > -1 // -> True
// SHORTHAND/CLEANER APPROACH
const hasNumber1 = numbers.includes(1)     // -> True

压缩多个条件

避免使用长|| 检查多个条件链，你可以使用你刚刚在上一个技巧中学到的东西——即，使用 includes() 方法：

const num = 1;
// LONGER FORM
if(num == 1 || num == 2 || num == 3){
  console.log("Yay");
}
// SHORTHAND
if([1,2,3].includes(num)){
  console.log("Yay");
}

指数运算符

你Math.pow()习惯把一个数字提高到一个幂吗？你知道你也可以使用**运算符吗？

// LONGER FORM
Math.pow(4,2); // 16
Math.pow(2,3); // 8
// SHORTHAND
4**2 // 16
2**3 // 8

Math.floor() 简写

四舍五入Math.floor()并不是什么新鲜事。但是你知道你也可以使用~~运算符吗？

例如：

// LONG FORM
Math.floor(5.25) // -> 5.0
// SHORTHAND
~~5.25 // -> 5.0

用一行代码分配多个值

使用解构语法在一行中分配多个值：

let num1, num2;
// LONGER FORM
num1 = 10;num2 = 100;
// SHORTHAND
[num1, num2] = [10, 100];

这也适用于使用 JavaScript 对象：

student = {
  name: "Matt",
  age: 29,
};
// LONGER FORM
let name = student.name;
let age = student.age;
// SHORTHAND
let { name, age } = student;

在元素后插入一串 HTML

开发 Web 应用程序，使用 JavaScript 更新 DOM 是一件很常见的事情。有一些基本的方法可以完成工作，但是当情况变得复杂时，就很难克服。

这是在 HTML 元素之后立即注入一串 HTML 的单行代码。通过几分钟的思考和谷歌搜索，我相信你可以找到这个单行的之前版本。

const insertHTMLAfter = (html, el) => el.insertAdjacentHTML('afterend', html)

打乱数组在开发中混洗一组数据是你随时可能遇到的常见情况，不幸的是，JavaScript 中没有内置数组的混洗方法。但是，这是你可以每天使用的 shuffle one-liner：

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

它利用数组的排序方法，在数组的前一个元素之前或之后进行随机排序。

在网页上获取选定的文本

浏览器在全局 windows 对象上有一个名为 getSelection 的内置方法。

使用此方法，你可以创建一个单行，返回网页上突出显示或选定的文本。

const getSelectedText = () => window.getSelection().toString()

获取一个随机布尔值

在编程时，尤其是在编写游戏时，有时你会想要随机采取行动。在这种情况下，下面的单行非常方便。

const getRandomBoolean = () => Math.random() >= 0.5

上面的单行有 50/50 的机会返回 true 或 false。因为生成的随机数大于 0.5 的概率等于较小的概率。

但是，例如，如果你想获得一个概率为 70% 错误的随机布尔值，那么，你可以简单地将 0.5 更改为 0.7，依此类推。

计算数组的平均值

可以使用多种方法计算数组的平均值。但道理对所有人都是一样的。你必须获得数组及其长度的总和；然后除法给出平均值。

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

在平均单行中，我们使用 reduce 来获取一行中的数组的总和，而不是使用循环。然后，我们将其除以数组长度，这是数组的平均值。