导言

总结一些简洁好用的JavaScript代码片段，能用一行代码搞定的事，何乐而不为呢。

if-else语句简写

简写if-else:

const name = 'Peter';
let sayHi;

//if-else
if(name = 'Peter'){
    sayHi = 'Hello Peter'
}else{
    sayHi = 'Hello Anonymous'
}

//三元运算符简写
name = 'Peter' ? 'Hello Peter' : 'Hello Anonymous';

//nullish合并
let hello

hello ?? 'undefined'

数组去重

在JavaScript中，Set是一个集合，只允许存储唯一值，它会删除任何重复的值。我们可以将它应用到数组去重上：

const num  = [1, 2, 2, 3, 3, 12, 12 , 19, 19];
const uniqueNum = [...new Set(num)]; //输出[1, 2, 3, 12, 19]

他的工作原理如下：

1. new Set(num)从数字列表中创建一个集合。创建集合会自动删除所有重复值。
2. 展开运算符...可以将任何可迭代对象转换为数组，即将集合转换为数组 [...Set(num)]。

交换变量

使用解构从数组中拆分值，应用于交换两个变量而无需第三个：

let a = 1;
let b = 2;

//利用第三个变量进行交换
let x = a;
a = b;
b = x;

//数组拆分简写
[a, b] = [b, a];

将任何值转换为布尔值

使用!!可以将任意值转换为布尔值：

!!true    //true
!!2       //true
!![]      //true

!!false   //false
!!0       //false
!!""      //false

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

const num1 = [1, 2, 3];
const num2 = [4, 5, 6];

//使用concat
const num = num1.concat(num2);

//数组解构
num = [...num1, ...num2];

将对象的值收集到数组中

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

const obj = {name:'javascript', type:'frontend', area:'web'};

//循环方法
let data = [];
for(let key in obj){
    data.push(obj[key]);
}

//Objet.values()
const data = Object.values(obj)

数组乱序

在使用需要某种程度的随机化的算法时，你会经常发现洗牌数组是一个相当必要的技能。下面的片段以O(n log n)的复杂度对一个数组进行就地洗牌。

const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);
// 测试
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(shuffleArray(arr))

滚动到顶部和底部

最简单的滚动元素的方法是使用scrollIntoView方法。添加行为。"smooth "来实现平滑的滚动动画。

//顶部
const scrollToTop = (element) =>
element.scrollIntoView({ behavior: "smooth", block: "start" });

//底部
const scrollToBottom = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "end" });

生成随机颜色

const generateRandomHexColor = () =>
  `#${Math.floor(Math.random() * 0xffffff) .toString(16)}`;