10个 JavaScript 开发小技巧

数组索引

考虑一个数组[10、9、8、7、6],如果我们想将此数组的值分配给任何变量,则我们的定位方法将是const a = array [0]。如果我们想分配多个变量,那么继续这样做将很繁琐。
代码1: 旧代码做法

    var array1 = [10, 9, 8, 7, 6]; 
    var x = array1[0]; 
    var y = array1[1]; 
    var z = array1[2]; 
    document.write("x = " + x + "<br>"); 
    document.write("y = " + y + "<br>"); 
    document.write("z = " + z + "<br>"); 
</script>

输出:

x = 10
y = 9
z = 8
rest = 7, 6

因此,像这样分配多个变量可以节省时间和代码。但是,应注意,其余部分是剩余部分的集合数组,而不是每个项目都单独使用。

定义函数

想法是将一些常见或重复的任务放在一起并创建一个函数,这样我们就可以调用该函数,而不必为不同的输入一次又一次地编写相同的代码。每个人都必须在JavaScript中使用过类似的功能。

  • 代码1:以常规形式定义功能。
<!DOCTYPE html> 
<html> 
<body> 
    <p>Usual function in JavaScript</p> 
    <p id="demo"></p> 
    <script> 
        function myFunction(p1, p2) { 
            return p1 * p2; 
        } 
        document.getElementById("demo").innerHTML 
                = myFunction(4, 3); 
</script> 
</body> 
</html>

输出:

Usual function in JavaScript
12
  • 代码2:还有另一种方法将函数视为变量,而不是一个非常有用的技巧,但仍然是新事物。将函数保持在变量中,它利用像这样的箭头函数。
<!DOCTYPE html> 
<html> 
<body> 
    <p> 
        Function treated as 
        variable in JavaScript: 
    </p> 
    <p id="demo"></p> 
    <script> 
        var myFunction = (p1, p2) => { 
            return p1 * p2; 
        } 
        document.getElementById("demo") 
            .innerHTML = myFunction(4, 3); 
</script> 
</body> 
</html>

输出:

Function treated as variable in JavaScript
12

在一行中定义功能

现在,这个技巧真的很酷。如果你了解Python,则可能知道lambda函数,该函数的行为与任意函数相同,并且用一行编写。好吧,我们不在JavaScript中使用lambda函数,但是我们仍然可以编写单行函数。

假设我们要计算两个数字a和b的乘积,我们可以在一行脚本中完成。我们不必专门编写return语句,因为这种定义方式已经意味着它将自行返回输出。

<!DOCTYPE html> 
<html> 
<body> 
    <p> 
        Function treated as  
        variable in JavaScript 
    </p> 
    <p id="demo"></p> 
    <script> 
        const productNum = (a, b) => a * b

        document.getElementById("demo") 
            .innerHTML = myFunction(4, 3); 
</script> 
</body> 
</html>

输出:

Function treated as variable in JavaScript
12

布尔值

虽然每种编程语言都只有两个布尔值True和False。JavaScript通过引入使用户能够创建bool的功能使它更进一步。

与True和False不同,它们通常分别称为“ Truthy”和“ Falsy”。为避免混淆,除0,False,NaN,null,“”之外的所有值均默认为Truthy。布尔的这种广泛使用有助于我们有效地检查状况。

<script> 
    const a = !1; 
    const b = !!!0; 
    console.log(a); 
    console.log(b); 
</script>

输出:

<script> 
  False
  True
</script>

过滤布尔值

有时我们可能希望过滤掉所有布尔值,例如从数组中说“ Falsy” 布尔值(0,False,NaN,null,“”),这可以通过结合使用map和filter函数来完成。在这里,它使用Boolean关键字过滤掉Falsy值。

<script> 
  <script> 
arrayToFilter 
    .map(item => { 
        // Item values 
    })

    .filter(Boolean); 
</script>
Input: [1, 2, 3, 0, "Hi", False, True]
Output: [1, 2, 3, "Hi", True]

创建完全空的对象

如果要求在JavaScript中创建一个空的对象,我们的第一个转到方法将在花括号中使用并将其分配给变量。但这不是空白对象,因为它仍然具有JavaScript的对象属性,例如proto和其他方法。

可以通过一种方法来创建没有任何对象属性的对象。为此,我们使用字典并将其proto定义为空值。

<script>    
  /* Using .create() method to create       
    a completely empty object */   
     let dict = Object.create(null);   
       // dict.__proto__ === "undefined"
        </script> 

除非用户另行定义,否则此对象将没有默认的proto或其他属性。

截断数组

<script> 
let arrayToTruncate = [10, 5, 7, 8, 3, 4, 6, 1, 0];

/* Specifying the length till where the 
   array should be truncated */
arrayToTruncate.length = 6;   
console.log(arrayToTruncate) 
</script>

输出:如所见,我们必须知道要以这种方式截断的数组的长度,否则将导致错误。此处的运行时间为O(k),其中k是将在数组中保留的元素数。

[10、5、7、8、3、4]

合并对象

散布运算符(…)的引入使用户可以轻松地合并到一个或多个对象,而先前通过创建一个单独的函数来实现此操作可以实现合并。
代码1:

<script> 
function mergeObjects(obj1, obj2) { 
    for (var key in obj2) { 
        if (obj2.hasOwnProperty(key)) obj1[key] = obj2[key]; 
    } 
    return obj1; 
} 
</script>

代码2:通过使用扩展运算符,可以轻松实现上述任务,并且代码也很清楚。

<script>     
const obj1 = {}; 
// Items inside the object     
const obj2 = {}; 
// Items inside the object     
const obj3 = {...obj1, ...obj2};
</script> 

条件检查

检查和遍历条件是每种编程语言的重要组成部分。在JavaScript中,我们这样做是:
代码1:

<script> 
if (codition) { 
    doSomething(); 
} 
</script>

代码2:但是,按位运算符的使用使检查条件更加容易,并且使代码仅一行:

<script> 
    condition && doSomething(); 
</script>

使用正则表达式替换所有字符

经常出现一种情况,每次出现一个字符或一个子字符串,但不幸的是.replace()方法仅替换一个出现的实例。我们可以通过将regex与.replace()方法配合使用来解决此问题。

<script> 
    var string = "GeeksforGeeks"; // Some string 
    console.log(string.replace(/eek/, "ool")); 
</script>

输出:

“ GoolsforGools”
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。