乐趣区

关于javascript:分享32个JavaScript工作中常用的代码片段

jiezi

前言

初衷： 整顿一下工作中罕用的 JavaScript 小技巧分享给大家，心愿能帮忙到各位小伙伴们，在工作中晋升开发效率。

适宜人群： 前端高级开发，大佬绕道。

1. 函数参数默认值

在 Es6 之前，咱们要写参数默认值的话，还须要在函数体内写一堆判断逻辑，而 Es6 之后新出参数默认值语法，咱们来看一下。

function person(name, age, sex = "male") {console.log(name, age, sex) // 蛙人 24 male
}
person("蛙人", 24)

2. 数组求和应用 reduce

之前咱们都应用 for 循环进行遍历求和，也能够应用 reduce 办法进行求和，简洁代码。

let nums = [1,22,31,4,56]
let sum = nums.reduce((prev, cur) => prev + cur, 0)

3. 废除 if else 侠

咱们写判断时，都会应用 if else 但当业务越来越宏大时有好几种状态时，这样代码太冗余了，咱们做一下简化。

if(xxx = 1) {xxx = "启用"} else if(xxx = 2) {xxx = "停用"}
// ... 省略
// 破除以上写法

let operation = {
    1: "启用",
    2: "停用"
    3: "登记",
    4: "批改"
    5: "详情"
}
xxx = operation[status] // 代码简洁清晰

4. 替换变量

在 Es6 之前，咱们交互变量值时得应用第三个变量，当 Es6 呈现解构赋值时，咱们能够十分疾速的替换变量。

let x = 10;
let y = 20;
[x, y] = [y, x];

5. 数组去重

在 Es6 之前，咱们数组去重都应用 for 循环遍历或者 indexOf 等，但 Es6 呈现了 Set 构造，十分便捷。

不明确 Set 构造能够看我上一篇文章哦《了解数据结构之 Set，只有 5 分钟！》

let arr = [1,1,2,434,2,1]
console.log([...new Set(arr)]) // 1 2 434

6. 疾速获取 URL 地址栏参数

有时候咱们想获取地址栏上参数，都是手写办法，有一个 Api 实用的办法来解决 URL 的查问字符串。

let params = new URLSearchParams(location.search);
params.get("xxx") // 获取地址栏参数

7. 生成随机 Id

有些状况下咱们想要获取随机不反复的字符串，就能够应用如下办法

Math.random().toString(36).substr(2)

8. 获取对象 key 键值

疾速获取对象的 key 值

let person = {name: "蛙人", age: 24};
console.log(Object.keys(person)) // ["name", "age"]

9. 获取对象 value 值

疾速获取对象的 value 值

let person = {name: "蛙人", age: 24};
console.log(Object.values(person)) // ["蛙人", 24]

10. 模板字符串表达式

在 Es6 之前，咱们字符串拼接变量，都是应用 + 号来拼接，这样拼接还好，要是拼接 html 标签就十分的好受，稍不留神就报错符号问题。Es6 呈现了模板字符串应用 “，而后 ${}外面绑定变量，使咱们开发十分的便捷。

let name = "蛙人"
console.log(`hello ${name}`)
console.log(`<p>${name}</p>`)

11. 获取对象里指定的值

应用对象解构获取对象值十分简洁，不必在向传统那样应用 . 语法一个一个去获取

const person = {name: "蛙人", age: 24, sex: "male"};
let {age, sex} = person
console.log(age, sex) // 24 male

12. 疾速将字符串转换为数组

不再应用字符串 split 办法，应用扩大运算符能够疾速转换为数组。

let str = "abcdefg"
console.log([...str]) // ["a", "b", "c", "d", "e", "f", "g"]

13. 应用三目运算判断值

如果只有两种状态的状况强烈推荐应用三目运算，摈弃 if else。

let status = 1;
status = status == 1 ? "男" : "女"

14.??运算符

??运算符只有后面的值是 undefined or null 才会执行，工作中有的状况下应用，咱们来看一下。

let status = undefined;
let text = status ?? "暂无"
console.log(text) // 暂无

15.?.运算符

?.运算符这在有时候解决对象时十分有用，看上面案例，person.name返回 undefined 而后在调用 toString 这时必定会报错，这时应用 ?. 运算符就不会产生谬误，?.运算符是只有在当值不是 undefined 时才会调用 toString 办法。

