JavaScript的编码技巧
小编给大家分享一下JavaScript的编码技巧，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
目前创新互联公司已为千余家的企业提供了网站建设、域名、网页空间、网站托管、服务器托管、企业网站设计、新区网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
注意：下面的代码对比没有绝对的正确和错误，有些写法的使用场景会比较单一，根据大家的习惯和喜好判断即可，如果有更好或不同意见欢迎留言交流哦～
1. 短路操作：
当我们遇到这样的情况的时候，你会是
const res1 = item.a ? item.a : item.b // 看起来很是简洁const res2 = item.a ? item.b : item.a // 看起来很是简洁
还是利用js逻辑运算来实现呢？
const res1 = item.a || item.b;const res1 = item.a && item.b;
2. 通过条件判断给变量赋值布尔值的正确姿势：
当我们需要比较单一的值来获取结果的时候，利用直接的运算，要不if判断要简洁的多～
let res;if(a === '余光'){
res = true }else{
res = false;}// good?const res = a === '余光'3. 在if中判断数组长度不为零的正确姿势：
场景：如果数组内存在元素，则进行操作：
// badif (arr.length !== 0) {
// todo}// goodif (arr.length) {
// todo}以此类推，当我们需要判断数组的长度为为空时：
if(!arr.length){
// todo}4. 使用includes简化if判断：
场景：如果参数等于1、2、3、4，就进行下一步操作
写第一版代码：
if(a === 1 || a === 2 || a === 3 || a ===4){
// todo}看完感觉异常的头疼，遂修改为：
if([1,2,3,4].includes(a)){
// todo}5. 使用some判断是否存在符合条件的值：
场景：寻找是否存在价格小于n的商品
const itemList = [
{name: '手机', price: 1000},
{name: '手机壳', price: 10},
{name: '帽子', price: 50},]function checkData(n){
for(let i = 0; i < item.length; i++){
if(item.price < n){
return true;
}
}
return false;}方法写完了，但既然js为我们提供了那么多数组的方法，用起来：
const itemList = [
{name: '手机', price: 1000},
{name: '手机壳', price: 10},
{name: '帽子', price: 50},]const checkData = (n) => itemList.some(item => item.price < n)再次优化
const checkData = (n, itemList) => itemList.some(item => item.price < n)
6. 使用filter方法过滤原数组，形成新数组
情景：剔除某些不需要的元素，例如每一条数据的id是之后操作的必须数据，为了剔除缺陷数据，我们会这么做：
const data = [
{ name: '手机', price: 1000, id: 1 },
{ name: '手机壳', price: 10, id: 2 },
{ name: '帽子', price: 50, id: '' },]// badlet newArr = []for (let i = 0; i < data.length; i ++) {
if (data.id) {
newArr.push(arr[i])
}}掌握“过滤”思想，我们这样处理：
const afterData = data.filter(item => item.id);
7. 使用map对数组内的元素进行批量处理：
情景：在涉及到价格的交互中，我们拿到的价格字段通常是以分为单位的，我们要怎么做展示呢？
const data = [10000, 20000, 980000]const afterData = data.map(price => price / 100)
8. 解构数组进行变量值的替换
情景：需要将两个值进行交换
// badlet a = 1, b = 2let temp = a a = b b = temp// goodlet a = 1, b = 2[b, a] = [a, b]
9. 解构融到代码中：
情景：获取对象中的某个元素，并设置默认值
写第一版代码：
// badsetForm (person) {
this.name = person.name this.age = person.age
}// goodsetForm ({name = '余光', age}) {
this.name = name this.age = age
}10. 多个方法合体时都能做什么？（举例一）
这是最后一条代码简洁思路，拿一个具体的场景距离，抛砖引玉，欢迎大家在评论区留言～
场景：
前端拿到的数据是
data = [
{ id: 1, name: '一级标题-1' },
{ id: 2, name: '一级标题-2' },
{ id: 3, name: '二级标题-1', pid: 1 },
{ id: 3, name: '一级标题-3' },
{ id: 3, name: '二级标题-2', pid: 2 },]我们需要形成及联关系，如：
needData = [
{
id: 1,
name: '一级标题-1',
children: [
{ id: 3, name: '二级标题-1', pid: 1 }
]
},
{
id: 2,
name: '一级标题-2',
children: [
{ id: 5, name: '二级标题-2', pid: 2 }
]
},
{ id: 4, name: '一级标题-3' },]于是我借助数组提供的多个api：
newList = data.reduce((result, item, _, arr) => {
if (!item.pid) {
return [...result, item];
}
const parentItem = arr.find(({ id }) => id === item.pid);
if (parentItem) {
const { children = [] } = parentItem;
parentItem.children = [...children, item];
}
return result;}, []);思路：
寻找存在父级的元素
将它发到正确的位置上
返回所有没有父级字段（pid）的数据
如果大家有更多类似的思路和操作请一定要留言哦
看完了这篇文章，相信你对“JavaScript的编码技巧”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
分享文章：JavaScript的编码技巧
文章转载：http://pwwzsj.com/article/iipspd.html
