JavaScript介绍与基础语法

你好！ 这是我自己编辑的一些知识点。如果你想学习JavaScript的有关知识, 可以仔细阅读这篇文章，了解一下关于JavaScript的基本语法知识。

JavaScript

JavaScript介绍

JavaScript是一门跨平台、面向对象的轻量级脚本语言，运行于JavaScript解释器/引擎。

JavaScript内置了一个包含一系列对象的标准库，比如数组、日期、数学和一个语言元素集合包括操作符、流程控制及语句等内容。

JavaScript解释器是作为JavaScript脚本代码的运行环境，如下述两种呈现方式：

• 独立安装的JavaScript解释器。

• 嵌入在浏览器内核中的JavaScript解释器

JavaScript简史

• 1992年，Nombas公司为自己的CEnvi软件开发了一款脚本语言ScriptEase，可以嵌入在网页中。
• 1995，Netscape公司为自己的Navigator2.0浏览器开发了另一种客户端脚本语言Livescript，为了搭上当时很热Java的顺风车，临时把LiveScript改名为JavaScript。
• 1996年，Microsoft公司在IE3中加入了JScript（为避开JavaScript的版权问题）。
• 1977年，JavaScript1.1作为草案提交给ECMA（欧洲计算机制造商协会）,完成了ECMA-262—定义了名为ECMAScript的脚本语言标准。

JavaScript实现

虽然JavaScript与ECMAScript经常被认为是相同含义，但JavaScript的含义要比ECMAScript多。

一个完整的JavaScript实现应该由下列三个不同的部分组成（如图下）：

• 核心语法内容（ECMAScript）
• 文档对象模型（DOM）
• 浏览器对象模型（BOM）

扫描二维码关注公众号，回复： 13261150 查看本文章

JavaScript应用

• 客户端

通过提供控制浏览器及其文档对象模型(DOM)的对象来扩展语言核心。例如：客户端版本直接支持应用将元素放在HTML表单中并且支持响应用户事件比如鼠标点击、表单提交和页面导航。

• 服务器端

通过提供有关在服务器上运行JavaScript的对象来扩展语言核心。例如：服务端版本直接支持应用和数据库通信，提供应用不同调用间的信息连续性，或者在服务器上执行文件操作。

• 物联网
• 人工智能

与JScript的关系

JScript是Microsoft公司为IE3浏览器添加的脚本语言，也是JavaScript的另一种实现，只是Microsoft公司为了避免与Netscape公司的JavaScript语言产生版权问题，而命名为JScript。

至此，JavaScript实现意味着存在两个不同的版本：Netscape公司的JavaScript和Microsoft公司的JScript，当时没有任何标准规定JavaScript的语法和特性，导致开发人员在使用JavaScript的同时需要考虑浏览器的兼容性问题。

直到以JavaScript 1.1为草案提交给ECMA（欧洲计算机制造商协会）定义了ECMA标准，这个问题才得以缓解。

与Java的关系

JavaScript经常被误解为是Java的子集，实际上，这两种语言是完全不相干的。

JavaScript与Java的语法很相似，就像Java和C语言的语法相似一样。JavaScript最初被设计为运行在浏览器中的脚本语言，而Java是一种跨平台语言，目前主要是应用于服务器端运行。

JavaScript随着Netscape公司的战略而改变为LiveScript,直到1995年12月Netscape公司与SUN公司才正式、公开的发布声明，LiveScript语言更改为JavaScript.

而JavaScript之所以改名，只是因为当时的Java语言很火而已。

ECMAScript介绍

JavaScript的核心语言是ECMAScript,ECMAScript是由ECMA（欧洲计算机制造商协会）定义的标准化脚本语言，与Web浏览器没有依赖关系。ECMAScript不仅可以运行在内建JavaScript引擎的浏览器中，也可以运行在独立的JavaScript解释器中（例如Nodejs）.

ECMAScript规定了下列组成部分：语法、类型、语句、关键字、保留字、操作符及对象等。

JavaScript实现了ECMAScript，其他脚本语言同样实现了ECMAScript(例如Adobe公司的ActionScript语言)。

基于浏览器

• Chrome浏览器

• Firefox浏览器

基于解释器

独立的JavaScript解释器是非浏览器环境运行JavaScript脚本代码的环境。目前最流行的JavaScript解释器为Node.js，Node.js是一个基于Chrome V8引擎的JavaScript运行环境。

第一个程序

• 点击程序Node.js，运行Node。js的REPL模式。

• 输入以下代码，回车进行运行，并查看结果。

console控制台

console用于提供控制台标准输出，它是由Microsoft公司的JScript引擎提供的调试工具，后来逐渐成为浏览器的标准，而独立JavaScript解释器Node.js也沿用了这个标准。

Node.js调试器

基于Chrome V8引擎的Node.js解释器提供了一个强大的调试器，帮助开发人员调试应用程序。

• 在JavaScript代码中添加debuggen语句，debuggen语句相对于在代码中标注一个断点。

• 以debug方式运行JavaScript代码：

node-inspector

node-inspector模块为在Node.js解释器中调试JavaScript代码提供了另一种选择，比Node.js内建的debuggen强大很多。

• 使用npm安装node-inspector模块：

npm install -g node-inspector

• 启动inspector服务，实现通过浏览器链接node-spector:

node-inspector

• 以debug方式运行JavaScript代码：

node --debug-brk inspector.js

语法

区分大小写

JavaScript是一种区分大小写的语言。这意味着JavaScript的关键字、变量名、函数名、以及任何其他的标识必须使用一致的大小写形状。比如wolongxueyuan、Wolongxueyuan、WOLONGXUEYUAN是不同的变量名。

var wolongxueyuan='卧龙学苑'；/*一般用于定义变量名称*/
var Wolongxueyuan='Wolongxueyuan';
var WOLONGXUEYUAN='WOLONGXUEYUAN';/*一般用于定义常量名称*/

注意：在JavaScript中定义变量名和函数名时应该特别注意。

例：

var wolongxueyuan = '卧龙学苑';
console.log('wolongxueyuan');

var Wolongxueyuan = 'Wolongxueyuan';
console.log('Wolongxueyuan');

var WOLONGXUEYUAN = 'WOLONGXUEYUAN';
console.log('WOLONGXUEYUAN');

空格和换行

JavaScript会忽略出现在代码中的空格、制表符和换行符。

由于可以自由地在代码中使用空格、制表符和换行符，所以采用争气、一直的缩进来形成统一的编码风格，从而提高代码的可读性显得尤为重要。

JavaScript还可以识别水平制表符、垂直制表符、换页符等，JavaScript将以下字符识别为行结束符：换行符、回车符、行分隔符、段分隔符等。回车符加换行符在一起被解析为一个单行结束符。

例：

/* 
 空格与换行
 *并不是JavaScript的语法内容 - 可有可无的（建议使用）
 *将代码书写的更有可读性
*/
var wolongxueyuan = '卧龙学苑';
console.log(wolongxueyuan);

可选的分号

JavaScript的语句一般以一个分号作为结尾。当然，JavaScript也允许忽略这个分号。如果省略分号，则由解释器确定语句的结尾，如下述代码：

var sum=a+b//即使没有分号也是有效的语句——不推荐
var diff=a-b;//有效的语句——推荐

注意：在JavaScript中，虽然语句结尾的分号不是必须的，但还是建议任何时候都不要省略。使用分号是一个非常好的编程习惯。

如果将上述示例代码编写在一行的话，如下示例代码所示：

var sum=a+bvar diff=a-b;
               ^^^^

SyntaxError: Unexpected identifier
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47

例：

/*
 分号
 *可选项 - JavaScript语法并不是强制要求的
    *多个语句在一行
 *作用 - 表示一句话的结束
*/
var wolongxueyuan = '卧龙学苑';
console.log(wolongxueyuan);

注释

在编写JavaScript代码时，经常利用注释为代码添加说明。注释的内容会被JavaScript解释器/引擎忽略，JavaScript支持两种格式的注释：

• 单行注释

//这里是单行注释

• 多行注释

/*
*这里是多行注释
*/

注意：上述注释的第二行是以星号开始，但这并不是必需的。

关键字

JavaScript定义了一组具有特定用途的关键字，这些关键字可用于表示语句的开始或结束、或者执行特定操作等。也就是说，定义变量名或、函数名或对象名时不能使用这些名称。

保留字

JavaScript除了定义了一组关键字，还定义了一组同样不能作为变量名、函数名或对象名的保留字。

保留字可能在将来被作为新的关键字出现的。

注意：随着JavaScript版本的更新，保留字可能会成为关键字。所以，这里所说的关键字和保留字是具有时效性的。

字符集

字符集概述

字符是各种文字和符号的总称，包括各国家文字、标点符号、图形符号、数字等内容。字符集是多个字符的集合，字符集种类繁多，每个字符集包含的字符个数不同，常见的字符集有：ASCII字符集、GB2312字符集、Unicode字符集等。

GB2312又被称为GB2312-80字符集，全称为《信息交换用汉字编码字符集 基本集》，由原中国国家标准总局发布，1981年5月1日实施。

Unicode字符集编码是通用多八位编码字符集的简称，是由一个名为Unicode学术学会的机构制订的字符编码系统，支持现今世界各种不同语言的书面文本的交换、处理及显示。

Unicode编码

描述：Unicode是一种通用字符编码标准，用于世界上主要书面语言的交换和显示。它涵盖美洲，欧洲，中东，非洲，印度，亚洲和环太平洋地区的语言，还包括古中文和技术符号。

作用：Unicode允许多语言文本的交换、处理和显示，以及通用的技术和数学符号的使用，有望解决多语言计算的国际化问题。

注意：1.3版本之前的JavaScript并不支持Unicode编码。

官网：Unicode编码

标准化

Unicode编码允许使用多种方法对同一个字符进行编码。在文本编辑器中，不同编码的显示结果是一模一样的，但二进制编码表示是不一样的， 在计算机里也不想等。

Unicode标准为所有字符定义了-个首选的编码格式，井给出了-个标准化的处理方式将文本转换为一种适合比较的标准格式， JavaScript会认为它正在解析的程序代码已经是这种标准格式，不会再对其做标准化处理。

变量

变量是什么

定义:变量是存储数据信息的容器。

描述:变量被认为是有名字的容器。在代码中，使用变量名为值命名，需要遵守一定的规则。

注意:

1. 在、JavaScript代码中，必须先声明一个变量，这个变量才能被使用。
2. JavaScript中的变 量是弱类型的，也称之为松散类型的。所谓弱类型/松散类型就是可以用来保存任何类型的数据。

varv= 100;v= "string";

如.上述示例代码所示，定义了一个变量v， 井初始化值为100,然后重新赋值为string。

例：

/*
 变量的定义的语法结构
 *语法结构 - var 变量名称 = 变量的值;
 * JavaScript的变量是弱类型（松散类型）
    * 定义变量时，但初始化值-> 并不清楚该变量的值的类型
    * 只有在为变量初始化值-> 才知道该变量的值的类型
*/

/* 1.定义变量，并初始化值*/
var z = '卧龙学苑';/* 定义变量 - 变量的定义，并且初始化值*/
console.log(z);/* 调用变量*/

/* 2.定义变量，但没有初始化值*/
var z1;/* 只定义，没有初始化*/
console.log(z1);/* 结果为undefind（未定义）*/

z1 = '卧龙学苑';/* 初始化值（赋值）*/
console.log(z1);

// 3.多个变量同时定义 - 变量定义之间使用逗号分隔
var z2 =100,z3;
console.log(z2);
console.log(z3);

变量的声明

在、JavaScript代码中，使用变量前应当先声明。变量是使用关键字var声明的。

• 只声明未初始化，变量的值自动取值为undefined。

1. -行代码只声明一 个变量:

var sum;//值为undefined
var msg;//值为undefined

​ 2一 行代码声明多个变量:

var x, y, z;//值为undefined

• 将变量的声明和初始化合写在一起。

1. -行代码只声明一个变量井赋值:

