整理一下工作中常用的JavaScript小技巧分享给大家,希望能帮助到各位小伙伴们,在工作中提升开发效率。
在Es6之前,我们要写参数默认值的话,还需要在函数体内写一堆判断逻辑,而Es6之后新出参数默认值语法,我们来看一下。
function person(name, age, sex = "male") {
console.log(name, age, sex) // 蛙人 24 male
}
person("蛙人", 24)
之前我们都使用for循环进行遍历求和,也可以使用reduce方法进行求和,简洁代码。
let nums = [1,22,31,4,56]
let sum = nums.reduce((prev, cur) => prev + cur, 0)
我们写判断时,都会使用if else但当业务越来越庞大时有好几种状态时,这样代码太冗余了,我们做一下简化。
if(xxx = 1) {
xxx = "启用"
} else if(xxx = 2) {
xxx = "停用"
}
// ...省略
// 废除以上写法
let operation = {
1: "启用",
2: "停用"
3: "注销",
4: "修改"
5: "详情"
}
xxx = operation[status] // 代码简洁清晰
在Es6之前,我们交互变量值时得使用第三个变量,当Es6出现解构赋值时,我们可以非常快速的交换变量。
let x = 10;
let y = 20;
[x, y] = [y, x];
在Es6之前,我们数组去重都使用for循环遍历或者indexOf等,但Es6出现了Set结构,非常便捷。
不明白Set结构可以看我上一篇文章哦 《理解数据结构之Set,只要5分钟!》
let arr = [1,1,2,434,2,1]
console.log([...new Set(arr)]) // 1 2 434
有时候我们想获取地址栏上参数,都是手写方法,有一个api实用的方法来处理 URL 的查询字符串。
let params = new URLSearchParams(location.search);
params.get("xxx") // 获取地址栏参数
有些情况下我们想要获取随机不重复的字符串,就可以使用如下方法
Math.random().toString(36).substr(2)
快速获取对象的key值
let person = {name: "蛙人", age: 24};
console.log(Object.keys(person)) // ["name", "age"]
快速获取对象的value值
let person = {name: "蛙人", age: 24};
console.log(Object.values(person)) // ["蛙人", 24]
在Es6之前,我们字符串拼接变量,都是使用 + 号来拼接,这样拼接还好,要是拼接html标签就非常的难受,稍不注意就报错符号问题。Es6出现了模板字符串使用 ``,然后${}里面绑定变量,使我们开发非常的便捷。
let name = "蛙人"
console.log(`hello ${name}`)
console.log(`<p>${name}</p>`)
使用对象解构获取对象值非常简洁,不用在向传统那样使用.语法一个一个去获取
const person = {name: "蛙人", age: 24, sex: "male"};
let { age, sex } = person
console.log(age, sex) // 24 male
不再使用字符串split方法,使用扩展运算符可以快速转换为数组。
let str = "abcdefg"
console.log([...str]) // ["a", "b", "c", "d", "e", "f", "g"]
如果只有两种状态的情况强烈推荐使用三目运算,抛弃if else。
let status = 1;
status = status == 1 ? "男" : "女"
??运算符只有前面的值是undefined or null才会执行,工作中有的情况下使用,我们来看一下。
let status = undefined;
let text = status ?? "暂无"
console.log(text) // 暂无
?.运算符这在有时候处理对象时非常有用,看下面案例,person.name返回undefined然后在调用toString这时肯定会报错,这时使用?.运算符就不会产生错误,?.运算符是只有在当值不是undefined时才会调用toString方法。
let person = {}
console.log(person.name.toString()) // 报错
console.log(person.name?.toString()) // undefined
~~双非运算符可以用于向下取整。
console.log(~~4.3) // 4
使用Es6新增方法Object.assign,合并对象如果对象里面有重复的值,则后面覆盖前面,可以接收无限参数。在工作中也是经常使用。
let person = {name: "蛙人", age: 24}
let obj = Object.assign({}, person)
console.log(obj) // {name: "蛙人", age: 24}
当前方法只要数组里面有一个值符合需求,就返回true,否则false。
let list = [1,2,2,2,2,2]
let res = list.some(item => item > 1)
console.log(res) // true
我们之前使用for遍历在判断当前数组里的值是否全符合要求,还要声明一个变量来进行累计,直接使用every当全部满足需求时返回true,否则返回false
let list = [1,2,2,2,2,2]
let res = list.every(item => item > 1)
console.log(res) // false
有时我们场景有需要将一个数组顺序进行打乱。
let list = [1,2,'蛙人', 1, 34, 3, 12]
let res = list.sort(() => Math.random() - 0.5)
console.log(res)
之前我们有100个li元素,都要绑定一个onclick事件,这样性能不怎么好,我们可以通过事件委托实现。
ul.on("click", "li", e => {
....省略 操作
})
let arr = []
console.log(Array.isArray(arr)) // true
console.log(Object.prototype.toString.call(arr) == "[object Array]") // true
伪数组不能调用真数组对象上的方法,所以得将伪数组转换为真数组,获取js元素是伪数组。
document.querySelectAll("div") // NodeList[div, div, div, div]
[...document.querySelectorAll('div')] // 转换为真数组
Array.from(document.querySelectorAll('div')) // 转换为真数组
console.log(+ new Date())
console.log(Date.now())
在Es6之前,我们只知道使用indexOf方法去获取下标,Es6之后还有一个方法哦,如果找到该值返回当前值的下标,找不到返回 -1
let colors = ["red", "blue", "green"]
function getIndex(val) {
return colors.findIndex(i => i == val)
}
getIndex("blue") // 1
在有的情况需要将数组转换为对象,可以这样做。
let person = ["蛙人", 24, "male"]
let obj = {}
person.forEach(item => (obj[item] = item))
let num = val => val % 2 == 0;
num(10) // ture 偶数
num(1) // false 奇数
监测当前页面是否被隐藏,当切换页面时显示true, false就是打开状态。一般在工作用主要用到用户在页面停留了多长时间。
document.addEventListener("visibilitychange", function() {
console.log(document.hidden);
});
把数组里面的假值过滤掉。
let list = ["", false, 1, null, undefined, "蛙人", 24]
let res = item => item.filter(Boolean)
console.log(res(list))
有时我们不想this是这个值,所以就要改变this指向,改变this指向有很多种,箭头函数、bind、apply、call、我这里就演示一种,小伙伴可以根据不同业务场景来选择使用哪种方法!
let person = {name: "蛙人"}
ul.onclick = (function(e) {
console.log(this.name )
}).bind(person)
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
有时我们处理数组时,想直接返回处理完的结果,而不是在重新组合一个数组,这时Map就登场了。
let person = [10, 20, 30]
function fn(item) {
return item + 1
}
let res = person.map(fn)
console.log(res) // [11, 21, 31]
一个系统可以维持5年,10年,甚至20年以上,但是代码和设计模式的生命周期非常短,当对一个解决方案使用不同的方法进行迭代的时候,通常只能维持数月,数日,甚至几分钟的时间
良好的编程习惯涉及到很多方面,但在软件行业内,大多数的公司或组织都不会把良好的编程习惯列为主要关注点。 例如,具有可读性和可维护性的代码比编写好的测试代码或使用正确的工具更有意义,前者的意义在于可以让代码更易于理解和修改。
减少嵌套会让代码可读性更好,同时也能更容易的找出bug,开发人员可以更快的迭代,程序也会越来越稳定。简化代码,让编程更轻松!
Google为了那些还不熟悉代码规范的人发布了一个JS代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。
程序员似乎忘记了软件的真正目的,那就是解决现实问题。您编写的代码的目的是为了创造价值并使现有世界变得更美好,而不是满足您对自我世界应该是什么的以自我为中心的观点。有人说:如果你拥有的只是一把锤子,那么一切看起来都像钉子一样
TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大,并且功能配置灵活简单。另一特点是加载速度非常快的。
函数式编程对应的是命令式编程, 函数式编程的核心当然是对函数的运用. 而高阶函数(Higher-order)是实现函数式编程的基本要素。高阶函数可以将其他函数作为参数或者返回结果。所以JS天生就支持函数式编程
朋友发表了一条说说:入职新公司,从重构代码到放弃”,我就问他怎么了?他说,刚进一家新公司,接手代码太烂,领导让我先熟悉业务逻辑,然后去修复之前项目中遗留的bug,实在不行就重构
页面实现关键词高亮显示:在项目期间遇到一个需求,就是搜索关键词时需要高亮显示,主要通过正则匹配来实现页面关键词高亮显示。在搜索结果中高亮显示关键词:有一组关键词数组,在数组中筛选出符合关键字的内容并将关键字高亮
软件工程学什么? 学计算机,写程序,做软件,当程序员。听说学计算机很辛苦? 是的,IT行业加班现象严重。在计算机世界里,技术日新月异,自学能力是程序员最重要的能力之一。选了这个专业,就要时刻保持好奇心和技术嗅觉,不能只满足于完成课内作业。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!