Improve your JS skills with theses tips

文章正文还需 5 分钟

在本文中，我将分享一些有关JS的技巧，这些技巧可以提高您的JS技术

检查字符串是否存在

你可能是这样在写

js 复制代码

if (value === 'a' || value === 'b' || value === 'c') { ... }

includes

js 复制代码

if (['a', 'b', 'c'].includes(value)) { ... }

通过includes判断更为简洁

!!

这个！操作符可以使用两次
! ！可以将任何变量转换成布尔值(比如布尔函数) ，当你需要在处理它之前检查一些值时，非常方便

js 复制代码

const toto = null

!!toto // false
Boolean(toto) // false

if (!!toto) { }

扩展

js 复制代码

var foo;  
alert(!foo);//undifined情况下，一个感叹号返回的是true;  
alert(!goo);//null情况下，一个感叹号返回的也是true;  
var o={flag:true};  
var test=!!o.flag;//等效于var test=o.flag||false;  
alert(test);

这段例子，演示了在undifined和null时，用一个感叹号返回的都是true,用两个感叹号返回的就是false,所以两个感叹号的作用就在于，如果明确设置了变量的值（非null/undifined/0/""等值),结果就会根据变量的实际值来返回，如果没有设置，结果就会返回false

js 复制代码

grep: function( elems, callback, inv ) {  
        var ret = [], retVal;  
        inv = !!inv;  
  
        // Go through the array, only saving the items  
        // that pass the validator function  
        for ( var i = 0, length = elems.length; i < length; i++ ) {  
            retVal = !!callback( elems[ i ], i );  
            if ( inv !== retVal ) {  
                ret.push( elems[ i ] );  
            }  
        }  
  
        return ret;  
}

这是jquery中一个比较经典的例子
在使用grep函数的时候，如果给出了第三个参数且非null/undefined/0""/等值，则inv为 true，否则为false。这样做的目的就是保证inv和retVal的值都只能在true/false中取，而非其它值，为后续判断提供便利，更多详细JavaScript中两个感叹号的原理与用法分析

可选链

在处理对象之前，您需要经常检查对象的某些属性是否存在。所以很多开发人员使用这个:

js 复制代码

const toto = { a: { b: { c: 5 } } }

if (!!toto.a && !!toto.a.b && !!toto.a.b.c) { ... }

可以使用可选链操作符，以避免像上面那样使用多个检查器

js 复制代码

const toto = { a: { b: { c: 5 } } }

if (!!toto.a?.b?.c) { ... } 

// 如果键不存在，它将返回undefined
const test = toto.a?.b?.c?.d // undefined

在返回 if 中的值时，避else

这种情况我见过很多次:

js 复制代码

if (...) { 
  return 'toto'
} else {
  return 'tutu'
}

如果你的 If 返回值，你可以用以下代码替换上面的代码:

js 复制代码

if (...) { 
  return 'toto'
}

return '测试'

我从本文中得到的最好建议是，作为初学者，我们使用了大量forEach函数，但JS提供了许多替代方法，而且这些函数是FP(函数式编程)。

Filter

如上所述，它允许我们根据您的条件过滤数组中的一些值

js 复制代码

const toto = [1, 2, 3, 4]

const evenValue = toto.filter(currentValue => {
   return currentValue % 2 == 0 // 返回模等于0的每一项
}) // [2, 4]

Map

当你需要将你的项目中的所有项目转换成另一个项目时使用映射，例如，如果你想转换所有的数字并将它们乘以2

js 复制代码

const toto = [1, 2, 3, 4]

const valueMultiplied = toto.map(currentValue => {
   return currentValue * 2 // 每一项乘以2,并返回
}) // [2, 4, 6, 8]

reduce

例如，如果我想把数组中的所有数字求和成一个值，并返回

js 复制代码

const toto = [1, 2, 3, 4]

const sum = toto.reduce((accumulator, currentValue) => {
   return accumulator += currentValue
}, 0) // 10

求数组项最大值

js 复制代码

var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});

数组去重

js 复制代码

var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);

数组转对象

js 复制代码

var streams = [{name: '技术', id: 1}, {name: '设计', id: 2}];
var obj = streams.reduce((accumulator, cur) => {accumulator[cur.id] = cur; return accumulator;}, {});

求字符串中字母出现的次数

js 复制代码

const str = 'sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';
const res = str.split('').reduce((accumulator, cur) => {accumulator[cur] ? accumulator[cur]++ : accumulator[cur] = 1; return accumulator;}, {});

扁平一个二维数组
var arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
var res = arr.reduce((x, y) => x.concat(y), []);

Every

需要确保你的所有物品都符合一个条件！

js 复制代码

const toto = [ 2, 4 ]

if (toto.every(val => val % 2 === 0)) { } // true

const falsyToto = [ 2, 4, 5 ]

falsyToto.every(val => val % 2 === 0) // false

some

希望确保数组至少有一个符合条件

js 复制代码

const toto = [ 2, 14, 5 ]

toto.some(val => val % 2 === 0) // return true

以上部分来自Improve your JS skills with theses tips

翻译:羊先生