var sum = 100;//值为100
var msg= "卧龙学苑";//值为卧龙学苑

​ 2 -行代码声明多个变量并赋值:

varx=0Iy= 1,z= 2;

上述示例代码中变量的值，可以是不同类型。

说明:等号(=)是赋值运算符。

命名规则

变量的命名需要遵守-定的规则的，具体规则如下:

• 必须以字母、下划线(_)、美元符号($)开始。
• 不能以数字开头。
• 不能使用关键字和保留字作为名称。
• 由于、 JavaScript是区分大小写的，大写字母与小写字母并不冲突。
• 名称最好有明确的含义。
• 可以采用“匈牙利命名法”、“下划线命名法” 、“小驼峰命名法” 或“大驼峰命名法”之- ,在开发团队内进行协调统一。

var woLong= '卧龙学苑;//小驼峰方式命名
var Wolong= "卧龙学苑;//大驼峰方式命名
var wolong='卧龙学苑;//下划线方式命名

声明的问题

• 重复的声明

使用var语句重复声明变量是合法且无害的。但是如果重复声明并初始化的，这就表示重复声明并初始化。由于JavaScript变量只能存储一个数据， 之前存储的数据会被覆盖。

var msg= "卧龙学苑";//值为卧龙学苑
var msg = 100;//值为100

例：

/*
 重复的定义
 *JavaScript 中重复定义变量->语法是 允许的
 *重复定义时 ->先将之前的变量在内存的空间进行销毁，再创建
*/
var z="wolongxueyuan";
console.log(z);//wolongxueyuan

var z=100;
console.log(z);//100

例：

/*
 重复的赋值
*/
var z="wolongxueyuan";
console.log(z);//wolongxueyuan

 z=100;//赋值
console.log(z);//100

• 遗漏的声明

直接读取一个没有声明的变量的值，JavaScript会 报错。

console.log(tr);// str变量并没有声明

说明:为一个没有声明的变量初始化，是合法的，但并不推荐这样使用。

例：

/* 
 遗漏的定义 - 变量没有定义，而直接调用
 *结果 - （报错）变量名 is not defind
 *原因 - 该变量没有定义
*/
console.log(z);
/*
 只定义变量，但不初始化值
 *结果 - （不报错）输出结果为undefined
*/
var z1;
console.log(z1);//*undefined

变量的使用

对声明的变量既可以读取操作，也可以赋值操作。

• 读取操作

var message;//只声明未初始化
varmsg=“卧龙学苑";//声明并初始化
varmsg=“卧龙学苑";//声明并初始化
console.log(msg);//输出this is message

这里是通过变量名找到变量对应存储的数据内容。我们真正使用的是数据内容，而不是变量。

• 赋值操作

var message;//只声明未初始化
message = "卧龙学苑";//初始化操作
varmsg="卧龙学苑";//声明并初始化
msg="提供国内最好的前端课程";//重新赋值

常量

常量是什么

定义:常量就是一个只读(read-only)的变量。.

描述:常量与变量类似，同样用于存储数据信息。只是常量的数据一旦被定义， 便不能被修改。

注意:

1.常量名习惯使用全 大写形式。

1.常量名习惯使用全 大写形式。

3.如果省略const关键字， JavaScript会认为是一个变量。

例：

/*
 ECMA 5之前的版本
 *语法并没有提供常量的定义 - 只能定义变量
 *人为规定定义的是常量，但是使用的语法依旧是变量的语法
*/
var C=100;/* 语法上是变量，人为规定为是常量*/
C = 200;/* 语法上是变量*/

/* 
 ECMA 5以及之后的版本
 *提供了定义常量的语法 - 一旦定义，值就不能再改变
   const 常量名 = 值；
 *重复赋值 - （报错）
  TypeError: Assignment to constant variable.
 *重复定义（常量或变量） - 报错
  SyntaxError: Identifier 'C1' has already been declared
*/
const C1=100;
/* 不能重复赋值*/
// C1=0;
/* 重复定义为常量*/
// const C1=200;
/* 重复定义为变量*/
var C1=200;
/*
 定义变量与常量的名称
 *定义变量名称时-全小写或者大小写混合
 *定义常量名称时一全大写
*/

例：

var z=100;//变量
const C=200;//常量
/*
 JavaScript是脚本语言 - 语法规则相对灵活
 *定义变量或常量时，允许不写修饰符(var或const)
 *没有var或const关键字时，定义的默认为变量
*/
s=300;
s=400;

常量的声明

• 在ECMAScript 5版本前，没有定义常量的语法。使用var关键字定义变量，人为规定值不改变，也可以是不严格的常量。

var MY_ CONST = 10;

• 在ECMAScript 5版本后，提供了关键字const定义常量。

const MY_ FAV = 100;

注意:常量的声明，必须进行初始化操作，否则会报错误。

const FOO; // SyntaxError; missing = in const declaration

说明:如果定义常量时，省略了关键字const的话，JavaScript会认为是一 个变量。

例：

/*
 常量的定义-必须定义时，同时初始化值
 *如果只定义，而不初始化值->报错
 SyntaxError: Missing initializer in const declaration
*/
const C;
console.log(C);

例：

/*
 变量与常量的区别：
 *变量
  1.定义变量使用var关键字
  2.定义变量使用小写
  3.变量允许重复定义或重复赋值
  4.变量允许只定义，但不初始化值
  5.变量的值允许改变的
 *常量
  1.定义常量使用const关键字
  2.定义常量使用大写
  3.常量不允许重复定义或重复赋值
  4.常量必须定义并初始化值
  5.常量的值不允许改变的
*/

数据类型

数据类型概述

在、JavaScript代码中，能够表示井操作值的类型称之为数据类型。

数据类型可分为可变类型和不可变类型。可变类型的值是可修改的，对象和数据就属于可变类型;不可变类型的值是不可修改的，数字、布尔值、nll和undefined都属于不可变类型。

字符串可以看成由字符组成的数组，可能被误认为是可变的。但在JavaScript中，字符串的值是不可变的。

数据类型分类

根据ECMAScript标准中的描述，数据类型被分为如下两种类型:

• 原始类型(又称原始值)
• 引用类型(又称内置对象)

但为了可以更好地学习JavaScript语言的数据类型。所以，我们将原始类型再细分为原始类型和特殊类型。

再将弓|用类型细分为包装类型和引用类型。

数据类型分类

这里将JavaScript语言的数据类型，分成了如下图所示的方式：

原始类型

原始类型，又称为原始值，是直接代表JavaScript语言实现的最底层的数据。

• 原始类型分为boolean类型、number类型和string类型三种。当然，有些资料将undefined和null也归为原始类型（这里表示为特殊类型）。

• 声明变量并初始化值为原始类型，一般称之为字面量方式定义变量，也可以称之为直接量方式定义变量。

number类型

描述：number类型是指数字，JavaScript不区分整数类型和浮点类型。

• 整数类型：包括负整数、0和正整数等。
• 浮点类型：表示小数，JavaScript中的所有数字均用浮点类型表示。

进制：是指一种记数方式。

• 八进制：以数字0开始，其后跟随一个由0~7之间的数字组成的序列。
• 十进制：使用一个数字序列表示一个十进制整数。
• 十六进制：由0_9，AF组成，字母不区分大小写。

注意：八进制或十六进制的数值最终会被转换成十进制数值。

例：

/*
 number类型：整数（Intger）和浮点数（小数|float或double）
 *JavaScript并不区分整数与浮点数
*/
var num = 100;/* 1.变量的定义并初始化；2.字面量或直接量定义数字值*/

浮点类型

描述：浮点类型，就是指该数值包含整数部分、小数点和小数部分。

var floatNum1=0.1;
var floatNum2=.1;//有效，但不推荐

注意：
1.JavaScript允许小数点前可以没有整数，但不推荐这种写法。

2.保存浮点类型需要的空间是保存整数类型的两倍。

3.如果小数点后面没有任何数字，那这个数值作为整数类型保存。

var floatNum3=1.;//小数点后面没有数字--解析为1
var floatNum4=10.0;//整数--解析为10

例：

var num1=1.1;
console.log(num1);
/* 浮点类型 -'.1'表示'0.1'的含义 ->不推荐*/
var num2=.1;
console.log(num2);

var num3 = 10.1;
console.log(num3);
/* 浮点类型 - '.0'表示为整数*/
var num4 = 10.0;
console.log(num4);
/* 浮点类型 - '.'表示为整数*/
var num5 = 10.;
console.log(num5);

四舍五入误差

整数有无数个，但JavaScript通过浮点类型只能表示有限的个数（确切的说是 18 437 736 874 454 810 627个）。也就是说，当在JavaScript中使用浮点类型时，常常只是真实值的一个近似表示。

如下述代码：

var x=.3-.2;
var y=.2-.1;
x==y;//值为false，表示两值不相等
x==.1;//值为false，.3-.2不等于.1
y=.1;//值为true，.2-.1等于.1

例：

/*
 number类型中的小数，在计算时可能出现误差
 *并不是所有的小数计算都出现误差
 *小数的计算时，注意结果是否出现误差
   *通过数字值的换算，将其转换成整数进行计算，再将结果换算为小数
*/
var x=0.3;
var y=0.2;
console.log(x-y);//0.1

NaN

描述：NaN(Not a Number)，即非数值，是一个特殊的数值。

特点：

1.任何涉及NaN的操作都会返回NaN.

2.NaN与任何值都不相等，包括NaN本身。

说明：针对上述特点，JavaScript提供了isNaN()函数。该函数用于判断计算结果是否为数值。

console.log(isNaN(10));//输出false（10是一个数值）
console.log(isNaN("10"));//输出false（可以被转换成数值10）
console.log(isNaN("blue"));//输出ture（不能转换成数值）
console.log(isNaN(ture));//输出false（可以被转换成数值1）

例：

/*
 number类型中存在一个特殊的值 - NaN
 *含义 - 表示当前值不是一个数字值
 *类型 - 依旧是number类型
 *特点 - NaN与任何值（自身）都不相等
*/
var num=Number('卧龙学苑');/* 将一个普通文本内容转换成number类型*/
console.log(num);//当前这个值不是一个数字值

console.log(10==10);//ture
console.log(NaN==NaN);//false

无穷大

例：

/*
 无穷大 - 1.正无穷大；2.负无穷大
 *无穷大与另一个无穷大是不相等的
 *无穷大减去另一个无穷大不等于零
*/
var num=98/0;
console.log(num);//Infinity

string类型

