返回基础:JavaScript运算符,条件和函数

JavaScript运算符,条件和函数

在研究使用JavaScript创建程序之前,必须牢牢掌握基础知识。 在本文中,我们将介绍一些最重要的JavaScript基本概念,这些基本概念将使您可以开始编写自己的程序:运算符,条件语句和函数。

在开始之前,您应该了解基本的JavaScript语法,注释,数据类型以及将值分配给变量。 您可以在JavaScript变量和数据类型新手指南中学习或查看所有这些信息。

免责声明:本指南适用于JavaScript和编程的完整初学者。 这样,将以简化的方式介绍许多概念,并使用严格的ES5语法。

准备? 让我们开始吧!

JavaScript运算子

JavaScript 运算符是用于对数据执行不同操作的符号。 JavaScript中有几种类型的运算符,在本课程中,我们将学习最常见的运算符:赋值运算符,算术运算符,比较运算符和逻辑运算符。

赋值运算符

赋值运算符以其最基本的形式将数据应用于变量。 在此示例中,我将字符串"Europe"分配给变量continent

var continent = "Europe";

分配用等号( = )表示。 尽管还有其他类型的赋值运算符, 您可以在此处查看 ,但这是最常见的。

您可以使用console.log()函数或使用Console来测试本文中的所有示例。

算术运算符

像所有编程语言一样,JavaScript像计算器一样具有内置的数学功能。 算术运算符对数字或代表数字的变量执行数学计算。 您已经知道其中最常见的-加,减,乘和除。

加成

用加号( + )表示的加法运算符将两个值相加并返回总和。

var x = 2 + 2; // x returns 4
减法

用减号( - )表示的减法运算符将减去两个值并返回差值。

var x = 10 - 7; // x returns 3
乘法

用星号( * )表示的乘法运算符将两个值相乘并返回乘积。

var x = 4 * 5; // x returns 20

用正斜杠( / )表示的除法运算符将除以两个值并返回商。

var x = 20 / 2; // x returns 10
模量

模数运算符稍微不那么熟悉,它在除法后返回余数,并用百分号( % )表示。

var x = 10 % 3; // returns 1

3乘以10乘以3,剩下1

增量

使用增量运算符将数字加一,并以双加号( ++ )表示。

var x = 10;
x++; // x returns 11

这发生在分配后。 也可以写++x; 这发生在分配之前。 相比:

var x = 10;
var y = x++;
// y is 10, x is 11

和:

var x = 10;
var y = ++x;
// y is 11, x is 11
减量

减号运算符将数字减一,并用双减号( -- )表示。

var x = 10;
x--; // x returns 9

如上所述,也可以写--x;

比较运算符

比较运算符将评估两个值的相等性或差异,并返回truefalse 。 它们通常用于逻辑语句中。

等于

在JavaScript中,两个等号( == )表示相等 。 当您初次学习时,很容易在单,双和三等号之间混淆,但是请记住,单等号将值应用于变量,并且从不评估相等性。

var x = 8;
var y = 8;

x == y; // true

这是一种松散的相等类型,即使使用字符串而不是数字也将返回true

var x = 8;
var y = "8";

x == y; // true
严格平等

三个等号( === )在JavaScript中表示严格相等

var x = 8;
var y = 8;

x === y; // true

与常规的equal( == )相比,这是确定相等性的一种更常用和更准确的形式,因为它需要类型和值都相同才能返回true

var x = 8;
var y = "8";

x === y; // false
不平等

感叹号后跟等号( != )表示在JavaScript中不相等 。 这与==完全相反,只会测试值,而不是类型。

var x = 50;
var y = 50;

x != y; // false

它将将此字符串和数字视为相等。

var x = 50;
var y = "50";

x != y; // false
严格不等于

感叹号后跟两个等号( !== )表示在JavaScript中严格不等于 。 这与===完全相反,将同时测试value和type。

var x = 50;
var y = 50;

x !== y; // false

它将将此字符串和数字视为不相等。

var x = 50;
var y = "50";

x !== y; // true
少于

另一个熟悉的符号, 小于< )将测试左侧的值是否小于右侧的值。

var x = 99;
var y = 100;

x < y; // true
小于或等于

小于或等于<= )与上面相同,但是equal还将求值为true

