记录–你可能忽略的10种JavaScript快乐写法

前言

• 代码的简洁、美感、可读性等等也许不影响程序的执行，但是却对人（开发者）的影响非常之大，甚至可以说是影响开发者幸福感的重要因素之一；
• 了解一些有美感的代码，不仅可以在一定程度上提高程序员们的开发效率，有些还能提高代码的性能，可谓是一举多得；

笔者至今难以忘记最开始踏入程序员领域时接触的一段List内嵌for的Python代码：

array = [[16, 3, 7], [2, 24, 9], [4, 1, 12]] row_min = [min(row) for row in array ] print(row_min)

const array = [[16, 3, 7], [2, 24, 9], [4, 1, 12]] const row_min = array.map(item => Math.min(...item)) console.log(row_min)

能写出优秀的代码一直是笔者所追求的，以下为笔者在开发阅读过程积累的一些代码片段以及收集了互联网上一些优秀代码片段，希望对你有所帮助

概述

这里，考虑到有些技巧是大家见过的或者说是已经烂熟于心的，但总归有可能有些技巧没有留意过，为了让大家更加清楚的找到自己想要查阅的内容以查漏补缺，所以这里笔者贴心地为大家提供了一张本文内容的索引表，供大家翻阅以快速定位，如下：

数组去重

这不仅是我们平常编写代码时经常会遇到的一个功能实现之一，也是许多面试官在考查JavaScript基础时喜欢考查的题目，比较常见的基本有如下两类方法：

1）通过内置数据结构自身特性进行去重

主要就是利用JavaScript内置的一些数据结构带有不包含重复值的特性，然后通过两次数据结构转换的消耗[] => set => []从而达到去重的效果，如下演示：

const arr = ['justin1go', 'justin2go', 'justin2go', 'justin3go', 'justin3go', 'justin3go']; const uniqueArr = Array.from(new Set(arr)); // const uniqueArr = [...new Set(arr)];

2）通过遍历并判断是否存在进行去重

白话描述就是：通过遍历每一项元素加入新数组，新数组存在相同的元素则放弃加入，伪代码：[many items].forEach(item => (item <不存在于> uniqueArr) && uniqueArr.push(item))

至于上述的<不存在于>操作，可以是各种各样的方法，比如再开一个for循环判断新数组是否有相等的，或者说利用一些数组方法判断，如indexOf、includes、filter、reduce等等

