十五条JavaScript编程技巧

Javascript栏目放送十五条Javascript编程技巧。

本文目的

大多数编程语言都足够开放，以允许程序员以多种方式得到类似的结果。Javascript 也是如此，使用 Javascript，我们通常可以通过多种方法来达到相似的结果，虽然有时会造成混淆。

其中一些用法比其他方法要好，而这些就是我要分享的。我将在本文中一一列举，我敢肯定，您在阅读本文时会发现，在很多地方您和我的做法是相同的。

1. 使用模板字符串

使用+运算符拼接字符串来构建有意义的字符串，这是过时的做法。此外，将字符串与动态值（或表达式）连接可能会导致计算或表达错误。

let name = &＃39;Charlse&＃39;;let place = &＃39;India&＃39;;let isPrime = bit => {  return (bit === &＃39;P&＃39; ? &＃39;Prime&＃39; : &＃39;Nom-Prime&＃39;);
}// 使用`+`运算符的字符串连接let messageCOncat= &＃39;Mr. &＃39; + name + &＃39; is from &＃39; + place + &＃39;. He is a&＃39; + &＃39; &＃39; + isPrime(&＃39;P&＃39;) + &＃39; member.&＃39; 

模板字面量（或模板字符串）允许嵌入表达式。它具有独特的语法，该字符串必须用反引号（``）括起来。模板字符串提供了可以包含动态值的占位符，以美元符号和大括号标记（${expression}）。

以下是一个演示它的例子，

let name = &＃39;Charlse&＃39;;let place = &＃39;India&＃39;;let isPrime = bit => {  return (bit === &＃39;P&＃39; ? &＃39;Prime&＃39; : &＃39;Nom-Prime&＃39;);
}// 使用模板字符串let messageTemplateStr = `Mr. ${name} is from ${place}. He is a ${isPrime(&＃39;P&＃39;)} member.`console.log(messageTemplateStr); 

2. isInteger

有一种更简洁的方法可以知道值是否为整数。Javascript 的 Number API 提供了名为 isInteger() 的方法来实现此目的。这是非常有用的，最好了解一下。

let mynum = 123;let mynumStr = "123";console.log(`${mynum} is a number?`, Number.isInteger(mynum));console.log(`${mynumStr} is a number?`, Number.isInteger(mynumStr)); 

输出结果：

3. 值为数字

您是否曾经注意到，即使输入框的类型为数字，event.target.value仍始终返回字符串类型的值？

请参见下面的示例。我们有一个简单的数字类型的文本框。这意味着它仅接受数字作为输入，它具有事件处理程序来处理按键事件。

在事件处理程序中，我们使用event.target.value取出值，但是它返回一个字符串类型值。现在，我将不得不将其解析为整数。如果输入框接受浮点数（例如 16.56）怎么办？使用 parseFloat() 然后呢？啊，我不得不面对各种各样的困惑和额外的工作！

function trackChange(event) {   let value = event.target.value;   console.log(`is ${value} a number?`, Number.isInteger(value));
} 

请改用event.target.valueAsNumber，它以数字形式返回值。

let valueAsNumber = event.target.valueAsNumber;console.log(`is ${value} a number?`, Number.isInteger(valueAsNumber)); 

4. 使用 && 运算符化简表达式

让我们考虑一个具有布尔值和函数的情况。

let isPrime = true;const startWatching = () => {    console.log(&＃39;Started Watching!&＃39;);
} 

像下面这样，通过检查布尔值来确定是否调用函数，代码太多了。

if (isPrime) {
    startWatching();
} 

能否通过 AND（&&）运算符使用简写形式？是的，完全可以避免使用 if 语句。酷吧！

isPrime && startWatching(); 

5. 使用 || 运算符处理默认值

如果您想为变量设置默认值，可以使用 OR（||）运算符轻松实现。

let person = {name: &＃39;Jack&＃39;};let age = person.age || 35; // 如果 age 未定义，则将值设置为 35console.log(`Age of ${person.name} is ${age}`); 

