ECMAScript 5/6/7 中必学的高逼格黑魔法

最新推荐文章于 2024-03-07 11:39:11 发布

qiu豆麻dei

最新推荐文章于 2024-03-07 11:39:11 发布

阅读量295

点赞数 2

分类专栏： ECMAScript 前端开发文章标签： javascript es6 node.js

本文链接：https://blog.csdn.net/qq_37875642/article/details/109096755

版权

前端开发同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

ECMAScript

2 篇文章 0 订阅

订阅专栏

ECMAScript 5/6/7 中必学的高逼格黑魔法

前言：在各大巨牛的blog里学习的一些奇淫技巧，在这里整理下分享给大家。

有时候一些技巧的使用，能够缩短繁缛的代码篇幅，增加可读性。也可以让后续接手的哥们在阅读代码时眼前一亮，从而情不自禁的献上自己的膝盖，废话不多，这就开始。

字符串拼接

开发中常用，服务端(nodejs)拼接SQL语句，前端渲染列表目录等

lowB行为:

//服务端做查询时常用

let uuid ='12345677654321'
let sqlQuerySentence = 'SELECT md5_key FROM Users WHERE uuid='+uuid

高贵而不失优雅：

let uuid ='12345677654321'
let sqlQuerySentence = `SELECT md5_key FROM Users WHERE uuid = ${uuid}`

鄙人不才，当过一段时间 lowB😩

数组转对象

平民：

let obj = {}
let arr = ['1','2','3']
for (let i in arr){
    obj[i] = arr[i]
}
console.log(obj)

//>{ 0 : 1 , 1 : 2 , 2 : 3 }

斗宗强者：

let arr = ['1','2','3']
let obj = {...arr}
console.log(obj)

//>{ 0 : 1 , 1 : 2 , 2 : 3 }

数组去重

双层嵌套鸡腿堡：

//for
let unique = (arr)=>{
    for(let i = 0; i < arr.length; i++){
        for(let j = i+1; j<arr.length; j++){
            if(arr[i] ==  arr[j]){
                arr.splice(j,1);
                j--;
            }
        }
    }
    return arr;
}
console.log(unique(['1','2','2']))

//>['1','2']

indexOf大法好：

//indexOf去重
let unique = (arr)=>{
    let array = []
    for(let i = 0; i< arr.length; i++){
        if(array.indexOf(arr[i]) === -1){
            array.push(arr[i])
        }
    }
    return array
}

console.log(unique(['1','2','2']))
//>['1','2']

本王：

//Array.from与set去重
let unique = (arr)=>{
    return Array.from(new Set(arr))
}
console.log(unique(['1','2','2']))
//>['1','2']

灵性三元表达式

小白：

const isHandsome = true
let look
if(isHandsome){
    look = "handsome！"
}else{
    look = "ugly!"
}
console.log(`Author looks so ${look}`)

//>Author looks so handsome!

油条：

const isHandsome = true
const look = isHandsome?'handsome!':'ugly!'
console.log(`Author looks so ${look}`)

这样写简洁的一 * 好吗！！

类型转换

to Number

石器时代：

const age = '23'
const ageToNumber = parseInt(age)
console.log(typeof ageToNumber)

//>number

现代科技：

const age = '23'
const ageToNumber = +age
console.log(typeof ageToNumber)

//>number

to String

小白：

let num = 123
num.toString();
//'123'

油条：

let nun 123
let str = num + ""
//'123'

合并对象

一般人：

let objA = { a : 1 }
let objB = { b : 2 }
console.log(Object.assign(obj1 , obj2))

//{ a:1,b:2 }

高科技：

let objA = { a : 1 }
let objB = { b : 2 }
let finalObj = {...objA,...objB}//展开操作符

//{ a:1,b:2 }

求幂运算

一般人：

// 8^5
console.log(Math.pow(8,5))

黑魔法：

//es7新方法计算8^5
console.log(8 ** 5)

数组扁平化

一般人：

//reduce
let arr = [1,[2,[3,4]]]

let flatten = (arr)=>{
    return arr.reduce((prev,next)=>{
        return prev.concat(Array.isArray(next) ? flatten(next) :next)
    },[])
}
console.log(flatten(arr))

黑魔法：

//es6 flat(depth) 
//param:depth(嵌套数组的深度，默认为1)
let arr = [1,[2,[3,4]]]
let finalArray = arr.flat(3)
console.log(finalArray);

截取数组

一般人方法太多，有分割，有遍历后取固定位数的，在这里就不一一赘述了，直接上干货：

let array = [1,2,3,4,5,6]
//取前4个元素
array.length = 4;
console.log(array)

//>[1,2,3,4]

拷贝数组

分深浅两种拷贝，前端面试必考题。众所周知，数组的存放在堆内存中，有自己固定的地址（地址存放于栈内存中）。一般方法为遍历，放入新数组（深拷贝），新数组的地址值改变，直接赋值的方法为浅拷贝，地址值不变。（PS:开发没人会浅拷贝，特殊需求除外，都是深拷贝，避免后续对数组进行操作时，影响原数组，从而造成一些不必要的bug）

佛系式：

const arr = [1,2,3,4,5]
const copyArr = arr.slice()

ES6炫技式1：

const arr = [1,2,3,4,5]
const copyArr = [...arr]

ES6炫技式2：

const arr = [1,2,3,4,5]
//Array 构造函数
const copyArr = new Array(...arr)

黑魔法：

const arr = [1,2,3,4,5]
const copyArr = arr.concat()

两个整数交换值

这个对于初学者还是比较常用的，鄙人不才，有幸在大一对一推整数写冒泡排序时想了一个小时没想通交换的逻辑。

大一时的我：

var a = 1,b = 2;
a += b;
b = a - b;
a -= b;

缺点很明显，整型会溢出，如果是两个很大的整数，就会交换失败

现在的我：

let a = 1,b = 2
a ^= b
b ^= a
a ^= b

小数取整

看各位需求了，向上向下还是四舍五入😄。

let num = 100.1
//传统(大于0和小于零的数要区分向上向下取整。脑海里可以画一个数轴体会一下思想)
number < 0 ? Math.ceil(num) : Math.floor(num)

//ECMAScript 5
let es5Int = Number.parseInt(num)

//ECMAScript 6
let es6Int = Math.trunc(num)