前端JS入门-数据类型/条件语句

概述

HTML 和 CSS 是标记语言。标记语言用于描述和定义文档中的元素。JavaScript 是编程语言。编程语言用于向机器发出指令。编程语言可用于控制机器的行为和表达算法

所有主流浏览器都内置了 JavaScript 引擎,这使得浏览器可以运行和执行 JavaScript 代码。JavaScript 控制台允许在浏览器内部即时输出字符串和执行 JavaScript 代码行。

浏览器 JS 控制台

数据类型

变量

变量命名规则 camelCase-驼峰。

数字

数字数据类型包括任何正负整数以及小数。向控制台中输入数字可以直接返回该数字。

数字数据类型

// 这是一条单行注释

/*
这是
一条多行
注释
*/

字符串

建议使用 单引号 来定义字符串字面值。更多规则可以查看-前端样式指南

字符串连接,使用 +

"Hello + 5*10"
// 输出-整个对象是字符串
"Hello + 5*10"            

字符串索引,只需在字符串后面加上字符的索引,并用方括号括起来(第一个字符从 [0] 开始)。

转义字符串,使用 \

JavaScript 中一些常见特殊字符列表:

扫描二维码关注公众号,回复: 2796672 查看本文章
代码 字符
\ \-反斜杠
\" "-双引号
\' '-单引号
\n newline-换行符
\t tab-制表符
var str = "The file located at \"C:\\\\Desktop\\My Documents\\Roster\\names.txt\" contains the names on the roster.";
console.log(str);
/**
* "The file located at "C:\\Desktop\My Documents\Roster\names.txt" contains the names on the roster."
*/

比较字符串,通过比较运算符 ==!=。当你比较字符串时,会区分大小写小写字母在 ASCII 表格中的数字值比大写字母的要大。例如,字符串 “green” 大于字符串 “Green”。

在查看某个字符串“大于”或“小于”另一个字符串时,JavaScript 根据数字值比较单个字符。每个字符都分配了一个数字值,对应的是该字符在 ASCII 表格中的位置:http://www.ascii-code.com/

Null、Undefined 和 NaN

Null 和 Undefined 的区别是对变量赋了 null 值,则该变量为 null。没有对变量赋值,则该变量为 undefined。

NaN 表示“非数字”,通常返回表示数字运算存在错误。例如,如果你写了一段执行数学计算的代码,但是计算结果没有产生有效的数字,可能就会返回 NaN。

隐式类型转换

JavaScript 属于对类型要求不高的语言。基本上,意味着当你编写 JavaScript 代码的时候,不需要指定数据类型。相反,当 JavaScript 引擎解析代码的时候,将自动转换为“相应的”数据类型。这就叫做隐式类型转换

强类型语言是一种当数据与预期类型不完全相符时很有可能会产生错误的语言。因为 JavaScript 是松散类型,所以你不需要指定数据类型;但是,这样可能会产生因为隐式类型转换而导致的错误,并且难以诊断。

// 强类型编程语言代码
int count = 1;
string name = "Julia";
double num = 1.2932;
float price = 2.99;
// JavaScript中的等效代码
var count = 1; 
var name = "Julia";
var num = 1.2932;
var price = 2.99;
"1" == true
// 返回 true

当你使用 ==!= 运算符时,JavaScript 首先将每个值转换为相同类型(如果不是相同类型的话),因此叫做“转型”!这通常不是你希望出现的行为,比较值是否相等时使用 == 和 != 运算符并不是很好的做法

绝对相等,在 JavaScript 中,最好使用绝对相等的方法看看数字、字符串或布尔型数值等在类型和值方面是否完全相同,而不用首先转换类型。要进行绝对比较,只需在 ==!= 运算符的末尾添加一个 =

"1" === 1
// 返回:false

条件语句

var runner = "Kendyll";
var position = 2;
var medal;

if(position === 1) {
  medal = "gold";
} else if(position === 2) {
  medal = "silver";
} else if(position === 3) {
  medal = "bronze";
} else {
  medal = "pat on the back";
}

console.log(runner + " received a " + medal + " medal.");

逻辑运算符

运算符 含义 示例 使用方法
&& 逻辑 AND value1 && value2 两个都为 true,返回 true
|| 逻辑 OR value1 || value2 两个至少有一个为true,返回 true
! 逻辑 NOT !value1 取反值

注意,逻辑表达式从左到右判断值。类似于数学表达式,逻辑表达式也可以用括号来表示首先判断值的表达式部分

最少运算

在两个表格中,对于某些情况,无论 B 的值为多少,A 的值都足以满足条件了。这种行为就叫做最少运算,表示逻辑表达式的后续参数不用考虑,因为前面的参数已经满足条件了

真值和假值

JavaScript 中的每个值都有固有的布尔值,在布尔表达式中评估该值时,该值就会转换为固有的布尔值。这些固有的值称为真值或假值。

假值

转换为布尔值,结果为 false 的值称为假值。以下是所有假值的列表:

false
null
undefined
00.0NaN
""

真值

转换为布尔值,结果为 true 的值称为真值。以下是所有真值的列表:

true
42
"pizza"
{}
[]

三元运算符

conditional ? (if condition is true) : (if condition is false)

要使用三元运算符,首先提供? 左侧的条件语句。然后,在 ? 和 : 之间写出条件为 true 时将运行的代码,并在 : 右侧写出条件为 false 的代码

var color = isGoing ? "green" : "red";

Switch语句

switch 语句是另一种将多个基于相同变量的 else if 语句放到一起,并且不用使用条件语句的方式,只是根据某个值切换每段代码。

switch 语句一开始查看代码时,会查看第一个表达式等于传递给 switch 语句的结果的 case 条件。然后,将控制权转给该 case 条件,执行相关的语句。

var option = 3;

switch (option) {
  case 1:
    console.log("You selected option 1.");
    break;
  case 2:
    console.log("You selected option 2.");
    break;
  case 3:
    console.log("You selected option 3.");
    break;
  case 4:
    console.log("You selected option 4.");
    break;
  case 5:
    console.log("You selected option 5.");
    break;
  case 6:
    console.log("You selected option 6.");
    break; // technically, not needed
}

中断语句可以用来终结一个 switch 语句并将控制权转给被终结语句后面的代码。向每个 case 条件添加 break 后,就解决了 switch 语句不断往下跳转到其他 case 条件的问题。

向 switch 语句中添加 default case,当没有任何与 switch 表达式相符的值时,将执行该语句。

猜你喜欢

转载自blog.csdn.net/MoDuRooKie/article/details/81625283