6. 获取随机项

生成随机数或从数组中获取随机项是非常有用且方便的方法。我已经在我的许多项目中多次看到它们了。

从数组中获取随机项，

let planets = [&＃39;Mercury &＃39;, &＃39;Mars&＃39;, &＃39;Venus&＃39;, &＃39;Earth&＃39;, &＃39;Neptune&＃39;, &＃39;Uranus&＃39;, &＃39;Saturn&＃39;, &＃39;Jupiter&＃39;];let randomPlanet = planets[Math.floor(Math.random() * planets.length)];console.log(&＃39;Random Planet&＃39;, randomPlanet); 

通过指定最小值和最大值，在一个范围内生成一个随机数，

let getRandom = (min, max) => {    return Math.round(Math.random() * (max - min) + min);
}console.log(&＃39;Get random&＃39;, getRandom(0, 10)); 

7. 函数默认参数

在Javascript中，函数实参（或形参）就像该函数的局部变量一样。调用函数时，您可以传递也可以不传递值。如果您不为参数传递值，则该值将是undefined，并且可能会导致一些多余的副作用。

有一种在定义参数时将默认值传递给函数参数的简单方法。在以下示例中，我们将默认值Hello传递给greetings函数的参数message。

let greetings = (name, message=&＃39;Hello,&＃39;) => {    return `${message} ${name}`;
}console.log(greetings(&＃39;Jack&＃39;));console.log(greetings(&＃39;Jack&＃39;, &＃39;Hola!&＃39;)); 

8. 必需的函数参数

基于默认参数的特性，我们可以将参数作为必需参数。首先定义一个函数以使用错误消息抛出错误，

let isRequired = () => {    throw new Error(&＃39;This is a mandatory parameter.&＃39;);
} 

然后将函数作为必需参数的默认值。请记住，在调用函数时如果为参数传递值，那么默认值会被忽略。但是，如果参数值为“undefined”，则默认值会被使用。

let greetings = (name=isRequired(), message=&＃39;Hello,&＃39;) => {    return `${message} ${name}`;
}console.log(greetings()); 

在上面的代码中，name将是未定义的，因此将会尝试使用默认值，即 isRequired() 函数。 它将引发如下所示的错误：

阅读有关此主题的更多信息 from here.

12. 交换变量

现在，使用我们刚刚学习的解构，变量交换将会变得非常容易。

let fire = &＃39;&＃39;;let fruit = &＃39;&＃39;;

[fruit, fire] = [fire, fruit];console.log(fire, fruit); 

13. isArray

确定输入是否为数组的另一种有用方法。

let emojis = [&＃39;&＃39;, &＃39;⏲️&＃39;, &＃39;&＃39;, &＃39;&＃39;];console.log(Array.isArray(emojis));let obj = {};console.log(Array.isArray(obj)); 

14. undefined 和 null

undefined指的是还没有给变量定义值，但已经声明了该变量。

null本身是一个空且不存在的值，必须将其显式赋值给变量。

undefined和null并不严格相等，

undefined === null // false 

阅读有关此主题的更多信息 from here.

15. 获取查询参数

window.location对象具有许多实用方法和属性。使用这些属性和方法，我们可以从浏览器 URL 中获取有关协议、主机、端口、域等的信息。

下面是我发现的一个非常有用的属性：

window.location.search 

search属性从位置 url 返回查询字符串。以这个 url 为例：https：//tapasadhiary.com？project = js。 location.search将返回？project = js

我们可以使用另一个名为URLSearchParams的有用接口以及location.search来获取查询参数的值。

let project = new URLSearchParams(location.search).get(&＃39;project&＃39;); 

输出结果：js

阅读有关此主题的更多信息 from here.

相关免费学习推荐：Javascript（视频）

以上就是十五条 Javascript 编程技巧的详细内容，更多请关注 第一PHP社区 其它相关文章！