const arr = ['justin1go', 'justin2go', 'justin2go', 'justin3go', 'justin3go', 'justin3go']; const uniqueArr = []; arr.forEach(item => { 	// 或者!uniqueArr.includes(item) 	if(uniqueArr.indexOf(item) === -1){ 		uniqueArr.push(item) 	} })

const arr = ['justin1go', 'justin2go', 'justin2go', 'justin3go', 'justin3go', 'justin3go']; const uniqueArr = arr.filter((item, index) => { 	return arr.indexOf(item, 0) === index; })

const arr = ['justin1go', 'justin2go', 'justin2go', 'justin3go', 'justin3go', 'justin3go']; const uniqueArr = arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);

const arr = ['justin1go', 'justin2go', 'justin3go']; console.log(arr.at(-1)) // 倒数第一个值 console.log(arr.at(-2)) // 倒数第二个值 console.log(arr.at(0)) // 正数第一个   console.log(arr.at(1)) // 正数第二个

注：node14应该是不支持的，目前笔者并不建议使用该方法，但获取数组最后一个元素是很常用的，就应该像上述语法一样简单...

数组对象的相互转换

• 相信大家比较熟悉的是从对象转换为数组的几种方法如：Object.keys()、Object.values()、Object.entries；
• 但其实还可以通过Object.fromEntries()将一个特定数组转换回对象：

    const entryified = [         ["key1", "justin1go"],         ["key2", "justin2go"],         ["key3", "justin3go"]     ];      const originalObject = Object.fromEntries(entryified);     console.log(originalObject);

短路操作

被合理运用的短路操作不仅非常的优雅，还能减少不必要的计算操作

1）基本介绍

主要就是||或操作、&&且操作当第一个条件（左边那个）已经能完全决定整个表达式的值的时候，编译器就会跳过该表达式后续的计算

• 或操作a || b：该操作只要有一个条件为真值时，整个表达式就为真；即a为真时，b不执行；
• 且操作a && b：该操作只要有一个条件为假值时，整个表达式就为假；即a为假时，b不执行；

2）实例

网络传输一直是前端的性能瓶颈，所以我们在做一些判断的时候，可以通过短路操作减少请求次数：

const nextStep = isSkip || await getSecendCondition(); if(nextStep) { 	openModal(); }

function fn(callback) { 	// some logic 	callback && callback() }

function fn(setupData) { 	const defaultSetup = { 		email: "[email protected]", 		userId: "justin3go", 		skill: "code", 		work: "student" 	} 	return { ...defaultSetup, ...setupData } }  const testSetData = { skill: "sing" } console.log(fn(testSetData))

if(condtion === "justin1go" || condition === "justin2go" || condition === "justin3go"){ 	// some logic }

const someConditions = ["justin1go", "justin2go", "justin3go"]; if(someConditions.includes(condition)) { 	// some logic }

a = 1 b = 2 a, b = b, a

let a = 1; let b = 2; [a, b] = [b, a]

const arr = ["justin1go", "justin2go", "justin3go"]; [arr[0], arr[2]] = [arr[2], arr[0]]

// 偶数 & 1 = 0 // 奇数 & 1 = 1 console.log(2 & 1)    // 0 console.log(3 & 1)    // 1

console.log(~~ 6.83)    // 6 console.log(6.83 >> 0)  // 6 console.log(6.83 << 0)  // 6 console.log(6.83 | 0)   // 6 // >>>不可对负数取整 console.log(6.83 >>> 0)   // 6

var a = 5 var b = 8 a ^= b b ^= a a ^= b console.log(a)   // 8 console.log(b)   // 5

/**  * 16进制颜色值转RGB  * @param  {String} hex 16进制颜色字符串  * @return {String}     RGB颜色字符串  */   function hexToRGB(hex) {     var hexx = hex.replace('#', '0x')     var r = hexx >> 16     var g = hexx >> 8 & 0xff     var b = hexx & 0xff     return `rgb(${r}, ${g}, ${b})` }  /**  * RGB颜色转16进制颜色  * @param  {String} rgb RGB进制颜色字符串  * @return {String}     16进制颜色字符串  */ function RGBToHex(rgb) {     var rgbArr = rgb.split(/[^d]+/)     var color = rgbArr[1]<<16 | rgbArr[2]<<8 | rgbArr[3]     return '#'+ color.toString(16) } // ------------------------------------------------- hexToRGB('#ffffff')               // 'rgb(255,255,255)' RGBToHex('rgb(255,255,255)')      // '#ffffff'

replace()的回调函数

之前写过一篇文章介绍了它，这里就不重复介绍了，F=>传送

sort()的回调函数

sort()通过回调函数返回的正负情况来定义排序规则，由此，对于一些不同类型的数组，我们可以自定义一些排序规则以达到我们的目的：

• 数字升序：arr.sort((a,b)=>a-b)
• 按字母顺序对字符串数组进行排序：arr.sort((a, b) => a.localeCompare(b))
• 根据真假值进行排序：

const users = [   { "name": "john", "subscribed": false },   { "name": "jane", "subscribed": true },   { "name": "jean", "subscribed": false },   { "name": "george", "subscribed": true },   { "name": "jelly", "subscribed": true },   { "name": "john", "subscribed": false } ];  const subscribedUsersFirst = users.sort((a, b) => Number(b.subscribed) - Number(a.subscribed))