第2章_基本数据类型&数组&循环&条件表达式

基本数据类

1.变量

变量都是用来存储数据的容器,在使用变量时又分以下两个步骤:

  • 声明变量

  • 初始化变量

var a;//声明一个变量
var b = 10;//声明的同时并给这个变量初始化

当变量第一次赋值时,我们称之为变量初始化

不同的写法

var a = 1;//声明的同时初始化
var b,c,d = 'hello',v1 = 32,v2;

var v1,
    v2,
    v3 = 'hello',
    v4 = 42,
    v5;

变量名可以由字母、数字、下划线及美元符号组合而成。但不能以数字开头,像下面这样是不被允许的

var 2three4five;

区分大小写

var casematters = 'lower';

var CASE_MATTERS = 'upper';

console.log(casematters);//lower
console.log(CASE_MATTERS);//upper

2.操作符

所谓操作符,通常指的是能对一两个输入执行某种操作,并返回结果的符号

1 + 2;//3

//变量的例子
var a = 1;
var b = 2;

a + 1;//2

操作符有:+、—、、/、%、++、——*

复合操作符:+=、-=、=、/=、%=*

3.基本数据类型

JavaScript仅有以下几大基本数据类型

  1. 数字—包括浮点数与整数,例如这些都属于数字:1、100、3.14。

  2. 字符串—包括由任意数量字符组成的序列,例如:"a"、"one"、"one 2 three"。

  3. 布尔值—包括true和false。

  4. undefined—当我们试图访问一个不存在的变量时,就会得到一个特殊值:undefinedJavaScript会自动将变量在初始化之前的值设定为undefined。

  5. null—这是另一种只包含一个值的特殊数据类型。通常是指没有值或空值,不代表任何东西。null与undefined最大的不同在于,被赋予null的变量通常被认为是已经定义了的,只不过它不代表任何东西。

任何不属于上述五种基本类型的值都会被认为是一个对象。

4.查看类型操作符—typeof

该操作符会返回一个代表数据类型的字符串,以下是其可能返回的结果:
"number";
"string";
"boolean";
"undefined";
"object";
"function"。

5.数字

> var n = 1;
> typeof n;
"number"

> n = 1234;
> typeof n;
"number"

浮点数(即含小数部分的数字)显然也是Number类型的一种:

> var n2 = 1.23;

> typeof n2;
"number"

> typeof 123;
"number"
  1. 指数表示法
> 1e1;
10

> 1e+1;
10

> 2e+3;
2000

> typeof 2e+3;
"number"

一个数字可以表示成1e1(或者1e+1、1E1、1E+1)这样的指数形式,意思是在数字1后面加1个0,也就是10。同理,2e+3的意思是在数字2后面加3个0,也就是2000。

  1. Infinity

在JavaScript中,还有一种叫做Infinity的特殊值。它所代表的是超出了JavaScript处理范围的数值。但Infinity依然是一个数字

//JavaScript所能处理的最大值是1.7976931348623157e+308,而最小值为5e-324
> Infinity;
Infinity

> typeof Infinity;
"number"

> 1e309;
Infinity

> 1e308;
1e+308

//另外,任何数除以0结果也为Infinity:
> var a = 6 / 0;
> a;
Infinity

Infinity相加,我们也不会得到0,而是会得到一个叫做NaN(Not A Number的缩写,即不是数字)
的东西。

> Infinity - Infinity;
NaN

> -Infinity + Infinity;
NaN

另外,Infinity与其他任何操作数执行任何算术运算的结果也都等于Infinity。

> Infinity - 20;
Infinity

> -Infinity*3;
-Infinity

> Infinity / 2;
Infinity

> Infinity – 99999999999999999;
Infinity
  1. NaN

NaN 尽管该值的名字叫做“不是数字”,但事实上它依然属于数字类型,只不过是一种特殊的数字罢了。

> typeof NaN;
"number"

> var a = NaN;
> a;
NaN

数字10与字符"f"相乘时,结果就会为NaN,因为"f"显然是不支持乘法运算的