string类型用于表现由零或多个16位Unicode字符组成的字符序列，被称之为字符串。字符串可以由双引号(")或单引号(’)表示。

var firstString="卧龙学苑";
var secondString='提供国内最好的前端课程'；

string类型包含一些特殊的转义字符，用于表示非打印字符。

转义字符	含义
\n	换行符
\b	退格符
\f	换页符
\t	制表符
\r	回车符
\\	斜杠
\’	单引号（’），在用单引号表示的字符串中使用
\"	双引号（"），在用双引号表示的字符串中使用

例：

/*
 string类型 - JavaScript的字符串就是由单引号或双引号包裹
 *在JavaScript中单引号和双引号是没有区别的
*/
var str1='卧龙学苑';
var str2="卧龙学苑";
console.log(str1);
/*
 string类型 - 文本本身需要单引号或双引号时
 1.如果需要的是双引号，字符串只能使用单引号
 2.如果需要的是单引号，字符串只能使用双引号
*/
var str3='"卧龙学苑"sxsx';
console.log(str3)

var str4="'卧龙学苑'sxsx";
console.log(str4)

例：

//在控制台输出"xxxyyy",第一行输出"xxx"，第二行输出"yyy"
console.log('xxx\nyyy');

console.log('100');//string类型

boolean类型

描述：布尔(boolean)类型是指真或假、开或关、是或否。这个类型只有两个值：ture和false。

注意：

1.由于JavaScript是区分大小写的布尔类型的ture和false全部是小写。

2.JavaScript也可以将其他类型的数据，自动转换为布尔类型。

数据类型	转换为ture的值	转换为false的值
boolean类型	true	false
string类型	任何非空字符串	“”（空字符串）
number类型	任何非零数字值（包括无穷大）	0和NaN
object类型	任何对象	null
undefined类型		undefined

例：

/*
 boolean类型 - 只有两个值：1.true；2.false
*/
var boo1 = true;
console.log(boo1);
/* 大写或大小写混合->JavaScript识别为另一个变量名称*/
var boo2 = TRUE;
console.log(boo2);

typeof运算符

例：

/* 
 如何判断以下变量的值的类型？typeof运算符 - 判断原始类
 *语法结构 - typeof 变量名称
 *结果 - 原始类型的名称（string类型）
 */
var num = 100;
var boo = true;
var str = '卧龙学苑';

console.log(typeof num);//number
console.log(typeof boo);//booean
console.log(typeof str);//string

var result = typeof num;
console.log(result);//number
console.log(typeof result);//string

包装类型

包装类型概述

在、JavaScript中，对应原始类型提供了包装类型。通过包装类型可以创建原始类型的对象( 后面的课程学习)

由于、JavaScript是区分大小写的，从写法上来说，原始类型是全部小写，包装类型则是全部大写。

一般不建议使用包装类型定义对应的数据类型， 但包装类型提供了操作相应值的方法。

说明:包装类型涉及到对象的概念，具体技术内容会在后面的课程学习。

Number类型

描述: Number类型是原始类型nu umber类型对应的包装类型。

var num = new Number(10);

区别:

• typeof运 算符对原始类型返回"number",而耐包装类型为"object"。
• instanceof运 算符测试Number类型返回true，而测试nu umber类型返回false。

注意:不建议使用Nu mber类型。

例：

/*
 通过包装类型创建一个数字值类型的变量
 *var 变量名称 = new Number（数字值）
   *new Number（）->创建了一个Number类型的对象
 *以下两种方式创建的数字值，在使用上没有任何区别
*/
/* 构造函数方式*/
var num1 = new Number(100);
console.log(num1);//[Number: 100]
/* 字面量/直接量方式*/
var num2 = 100;
console.log(num2);//100

console.log(typeof num2);//number
console.log(typeof num1);//object（对象）

String类型

描述: String类型 是原始类型string类型对应的包装类型。

var str = new String("卧龙学苑");

区别:

• typeof运 算符对原始类型返回"string",而对包装类型为"object"。
• instanceof运 算符测试String类型返回true,而测试string类型返回false。

注意:不建议使用String类型。

例：

var str1 = new String('卧龙学苑');
console.log(str1);

var str2 = '卧龙学苑';
console.log(str2);

instanceof运算符

instanceof运算符的左操作数是一个 包装类型的变量，右操作数是对应的数据类型。如果左侧的变量是右侧的数据类型，则表达式返回true;否则返回false。例如下述代码:

varstr="卧龙学苑提供国内最好的前端课程";
console.log(str instanceof String);//计算结果为true, str是String类型
console.log(str instanceof Object);//计算结果为true,所有包装类型都是0bject的实例
console.log(str instanceof Number);//计算结果为false

注意:所有对象都是Object类型的实例对象，通过instanceof运 算符判断一个对象 是否为具体数据类型，也包含"父类"。

例：

var str = new String('卧龙学苑');
var num = new Number(100);
var boo = new Boolean(true);
//typeof运算符只能判断原始类型
console.log(typeof str);//object
console.log(typeof num);//object
console.log(typeof boo);//object
//instanceof运算符用于判断引用类型（包装类型）
console.log(str instanceof String);
console.log(num instanceof Number);
console.log(boo instanceof Boolean);

/*
 typeof运算符与instanceof运算符的区别
 *typeof运算符
   1.用于判断原始类型
   2.语法结构不同->typeof 变量名称
   3.得到的结果不同->原始类型的名称
 *instanceof运算符
   1.用于判断引用类型（包装类型）
   2.语法结构不同->变量名称->instanceof 引用类型名称
   3.得到的结果不同->布尔类型的值（true或false）
*/

特殊类型

undefined

JavaScript中有两个表示空的数据类型，undefined和null, 其中比较有用的是undefined。

undefined类型只有一 个值，就是indefined。

下列情况会返回undefined:

1. 访问未修改的变量undefined.

2. 没有定义return表达式的函数隐式返回undefined。

3. return表达式没有显式的返回任何内容。

4. 访问不存在的属性。

5. 任何被设 置为u Jndefined值的变量。

例：

/*
 undefined -在JavaScript 表示为空的含义
 *如果一个变量的值等于undefined ->变量是存在的，但没有值
 *undefined类型中只存在一个值(undefined)
 得到undefined值的情况如下：
 1.定义变量时，只声明，而不初始化值- >undefined
 2.定义变量时，初始化值为undefined ->undefined
 注意 - 得到undefined值的情况不止以上两种
*/
var v;
console.log(v);

var c = undefined;
console.log(c);
console.log(typeof v);//undefined - 类型名称

null

描述:∩u类型是JavaScript中的一个特殊类型，于表示一个不再指向任何内存 空间地址的变量。

用途:∩u 值多用于释放、JavaScript中的资源(量、数组和函数等)。

注意:使用typeof运算符计算n的话，返回的是object。

var wolongxueyuan = null;
console.log(wolongxueyuan);//输出null

例：

/*
 null
 *作用 - 用于将制定变量从内存中进行释放
 *实现 - 将指定变量的值赋值为null
 *null类型中只存在一个值(null)
*/
var v=null;
/* 以下结果是错误的*/
console.log(typeof v);//object

//console.log(v instanceof Null);//结果为报错
console.log(v instanceof Object);//false

undefined与null

• 共同点：都是原始类型，保存在栈（数据结构）中。
• 不同点：
  • undefined：表示变量声明但未被赋值，是所有未赋值变量的默认值。一般很少主动使用。
  • null：表示一个没有指向任何内存地址的变量，将来可能指向某个具体内存地址。一般用于主动释放资源。

数据类型

隐式类型转换

由于JavaScript是弱类型/松散类型的，在任何情况下都可以强制转换。

• 转换为字符串：将一个值加上空字符串可以轻松转换为字符串类型。

"+10==='10';//true

• 转换为数字：使用一元的加号操作符，可以把字符串转换为数字。

+'10'===10;//true

• 转换为布尔值：使用否操作符两次，可以把一个值转换为布尔型。

!!'foo';//true

例：

//定义number类型、string类型以及boolean类型的变量
var num=100;
var str='卧龙学苑';
var boo=true;

//1.转换为string类型
var result1=''+num;//100
console.log(typeof result1);//string
var result2=''+boo;//true
console.log(typeof result2);//string

/*
 2.转换为number类型
  *string类型转换为number类型
    *如果文本内容是普通的文本（非数字）->转换后的结果为NaN
    *如果文本内容是数字值->转换后的结果为对应数字值
  *boolean类型转换为number类型
    *true转换为1
    *false转换为0
*/
var result3= + str;
console.log(result3);//NaN
console.log(typeof result3);//number
var result4= + boo;
console.log(result4);//true转换为1，false转换为0
console.log(typeof result4);//number

/*
 3.转换为boolean类型
   *string类型转换为boolean类型
     *空字符串（''或""）转换后的结果为false，其余情况都为true
   *number类型转换为boolean类型
     *⊙或NaN转换后的结果为false，其余情况都为true
   *undefined或null转换后的结果为false
*/
var result5=!!str;
console.log(result5);//true
console.log(typeof result5);//boolean
var result6=!!num;
console.log(result6);//true
console.log(typeof result6);//boolean

显式类型转换

• 使用JavaScript的包装类型的构造函数进行类型转换。

构造函数	描述
Number()	将字符串或布尔值转换为数字，如果包含非法字符，则返回NaN。
String()	将数字或布尔值转换为字符串。
Boolean()	将字符串或数字转换为布尔值。

• 使用数据类型的转换函数进行类型转换。

对象方法	描述
toString()	将数字或布尔值转换为字符串。
parselnt()	将字符串或布尔值转换为整数类型。
parseFloat()	将字符串或布尔值转换为浮点类型。

注意：任何不能正确转换为数字值的内容，转换成Number类型后得到的结果都是NaN。

例：

//定义number类型、string类型以及boolean类型的变量
var num = 100;
var str = '卧龙学苑';
var str1 = '100'
var str2 = '100.1'
var boo = false;

/*
 1.转化为string类型
   *String()函数- >String(值)
   *toString()方法->变量名.toString()
     *对象的方法->将变量当作是一个对象来使用
*/ 
var result1=String(num);
console.log(typeof result1);//string
var result2=num.toString();
console.log(typeof result2);//string

/*
 2.转化为number类型
   *Number()函数->Number(值)
   *parseInt()方法->parseInt(值)
     *转化为number类型，转化为一个整数
   *parseFloat()方法->parseFloat(值)
     *转化为number类型，转化为一个浮点数
*/
var result3=Number(boo);
console.log(typeof result3);//number

var result4=parseInt(str1);
console.log(typeof result4);//100
var result5=parseFloat(str1);//100
console.log(result5);//100

var result6=parseInt(str2);
console.log(result6);//如果当前值为小数的话，parseInt()后取整数部分 - 100
var result7=parseFloat(str2);//100
console.log(result7);//100.1
/*
 3.转化为boolean类型
   *Boolean()函数->Boolean(值)
*/
var result8 = Boolean(str);
console.log(result8);//true

显式与隐式

/*
 隐式类型转换与显式类型转换的区别：
 *隐式类型转换：
   *优点 - 性能好
   *缺点 - 可读性差
 *显式类型转换：
   *优点 - 可读性高
   *缺点 - 性能差
*/

运算符

运算符概述

JavaScript提供了一组用于操作数据值的运算符，又称为操作符。这些运算符可以按照作用的不同，或者操作变量数量的不同进行分类。

运算符分类

如果按照作用的不同，运算符的分类如下所示：

• 算术运算符(+ - * / % ++ --)
• 比较运算符(> >= < <= == != === !==)
• 逻辑运算符(&& || !)
• 赋值运算符(= += -= *= /= %=)
• 字符串连接运算符(+)
• 条件运算符 ? :
• 特殊运算符(typeof instanceof delete)

按照作用的不同进行分类，更容易理解掌握。所以，我们的教程采用这种方式进行分类。

算术运算符

例：

var num=100;
var str1='卧龙学苑';
var str2="200";
var boo=true;

//1.加法
var result1=num+200;
console.log(result1);//300
//如果字符串进行加法计算->字符串连接运算符（拼串）
var result2=str1+300;
console.log(result2);
console.log(typeof result2);//string

var result3=str2+200;
console.log(result3);//200200
//如果布尔类型进行加法计算->将布尔类型转换为数字值，再进行加法计算
var result4=boo+100;
console.log(result4);//101

//2.减法 - 先将其他类型转换为number类型，再继续计算
var result5=num-20;
console.log(result5);//80
//如果字符串进行减法计算的话->将字符串类型转换为数字值，再进行减法计算
var result6=str1-30;
console.log(result6);//NaN
var result7=str2-40;
console.log(result7);//160
//如果布尔类型进行减法计算->将布尔类型转换为数字值，再进行减法计算
var result8=boo-50;
console.log(result8);//-49

//3.除法 - 一旦零是被除数->无穷大

求余运算符

求余运算符，用于计算两个运算数整除后的余数。

console.log(10%3);//输出1
console.log(-10%3);//输出-1
console.log(10%-3);//输出1
console.log(-10%-3);//输出-1

例：

//求余运算符->获取除法计算之后的余数
console.log(100%3);//1
console.log(8%4);//0
//求余的结果是正数还是负数，与第一个操作数是正数或负数有关（与第二个操作数无关）
console.log(100%-3);//1
console.log(8%-4);//0

console.log(-100%3);//-1
console.log(-8%4);//-0

console.log(-100%-3);//-1
//与减法的情况保持一致
console.log('卧龙学苑'%2);//NaN

自增运算符

自增运算符，用于整数值逐次加1.分别具有两种用法：

• 前置型：自增运算符位于运算数之后。先加1，再赋值。
• 后置型：自增运算符位于运算数之后。先赋值，再加1.

var x=3;
console.log(x++);//输出3
console.log(x);//输出4

var y=3;
console.log(++y);//输出4
console.log(y);//输出4

例：

/*
 自增运算符 - 操作当前变量的值：每自增一次（+1）
 *前置自增运算符 - ++变量名
   *先自增，再赋值
 *后置自增运算符 - 变量名++
   *先赋值，再自增
*/
var num=10;
console.log(num);//10
/*var result1=++num;
console.log(result1);//11
console.log(num);//1*/
var result2=num++;
console.log(result2);//10
console.log(num);//11

比较运算符

JavaScript语言中的比较运算符，主要用于比较两个操作数的是否相等，或者大小情况。下述表格描述比较运算符。

运算符	描述	例子
==	检查两个运算数的值是否相等，如果相等则结果为true	A==B为false
!=	检查两个运算数的值是否不等，如果不等则结果为false	A!=B为true
>	检查左边运算数是否大于右边运算数，如果是则结果为true	A>B为true
>=	检查左边运算数是否大于或等于右边运算数，如果是则结果为true	A>=B为true
<	检查左边运算数是否小于右边运算数，如果是则结果为true	A<B为false
<=	检查左边运算数是否小于或等于右边运算数，如果是则结果为true	A<=B为false

说明：字符串类型的比较，是按照Unicode字符编码的先后顺序进行比较。

例：

//1.number类型
console.log(10>11);//false
console.log(11>10);//true
console.log(10>=10);//true
//2.boolean类型 - 将boolean类型转换为number类型
console.log(true>false);//true
console.log(true>0);//true
/*
 3.string类型 - a.英文;b.中文
   *英文或中文-> 将文本转换为Unicode码 - 对应具有数字值
   *英文单词 -> 从左至右的依次比较字母Unicode码的大小
*/
console.log('a'<'b');//true
console.log('a'>'A');//true
console.log('abc'>'cba');//false
console.log('abc'>'acd');//false

console.log('我'>'你');//true

例：

//1.number类型
console.log(10==10);//true
console.log(10==11);//false
//2.boolean类型
console.log(true==true);//true
console.log(true==false);//false

console.log(true==1);//true

//3.string类型
console.log('a'=='a');//true
console.log('a'=='b');//false
//只比较值，而不比较类型
console.log('100'=100);//true

/*
 相等比较运算符
 *与赋值运算符的区别
   *赋值运算符（=）
   *相等比较运算符（==）
 不等比较运算符
 *符号是“!=”
 *不是“<>”
*/

全等与不全等

全等(=)与不全等(!)两个运算符，既比较操作数的值，也比较类型。

运算符	描述
===	两个运算数的值相等并且类型相同时，结果为true
!==	两个运算数的值不等或者类型不同时，结果为true

var x=10;
var y='10';

console.log(x==y);//输出true
console.log(x===y);//输出true
console.log(x!=y);//输出true
console.log(x!==y);//输出true

例：

//全等与不全等 - 不仅比较值，还比较类型
console.log(10===10);//true

console.log('10'===10);//false
console.log('10'==10);//true

isNaN()函数

描述：isNaN()函数用于判断其参数是否为NaN(非数字值)。

作用：多用于检测使用类型转换函数进行数据类型转换后的结果是否为合法的数字值。

注意：NaN与任何值（包括自身）进行比较，结果都是false。不能使用“”或者“=”运算符判断某个值是否是NaN,而只能使用isNaN()函数。

console.log(isNaN(parseInt('123a')));//输出true

console.log(isNaN('123.45a'));//输出true

console.log(isNaN(Number('123.45a')));//输出true

例：

/*
 isNaN()函数
 *作用 - 判断当前值是否为NaN
   *true - 表示当前值是NaN(不是一个数字值)
   *false - 表示当前值不是NaN(不是一个数字值)
*/
console.log(isNaN(100));//false
console.log(isNaN(Number('卧龙学苑')));//true

var result=100/0;
console.log(result);
/*
 isfinite()函数
 *作用 - 判断当前值是否为无穷大
   *false - 表示当前值是无穷大
   *true - 表示当前值是有限数值
*/
console.log(isFinite(result));//false

逻辑运算符

JavaScript语言中的逻辑运算符，基本用法是用于布尔类型的计算。具体运算符如下：

运算符	描述	例子
&&	逻辑与运算符。如果两个运算数都是true,则返回true	A&&B为true
||	逻辑或运算符。如果两个运算数中任何一个是true, 则返回true	A||B为true
!	逻辑非运算符。用于改变运算数的逻辑状态。如果逻辑状态为true，则通过逻辑非运算符是逻辑状态改为false	!(A&&B)为false

例：

console.log(true && true);//true
console.log(true && false);//false
console.log(false && true);//false
console.log(false && false);//false
/*
 将逻辑与运算符的两个操作数，转换为布尔类型
   *当左边的操作数为true时，结果为右边操作数的值
   *当左边的操作数为false时，结果为左边操作数的值
*/
console.log(100 && 1);//1
console.log(1 && 0);//0
console.log(0 && 1);//0
console.log(0 && 0);//0

console.log(true && true);
console.log(true && false);
console.log(false && true);
console.log(false && false);

console.log('卧龙学苑' && '卧龙学苑');//卧龙学苑
console.log('卧龙学苑' && '');//''
console.log('' && '卧龙学苑');//''
console.log('' && '');//''

console.log('卧龙学苑' && 1);//1
console.log(fasle && 0);//false

逻辑或运算符

使用逻辑或运算符时，如果两个操作数都是布尔类型的话，只有其中一个操作数都为true时，返回的结果才为true，否则都为false.

B1	B2	B1 && B2
false	false	false
false	true	true
true	false	true
true	true	true

console.log(false || true);//输出true
console.log(false || false);//输出false
//数字值1和0转化为布尔值true和false
console.log(1 || 0);//输出true
//空字符串转化为布尔值false，非空字符串转化为布尔值true
console.log("" || "卧龙学苑");//输出true

例：

console.log(true || true);//true
console.log(true || false);//true
console.log(false || true);//true
console.log(false || false);//false
/*
 将逻辑与运算符的两个操作数，转换为布尔类型
   *当左边的操作数为true时，结果为左边操作数的值
   *当左边的操作数为false时，结果为右边操作数的值
*/

console.log(100 || 1);//100
console.log(1 || 0);//1
console.log(0 || 1);//1
console.log(0 || 0);//0

console.log(true || true);//true
console.log(true || false);//true
console.log(false || true);//true
console.log(false || false);//false

console.log('卧龙学苑' || '卧龙学苑');//卧龙学苑
console.log('卧龙学苑' || '');//'卧龙学苑'
console.log('' || '卧龙学苑');//'卧龙学苑'
console.log('' || '');//''

逻辑短路原则

所谓短路原则，就是只要确定运算符前面的运算数为true或false，就可以确定返回结果为true或false。

• 逻辑与运算符
  • 逻辑与运算符前面为false，结果都将返回逻辑与运算符前面的值
  • 逻辑与运算符前面为false，结果都将返回逻辑与运算符后面的值
• 逻辑或运算符
  • 逻辑或运算符前面为false，结果都将返回逻辑或运算符后面的值
  • 逻辑或运算符前面为false，结果都将返回逻辑或运算符前面的值

逻辑非运算符

逻辑非运算符的作用，就是如果操作数可以转换成true的话，则返回结果为false，否则返回结果为true。

B1	!B1
false	true
true	false

console.log(!true);//输出false
console.log(!1);//输出false
console.log(!'卧龙学苑');//输出false

注意：能被转换为false的值有null，0，NaN，空字符串("")和undefined。

赋值运算符

JavaScript语言中的赋值运算符用于为变量或属性进行赋值操作。

var wolongxueyuan="卧龙学苑";//将字符串“卧龙学苑吧”赋值给变量wolongxueyuan
var obj.x=1;//将数字值1赋值给obj对象的x属性

赋值运算符就是将右边操作数的计算结果赋值给左边操作数

C=A+B//将A+B的值赋给C

赋值扩展运算符

JavaScript语言中的赋值扩展运算符实际就是赋值运算符与算术运算符配合使用的简写形式。

运算符	描述	例子
+=	加等赋值运算符，将右边运算符与左边运算符相加并将运算结果赋给左边运算数。	C+=A相对于C+A
-=	减等赋值运算符，将左边运算数减去右边运算数并将运算结果赋给左边运算数。	C-=A相对于C=C-A
*=	乘等赋值运算符，将右边运算数乘以左边运算数并将运算结果赋给左边运算数。	C *=A相对于C=C *A
/=	除等赋值运算符，将左边运算数除以右边运算数并将运算结果赋值给左边运算数。	C/=A相对于C=C/A
%=	模等赋值运算符，用两个运算数做取模运算并将运算结果赋值给左边运算数。	C%=A相对于C=C%A

注意：C+=A由于运行时可以进行优化，执行效率都要优于C=C+A.

例：

var b=10,c=20;

var a=b+c;
console.log(a);//30

//b=b+c;
//等价写法 - 赋值扩展运算符的性能要比赋值运算符更高
b+=c;
console.log(b);//30

条件运算符

条件运算符，首先判断一个表达式是真或假，然后根据判断结果执行两个给定指令中的一个。

运算符	描述	说明
?:	条件表达式	如果条件为真? X值：Y值

说明：作为条件的表达式可以是任何表达式，并且计算结果为布尔类型。

var age=20;
var msg=age>18?"成年人":"未成年人";

例：

var result=10>9?"对":"错";
console.log(result);

var score=95;
var result=score>90?console.log('优秀'):console.log('及格');

例：

var score=55;
/*
 嵌套条件运算符
 *优点 - 扩展了条件运算符本身的计算能力
 *缺点 
   *可读性比较差
   *性能随着嵌套的层级越多越差
 *建议 - 最多不要超过三层嵌套
*/
var result=score>90?"优秀":score>80?"良好":score>60?"及格":"不及格";
console.log(result);

语句

概述

描述：在JavaScript中，语句使用分号（;）进行分隔。可以在每行编写一条语句，也可以在每行编写多条语句。

分类：

1.条件语句：JavaScript解释器根据一个值判断是执行还是跳过指定语句。

2.循环语句：JavaScript解释器根据一个值判断是否重复执行指定语句。

3.跳转语句：使JavaScript解释器跳转到指定语句。

注意：

1.建议每行编写一条语句，便于提高代码的阅读性。

2.JavaScript解释器按照语句的编写顺序依次执行。

语句块

JavaScript中使用一对花括号（{}）表示一个语句块。使用语句块为语句进行分组，这样使语句的结构清晰明了。如下述代码：

{
    
    
	var v="卧龙学苑";
	console.log(v);
}

注意：

1.语句块的结尾不需要分号。

2.语句块中的行都有缩进，但并不是必需的。

3.语句中声明变量是全局变量（后面的课程学习）。

空语句

空语句允许包含0条语句，JavaScript解释器执行空语句时，不会执行任何动作。空语句如下述代码：

;

注意：如果有特殊目的使用空语句时，最好在代码中添加注释。这样可以更好的说明这条空语句是有用的。

流程控制语句

JavaScript解释器按照语句的编写顺序依次执行，但也可以编写一些复杂的语句块，基本分为下述三种：

条件语句

条件语句就是指通过判断指定的计算结果，来决定是执行还是通过指定的语句块。

如果说JavaScript解释器是按照代码的“路径”执行的话，那条件语句就是这条路径上的分叉点，代码执行到这里时必须选择其中一条路径继续执行。

JavaScript提供了两种条件语句：if…else语句和switch…case语句。

if语句

if语句是条件判断语句，也是最基本的流程控制语句。

if语句的执行流程如下：

1.判断条件的结果是true还是false。

2.当结果为true时，执行下面的语句块。

3.当结果为false时，会跳过语句块，继续执行下面的代码。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S69G45AW-1632449001313)(https://s4.ax1x.com/2021/03/19/6fBVit.png)]

例：

var result=true;//boolean类型值
/*
 if语句
 if（条件表达式）{
     语句块 - 当条件表达式计算结果为true时才执行
 }
 *条件表达式
   *作用 - 控制是否执行指定的语句块
   *结果 - 一般为boolean类型的值（true|false）
   *问题 - 如果条件表达式计算的结果不是Boolean类型
     *将结果强行转换为boolean类型，再进行判断
*/
/*if (result){
    console.log('这是if语句执行的语句块。。。');
}*/

/*if (true && true){
    console.log('这是if语句执行的语句块。。。');
}*/

var v;/* 定义变量但不初始化
if (v='卧龙学苑'){ /*将变量的初始化操作，放置在条件表达式中
    console.log('这是if语句执行的语句块。。。');
}*/
//等价于
v='卧龙学苑';/* 变量的初始化操作*/
if (v){
    
    
    console.log('这是if语句执行的语句块。。。');
}
console.log('这是if语句执行完毕后的内容。。。')

if…else语句

if…else语句是条件判断语句，但与if语句的执行流程并不相同。

if…else语句的执行流程如下：

1.判断条件的结果是true还是false。

2.当结果为true时，执行下面的语句块1。

3.当结果为false时，执行下面的语句块2。

4.继续执行语句块3。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IQBLv7Hv-1632449001314)(https://z3.ax1x.com/2021/03/20/64kBes.png)]

例：

var result=true;
/*
 if...else语句
 if(表达式){
     语句一
 } else {
     语句二
 }
*/
if (result){
    
    
    console.log('这是语句块一');
} else{
    
    
    console.log('这是语句块二');
}
console.log('这是if语句执行完毕后的内容。。。');

if语句的注意事项

如下示例代码，学习if…else语句的使用：

var score=68;
if (score<60) {
    
    
    console.log('不及格');
}else{
    
    
    console.log('及格');
}

注意：if…else语句中的大括号（{}）可以被省略，但建议编写，以提高代码阅读性。

例：

var result=true;
/*
 if语句与if...else语句
 *对应的语句块的大括号”{}“->允许被省略的
   *前提 - 当前语句块中只存在一条语句时
 *省略大括号”{}“时，JavaScript默认认为后面的第一条语句是被控制的语句块内容
 *结论 - 建议按照语法规则编写
*/
if (result){
    
    
    console.log('这是if语句执行的语句块1。。。');
    console.log('这是if语句执行的语句块2。。。');
    console.log('这是if语句执行的语句块3。。。');
}

console.log('这是if语句执行完毕后的内容。。。');

if语句与条件运算符

例：

var boo=true;
if(boo){
    
    
    console.log('这是if语句执行的语句块1。。。');
}else{
    
    
    console.log('这是if语句执行的语句块2。。。');
}

console.log('这是if语句执行完毕后的内容。。。');

var result=boo?"一":"二";
console.log(result);

if…else语句嵌套

if…else语句支持嵌套写法，也就是说，可以在if或else后面的语句块中继续编写if…else语句。如下述代码:

var score=68;
if (score>90) {
    
    
	console.log("优秀");
}else{
    
    
	if(score>=80){
    
    
	console.log("良好");
	}else{
    
    
	  console.log("一般")
	}
}

例：

var score=95;
if (score>90){
    
    
    console.log('优秀');
}else{
    
    
    if (score>80){
    
    
        console.log('良好');
    }else{
    
    
        console.log("及格");
    }
}

else…if语句

else…if语句是在if语句的基础上，允许提供多个条件判断。

例：

var score=65;
if (score>90){
    
    
    console.log('优秀');
}else{
    
    
    if (score>80){
    
    
        console.log('良好');
    }else{
    
    
        console.log("及格");
    }
}
/*
 if(条件表达式一){
     语句块一
 }else if(条件表达式二){
     语句块二
 } else{
     语句块三
 }
*/
if (score>90){
    
    
    console.log("优秀");
}else if(score>80){
    
    
    console.log('良好');
}else{
    
    
    console.log('及格');
}

switch…case语句

switch…case语句是开关语句，但整体执行流程要比if…else语句复杂的多。具体参考下述流程图：

例：

var result='0';
/*
 枚举 - 将计算结果可能的值尽量的罗列完整
 switch(条件表达式){
    case 值一：
        语句块一
    case 值二：
        语句块二
    ... ...
    default:
        语句块N
 }
 *条件表达式 - 不一定是Boolean类型，计算结果分别是与case语句的值进行比较
   *条件表达式计算结果与case语句的值是全等比较（既要比较值，也要比较类型）
 *case语句 - 罗列可能的匹配值
   *对应的语句块最后添加 break 关键字 - 当执行对应的语句块之后，停止继续执行
 *default语句 - 类似于if...else语句中的else语句
   *当以上所有case语句的值都不匹配时，默认执行default语句对应的语句块
   *注意 - 不是default语句不需要break关键字，而是default默认一般被编写在最后
 *
*/
switch(result){
    
    
    case 0:
        console.log('这是数字0');
        break;
    case 1:
        console.log('这是数字1');
        break;
    default:
        console.log('以上结果无一满足');
}

循环语句

循环语句是什么

循环语句是一系列反复执行到复合特定条件的语句。为了更好的理解循环语句，可以将JavaScript代码想象成一条条的分支路径。循环语句就是代码路径中的一个回路，可以让一段代码重复执行。

循环语句的执行流程如下：

1.执行语句块。

2.判断条件的计算值是true还是false。

3.如果是true，则重复执行语句块。

4.如果是false，则继续执行后面的代码。

while语句

while语句是一个基本循环语句，语法结构与if语句很类似。

while语句的执行流程如下：

1.执行while语句的条件判断是true还是false。

2.如果为true，执行语句块。然后再重新计算while语句的条件判断是true还是false。

3.如果为false，则跳过语句块，继续执行下面的代码。

例：

var result=1;
/*
 while(条件表达式){
    语句块
 }
 *必须通过一个变量值的改变，控制条件表达式的计算结果
   *在循环的过程中，至少有一次计算结果为false -> 结束循环
 *如果没有这样的一个变量的话->循环叫做死循环
*/
while (result<=10){
    
    
    console.log("这是while循环语句执行。。。");
    result++;//改变变量的值，至少有一次让条件表达式计算的结果为false
}

console.log('这是while循环语句执行完毕后。。。');

do…while语句

do…while语句也是一个基本循环语句，执行流程与while语句很类似。

do…while语句的执行流程如下：

1.执行语句块。

2.执行while语句的条件判断是true还是false。

3.如果为true，执行语句块。然后再重新计算while语句的条件判断是true还是false。

4.如果为false，继续执行下面的代码。

例：

var result=0;
/*
    do {
        语句块
    } while (条件表达式);
*/
do {
    
    
    console.log(result);
    result++;
} while (result<=10);

while与do…while语句区别

释：

var result=0;
//while语句 - 先判断，再执行
while (result>0){
    
    
    console.log('whiel语句');
}
//do...while语句 - 先执行，再判断
do {
    
    
    console.log('do...while语句');
}while (result>0);

for语句

for语句是一种最简洁的循环语句，其中包含三个重要部分：

1.初始化表达式：初始化一个计数器，在循环开始前计算初始状态。

2.条件判断表达式：判断给定的状态是否为true。如果条件为true，则执行语句块，否则跳出循环。

3.循环操作表达式：改变循环条件，修改计数器的值。

for语句的语法如下：

for(初始化表达式；条件判断表达式；循环操作表达式){
    
    
	语句块
}

例：

var v=0;
while (v<10){
    
    
    console.log(v);
    v++;
}
console.log(v);

/*
 for （初始化表达式；条件判断表达式；循环控制表达式）{
    语句块
 }
 *初始化表达式 - 用于初始化控制循环的变量
 *条件判断表达式 - 用于判断是否要结束循环
 *循环控制表达式 - 用于控制结束循环的焦点
 注意：
 *for语句的语法要求并不强制必须定义以上三个表达式
 *一旦省略三个表达式的话，表达式的分隔符必须存在
*/
/*for (var v=0;v<10;v++){
    console.log(v);
}*/

var v=0
for (;v<10;){
    
    
    console.log(v);
    v++;
}

跳转语句

跳转语句是什么

JavaScript中另一种语句就是跳转语句。从名称就可以看出，它使得JavaScript代码的执行可以从一个位置到另一个位置。

跳转语句提供了break和continue两种，用于跳转当前的循环或开始下一次的循环等。

例：

/*
 跳转语句
 *作用 - JavaScript代码从指定位置跳转到另一个指定的位置
 *场景 - 跳转语句只能用于循环执行结构，而不能用于条件判断结构
   *注意 - switch...case语句中使用的break，并不是break的用法，而是switch语句的语法
 *循环语句中的跳转语句
   *break语句 - 表示结束整体循环
   *continue语句 - 表示结束本次循环
*/
/*var result=0;
switch(result){
    case 0:
        console.log(0);
        break;
    case 1:
        console.log(1);
        break;
    default:
        console.log(2);
        break;
}*/

/*if (true){
    console.log('if语句。。。');
    break;
}*/

for (var i=0;i<9;i++){
    
    
    if (i==4){
    
    
        continue;
    }
    console.log(i);
}

break语句

break语句是中断语句，用于终止循环语句或开关语句。

• 终止循环语句，例如while、do…while以及for语句等。

for(var i=0;i<10;i++){
    
    
   if(i == 5){
    
    
     break;
    }
    console.log(i);
}

• 终止开关语句(awitch…case)，具体内容参考《awitch…case语句》一章。

continue语句

continue语句是连续语句，用于重新开始while、do…while和for语句。

for(var i=0;i<10;i++){
    
    
   if(i==5){
    
    
      continue;
    }
    console.log(i);
}

上述代码的执行结果为1，2，3，4，5，6，7，8，9。当i等于5时，结束本次循环，开始下一次的循环执行。

数组

数组是什么

数组是值的有序集合。数组中的每个值叫做一个元素，而每个元素在数组中都有一个唯一的位置。这个位置用数字表示，叫做索引数组；用字符串表示，叫做关联数组。

JavaScript数组是无类型的：数组的元素可以是任何类型，例如字符串、数字值、布尔值等，而且每个数组中的不同元素可能是不同类型。

JavaScript数组是动态的，根据需要，可以动态的向数组插入新的元素，或者从数组中删除指定的元素。

一维数组

定义数组

数组的最大作用就是用于存储多个值。定义数组分别三种形式：

1.使用数组字面量方式：

var arr=[];

上述示例代码，表示定义了一个空数组。所谓空数组，就是没有包含任何元素的数组。

当然，我们也可以在定义数组时，同时为数组定义内部的元素。

var arr=[1,"a",true];

说明：在一个数组中的不同元素可以是不同数据类型。

这里需要注意的是，虽然数组具有字面量方式的定义，但与原始类型的字面量方式的定义不同。

如果使用typeof运算符判断数组的结果为object。

例：

/*
 1.字面量/直接量方式定义
   var 数组名称= [元素一,元素二,...];
*/
var arr1=[];//定义一个空数组
var arr2=[100,"卧龙学苑",true,undefined];
var arr6=[10];

console.log(arr1);
console.log(arr6);

/*
 2.构造函数方式
   var 数组名称= new Array(元素一，元素二，。。。);
   var 数组名称= new Array(length);
   *length - number类型，表示数组的长度（存储元素的个数）
*/
var arr3=new Array();//定义一个空数组
var arr4=new Array(100,"卧龙学苑",true,undefined);

console.log(arr4);

var arr5=new Array(10);

console.log(arr5);
/*
 3.函数方式定义
   var 数组名称= Array(元素一，元素二，。。。);
   var 数组名称= Array(length);
   *length - number类型，表示数组的长度（存储元素的个数）
*/
var arr7=Array();//定义一个空数组
var arr8=Array(100,'卧龙学苑',true,undefined);
var arr9=Array(10);

console.log(arr9);

索引数组

索引数组就是存储元素的位置使用数字值来表示，一般称之为下标或角标。具体创建方式如下述代码：

var arr=[];
arr[0]=1;
arr[1]="a";
arr2=true;

注意：索引数组的下标是从0开始的。

例：

/*
 索引数组 - 表示数组中元素的位置使用数字值来表示的
 *数字值表示元素的位置 -> 角标或下标
 *数组的长度与元素的个数是一致的
*/
var arr=[];//定义一个空数组
arr[0]='卧龙学苑';
arr[1]=true;

console.log(arr.length);

关联数组

例：

/*
 关联数组 - 表示数组中元素的位置使用字符串来表示的
 *注意：关联数组的数组长度与元素的个数不一致
 *原因：JavaScript的官方不支持关联数组的
*/
var arr=[];//定义一个空数组
arr['name']='yamy';
arr['age']=19;
arr['job']='god';
//输出的结果：[ name: 'yamy', age: 19, job: 'god' ]
console.log(arr.length);

稀疏数组

稀疏数组就是包含0开始的不连续索引的数组。具体创建方式如下述代码：

var arr=Array(10);//数组没有任何元素，数组的长度为10

var arr=new Array(10);//数组没有任何元素，数组的长度为10

var arr=[];//创建一个空数组
arr[100]="a";//向下标为100的位置添加一个元素a

注意：上述代码中的第一条和第二条语句，并不是创建一个数组包含一个元素10，而是创建一个不包含任何元素的数组长度为10.

例：

/*
 索引数组的位置允许不连续的  - 没有定义元素的位置默认为空(undefined)
 *稀疏数组 - 现象：数组的长度与元素的个数不一致的
*/
var arr=[];
arr[0]='yamy';
arr[3]=19;
arr[5]='god';

console.log(arr.length);

/*
 得到undefined值的几种方式：
 1.定义变量，但未初始化值
 2.定义变量，并初始化值为undefined
 3.访问数组中未定义的位置的元素值（默认为undefined）
*/

//将稀疏数组进行处理，得到正常的索引数组
var newArr=[];
for (var i=0;i<arr.length;i++){
    
    
    //比较当前值是否等于undefined
    if (arr[i]!==undefined){
    
    
        newArr.push(arr[i]);
    }
}
console.log(newArr);

数组元素的读取

数组的主要作用是用于存储和读取数据信息，之前已经对数组存储数据信息掌握了。下面来看看如何从数组中读取指定的元素：

var arr=[1,"a",true];
console.log(arr[1]);//输出字符串a

var arr=[];
arr['num']=1;
arr['atr']='a';
arr['bool']=true;

console.log(arr['str']);//输出字符串a

例：

//定义数组的默认为索引数组
var arr=['卧龙学苑',100,null];
//调用数组名称时，得到只是存储所有元素数据的集合
console.log(arr);
//访问索引数组中的元素-> 数组名称[索引值]
console.log(arr[0]);
//如果访问了数组中未定义的位置的元素时 - 语法不报错，结果为undefined
console.log(arr[9]);
//索引数组中索引值最大为arr.length-1

//JavaScript中的关联数组定义与访问都是没有问题的
var arr1=[];
arr1['name']='yamy';
arr1['age']=19;
arr1['job']='god';

console.log(arr1['name']);

数组元素的修改

不仅可以从数组中读取指定的元素，还可以根据需求修改数组中指定的元素值。

var arr=[1,"a",true];
console.log(arr[1]);//输出字符串a
arr[1]="b";
console.log(arr[1]);//输出字符串b

var arr=[];
arr['num']=1;
arr['atr']="a";
console.log(arr['str']);//输出字符串a
arr['str']="b";
console.log(arr['str']);//输出字符串b

[
例：

/*var v=100;
var result=v;
console.log(v);
console.log(result);

v=200;
console.log(result);*/

var arr=['卧龙学苑',true];
var result=arr;

console.log(arr);
console.log(result);

/*arr=[100];
console.log(arr);

console.log(result);*/

arr=[100];
arr[0]=100;
console.log(arr);

console.log(result);

例：

//索引数组
var arr1=[];
arr1[0]='卧龙学苑';
arr1[1]=true;
//关联数组
var arr2=[];
arr2["name"]="yamy";
arr2['age']=19;
arr2['job']='god';
//通过数组的索引值找到对应元素的位置，再通过重新赋值的操作进行修改
arr1[0]=100;
console.log(arr1);

arr2['name']='libra';
console.log(arr2);
//如果索引值是新的，就是新增数组的元素操作
arr1[100]='卧龙学苑';
console.log(arr1);

数组元素的删除

不仅可以根据需求修改数组中指定的元素值，也可以删除数组中指定的元素值。数组删除指定元素值使用delete关键字。

var arr=[1,"a",true];
delete arr[1];
console.log(arr[1]);//输出字符串undefined

注意：上述代码使用delete关键字执行删除数组元素值的操作时，并不影响数组的长度。

var arr=[1,"a",true];
delete arr[1];
console.log(arr.length);//输出3

例：

//索引数组
var arr1=[];
arr1[0]='卧龙学苑';
arr1[1]=true;
//关联数组
var arr2=[];
arr2["name"]="yamy";
arr2['age']=19;
arr2['job']='god';

/*
 使用delete 运算符进行删除
 *注意 - 只要删除元素的数据内容，而对应的位置被保留->稀疏数组
*/
delete arr1[0];
console.log(arr1);

遍历数组元素

使用for语句是遍历数组元素最常见的方法：

var arr=[1,"a",true];
for(var i=0;i<arr.length;i++){
    
    
   console.log(arr[i]);
}

也可以从数组的最后向前（倒序）进行遍历：

var arr=[1,"a",true];
for(var i=arr.length-1;i>=0;i--){
    
    
	console.log(arr[i]);
}

例：

var arr=['卧龙学苑',100,true,undefined];
//while语句
/*var i=0;
while (i<arr.length){
    console.log(arr[i]);
    i++;
}*/

//do...while语句
/*var i=0;
do{
    console.log(arr[i]);
    i++;
}while(i<arr.length);*/

//for语句
for (var i=0;i<arr.length;i++){
    
    
    console.log(arr[i]);
}

for…in语句

在CMAScript 5中新增了for…in语句，同样也可以用于遍历数组：

var arr=[1,"a",true];
for(var i in arr){
    
    
	console.log(i+":"+arr[i]);
}

注意：

1.for关键字后定义的变量i表示当前数组的下标。

2.for…in语句不仅会遍历数组的所有元素，还有一些数组自带的属性。一般建议使用for语句进行数组遍历。

例：

var arr=['卧龙学苑',100,true,undefined];
/*
 for (var 变量 in 循环的数据内容){
     语句块
 }
 *变量 - 得到的是数组的索引值
*/
for (var i in arr){
    
    
    console.log(i);
}
/*
 *for语句
   *循环的开始和结束，都是由程序员决定的
 *for...in语句
   *循环只能从开始到结束
*/
for (var i=0;i<arr.length;i++){
    
    
    console.log(arr[i]);
}

for…in语句还可以用于遍历稀疏数组，循环的每次将一个有效元素返回。不存在的索引将不会遍历到：

var arr=[];
arr[100]="a";
for(var i in arr){
    
    
	console.log(i+":"+arr[i]);
}

例：

var arr2=[];
arr2["name"]="yamy";
arr2['age']=19;
arr2['job']='god';

/*for (var i=0;i<arr2.length;i++){
    console.log(arr2[i]);
}*/
//for..in语句可以循环遍历关联数组，for语句不行
for (var i in arr2){
    
    
    console.log(arr2[i]);
}
//稀疏数组 - 数组的长度与元素的个数不一致
var arr1=[];
arr1[0]='yamy';
arr1[3]=19;
arr1[5]='god';

/*for (var i=0;i<arr1.length;i++){
    console.log(arr1[i]);
}*/
//for...in语句循环遍历稀疏数组（直接得到有效元素值），for语句不行
for (var i in arr1){
    
    
    console.log(arr1[i]);
}

二维数组

数组是可以嵌套的，这就意味着一个数组可以作为一个元素被包含在另外一个数组里面。利用JavaScript这个特点，创建二维数组，即数组的数组。

[

例：

var arr=[];//定义一个空数组
arr[0]=[100,200,300];
arr[1]=[400,500,600];
arr[2]=[700,800,900];

//console.log(arr);
//访问二维数组中的元素
var result=arr[0];
/*console.log(result[0]);

console.log(arr[0][0]);*/

//循环遍历二维数组
for (var i=0;i<arr.length;i++){
    
    
    console.log(arr[i]);
    for (var j=0;j<arr[i].length;j++){
    
    
        console.log(arr[i][j]);
    }
}

函数

函数是这样的一-段JavaScript代码，它只定义一次，但可能被执行或调用多次。

简单来说，函数就是一-组可重 用的代码，你可以在你程序的任何地方调用他。

例如下述代码:

function fn(){
    
    
	console.log("this is function");
}

说明:这里只是展示了如何定义一个函数，并不需要掌握。

定义函数

函数的定义方式中，其中两种是如下方式:

1. 函数声明方式

function fn(){
    
    
	console.log("this is function"); 
}

2字面量表达式

var fun = function(){
    
    
	console.log("this is function"); 
}

例：

/*
 1.函数声明方式
   function函数名称(){
       函数体 - 语句块
   }
   *定义函数时-> 函数体的内容是不会被执行的
*/
/*function fun(){
    console.log('这是一个函数');
}*/

/*
 2.字面量/直接量方式
 var 函数名称 = function(){
     函数体
 }
*/
var fun=function(){
    
    
    console.log('这是一个函数');
}

//调用函数 ->函数体的内容才被执行
fun();

调用函数

定义一个函数并不会自动的执行它。定义了函数仅仅是赋予函数以名称并明确函数被调用时该做些什么。调用函数才会真正执行这些动作。例如下述代码:

1.定义一个函数fn:

function fn(){
    
    
	console.log("this is function");
}

2.调用函数fn

fn();//输出字符串this is function

变量与函数

例：

var v=100;/* 定义变量，并初始化值*/
console.log(v);/* 调用变量*/

//变量是允许被重新赋值的
v=function(){
    
    
    console.log('这是一个函数');
}
//v既是个变量，又是个函数
console.log(v);/* [Function: v]*/
v();/* 函数的调用*/

/************************** */

var v2=200;
function v2(){
    
    
    console.log('这是一个函数');
}
//v2是变量 - TypeError: v2 is not a function
console.log(v2);
 v2();

函数的应用

例：

//定义一个函数 - 打印1-100之间的奇数
function printNum(){
    
    
    //利用循环 - 变量的值从1到100
    for (var i=1;i<=100;i++){
    
    
        //在1 - 100筛选出奇数
        if (i%2==1){
    
    
            console.log(i);
        }
    }
}
printNum();

函数的参数

函数的参数就相当于在函数中使用的变量(虽然这个比方不是很准确)。、 JavaScript中的函数定义井未制定函数参数的类型，函数调用时也未对传入的参数做任何的类型检查。

函数的参数可以分为以下两种:

• 形参:出现在函数定义文法中的参数列表是函数的形式参数，简称形参。简单来说，就是定义函数时使用的参数就是形参。

• 实参:函数调用时实际传入的参数是函数的实际参数，简称实参。简单来说，就是调用函数时使用的参数就是实参。

例：

/*
 1.定义函数
   function 函数名称(参数){
       函数体;
   }
   *定义函数时 -> 形参
     *形参的定义的方式，类似于变量的（不需要任何关键字）
     *形参默认未定义任何值时 -> undefined
*/
function fun(a){
    
    //在函数中定义一个变量，但未初始化值
    console.log(a);
}
/*
 2.调用函数
   函数名称（参数）
   *函数的调用 ->实参（值）
*/
fun(100);//为函数中定义的变量初始化值

例：

/*
 1.定义函数 - 形参
   *允许定义多个形参 - 形参之间使用逗号分隔
*/
function fun(a,b){
    
    //在函数中定义一个变量，但未初始化值
    console.log(a+b);
}
/*
 2.调用函数 - 实参
   *允许定义多个形参 - 形参之间使用逗号分隔
*/
fun(100,200);//为函数中定义的变量初始化值
/*
 形参与实参
 *形参的个数与实参不一定是一致的
   *形参的个数多于实参的个数 -> 多余的形参没有值（默认为undefined）
   *实参的个数多余形参的个数 -> 多余的实参没有对应的形参
 *形参与实参根据占位符进行一一对应
*/

变量与函数的参数

例：

//变量的定义以及调用与函数之间没有联系
var v=100;/*定义一个变量，并初始化值
/* 定义一个函数*/
function fun(){
    
    
    console.log(v);
}
/* 调用函数*/
fun();
console.log(v);//调用变量

// 函数的参数 - 只能在函数体中使用，而不能超出函数的范围

/* 定义一个函数*/
function fn(v){
    
    
    console.log(v);
}
/* 调用函数*/
fn(200);

console.log(v);/* 变量的调用*/

注意：一般情况下，形参与实参的个数是相同的。但在JavaScript中并不强求这一点，在特殊情况下，函数的形参和实参的个数可以不相同。

function fn(one,two){
    
    
	console.log(one+two);
}
fn(1,2);//输出3

上述代码中，定义函数fn时，one和two就是函数的形参；调用函数fn时，1和2就是函数的实参。

函数参数的应用

例：

/* 定义函数 - 打印直角三角形*/
function print(num){
    
    
    /*
     函数的形参 - 在函数体中充当了变化的值
     *让值的变化不是在函数体进行改变，而是在函数调用时改变
    */
    var arr=new Array(num);
    for (var i=0;i<arr.length;i++){
    
    
        var star='';
        for (var j=1;j<=(i*2+1);j++){
    
    
            star+='*';
        }
        arr[i]=star;//i*2+1
    }

    for (var i=0;i<arr.length;i++){
    
    
        console.log(arr[i]);
    }
}
/* 调用函数*/
print(5);

return语句

函数还可以包含一个返回语句（return）。当然，这并不是必需的。return语句使函数可以作为一个值来使用。具体用法如下述代码：

function fn(msg){
    
    
	return "你好,"+msg;
}

//变量fun的值为你好，卧龙学苑
var fun=fn("卧龙学苑");

例：

/*
 函数的return语句
 *作用 - 作为函数的返回值（数据内容）
 *并不是必要的 - 可有可无
*/
function fun(){
    
    
    console.log('这是一个函数');
    return 100;
}
// var result=fun();
// console.log(result);

console.log(fun());/* 打印函数调用的结果*/
console.log(fun);/* 打印变量的值*/

/*
 函数的return语句
 *的确允许不编写在函数体的最后面
 *一旦return语句不在函数体的最后面 - return语句之后的代码都不再执行
*/

function fn(){
    
    
    console.log('这是return语句之前。。。');
    return 100;
    console.log('这是return语句之后。。。');
}
var result=fn();
console.log(result);//100

/*
 JavaScript得到undefined值的情况：
 1.定义变量，但未初始化值
 2.定义变量，并初始化值为undefined
 3.访问数组中不存在的位置 - 默认值为undefined
 4.在函数体调用没有定义值的形参 - 默认值为undefined
 5.当函数定义时，没有指定返回值 - 默认返回值为undefined
*/

return语句的应用

例：

//定义函数 - 打印指定范围内指定的数字
function printNum(start,end,num){
    
    
    for (var i=start;i<end;i++){
    
    
        //判断当前值是否为指定值
        if (i===num){
    
    
            console.log(i);
            // break;//跳转语句 - 表示的是结束循环
            return i;//return语句 - 结束函数体的执行 
        }
    }
}
//调用函数
printNum(0,100,55);

预定义函数

JavaScript预定义了一组函数，又称为全局函数，允许直接使用。

函数	描述
eval()	对一串字符串形式的JavaScript代码字符求值。
uneval()	创建的一个Object的源代码的字符串表示。
isFinte()	判断传入的值是否是有限的数值。
isNaN()	判断一个值是否不是数字值。
parseInt()	解析字符串参数，并返回指定的整数。
parseFloat()	解析字符串参数，并返回一个浮点数。
decodeURI()	对已编码的统一资源标识符(URI)进行解码，并返回其非编码形式。
encodeUR()	对统一资源标识符(URL)进行编码，并返回编码后的URL字符串。

eval()函数

eval()函数用于执行以下字符串（String）形式出现的JavaScript代码。此函数可以实现动态的执行JavaScript代码。具体用法如下述代码：

//定义一个字符串，内容为JavaScript代码
var js="console.log('this is javascript')";

//通过eval()函数执行上述内容
eval(js);//输出this is javascript

例：

//定义一个字符串 - 文本内容是JavaScript代码
var str='console.log("这是一段代码。。。")';
// console.log(str);
/*
 eval()函数
 *作用 - 将一个字符串类型的JavaScript代码转换为真正的JavaScript代码，并且执行
 *问题 - 安全问题
*/

eval(str);

字符编码与解码

decodeURI()函数和encodeURI()函数的具体用法如下述代码：

var uri="http://www.wolongxueyuan.com/Web前端开发工程师";

var encode=encodeURI(uri);
//输出
http://www.wolongxueyuan.com/Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E5%B8%88
console.log(encode);

var decode=decodeURI(encode);
//输出 http://www.wolongxueyuan.com/Web前端开发工程师
console.log(decode);

对以下在URI中具有特殊含义的ASCI标点符号，可以使用encodel JRIComponent( )函数和decodel JRIC 2omponent( )函数。

var uri = "http://www.wolongxueyuan.com/font-end-developer";

var encode = encodeURIComponent( uri ); 
//输出http%3A%2F%2Fwww.wolongxueyuan.com%2Ffont end-developer
console.log( encode );

var decode = decodeURIComponent( encode );
//输出http://www.wolongxueyuan.com/font-end-developer
console.log( decode );

例：

/*
 *URI - 统一资源标识符
 *URL - 统一资源定位符
*/
var uri="http://www.wolongxueyuan.com/Web前端开发工程师";

var encode=encodeURI(uri);
//输出
http://www.wolongxueyuan.com/Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E5%B8%88
console.log(encode);

var decode=decodeURI(encode);
//输出 http://www.wolongxueyuan.com/Web前端开发工程师
console.log(decode);




var uri = "http://www.wolongxueyuan.com/font-end-developer";

var encode = encodeURIComponent( uri ); 
//输出http%3A%2F%2Fwww.wolongxueyuan.com%2Ffont end-developer
console.log( encode );

var decode = decodeURIComponent( encode );
//输出http://www.wolongxueyuan.com/font-end-developer
console.log( decode );

作用域

作用域是什么

变量和函数都具有作用域。作用域就是变量和函数的可被访问的范围，控制着变量和函数的可见性和生命周期。

变量的作用域可被分为全局作用域和函数作用域（局部作用域）。如果变量被定义在全局作用域的话，在JavaScript代码中的任何位置都可以访问该变量；如果变量是被定义在指定函数内部的话，在JavaScript代码中只能在该函数内访问该变量。

函数的作用域也可被分为全局作用域和函数作用域（局部作用域）。被定义在指定函数内部的函数被称之为局部函数或内部函数。

说明：ECMAScript 6之前的JavaScript没有语句块作用域。

变量的作用域

例：

/* 
 全局作用域（函数作用域之外的范围） - 全局变量
 *全局变量的作用域 - 全局作用域 + 函数作用域
*/
var v1=100;
console.log(v1);

function fun(){
    
    
    /* 
     函数作用域 - 局部变量
     *局部变量的作用域 - 当前函数作用域
    */
    var v2=200;

    console.log(v1);
    console.log(v2);
}

console.log(v1);

fun();
//全局作用域不能访问局部变量
// console.log(v2);

function fn(){
    
    
    console.log(v2);
}
fn();//ReferenceError: v2 is not defined

局部变量与函数的参数

例：

var num=200;
/*
 *局部变量 - 作用于当前函数作用域中
   *局部变量的值 - 只能在当前函数作用域进行初始化
 *函数的参数 - 作用于当前函数体中
   *参数的值（实参） - 在全局作用域中传递的
*/
function fun(a){
    
    
    var v=100;
    console.log(v+a);
}
fun(num);

变量传递

例：

/* 按值传递*/
var num=100;/* 定义一个全局变量*/
/* 定义一个函数*/
function fun(num){
    
    /* 形参*/
    num++;
    console.log('这是函数内部的值：'+num);//101
}
/* 调用指定函数 - 实参传递的是全局变量的值*/
fun(num);/* 实参*/
/* 调用指定全局变量*/
console.log('这是全局作用域的值：'+num);//100

var v=200;
function fn(){
    
    
    v++;
}
fn();
console.log(v);//201

全局变量与局部变量

例：

/*
 声明提前
 console.log(num); - 先调用
 var num = 100;    - 再定义
 以上代码等价于以下代码
 var num;          - 定义变量，但未初始化值
 console.log(num); - 调用变量
 num=100;          - 变量初始化值
*/
console.log(num);//undefined

var num=100;/* 定义全局变量*/
/* 定义函数*/
function fun(){
    
    
    //全局变量与局部变量同名时 - 在当前函数作用域中只能访问局部变量
    console.log(num);//undefined 

    var num=200;/* 定义局部变量*/
    //就近原则
    console.log(num);//200
}
/* 调用函数*/
fun();
//局部变量在全局作用域中无法访问 - 只能访问全局变量
console.log(num);//100

逻辑的复杂度

例：

// var num=100;/* 定义全局变量*/
// /* 变量的重复定义 - 定义函数*/
// var num=function(num){
    
    
//     console.log(num);//
// }
// /* 调用函数*/
// num(num);/* 实参*/

var num=100;

function fun(num){
    
    
    var num=200;
    return num+num;
}
num=fun(num);
console.log(num);//300

函数的作用域

例：

function fn(){
    
    
    console.log('this is fn');
    /* 函数作用域 - 内部/私有函数*/
    function n(){
    
    
        console.log('this is n');
    }
}
/* 全局作用域*/
fn();

// n();//n is not defined

function fun(){
    
    
    /* 另一个函数作用域*/
    fn();
    // n();//n is not defined
}
fun();

对象

概述

对象是什么

JavaScript中的对象，和其他编程语言中的对象一样，可以比照现实生活中的对象来理解它。

JavaScript中对象的概念可以比照着现实生活中实实在在的物体来理解。

在JavaScript中，一个对象可以是一个单独的拥有属性和类型的实体。拿它和一个杯子做下类比，一个杯子是一个对象，拥有属性。杯子有颜色、图案、重量等等。同样，JavaScript对象也有属性来定义它的特征。

方法是关联到某个对象的函数，或者简单的说，一个方法是一个值为某个函数的对象属性。定义方法就像定义普通的函数，除了它们必须被赋给对象的某个属性。

对象的分类

1.内置对象/原生对象

​ 就是JavaScript语言预定义的对象。在CMAScript标准定义，由JavaScript解释器/引擎提供具体实现。

2.宿主对象

​ 指的是JavaScript运行环境提供的对象。一般是由浏览器厂商提供实现（目前也有独立的JavaScript解释器/引擎提供实现），主要分为BOM和DOM。

3.自定义对象

​ 就是由开发人员自主创建的对象。

Object对象

Object对象是什么

Object类型与Array、Math等一样都是JavaScript的引用类型。不过Object类型是JavaScript中所有类型的父级（所有类型的对象都可以使用Object的属性和方法）。

JavaScrupt可以通过Object的构造函数来创建自定义对象。当以非构造函数形式被调用时，Object等同于new Object().

Object对象的方法

Object对象的方法分为自有方法和原型方法两种：

• 自有方法

方法名	描述
creat()	指定原型对象和属性来创建一个新的对象。
getOwnPropertyNames()	返回一个数组，它包含了指定对象所有的可枚举或不可枚举的属性名。
keys()	返回一个数组，包含指定对象的所有自有可遍历属性的名称。

• 原型方法

方法名	描述
prototypehasOwnProperty()	返回一个布尔值，该值指示对象是否包含指定的属性。

创建对象

对象初始化器方式

使用对象初始化器也被称作通过字面值创建对象。通过对象初始化器创建对象的语法如下：

var obj={
    
    
	property_1:value_1,//property_#作为一个标示符
	2：value_2,//标示符可以是一个数字值
	//...,
	"property n":value_n//标示符也可以是一个字符串
};

• obj是创建的对象名称。
• 标示符和值都是可选的。

例：

/*
 1.对象的初始化器创建方式
   var 对象名={
       属性名：属性值，
       方法名：function(){
           方法体
       }
   }
*/
var obj1={
    
    
    name:'yamy',
    age:19,
    sayMe:function(){
    
    
        console.log('yamy');
    }
}

构造函数方式

1.通过JavaScript提供的预定义类型的构造函数来创建对象，如下示例：

var date=new Date();//创建一个date对象
var str=new String("this is string.");//创建一个String对象
var num=new Number(100);//创建一个Number对象

2.通过JavaScript提供的Object类型的构造函数来创建自定义对象，如下示例：

var obj=new Object();//创建一个自定义对象

例：

/*
 2.对象的构造函数方式
   *利用所有引用类型创建对应的对象 -> 具有具体的类型
     var num=new Number();//Number类型
     var str=new String();//String类型
     var boo=new Boolean();//Boolean类型
   *利用Object作为构造函数创建对象
     var 对象名=new Object();
     var 对象名=Object();
*/
var num=new Number();//Number类型
var num2=Number();
var str=new String();//String类型
var boo=new Boolean();//Boolean类型

var obj2=new Object();
var obj3=Object();

console.log(obj2);//{}
console.log(obj3);//{}

var obj4=new Object(undefined);
var obj5=new Object(null);

console.log(obj4);//{}
console.log(obj5);//{}

Objectcreat()方法

例：

/*
 3.利用Object.creat()方法创建对象
   var 对象名=Object.create(null)-> 创建一个空对象
   var 对象名=Object.create(obj)
   *obj - 表示另一个对象
   *特点 - 当前创建的新对象拥有与obj对象相同的属性和方法
*/
var obj6=Object.create(null);
var obj7=Object.create(obj1);

创建空对象

例：

/*
 创建空对象的方式
*/
var obj1={
    
    };
var obj2=new Object();
var obj3=Object();
var obj4=new Object(undefined);
var obj5=new Object(null);
var obj6=Object(undefined);
var obj7=Object(null);
var obj8=Object.create(null);

创建方式对比

例：

/*
 Number、String和Boolean
 *字面量方式创建的是原始类型，构造函数方式创建是引用类型
 Array和Object
 *无论是字面量方式还是构造函数方式创建的都是引用类型
*/
//1.Number类型
var num1=100;//字面量
var num2=new Number();//构造函数方式
//2.String类型
var str1='卧龙学苑';
var str2=new String();
//3.Boolean类型
var boo1=true;
var boo2=new Boolean();
//4.Array类型
var arr1=[];
var arr2=new Array();
//5.Object类型
var obj1={
    
    };
var obj2=new Object();

变量与对象

例：

var obj=100;
console.log(obj);//100

obj={
    
    
    name:'yamy',
    sayMe:function(){
    
    
        console.log('这是yamy');
    }
};
//name: 'yamy', sayMe: [Function: sayMe]
console.log(obj);

对象的复制

例：

var obj1={
    
    
    name:'yamy',
    sayMe:function(){
    
    
        console.log('这是yamy');
    }
}
console.log(obj1);

var obj2=obj1;
console.log(obj2);

//修改obj1对象的name属性值
obj1.name='ld';
console.log(obj1);
console.log(obj2);

//循环遍历对象 - for...in语句
for (var attr in obj1){
    
    
    console.log(attr);
}

变量、函数、对象

例：

/*
 创建一个对象 - 具有name和age属性与sayMe()方法
 *对象的属性 - 类似于变量
 *对象的方法 - 类似于函数
 其实定义的变量就是某个对象的属性，定义的函数就是某个对象的方法
 *JavaScript中具有一个全局对象（Global）->仅存在于概念
   *浏览器运行环境 - BOM中Window(窗口)对象
   *Node.js运行环境
*/
var obj1={
    
    
    name:'yamy',
    age:19,
    sayMe:function(){
    
    
        console.log('I am yamy');
    }
}

console.log(Object);

对象的属性

调用对象的属性

例：

var obj={
    
    
    name:'yamy',
    'z-m':'xm',
    sayMe:function(){
    
    
        console.log('I am yamy');
    }
}
/*
 1.对象名。属性名
   *不适用于复杂命名的属性名称
*/
console.log(obj.name);//yamy
// console.log(obj[z-m]);
/*
 2.对象名[属性名] - 通用的调用方式
   *适用于复杂命名的属性名称
*/
console.log(obj['name']);//yamy
console.log(obj['z-m']);//xm

//访问一个对象不存在的属性 -> 值为undefined
console.log(obj.age);

新增对象的属性

例：

var obj={
    
    
    name:'yamy',
    'z-m':'xm',
    sayMe:function(){
    
    
        console.log('I am yamy');
    }
}
/*
 1.对象名.属性名 = 属性值
 2.对象名[新的属性名]=属性值
*/
obj.age=19;
console.log(obj);

/*
 空对象默认没有任何属性和方法(父级Object)
*/
var obj1={
    
    };
console.log(obj1);

obj1.name='emy';
console.log(obj1);

修改对象的属性

例：

var obj={
    
    
    name:'yamy',
    'z-m':'xm',
    sayMe:function(){
    
    
        console.log('I am yamy');
    }
}
/*
 1.对象名.已存在的属性名 = 属性值
 2.对象名[已存在的属性名] = 属性值
*/
obj.name='amy';
console.log(obj);

删除对象的属性

例：

var obj={
    
    
    name:'yamy',
    'z-m':'xm',
    sayMe:function(){
    
    
        console.log('I am yamy');
    }
}
/*
 1.delete 对象名.属性名
 2.delete 对象名[属性名]
*/
delete obj.name;
console.log(obj.name);//undefined

检测对象的属性

可以使用如下四种方法检测对象中是否存在指定属性：

• 使用in关键字。

console.log('ename' in emp);

• 使用Object对象的hasOwnProperty()方法。

console.log(emp.hasOwnProperty('ename'));

• 使用undefined进行判断。

console.log(emp.ename===undefined);

• 使用if语句进行判断。

if(emp.ename){
    
    console.log('ename属性存在')；}

例：

var obj={
    
    
    name:'yamy',
    age:19,
}
console.log(obj.age);//undefined

//1.判断对象的属性值是否为undefined
if (obj.age!==undefined){
    
    
    console.log('obj对象的age属性存在。。。');
}else{
    
    
    console.log('请先定义obj对象的age属性。。。');
}

//2.判断对象的属性值 - 先转换为Boolean类型
if (obj.age){
    
    
    console.log('obj对象的age属性存在。。。');
}

//3.利用in关键字进行判断
if ('age' in obj){
    
    
    console.log('obj对象的age属性存在。。。');
}else{
    
    
    console.log('obj对象的age属性不存在。。。');
}

//4.Object类型提供了hasOwnProperty()方法
if (obj.hasOwnProperty('age')){
    
    
    console.log('obj对象的age属性存在。。。');
}else{
    
    
    console.log('obj对象的age属性不存在。。。');
}

遍历（枚举）属性

JavaScript提供了三种原生方法用于遍历或枚举对象的属性：

• for…in循环：该方法依次访问一个对象及其原型链中所有可枚举的属性。
• Object.keys(object)方法：该方法返回一个对象o自身包含（不包括原型中）的所有属性的名称的数组。
• Object.getOwnPropertyNames(object)方法：该方法返回一个数组，它包含了对象o所有拥有的属性（无论是否可枚举）的名称。

例：

var obj={
    
    
    name:'yamy',
    age:19,
    sayMe:function(){
    
    
        console.log('I am yamy');
    }
}
//1.for...in语句
for (var objAttr in obj){
    
    
    //通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr]instanceof Function){
    
    
        //当前是对象的方法
        obj[objAttr]();
    }else{
    
    
        //当前是对象的属性
        console.log(obj[objAttr]);
    }
}
//2.Object类型提供了keys()方法 - 只能遍历可枚举的属性
var arr=Object.keys(obj);
for (var v in arr){
    
    
    var objAttr =arr[v];
    //通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr]instanceof Function){
    
    
        //当前是对象的方法
        obj[objAttr]();
    }else{
    
    
        //当前是对象的属性
        console.log(obj[objAttr]);
    }
}

//3.Object类型提供了getOwnPropertyNames()方法 - 包括不可枚举的属性
var arr=Object.getOwnPropertyNames(obj);
for (var v in arr){
    
    
    var objAttr =arr[v];
    //通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr]instanceof Function){
    
    
        //当前是对象的方法
        obj[objAttr]();
    }else{
    
    
        //当前是对象的属性
        console.log(obj[objAttr]);
    }
}