let person = {}
console.log(person.name.toString()) // 报错
console.log(person.name?.toString()) // undefined

16.~~双非运算符

~~双非运算符能够用于向下取整。

console.log(~~4.3) // 4

17. 合并对象

应用 Es6 新增办法Object.assign，合并对象如果对象外面有反复的值，则前面笼罩后面，能够接管有限参数。在工作中也是常常应用。

let person = {name: "蛙人", age: 24}
let obj = Object.assign({}, person)
console.log(obj) // {name: "蛙人", age: 24}

18. 数组里的值是否满足一个要求

以后办法只有数组外面有一个值合乎需要，就返回 true，否则 false。

let list = [1,2,2,2,2,2]
let res = list.some(item => item > 1)
console.log(res) // true

19. 数组里的值是否都满足要求

咱们之前应用 for 遍历在判断以后数组里的值是否全符合要求，还要申明一个变量来进行累计，间接应用 every 当全副满足需要时返回true，否则返回false

let list = [1,2,2,2,2,2]
let res = list.every(item => item > 1)
console.log(res) // false

20. 随机打乱数组程序

有时咱们场景有须要将一个数组程序进行打乱。

let list = [1,2,'蛙人', 1, 34, 3, 12]
let res = list.sort(() => Math.random() - 0.5)
console.log(res)

21. 事件委托

之前咱们有 100 个 li 元素，都要绑定一个 onclick 事件，这样性能不怎么好，咱们能够通过事件委托实现。

ul.on("click", "li", e => {.... 省略 操作})

22. 检测值是否为数组

let arr = []
console.log(Array.isArray(arr)) // true
console.log(Object.prototype.toString.call(arr) == "[object Array]") // true

23. 伪数组转换为真数组

伪数组不能调用真数组对象上的办法，所以得将伪数组转换为真数组，获取 js 元素是伪数组。

document.querySelectAll("div") // NodeList[div, div, div, div]
[...document.querySelectorAll('div')] // 转换为真数组
Array.from(document.querySelectorAll('div')) // 转换为真数组

24. 疾速获取工夫戳

console.log(+ new Date())
console.log(Date.now())

25. 获取一个值的下标

在 Es6 之前，咱们只晓得应用 indexOf 办法去获取下标，Es6 之后还有一个办法哦，如果找到该值返回以后值的下标，找不到返回 -1

let colors = ["red", "blue", "green"]
function getIndex(val) {return colors.findIndex(i => i == val)
}
getIndex("blue") // 1

26. 数组转换为对象

在有的状况须要将数组转换为对象，能够这样做。

let person = ["蛙人", 24, "male"]
let obj = {}
person.forEach(item => (obj[item] = item))

27. 是否为奇偶数

let num = val => val % 2 == 0;
num(10) // ture 偶数
num(1) // false 奇数

28. 检测以后页面是否被暗藏

监测以后页面是否被暗藏，当切换页面时显示 true, false 就是关上状态。个别在工作用次要用到用户在页面停留了多长时间。

document.addEventListener("visibilitychange", function() {console.log(document.hidden);
});

29. 去除以后数组里的 false 值

把数组外面的假值过滤掉。

let list = ["", false, 1, null, undefined," 蛙人 ", 24]
let res = item => item.filter(Boolean)
console.log(res(list))

30.this 指向

有时咱们不想 this 是这个值，所以就要扭转 this 指向，扭转 this 指向有很多种，箭头函数、bind、apply、call、我这里就演示一种，小伙伴能够依据不同业务场景来抉择应用哪种办法！

let person = {name: "蛙人"}
ul.onclick = (function(e) {console.log(this.name)
}).bind(person)

31. 判断地址是否无效

function IsUrl(val) {
    try {if (new URL(val)) {return true}
    } catch(e) {return false}
}
IsUrl("https://www.baidu.cn") // true
IsUrl("www.baidu.cn") // false

32. 应用 Map 使数组间接返回后果

有时咱们解决数组时，想间接返回解决完的后果，而不是在重新组合一个数组，这时 Map 就退场了。

let person = [10, 20, 30]
function fn(item) {return item + 1}
let res = person.map(fn)
console.log(res) // [11, 21, 31]

感激

谢谢浏览，如有帮忙请点个关注、珍藏吧

感觉有帮忙能够关注前端娱乐圈公众号，每天为你推送一篇小常识

大家也能够加我微信交个敌人，能够找我聊天或拉你进技术交换群

退出移动版