JavaScript:数据类型和变量

注释

在开始之前先看看注释,编程语言用于让计算机理解人的意图,但随着代码变得越来越复杂,你和其他人也越来越难以理解代码的作用,开发者经常使用注释来帮助大家以人性化的语言理解代码的含义。

// 这是单行注释

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

注释不仅是注解代码、功能等含义说明,也可以用于调试,在调试过程中如果不想启用一段代码那么可以将其注释掉。

console.log('Hi');
// console.log('Firefox');

数据类型入门

数据无处不在,数据非常重要 因为它有助于我们了解世界、审时度势、合理推测和未雨绸缪。在编程中同样如此,数据和数据类型是构成任何编程语言的基本要素,因为它们有助于组织信息以及决定程序将如何运行。了解正在使用的数据类型以及每种类型的适用时机极其重要。

了解定义和操作 JavaScript 的基本数据类型:

  • Number
  • String
  • Boolean
  • Undefined
  • Null

熟悉这些数据类型后了解如何把数据存储到变量中以便在代码中重复使用和操作数据。

数字(Number)

在 JavaScript 中定义数字实际上非常简单。数字数据类型包括任何正负整数以及小数。向控制台中输入数字可以直接返回该数字。

3

返回:
3

算术运算

也还可以轻松地计算数字公式。就像在计算器中输入内容一样。

3 + 2.1

返回:
5.1

算术运算符 含义
+ 加法
减法
* 乘法
/ 除法
% 取模(求余)
++ 累加
递减

比较数字

就像在数学中一样,你可以比较两个数字,看看某个数字是否大于、小于或等于另一个数字。

5 > 10

返回:
false

5 < 10

返回:
ture

5 == 10

返回:
ture

数字之间的比较结果为 true 或 false。你可以试试下面几个示例!

比较运算符 含义
< 小于
> 大于
<= 小于等于
>= 大于等于
== 等于
!= 不等于

NaN

「NaN」的数据类型也是数字,它的含义是表示「非数字」,如果你写了一段执行数学计算的代码,但是计算结果没有产生有效的数字,可能就会返回 NaN。另外它不等于自身。

// 判断 NaN 的数据类型将返回 number
console.log(typeof NaN);

// 计算负数的平方根将返回 NaN
console.log(Math.sqrt(-10));

// 试图将字符串除以5将返回 NaN
console.log("hello"/5);

// 判断 NaN 是否等于 NaN 将返回 false
console.log( NaN == NaN );

提示:在 JavaScript 中,值 true 和 false 非常重要。这些值叫做布尔值(Boolean),是 JavaScript 中的另一种数据类型。

字符串(String)

字符串要用双引号或单引号括起来,只要保持一致就行。关于实验室和项目的 JavaScript 优达学城样式指南建议使用单引号来定义字符串字面值。

前面在想要打印一段字符时如果没有使用引号包裹就会得到错误提示

console.log(Firefox);

返回:
ReferenceError: Firefox is not defined 详细了解

此处的引用错误(ReferenceError)是因为 JavaScript 引擎认为此处的「Firefox」是一个变量而不是字符串,而此处我们又没有定义有一个名为「Firefox」的变量,所以报错了。

// 字符串需要一对单引号或者一对双引号组成
"Hi"
'Hi'
// 像下面这个例子前后引号不一致就会有问题
"Hi'

为了保持连贯性,应使用单引号 ‘ 而不是双引号 “。这在创建含有 HTML 的字符串时尤其有帮助。

字符串连接

字符串是一串字符集合,并用双引号或单引号括起来。你可以使用字符串来表示句子、名称、地址等数据。你知道甚至可以将字符串添加到一起吗?在 JavaScript 中,叫做连接。将两个字符串连接到一起非常简单!

"Hello," + " New York City"

返回:
“Hello, New York City”

字符串索引

若是想访问一个字符串的某个字符,可以使用字符在字符串中的位置,叫做索引。只需在字符串后面加上字符的索引,并用方括号括起来(第一个字符从 [0] 开始)。例如:

// 1.
console.log("Firefox"[0]);
// 2.
let name = "Firefox";
console.log(name[1]);

返回:
“F”

转义字符串

有时候字符串中不仅是数字和字符还有些标点符号什么,比如

console.log("它说:"hi""); // 双引号里带着双引号

返回:
SyntaxError: unexpected token: identifier详细了解

像这种情况除了把外面的引号换成单引号也可以使用「反斜杠」告诉 JavaScript 忽略字符的特殊含义,直接使用字符的字面意思。

console.log("它说:\"hi\""); // 双引号里带着双引号

返回:
它说:”hi”

需要转义的特殊字符还有很多,比如:

代码 字符
\ 斜杠
\” 双引号
\’ 单引号
\n 换行
\t 制表符

更多可查看中语法和数据类型的「表 2.1 JavaScript 特殊字符」

console.log("1.hi,i\'m \n Firefox'");
console.log("\t2.hi")