调用对象的方法

例：

var obj={
    
    
    name:'yamy',
    age:19,
    sayMe:function(){
    
    
        console.log('I am yamy');
    }
}
//1.对象名.方法名()
obj.sayMe();
//2.对象名[方法名]()
obj['sayMe']();

新增对象的方法

例：

var obj={
    
    
    name:'yamy',
    age:19,
    sayMe:function(){
    
    
        console.log('I am yamy');
    }
}
//1.对象名.新的方法名 = function(){}
obj.sayYou =function(){
    
    
    console.log('you are emy');
}
console.log(obj);
//2.对象名[新的方法名] = function(){}

修改对象的方法

例：

var obj={
    
    
    name:'yamy',
    age:19,
    sayMe:function(){
    
    
        console.log('I am yamy');
    }
}
//1.对象名.方法名 = function(){}
obj.sayMe=function(){
    
    
    console.log('you are emy');
}
console.log(obj);
obj.sayMe();
//2.对象名[方法名] = function(){}

删除对象的方法

例：

var obj={
    
    
    name:'yamy',
    age:19,
    sayMe:function(){
    
    
        console.log('I am yamy');
    }
}
//1.delete 属性名.方法名
delete obj.sayMe;
//访问对象中不存在的方法-> 报错（TypeError: obj.sayMe is not a function）
// obj.sayMe();
console.log(obj.sayMe);//undefined
console.log(obj);

//以属性是否存在的方式进行判断
if ('sayMe' in obj){
    
    
    //确认目前是一个方法
    if (obj.sayMe instanceof Function){
    
    
        obj.sayMe();//方法调用
    }
}
//以上代码可以优化为以下代码
if ('sayMe' in obj && obj.sayMe instanceof Function){
    
    
    obj.sayMe();//方法调用
}

//2.delete 属性名[方法名]

函数和对象

例：

// function fun(){
    
    
//     //函数作用域
//     var v=100;//局部变量
//     return v;//将局部变量的值开发给全局作用域
// }
// var result=fun();
// console.log(result);//10

// function fun(){
    
    
//     //函数作用域
//     var v=100;//局部变量
//     return function(value){
    
    
//         v=value;
//         return v;
//     }
// }
// var result=fun();
// var a=result(200);
// console.log(a);//200

function fun(){
    
    
    var v=100;
    return {
    
    
        get:function(){
    
    
            return v;
        },
        set:function(value){
    
    
            v=value;
        }
    };
}
var result=fun();
console.log(result);

console.log(result.get());//100
result.set(200);
console.log(result.get());//200