共计 4358 个字符,预计需要花费 11 分钟才能阅读完成。
前言
初衷: 整顿一下工作中罕用的 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]
感激
谢谢浏览,如有帮忙请点个关注、珍藏吧
感觉有帮忙能够关注前端娱乐圈公众号,每天为你推送一篇小常识
大家也能够加我微信交个敌人,能够找我聊天或拉你进技术交换群