var x = 100;
var y = 100;

x <= y; // true
比...更棒

大于> )将测试左侧的值是否大于右侧的值。

var x = 99;
var y = 100;

x > y; // false
大于或等于

大于或等于>= )与上述相同,但equal也将计算为true

var x = 100;
var y = 100;

x >= y; // true

逻辑运算符

逻辑语句通常会使用我们刚刚学习的比较运算符来确定是true还是false值。 这些语句中可以使用三个附加运算符来测试truefalse

在继续条件语句之前,了解这些运算符很重要。

由两个符号(表示&& )。 如果&&左右两边的语句都为true ,则整个语句返回true

var x = 5;

x > 1 && x < 10; // true

在上面的示例中, x等于5 。 用我的逻辑语句,我正在测试x是否大于1且小于10

var x = 5;

x > 1 && x < 4; // false

上面的示例返回false因为即使x大于1x也不小于4

要么

由两个管道( || )表示。 如果||左右的任何一个陈述 如果计算结果为true ,则该语句将返回true

var x = 5;

x > 1 || x < 4; // true

x不小于4 ,但大于1 ,因此该语句返回true

最后一个逻辑运算符 ,感叹号(代表! ),它返回false ,如果语句是true ,而true如果该语句是false 。 如果存在一个值(该值不等于false ),它也会返回false 。 花一点时间消化一下……

var x = 99;

!x // false

由于x存在并且具有值, !x将返回false 。 我们还可以测试一个布尔值–如果该值为false ,我们可以使用! 运算符,它将返回true

var x = false;

!x // true

这个运算符现在看起来似乎令人困惑,但是当我们进入下一部分-条件语句时,它会变得有意义。

运算符优先级

在学校学习数学时,您可能已经学会了PEMDAS( 请打扰我亲爱的萨莉姨妈 )的缩写来学习操作顺序。 这代表“括号,指数,乘法,除法,加法,减法” –必须执行数学运算的顺序。

除包含更多类型的运算符外,该概念也适用于JavaScript。 有关运算符优先级的完整表,请查看MDN上的参考