比较字符串

字符串也可以像数字一样进行互相比较

console.log('"yes" == "yes"'); // 返回: true,两者都相等
console.log('"Yes" == "yes"'); // 返回: false,因为区分大小写所以不想等
console.log('"Yes" != "yes"'); // 返回: true

变量

上面对于数据类型中的数字和字符串做了一些尝试,但这都是一次性的使用,如果稍后调用或重复使用该数据时就需要用到「变量」。

在 JavaScript 里一共有三种定义变量的方式:

当定义变量的时候,你应该使用上面列出的关键字来定义变量。优先考虑使用 const 定义你的变量,如果觉得以后需要对变量重新赋值的,则使用 let。现在已经不推荐使用 var 关键字来定义变量了。

创建变量时使用 let 等关键字后跟变量名和赋值操作符(赋值操作符是等号),在赋值操作符的右侧放置要赋给变量的值。

// 假设我不会修改自己的名字所以我使用 const
const name = "Firefox Quantum";
// 但是年龄是会变的所以我用 let
// 变量还可以存储运算结果噢
let age = 2019-2004;
// 变量的好处之一是可以重复使用
console.log('我叫' + name + ',我已经' + age + '岁了,要记得我叫' + name);

命名规则

当你创建变量时,需要按照 camelCase(即「驼峰式大小写」,第一个单词小写而后续所有单词的首字母大写)规则写出变量名称。同时尝试使用可以准确、简洁地描述数据内容的变量名称。

let totalAfterTax = 53.03; // 如果变量名由多个单词组成,使用驼峰命名法
let tip = 8; // 如果变量名是一个单词,则使用全小写字母

变量名称未遵守 camelCase 规则也不会导致 JavaScript 代码出错,但是所有编程语言都存在建议的样式指南,可以使代码保持一致、简洁、易于阅读。尤其是在创建大型项目的时候要这么做,因为有很多开发人员会处理到同一项目。

总体来说,函数名称为 functionNames ,变量名称为 variableNames ,类名称为 ClassNames ,方法名称为 methodNames ,常量值名称为 CONSTANT_VALUES ,文件名称为 filenames

布尔值(Boolean)

布尔值只有「true」和「false」两种值,一般应用在对错、开关等场景上。

Null 和 Undefined

null 表示「空值」是没有值的数据类型

// 就像赋值字符串给变量一样假设此处我还没想好起什么名字,我可以先给个 null
let name = null;
console.log(name);

返回:
null

而 undefined 表示「缺少值」是指缺少值的数据类型,这有点难以理解但它与 null 不同,null 是没有意义或完全为空的值,而 undefined 实际上意味着没有值,连表示无的值都没有

// 就像赋值字符串给变量一样假设此处我还没想好起什么名字,我可以先给个 null
var name;
console.log(name);

返回:
undefined

第二个例子,返回了 undefined 是因为存在名为 name 的变量,但它没有值(具体内容)。

等式

到目前为止,你已经知道如何使用 == 和 != 来比较数字和字符串,看看是否相等。但是,如果要比较的数字类型多样,那么使用 == 和 != 就会产生有趣的结果。

console.log("1" == 1); // true
console.log(0 == false); // true

明明不是一个数据类型但是为什么结果都是「true」?

隐式类型转换

JavaScript 属于对类型要求不高的语言。也就是编写 JavaScript 代码的时候,不需要指定数据类型。相反,当 JavaScript 引擎解析代码的时候,将自动转换为“相应的”数据类型。这就叫做隐式类型转换,当试将字符串与数字相连的时候:

console.log("Firefox" + 2019);

返回:
“Firefox2019”

此处运行时 JavaScript 引擎先将「2019」转换成了字符串然后拼接了起来,这也算 JavaScript 被强类型语言使用者吐槽的一个点,因为有时候会造成一些奇奇怪怪得结果

console.log("Hello" % 10);

返回:
NaN

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

绝对相等

在 JavaScript 中,最好使用绝对相等的方法看看数字、字符串或布尔型数值等在类型和值方面是否完全相同,而不用首先转换类型。具体用法就是多加一个等号。

console.log("1" == true,"1" === true);
console.log("0" != false,"0" !== false);

判断数据类型

如果不知道一个东西是什么数据类型可以使用 typeof

console.log(typeof 'hi'); // string
console.log(typeof 10); // number

分号

另外一个比较好的习惯是在一个代码语句的末位使用分号表示这一行语句结束了,新的语句要开始了

let a = "a"
let b = "b"

一般情况来说像以上代码不加其实是没有问题的,但在于有的时候,比如压缩代码时会去掉换行就有可能会变成:

let a = "a" let b = "b"

这时就会导致错误,JavaScript 没法预测在什么时候应该加上分号,所以建议是使用分号。

另外,要将两个变量一起运行时不要忘记使用连接法

let a = "a";
let b = "b";

console.log(a b); // 错误的用法
console.log(a + b)

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注