阅读 58

超实用JS技巧,帮你提升代码质量

1、改写多个if else

某一天我看见了这样一段代码,看的真是心里难受。。。。。我觉得哪里有问题但是有说出来,写的也没毛病啊!!!

if (index === '1') {
	return 'index';
} else if (index === '2') {
	return 'my';
} else if (index === '3') {
	return 'classify';
} else if (index === '4') {
	return 'shopcart';
} else if(index === '5'){
	return 'detail';
} else if (index === '6') {
	return 'shop';
} else {
	return 'other';
}
复制代码

我只想弱弱的说一句,这样写不累吗,为什么不抽离出一个方法呢??他不香吗,然后新来的那位同事就自闭了......

在这里插入图片描述

改写成这样就很舒服

function  judgeFun(index) {
    const list = [
        { key: '1', value: 'index' },
        { key: '2', value: 'my' },
        { key: '3', value: 'classify' },
        { key: '4', value: 'shopcart' },
        { key: '5', value: 'detail' },
        { key: '6', value: 'shop' },
    ]
    for (let i = 0; i < list.length; i++) {
        const item = list[i]
        if (index.includes(item.key)) { return item.value }
    }
    return '暂未找到符合条件的'
}
judgeFun('3')
复制代码

在这里插入图片描述

2、If 多个条件的时候

和上面差不多

if (x === '12' || x === '34' || x === '56' || x === '78') {
    //do something
}


//改写后
if (['12', '34', '56', '78'].includes(x)) {
   //do something
}
复制代码

3、if else短的时候建议使用三目运算符(逻辑复杂尽量少用)

if (x === 'xxxxxx') {
    x = true
} else {
    x = false
}

//改写后
x === 'xxxxxx' ? true : false
复制代码

三目运算符性能高,代码量少。最好在简单逻辑分支使用,在复杂逻辑分支避免使用

// 简单逻辑可以使用三目运算符
let data= typeof window !== "undefined" ? window : this

// 复杂逻辑不适合使用
let ok = isString ? (isTooLang ? 2 : (isTooShort ? 1 : 0)) : -1
复制代码

4、Null、Undefined、空检查、默认赋值

if (x !== null || x !== undefined || x !== '') {
    let y = x
}

// 改写后
let y = x || ''
复制代码

5、更好的for 循环迭代

for (var i = 0; i < list.length; i++)

// 改写后
for (let i in list) 或  for (let i of list)
//或者
function forList(ele, index, array) {
  console.log(`test--${index}--${ele}`)
}

//或者
[1, 2, 3].forEach(list)
[1, 2, 3].map(list)
复制代码

6、判断对象是否是空对象

有时候看见网上很多人都是这样判断的,这种方式也可以但是很不严谨

JSON.stringify(obj) === '{}'
复制代码

我们可以这样

Object.keys(obj).length === 0     
//或者
!Object.keys(obj).length  
复制代码

在这里插入图片描述

7、给多个变量赋值

let a, b, c;
a = 1
b = 2
c = 3

//改写后
let [a, b, c] = [1, 2, 3]
复制代码

8、与 (&&) 短路运算

**如果你只有当某个变量为 true 时调用一个函数,那么你可以使用与 (&&)短路形式书写
**

if (isLogin) {
    navigateToHome()
}

//改写后
isLogin && navigateToHome()
复制代码

React 中想要有条件地渲染某个组件时,这个与 (&&)短路写法比较有用

<div> { this.state.isLoading && <Loading /> } </div>
复制代码

9、找出数组中的最大和最小数字

const arr = [2, 8, 15, 4]
Math.max(...arr) // 15
Math.min(...arr) // 2
复制代码

10、合并数组

let arr1 = [20, 30]
let arr2 = arr1.concat([60, 80])
// [20, 30, 60, 80]


//改写后
let arr2 = [...arr1, 60, 80]
// [20, 30, 60, 80]
复制代码

11、比较返回

let test
function checkReturn() {
    if (!(test === undefined)) {
        return test;
    } else {
        return testFun('test')
    }
}
var data = checkReturn()
console.log(data); //输出test的值
function testFun(val) {
    console.log(val)
}

