15个JavaScript速记技巧 (上)

158 阅读3分钟

强大且广受欢迎的编程语言 JavaScript 具有庞大的内置函数库,可用于执行各种任务。

本文涵盖了每个开发人员都应该知道的 15 个 JavaScript 特性,无论是新手还是经验丰富的开发人员,这些功能都会派上用场。接下来让我们来讨论一下这 15 个重要的 JavaScript 特性(以下均属个人观点,请各位轻喷)。

1. repeat()

在 JavaScript 中多次重复一个字符串,jym可以使用普通方法和便捷方法来实现。

普通方法:

可以使用循环多次重复一个字符串,以下是如何使用循环执行此操作的示例for

function  repeatString( string , num ) { 
  let result = '' ; 
  for (let i = 0;i < num; i++) {
    result+=string; 
  }
  return result
}

console.log(repeatString('你好' , 5));  // 输出:"你好你好你好你好你好"

便捷方法:repeat()

这里我们可以使用该repeat()方法多次重复一个字符串。

repeat() 仅支持现代浏览器,因此必须使用普通方法来支持旧浏览器。

console.log('你好'.repeat(5));  // 输出:'你好你好你好你好你好'

2. concat()

在 JavaScript 中,jym可以使用普通方法和便捷方法来实现合并两个或多个数组。

普通方法:

以下是如何使用循环执行此操作的示例for

  let array1 = [ 10 , 20 , 30 ]; 
  let array2 = [ 40 , 50 , 60 ]; 
  let mergedArray = []; 
  
  for (let i = 0; i < array1.length; i++) { 
    mergedArray.push(array1[i])
  } 
  
  for ( let i = 0; i < array2.length; i++) { 
    mergedArray.push(array2[i])
  }
  console.log(mergedArray)    // 输出:[10, 20, 30, 40, 50, 60]

便捷方法:concat() / reduce()

对于便捷方法,jmm 可以使用concat()...reduce()方法。concat()方法 和...通过将第二个数组的元素附加到第一个数组的末尾来组合两个或多个数组的元素。

以下是如何使用contact(),...方法的示例:

    // concat()
    let array1 = [ 10 , 20 , 30 ]; 
    let array2 = [ 40 , 50 , 60 ]; 
    let mergedArray = array1.concat(array2);
   console.log(mergedArray)  // 输出:[10, 20, 30, 40, 50, 60] 

    // ... 
    let array1 = [ 10 , 20 , 30 ]; 
    let array2 = [ 40 , 50 , 60 ]; 
    let mergedArray = [...array1, ...array2];

    console.log(mergedArray) ;  // 输出:[10, 20, 30, 40, 50, 60]

如果想以不同的方式组合数组,可以使用 方法reduce()

例子:

    // reduce() 
    let array1 = [ 10 , 20 , 30 ]; 
    let array2 = [ 40 , 50 , 60 ]; 
    let mergedArray = array1.reduce((acc, val) => acc.concat(val), array2); 

    console.log(mergedArray) ;  // 输出:[10, 20, 30, 40, 50, 60]

3.函数接受的参数

您可以通过 N 种不同的方式找到函数接受的参数数量。

方法一:

根据函数定义中命名参数的数量,length函数的属性返回函数期望接收的参数数量。

function  myFunction ( a, b, c ) { 
  // function body
} 

console.log(myFunction.length)  // 输出:3

方法二:

传递给函数的参数存储在一个名为 的对象中argument,它看起来像一个数组。使用length 参数对象的属性,我们可以找出有多少参数传递给函数。

由于对象arguments不是真正的数组,因此并非所有数组方法都可以访问。如果你希望在对象上使用数组方法,请使用该Array.from()函数将对象转换为实际数组。arguments

function myFunction (a, b, c) { 
  console .log (arguments.length);  // 输出:3
 } 

myFunction ( 1 , 2 , 3 );

注意!不能使用该arguments 对象来计算函数期望从函数外部获得多少参数,因为它只能在函数内部访问。length然后需要使用该属性,就像在方法 1 中一样。

4. JavaScript 中的循环

JavaScript 提供了几种类型的循环来重复重复代码块。

一些常用的循环示例:

for循环

自增或自减表达式、循环条件和 for 循环的变量是它的三个主要部分。只要条件为真,循环就会一直运行。

举一个栗子:从 1 计数到 5 的 for 循环示例:

for (let i = 1; i <= 5 ; i++) {
  console.log(i)
}

输出:

1 
2 
3 
4 
5

for-in 循环

您可以使用循环遍历对象的属性for-in

在此示例中,我们使用循环遍历对象的属性for-in

举一个栗子:

let obj = {a: 1 , b: 2 , c: 3 }; 
for (let property  in  object ) { 
  console.log( property + ": " + object [ property ]); 
}

输出:

a:1
b:2
c:3

for循环

如果可迭代对象是数组或字符串,您可以使用循环for-of来迭代这些值。

使用循环迭代元素数组for-of

let arr = [ 1 , 2 , 3 ]; 
for (let element of array) {  
    console.log(element);  
}

输出:

1 
2 
3

5. 字符串转数组

我们可以使用该split 方法在 JavaScript 中将字符串转换为数组。此方法使用分隔符字符串或正则表达式将字符串拆分为子字符串。

以下示例显示如何使用 方法将字符串转换为数组split

let string = "apple,banana,orange";  
let array = string.split(",");  
console.log(array); // prints ["apple", "banana", "orange"]

使用便捷方式,您可以获得相同的结果:

let string = "apple,banana,orange";  
let array = [...string.split(",")];  
console.log(array); // prints ["apple", "banana", "orange"]

您可以使用for loop. 使用此方法,您可以通过将每个字符推入其自己的数组来将字符串转换为数组。

举一个栗子:

let string = "apple,banana,orange";  
let array = [];  
for (let i = 0; i < string.length; i++) {  
array.push(string[i]);  
}  
console.log(array); // prints ["a", "p", "p", "l", "e", ",", "b", "a", "n", "a", "n", "a", ",", "o", "r", "a", "n", "g", "e"]

在此方法中,不是将字符串拆分为子字符串,而是字符串的每个字符都是数组中的一个单独元素。split 方法允许您根据分隔符分隔字符串,如前两个示例所示。