在我们学到的运算符中,这是从最高优先级到最低优先级的正确操作顺序。

  • 分组( ()
  • 不是( !
  • 乘法( *
  • 部门( /
  • 模量( %
  • 加法( +
  • 减法( -
  • 小于( <
  • 小于或等于( <=
  • 大于( >
  • 大于或等于( >=
  • 等于( =
  • 不等于( !=
  • 严格等于( ===
  • 严格不等于( !==
  • 和( &&
  • 或( ||
  • 分配( =

举例来说,您期望x的值在以下片段中如何?

var x = 15 - 5 * 10;

如果您说-35好,那就好。 产生此结果的原因是,乘法运算符优先于减法运算符,并且JavaScript引擎在从15减去结果之前首先计算5 * 10

要更改运算符优先级,可以使用括号。

var x = (15 - 5) * 10;
// x is 100

条件语句

如果您曾经遇到过JavaScript代码块,则很可能已经注意到了熟悉的英语单词ifelse 。 这些条件语句 ,或执行基于一个条件是代码块truefalse

我们刚刚学习的所有比较和逻辑运算符在评估这些语句时将派上用场。

可以将条件语句视为流程图,根据不同的结果将产生不同的结果。

如果别的

如果

如果始终使用关键字if编写if语句 ,后跟括号( () )和要用大括号( {} )执行的代码。 这将被写为if () {} 。 由于if语句通常包含大量代码,因此它们使用缩进多行编写。

if () {
}

if语句中,仅当括号中的语句为true ,条件才会运行。 如果为false ,则将忽略整个代码块。

if (condition) {
  // execute code
}

首先,它可以用来测试变量的存在。

var age = 21;

if (age) {
  console.log("Your age is " + age + ".");
}

在上面的示例中,存在age变量,因此代码将打印到控制台。 if (age)if (age === true)简写,因为if语句默认为true

我们可以使用我们之前学习的比较运算符来使此条件更强大。 如果您曾经浏览过有关酒类产品的网站,则通常必须设置年龄限制,才能查看该网站。 在美国,年龄为21岁。他们可以使用if语句测试用户的年龄是否大于或等于21岁。

var age = 21;

if (age >= 21) {
  console.log("Congratulations, you can view this site.");
}
其他

如果您想为不符合条件的用户显示不同的消息,则可以使用else语句 。 如果第一个条件不成立,则第一个代码块将被忽略,而else代码块将被执行。

if (condition) {
  // execute code
} else {
  // execute other code
}

这是一个年轻用户的示例。 由于用户不符合条件,因此将运行第二个代码块。

var age = 18;

if (age >= 21) {
  console.log("Congratulations, you can view this site.");
} else {
  console.log("You must be 21 to view this site.");
}
否则

如果有两个以上选项,则可以使用else if语句根据多个条件执行代码。

var country = "Spain";

if (country === "England") {
  console.log("Hello");
} else if (country === "France") {
  console.log("Bonjour");
} else if (country === "Spain") {
  console.log("Buenos días");
} else {
  console.log("Please enter your country.");
}

在上面的示例中,由于country的值设置为"Spain" ,因此输出将为"Buenos Días" "Spain"

开关

还有另一种条件语句,称为switch语句 。 它与if语句非常相似,执行相同的功能,但写法不同。

switch语句在评估许多可能的结果时很有用,通常比使用else if语句更好。

switch语句写为switch () {}

switch (expression) {
  case x:
    // execute code
    break;
  case y:
    // execute code
    break;
  default:
    // execute code
}

在该语句中,您将看到casebreakdefault关键字。 else if使用switch语句可以更好地理解,我们将使用与其他示例相同的示例。

var country = "Spain";

switch (country) {
  case "England":
    console.log("Hello");
    break;
  case "France":
    console.log("Bonjour");
    break;
  case "Spain":
    console.log("Buenos días");
    break;
  default:
    console.log("Please enter your country.");
}

在此示例中,我们评估某个字符串的变量,并且将根据每种case执行一段代码。 一旦找到匹配项, break关键字将阻止进一步的代码运行。 如果找不到匹配项,则将执行default代码块,类似于else语句。

功能

JavaScript 函数是包含的代码块。 它可以执行任务或计算并接受参数。 使用该函数的主要原因之一是编写可重用的代码,该代码每次运行都会产生不同的结果(取决于传递给它的值)。

宣言

在使用功能之前,必须先声明(或定义)该功能。 函数是使用function关键字声明的,并且遵循与变量相同的命名规则。

函数被写为function() {} 。 这是一个简单的“你好,世界!” 在功能上。

function greeting() {
  return "Hello, World!";
}

调用方式

为了调用(使用)该函数,请键入名称,后跟括号。

greeting(); // returns "Hello, World!"

参数和参数

函数还可以接受参数并执行计算。 参数是传递给函数的值。 参数是函数接受并执行的局部变量。

局部变量是仅在特定代码块内起作用的变量。

在该示例中,我们正在创建一个名为addTwoNumbers的函数,该函数可以将两个数字加在一起(很重要,良好的命名很重要)。 我们将通过参数发送数字73 ,该函数会将其作为参数xy

function addTwoNumbers(x, y) {
  return x + y;
}

addTwoNumbers(7, 3); // returns 10

由于7 + 3 = 10 ,该函数将返回10 。 在下面,您将看到函数如何可重用,因为我们会将不同的参数传递给完全相同的函数以产生不同的输出。

function addTwoNumbers(x, y) {
  return x + y;
}

addTwoNumbers(100, 5); // returns 105

还有其他两种在JavaScript中声明函数的方式。 您可以在本文中阅读有关这些内容的更多信息: 快速提示:函数表达式与函数声明

结论

在本文中,我们学习了JavaScript的三个非常重要的基本概念:运算符,条件语句和函数。 运算符是对数据执行运算的符号,我们了解了赋值,算术,比较和逻辑运算符。 条件语句是基于对或错结果执行的代码块,而函数则包含执行任务的可重用代码块。

有了这些知识,您就可以继续学习JavaScript的更多中级概念。 如果您对所介绍的材料有任何疑问或意见,我们将很高兴在下面的评论中听到他们的意见(如果您刚刚开始使用JavaScript则更是如此)。

本文由James KolceTom Greco进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态!

From: https://www.sitepoint.com/javascript-operators-conditionals-functions/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值