// 改写后
function checkReturn() {
    return test || testFun('test')
}
复制代码

12、用三元运算符解决函数调用

function test1() {
  console.log('test1')
}
function test2() {
  console.log('test2')
}
var test3 = 1
if (test3 == 1) {
  test1()
} else {
  test2()
}


// 改写后
(test3 === 1 ? test1 : test2)()
复制代码

13、改写switch语句

这部分和刚开始的if else 语句一样,都是过长的时候我们改写

switch (data) {
  case 1:
    test1()
  break;

  case 2:
    test2()
  break;

  case 3:
    test()
  break;
  // 下面太多省略
}


//改写后
var data = {
  1: test1,
  2: test2,
  3: test
};

data[anything] && data[anything]()
复制代码

14、Object.entries():帮助我们将对象转为对象数组

const data = { test1: '12', test2: '34', test3: '56' }
const arr = Object.entries(data)
console.log(arr)

/** 输出:
[ [ 'test1', '12' ],
  [ 'test2', '34' ],
  [ 'test3', '56' ]
]
**/
复制代码

15、Object.values()

**ES8 中引入的一项新功能,它执行与 Object.Entry () 类似的功能,但没有关键部分
**

const data = { test1: '12', test2: '34' }
const arr = Object.values(data)
console.log(arr)

/** 输出:
[ '12', '34']
**/
复制代码

16、根据if判断条件调用不同方法

if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  return '执行了这里,前面的都不成立'
}



// 改写后
var types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};

var func = types[type];
(!func) && '执行了这里,前面的都不成立'; func();
复制代码

17、数组类型常用方法

concat() 连接两个或更多数组 splice(index,len,[item]) 删除元素,并向数组添加一个新元素。

map()、filter()、reduce()、some()、forEach()循环遍历数组,并处理数组,返回一个新数组

slice() 从某个已有的数组返回选定的元素 

join() 把数组的所有元素放入一个字符串,元素通过指定的分隔符进行分割 push() 在数组后添加元素,并返回新的长度 

unshift() 在数组最前添加元素 

pop() 删除数组最后一个元素并返回该元素的值 

reverse() 颠倒数组中元素的顺序 shift() 删除并返回数组中第一个元素 

sort() 对数组元素进行排序 

toSource() 返回该对象的源代码 

toString() 把数组转换为字符串并返回结果 

toLocaleString() 把数组转换为本地数组,并返回结果 

valueOf() 返回对象的原始值

18、深拷贝多级对象

为了深拷贝一个多级对象,我们要遍历每一个属性并检查当前属性是否包含一个对象。如果当前属性包含一个对象,然后要将当前属性值作为参数递归调用相同的方法(例如,嵌套的对象)。

我们可以使用JSON.stringify()和JSON.parse(),如果我们的对象不包含函数、undefined、NaN 或日期值的话。 如果有一个单级对象,例如没有嵌套的对象,那么我们也可以使用扩展符来实现深拷贝。 

如果你的对象包含 function, undefined or NaN 值的话,JSON.parse(JSON.stringify(obj)) 就不会有效。因为当你 JSON.stringify 对象的时候,包含 function, undefined or NaN 值的属性会从对象中移除。因此,当你的对象只包含字符串和数字值时,可以使用JSON.parse(JSON.stringify(obj))

let obj = {x: 20, y: {z: 30}};

const makeDeepClone = (obj) => {
  let newObject = {};
  Object.keys(obj).map(key => {
    if(typeof obj[key] === 'object'){
      newObject[key] = makeDeepClone(obj[key]);
    } else {
      newObject[key] = obj[key];
    }
  });
 return newObject;
}
const cloneObj = makeDeepClone(obj);


//改写后
const cloneObj = JSON.parse(JSON.stringify(obj));
//Shorthand for single level object
let obj = {x: 20, y: 'hello'};
const cloneObj = {...obj};
复制代码

20、获取字符串中的字符

let str = 'jscurious.com';

str.charAt(2); // c
//改写后
str[2]; // c
复制代码
文章分类
前端
文章标签