> var a = 10*"f";
> a;

NaN

而且NaN是有传染性的,只要我们的算术运算中存在一个NaN,整个运算就会失败

> 1 + 2 + NaN;
NaN

6.字符串

在JavaScript中,一对双引号或单引号之间的任何值都会被视为一个字符串。也就是说,如果说1是一个数字的话,那么"1"就是一个字符串了,在一个字符串前使用typeof操作符会返回"string"

> var s = "some characters";
> typeof s;

"string"

//字符串中可以包含数字,例如:

> var s = '1';
> typeof s;

"string"

//如果引号之间没有任何东西,它所表示的依然是一个字符串(即空字符串):
> var s = ""; typeof s;
"string"
  1. 字符串拼接
var s1 = "web";
var s2 = "site";
var s = s1 + s2;

s;
"website"
  1. 字符串转换

当我们将一个数字字符串用于算术运算中的操作数时,该字符串会在运算中被当做数字类型来使用。(由于加法操作符的歧义性,这条规则不适用于加法运算。)

> var s = '1';
> s = 3*s;
> typeof s;
"number"
> s;
3

> var s = '1';
> s++;
> typeof s;
"number"
> s;
2

如果转换操作失败了,我们就会得到一个NaN值。

var movie = '101 dalmatians';
movie*1;
NaN

  1. 特殊字符串
  • \ 转义字符

  • \n 换行符

  • \r 回车符

  • \t 制表符

  • \u Unicode编码

7.布尔值

布尔类型中只有两种值:true和false。它们使用时不需加引号。

> var b = true;
> typeof b;
"boolean"

> var b = false;
> typeof b;
"boolean"

//如果true或false在引号内,它就是一个字符串。

> var b = "true";
> typeof b;

"string"
  1. 逻辑运算符

JavaScript中有三种逻辑运算符

  • !—逻辑非(取反)

  • &&—逻辑与

  • ||—逻辑或

如果我们对一个非布尔值执行逻辑运算,那么该值就会在计算过程中被转换为布尔值:

var b = "one";
!b;

false

上例中的字符串"one"是先被转换为布尔值true然后再取反的,结果为false。如果我们对它取反两次,结果就会为true。

借助双重取反操作,可以很轻易地将任何值转换为相应的布尔值.除了下面所列出特定值以外(它们将被转换为false),其余大部分值在转换为布尔值时都为true。

  • 空字符串""

  • null

  • undefined

  • 数字0

  • 数字NaN

  • 布尔值false

这6个值有时候也会称为falsy值,而其他则被称为truthy值(包括字符串“0”,“ ”,“false”等)

短路&&、||

  • && 两边表达式都为true时,结果才为true

  • || 两边表达式一方为ture时,结果才为true

  1. 操作符优先级

!的优先级最高,因此在没有括号限定的情况下它将会被最先执行。接下来的优先顺序是&&,最后才是||。

> false && false || true && true;
true

//与下面表达式等效:

> (false && false) || (true && true);
true

注意事项

  • 即如果变量mynumber已经被定义了,就保留其原有值,否则就将它初始化为10。
> var mynumber = mynumber || 10;
> mynumber;
10

这种做法简单而优雅,但是请注意,这也不是绝对安全的。如果这里的mynumber之前被初始化为0(或者是那6个falsy值中的任何一个),这段代码就不太可能如我们所愿了。

> var mynumber = 0;
> var mynumber = mynumber || 10;
> mynumber;
10
  1. 比较运算符
  • == 相等运算符

  • === 严格相等运算符:两个操作数的值和类型都回

    true

  • != 不相等运算符

  • !== 严格不相等运算符:此操作内不允许类型转换。且当两个操作数的值或类型不相等时返回true

  • ">="

  • <

  • <=

NaN不等于任何东西,包括它自己

NaN == NaN;
false

8.undefined与null

当我们尝试使用一个不存在的变量时,控制台中就会产生以下错误信息:

> foo;

ReferenceError: foo is not defined

但当对不存在的变量使用typeof操作符时则不会出现这样的错误,而是会返回一个字符串"undefined"

> typeof foo;
"undefined"

如果我们在声明一个变量时没有对其进行赋值,调用该变量时并不会出错,但typeof操作符依然会返回"undefined":

> var somevar;
> somevar;
> typeof somevar;
"undefined"

//这是因为当我们声明而不初始化一个变量时,JavaScript会自动使用undefined值来初始化这个变量。

但null值就完全是另一回事了。它不能由JavaScript自动赋值,只能交由我们的代码来完成。

> var somevar = null;
null
> somevar;
null
> typeof somevar;
"object"

尽管undefined和null之间的差别微乎其微,但有时候也很重要。例如,当我们对其分别执行某种算术运算时,结果就会截然不同:

> var i = 1 + undefined;
> i;
NaN

> var i = 1 + null;
> i;
1

//这是因为null和undefined在被转换为其他基本类型时,方法存在一定的区别

下面我们给出一些可能的转换类型。

  • 转换成数字
> 1*undefined;
NaN

> 1*null;
0
  • 转换成布尔值
> !!undefined;
false

> !!null;
false
  • 转换成字符串
> "value: " + null;
"value: null"

> "value: " + undefined;
"value: undefined"

基本数据类型综述

JavaScript语言中有五大基本数据类型:

  • 数字

  • 字符串

  • 布尔值

  • undefined

  • null

  1. 任何不属于基本类型的东西都属于对象

  2. 数字类型可以存储的数据包括:正负整数、浮点数、十六进制数与八进制数、指数以及特殊数值NaN、Infinity、-Infinity。

  3. 字符串类型存储的是一对引号之间的所有字符。

  4. 布尔类型的值只有两个:true和false。

  5. null类型的值只有一个:null。

  6. undefined类型的值只有一个:undefined。

  7. 绝大部分值在转换为布尔类型时都为true,但以下6种falsy值除外

  • ""

  • null

  • undefined

  • 0

  • NaN

  • false

数组

数组是一个用于存储数据的列表。与一次只能存储一个数据的变量不同,我们可以用数组来存储任意数量的元素值

1.数组创建方式

> var a = [];//声明一个空数组变量

> var a = [1,2,3];//定义一个带三个元素的数组

同一数组中是以0下标去查找对应的值,如果访问不存在的下标,则会返回undefined值

> var arr= [1,2,3,4,5];
> arr[6];

"undefined"

//只要在控制台中输入相应的数组名,就能打印出该数组中的所有内容:
> var arr= [1,2,3,4,5];
> arr;

Array(5) [ 1, 2, 3, 4, 5 ]

增加、更新数组元素

通过索引来更新数组中的元素,如果新元素被添加的位置与原数组末端之间存在一定间隔,则新元素与该数组末端之间的值为undefined

//通过下标赋值
> a[2] = 'three';
"three"

> a;
[1, 2,"three"]

//另外,我们也可以通过索引一个之前不存在的位置,来为其添加更多的数组元素
> a[3] = 'four';
"four"

> a;
[1, 2,"three","four"]

//新元素被添加的位置与原数组末端之间存在一定间隔,则新元素与该数组末端之间的值为undefined
> var a = [1,2,3];
> a[6] = 'new';
"new"

> a;
[1, 2, 3, undefined x 3,"new"]

删除元素

为了删除特定的元素,我们需要用到delete操作符,然而,相关元素被删除后原数组的长度并不会受到影响。从某种意义上来说,该元素被删除的位置只是被留空了而已

> var a = [1, 2, 3];
> delete a[1];
true

> a;
[1, undefined, 3]

> typeof a[1];
"undefined"

数组的数组

我们可以在数组中存放任何类型的值,当然也包括另一个数组

> var a = [1, "two", false, null, undefined];
> a;
[1, "two", false, null, undefined]

> a[5] = [1,2,3];
[1, 2, 3]

> a;
[1, "two", false, null, undefined, Array[3]]

值得注意的是,我们也可以通过这种数组访问方式来获取字符串中特定位置上的字符

> var s = 'one';
> s[0];
"o"

> s[1];
"n"

> s[2];
"e"

小结

  • 数组是一种数据存储形式

  • 数组元素是可以被索引的

  • 数组中的元素索引是从0开始的,并且按照每个元素的位置依次递增

  • 我们是通过方括号中的索引值来访问数组元素的

  • 数组能存储任何类型的数据,包括另一个数组

条件与循环

if条件表达式

var result = '',a = 3;
if (a > 2) {
    result = 'a is greater than 2';
}

//if-else
if (a > 2) {
result = 'a is greater than 2';
} else {
    result = 'a is NOT greater than 2';
}

检测变量是否存在

> var result = '';
> if (somevar){
    result = 'yes';
}
ReferenceError: somevar is not defined
> result;
""

它也可以是任何一种被初始化为falsy值(如false或0)的已声明变量。所以在检查变量是否存在时,更好的选择是使用typeof。

> var result = "";
> if (typeof somevar !== "undefined"){
    result = 'yes';
}
> result;
""

替代if表达式

//if-else
var a = 1;
var result = '';
if (a === 1) {
    result ="a is one";
} else {
    result ="a is not one";
}

//使用三目运算简化
> var a = 1;
> var result = (a === 1) ?"a is one" : "a is not one";

//这种语法通常只用于一些非常简单的条件逻辑,千万不要滥用。因为这样做很容易使我们的代码变得难以理解

switch语句

当我们发现自己在if表达式中使用了太多的else if子句时,就应该要考虑用switch语句来替代if了

var a = '1';
var result = '';
switch (a) {
    case 1:result = 'Number 1';break;
    case '1':result = 'String 1';break;

    default:result = 'I don\'t know';break;

}

尽量使用default语句。因为这可以使我们在switch找不到任何匹配的情况下,也依然能返回一些有意义的结果。

while & do-while

while循环是最为简单的一种循环,它们通常是这样的:

var i = 0;
while (i < 10) {
    i++;
}

do-while循环实际上是while循环的一种轻微的变种。示例如下:

var i = 0;
do {
    i++;
} while (i < 10);

for & for-in

for是使用得最为广泛的循环类型

//方式一
var punishment = '';
for (var i = 0; i < 100; i++) {
    punishment += 'I will never do this again, ';
}

//方式二
for (var i = 0, punishment = ''; i < 100; i++) {
    punishment += 'I will never do this again, ';
}

for循环还可以彼此嵌套

var res = '\n';
for(var i = 0; i < 10; i++) {
    for(var j = 0; j < 10; j++) {
        res += '*';
    }
    res+= '\n';
}

//最终,该字符串输出如下:
"
**********
**********
**********
**********
**********
**********
**********
**********
**********
**********
"

for-in循环

for-in循环往往被用来遍历某个数组

var a = [ 'a', 'b', 'c', 'x', 'y', 'z'];
var result = '\n';
for (var i in a) {
    result += 'index: ' + i + ', value: ' + a[i] + '\n';
}

//结果如下:
"
index: 0, value: a
index: 1, value: b
index: 2, value: c
index: 3, value: x
index: 4, value: y
index: 5, value: z
"

JavaScript注解

  • 单行注释—以//开头并直至该行结束。

  • 多行注释—以/开头,并以/结尾,其中可以包括一行或多行内容

//具体示例如下:

// beginning of line
var a = 1; // anywhere on the line
/*multi-line comment on a single line*/
/*
    comment that spans several lines
*/

本章小结

几种基本数据类型

  • 数字

  • 字符串

  • 布尔值

  • undefined

  • null

基本的操作符

  • 算术运算符:+、-、*、/、%

  • 自增(减)运算符:++、--

  • 赋值运算符:=、+=、-=、*=、/=、%=

  • 特殊操作符:typeof、delete

  • 逻辑运算符:&&、||、!

  • 比较运算符:==、===、!=、!==、<、>、>=、<=

  • 三元运算符:?:

通过数组来存储和访问数据

条件执行语句

  • if-else

  • switch

循环语句

  • while

  • do-while

  • for

  • for-in

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容