JavaScript编程基础2

JavaScript编程基础

 

1 JavaScript 基础语法

1-1注释

在JavaScript中，注释可以分为单行注释和多行注释。

关于注释的作用，之所以书写注释，就是为了让阅读代码的人更加方便。

单行注释如下：

//这是一个单行注释

多行注释如下：

/*

*

*这是_个较长的

*多行的注释

*

*/

1-2语句

在JavaScript中，语句一般我们都会采用以分号结尾，每条语句独占一行的形式来书写代码。

let i = 10;

console.log(i);//10

1-3标识符

所谓标识符，就是指用来标识某个实体的一个符号。就是自己起一个名字，这个 名字可以用来作为变量名，函数名，对象名等。需要遵守一定的规则，其命名的规则大致可以分为2大类：硬性要求和软性要求

硬性要求

・1 .可以是由数字，字母，下划线和美元符号组成，不允许包含其他特殊符号

-2.不能以数字开头

• 3.禁止使用J avaScript中的关键词和保留字来进行命名

-4.严格区分大小写

软性要求

•望文知意

命名的3种方法

1. 匈牙利命名法

特点是标识符的名字 以一个或者多个小写字母开头，表示了该变量的数据类型。

数据类型	对应前缀
Array数组	a
Boolean 布尔	b
Float浮点	f
Function	fn
Interger(int)整型	i
Object对象	o
Regular Expression 正贝 lj	re
String字符串	s

前缀之后的是一个单词或多个单词的组合，该单词表明变量的用途。

例如：a_array, o_object, i_userAge, b_isPassed

1. 驼峰命名法

驼峰命名法实际上分为两种，一种是大驼峰，另外一种是小驼峰。

-大驼峰又被称之为帕斯卡命名法，就是每一个单词都是首字母大写

例如：UserName

-小驼峰和大驼峰的区别在于，小驼峰的第一个单词的首字母是小写，后面单词的首字母是大 写

例如：userName

1. 蛇形命名法

蛇形命名法的特点在于单词与单词之间使用下划线进行分隔

例如：user_name, my_first_name

1-4关键字和保留字

关键字,这些关键字可用于表示控制语句的开始或结束， 或者用于执行特定操作等。按照规则，关键字是语言本身所保留的，不能用作标识符。

ECMA-262还描述了另外一组不能用作标识符的保留字。尽管保留字在这门语言中还没有任何特 定的用途。但它们有可能在将来被用作关键字。

JavaScript中的关键字与保留字如下：

abstract、await、boolean_x break、byte、case、catch、char、class、const、continue、 debugger、default_x delete、do、 double、else、 enum、 export、extends_x false、final、 finally、float、for、function_x goto、if、implements_x import、in、instanceof、int、 interface_x let、long、native、new、null、package_x private_x protected_x public、return、 short、static、super、switch、synchronized_x this、throw、throws、transient_x true、try、 typeof、var、volatile、void、while、with、yield

1-5数据类型介绍

在JavaScript中，数据类型整体上来讲可以分为两大类：简单数据类型和复杂数据类型

-简单数据类型

简单数据类型一共有6种：

string, symbol, number, boolean, undefined, null

其中symbol类型是在ES6里面新添加的基本数据类型

•复杂数据类型

复杂数据类型就只有1种

object

包括JavaScript中的数组，正则等，其类型都是object类型

在JavaScript中，我们可以通过typeof运算符来查看一个数据的数据类型

console.log(typeof10);//number
console.log(typeoftrue);//boolean
console.log(typeof'Hello');//string
console.log(typeof1,2,3]);//object

2变量

所谓变量，就是用于引用内存中存储的一个值。当然，我们在使用变量之前，还需要先做的一件事儿就是声明 变量。

2-1声明变量

在JavaScript中声明变量的方式有3种：var , let , const。其中var现在已经不推荐使用 了，因为会有变量提升等问题。

const和let的区别在于，const所声明的变量如果是简单数据类型，那么是不能够再改变 的。

而let所声明的变量无论是简单数据类型还是复杂数据类型，在后面是可以改变的。

const声明变

const name = 'Bill';

name = 'Lucy';

//TypeError: Assignment to constant variable.

let声明变量

let name = 'Bill';

name = 'Lucy';

console.log(name);

2-2变量的赋值与初始化

利用=来给一个变量进行赋值，给变量第一次赋值的过程，叫做变量的初始化。

let a = 3;

可以一次性初始化多个变量，将其写在一行里面。

let x = 3,y = 4,z = 5;

如果声明变量时没有赋予初值，那么默认值为undefined

let a;

console.log(a);//undefined

2-3使用var声明变量

var现在 已经不推荐使用了。这是因为使用var来声明变量会伴随着一些问题

这些问题也经常被 看作是JavaScript的一些特点，例如重复声明和遗漏声明。

重复声明

如果是使用var关键字来声明的变量，那么是允许重复声明的。只不过这个时候会忽略此次声 明。如果重新声明并且带有赋值，则相当于是重新赋值

重复声明不带有赋值操作，JS引擎会自动忽略后面的变量声明

重新声明时如果带有赋值操作，那么会进行一个数据的覆盖

var test = 3;

var test = 5;

console.log(test);//5

遗漏声明

如果试图读取一个没有声明的变量的值，JS会报错

console.log(a);

//ReferenceError: a is not defined

JS允许遗漏声明，即直接对变量赋值而无需事先声明，赋值操作会自动声明该变量

{

a = 5;

console.log(a);//5 }

console.log(a);//5

2-4作用域

所谓作用域，就是变量在程序中能够被访问到的区域。这里我们介绍一个全局作用域，一个局部作用域

1. 全局作用域

这是js引擎一进来就处于的运行环境。在全局作用域的中所声明变量称之为全局变量。全局变量 的特点在于变量在任何地方都能被访问。

let a = 5;//这是一个全局变量

1. 局部作用域

在JavaScript中，一对大括号就可以产生一个局部作用域。局部作用域里面的变量称之为局部变量，既然是局部变量，那么就只能在这个局部的作用域里面能访问到，外部是访问不到的。

{

let i = 10;

console.log(i);//10

}

console.log(i);

//ReferenceError: i is not defined

顺带一提的是，在大括号中用var声明的变量不是局部变量，而是一个全局变量。这其实也是最 早使用var来声明变量所遗留下来的一个问题。

{

var i = 10;

console.log(i);//10

}

console.log(i);//10

在局部作用域里面，如果变量名和全局作用域里面的变量名冲突，优先使用局部作用域里面的变

let i = 10;

{

let i = 100;

console.log(i);//100

}

console.log(i);//10

如果在局部作用域里面声明变量时没有书写关键字，那么会声明一个全局变量

{

i = 10;

}

console.log(i);//10

3数据类型

所谓数据类型，就是指数据不同的种类。

在JavaScript中，存在6种简单数据类型以及1种复杂数据类型。

3-1 undefined 类型

undefined类型就只有一个值，undefined。在使用变量但是没有为其赋值的时候，这个变量的 值就是undefined _o

还需要注意一点，就是没有申明的变量，使用时会报错，而不是undefined。但是打印其类型的 时候，显示的类型却是undefined

let i;

console.log(typeof i);//undefined

console.log(typeof j);//undefined

console.log(i);//undefined

console.log(j);

//ReferenceError: j is not defined

3-2 nulI类型

null类型的值也是只有一个，就是null。null表示一个空的对象。从逻辑角度来看，null值表 示一个空对象指针，这也正是用typeof操作符检测null值时会返回o bject的原因。

示例：

let i = null;

console.log(typeof i);//object

实际上，undefined值是从null值派生而来的，因此当我们对这两个数据类型进行相等测试时，会

返回true

示例：

if(null == undefined){

console.log('Yes');//Yes

3-3布尔类型

所谓布尔类型，也被称之为boolean类型，就是真和假，这个类型的值只有两个，一个是true, 另一个是false

let i = true;

console.log(i);//true

console.log(typeof i);//boolean

需要注意的是，这两个值与数字值不是一回事，因此true不一定等于1,而false也不一定等于0。 还有一点就是Boolean类型的字面值true和false是区分大小写的。也就是说，True和False都不是 布尔值。

虽然Boolean类型的字面值只有2个，但是ECMAScript中所有类型的值都可以转换为Boolean类 型。可以使用Boolean()函数将其他类型转换为布尔值。

console.log(Boolean("Hello"));//true

console.log(Boolean(42));//true

console.log(Boolean(0));//false

最后需要注意的就是下面的9个值是对应布尔类型里面的假值

・““：双引号的空字符串

・”：单引号的空字符串

• ''：空字符串模板

-0：数字0

• -0： JS中-0和0为不同的值
• NaN
• false
• null
• undefined

3-4数字类型

数字类型又被称之为number类型。number类型的值可以分为整数和实数两大类

1.整数

整数可以分为正整数和负整数，如下：

let a = 12;

let b = -7;

这个虽然没什么好说的，但是还是有一个注意点，那就是进制问题。二进制以Ob开头，八进制以 0开头，十六进制以Ox,示例如下：

//二进制

let a = 0b101;//5

//八进制

let b = 017;//15

//十进制

let c = 21;//21

//十六进制

let d = 0xFD;//253

console.log(a,b,c,d);

需要注意的是，不管参与运算的变量的值是什么进制，计算结果仍然会为十进制。

在ES6中提供了八进制数值新的写法，使用0。作为前缀，如下：

let a = 017;

let b = 0o17;

console.log(a,b);//15 15

1. 实数

所谓实数，就是我们平常所常见的小数，或者称之为浮点数。

在JavaScript里面，表示浮点数的方式有两种：小数型和科学记数法型 示例如下：

let a = 3.14;

let b = 9.12e+2;

console.log(a,b);//3.14 912

1. 数值范围(扩展)

由于内存限制，JavaScript并不能保存世界上所有的数值。在JS中能够表示的最小数值在绝大多 数浏览器中为5e-324，而最大值为1.7976931348623157e+308。通

过Number.MIN_VALUE和Number.MAX_VALUE我们可以查看到JS中支持的最小值和最大值。 示例：

console.log(Number.MIN_VALUE);//5e-324

console.log(Number.MAX_VALUE);//1.7976931348623157e+308

如果某次计算的结果超出了ECMAScript的数值范围，那么正数会被转化为infinity (正无穷)， 负数会被转换为-infinity (负无穷)

例如：

根据ECMAScript的规定大于等于2的1024次方的数为无穷大

let i = Math.pow(2,1024);

console.log(i);//Infinity

根据ECMAScript的规定小于等于2的1024次方的数为无穷小

let i = -Math.pow(2,1024);

console.log(i);//-Infinity

如果某次计算返回了 infinity值，那么该值无法参与下一次计算，因为infinity不是能够参与计算的 数值。要想确定一个数值是不是有穷的，可以使用isFinite。函数。

示例：如果是无穷大数，会返回false,否则返回true(其实这个函数就是用于判断一个变量是否为 数值的)

let i = Math.pow(2,1024);

console.log(isFinite(i));//fasle

let j = 7;

console.log(isFinite(j));//true

1. NaN

英文全称为Not a Number，即非数值。这个数值用于表示本来要返回数值的操作数未返回数值的 情况(这样就不会抛出错误了)。

NaN有两个特点：任何涉及NaN的操作都会返回NaN

示例：

let a = NaN + 10;

console.log(a);//NaN

第二个特点是NaN和任何值都不相等，包括它自己本身，示例如下：

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

除此之外，ECMAScript还定义了一个isNaN()函数，来帮助我们判断一个参数是否不是数值。 isNaNO函数在接收到一个值之后，会尝试将这个值转换为数值。

示例：

console.log(isNaN(NaN));//true

console.log(isNaN("123"));//false

console.log(isNaN(123));//false

console.log(isNaN("Hello"));//true

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

最后需要补充说明一下的是，NaN是属于number类型的，证明如下：

console.log(typeof NaN);//number

1. 数值转换

在JavaScript里面，有3个函数可以将非数值的数据转为数值，分别

是Number。，parseInt()以及parseFloat()这3个方法，下面我们将依次对这几个方法进

行介绍

Number():可以将非数值转为数值

使用Number()函数的时候，有下面几个规则需要注意：

•如果是Boolean值，true和false将分别被转换为1和0

-如果是数字，那么就是简单的传入和返回

•如果是null值，那么返回0

•如果是undefined，那么返回NaN

示例如下：

console.log(Number(true));//l

console.log(Number(false));//0

console.log(Number(10));//10

console.log(Number(null));//0

console.log(Number(undefined));//WaW

如果是字符串，那么又有如下的规则:

-如果字符串只包含数字，则将其转为十进制，即”1”会变成1, ”123”变成123，而”011”会变 为11 (注意这里不会被当成八进制来处理)

-如果字符串中包含有效的十六进制格式，如”1.1”，则将其转换为对应的浮点数值

•如果字符串中包含有效的十六进制格式，例如”0xf”，则会将其转换为相同大小的十进制整 数。

-如果字符串是空的，则将其转换为0

・如果字符串包含上述格式之外的字符，则将其转换为NaN

示例：

console.log(Number("1"

console.log(Number("012"));//12

console.log(Number("0o10"));//8 console.log(Number("0b111"));//7

console.log(Number("3.14"));//3.14 console.log(Number("0xf"));//15

console.log(Number(""));//0 console.log(Number("123Hello"));//NaN

parselnt。:也是将一个非数值转为数值

说明：相比number。函数，parselnt。会更多的看是否有数字，有就会将其转换为数值。最简单的 例子为number。函数转换”123Hello”时会转换为NaN,而parselnt。则会将其转换为123。

碰到空字符串时，number。函数会将其转换为0,而parselnt。则会将其转换为NaN 最后是在碰到小数时，会有一个取整的过程。例如”3.14”会被转换为”3” 示例：

console.log(parseInt("1"));//1

console.log(parseInt("012"));//12 console.log(Number("0o10"));//8

console.log(Number("0b111"));//7 console.log(parseInt("3.14"));//3

console.log(parseInt("0xf"));//15 console.log(parseInt(""));//NaN

console.log(parseInt("123Hello"));//123

我们的parseInt()从ES5开始还提供了第二个参数，那就是指定参数是多少进制，这 样parseInt()函数就可以将指定的进制转换为十进制，如下：

console.log(parseInt("012"));//12 console.log(parseInt("012",8));//10

//如果是16进制数,后面添加上参数 16后,字符串前面可以不写0x

console.log(parseInt("AF"));//NaN

console.log(parseInt("AF",16));//175

除此之外，我们的parselnt()函数的第2个参数还可以是任意值，八进制前面不用加前面的0, 十六进制不用加前面的Ox

console.log(parseInt("21",3));//7

console.log(parseInt("10",2));//2

console.log(parseInt("11",8));//9 console.log(parseInt("AF",16));//175

parseFloatO:将非数值转为浮点数

说明：parseFloat()只解析十进制值，所以没有第二个参数，该函数会将带有小数点的字符串转换 为小数。如果没有小数点的数会被转换为整数。同样的parseFloatO也是尽可能转换更多的数值， 例如”123Hello”会被转换为123.

示例：

console.log(parseFloat("21"));//21 console.log(parseFloat("123Hello"));//123

console.log(parseFloat("0xA"));//0 console.log(parseFloat("3.14"));//3.14 console.log(parseFloat("22.34.5"));//22.34 console.log(parseFloat("0908.34"));//908.34 console.log(parseFloat("3.1415e2"));//314.15

ES6将全局方法parseInt()和parseFloatO等方法，移植到number对象上面，行为完全保 持不变，这么做的目的，是为了逐步减少全局性的方法，使得语言逐步模块化。

//ES5的写法

console.log(parseInt("12.34"));//12 console.log(parseFloat("12.34#"));//12.34

//ES6的写法

console.log(Number.parseInt("12.34"));//12 console.log(Number.parseFloat("12.34#"));//12.34

1. 实例方法(扩展)

首先解释一下什么叫做实例方法。所谓实例方法，就是指必须要实例化对象，然后在对象上面调 用。这也涉及到了后面面向对象的知识。现在只需要知道要先有一个数，然后在这个数上面调用 相应的方法。

toFixed()：toFixed()方法按照指定的小数位返回数值四舍五入后的字符串表示(常用于处理货币值)

|注意：toFixed。里的参数只接受0-20，若不传参或参数为undefined则相当于参数是0

3-5字符串类型

1. 字符串介绍

这是程序里面使用最为广泛的一种类型。在JavaScript里面，可以使用单引号，也可以使用双引 号let a = "abcd"; let b = 'abcd';

这里需要注意一个问题，就是字符串的内容本身包含单引号或者双引号的话，需要和字符串界限 符区分开，如下：

let a = "Hello 'World',welcome”;//正确

let b = 'Hello "World",welcome';//正确

let c = "Hello "World",welcome";//错误

当然，我们这里使用转义字符也是一个很好的选择，如下：

let a = "Hello 'World',welcome";//正确

let b = 'Hello "World",welcome';//正确

let c = "Hello \"World\",welcome";//正确

字符串这种数据类型非常的霸道，它和其他数据类型相加都会被转换为字符串类型，示例如下：

a = "abcd";

b = 13 + a;

c = 3.14 + a; d = true + a; e = null + a; f = undefined + a;

console.log(typeof console.log(typeof console.log(typeof console.log(typeof console.log(typeof

所以如果我们要让一个非字符串的变量转换为字符串的话，只需要和一个空字符串相加就可以 了。

当然，转换字符串事实上我们也有相应的函数来转换，最常见的就是toString()函数。

toStringO

说明：该函数会将除了 null和undefined以外的数据类型转换为字符串。

示例：

let a = 10,b = true,c = null,d;

console.log(typeof a.toString());//string

console.log(typeof b.toString());//string

console.log(typeof c.toString());//灰错

console.log(typeof d.toString());

可以看到，程序报错，因为null和undefined并不能通过toString()函数来转换为相应的字符串。 还有一个知识点，就是toString()函数在转换数值的时候是可以带有参数的。可以将数值指定转换 为几进制

示例：

let i = 10;

console.log(i.toString());//10 console.log(i.toString(2));//1010

console.log(i.toString(8));//12 console.log(i.toString(10));//10

console.log(i.toString(16));//a

这个时候，JavaScript还有一个函数是String。，这个函数就可以5种数据类型都转换为字符串。 示例：

let a = 10,b = true,c = null,d; console.log(String(a),typeof console.log(String(b),typeof console.log(String(c),typeof console.log(String(d),typeof

1. 字符串模板

字符串模板

在ES6中新增了模板字面量是增强版的字符串，它用反引号(')标识

let str = 'Hello World';

console.log(str);//Hello World

console.log(typeof str);//string   console.log(str.length);//11

以上代码中，使用模板字面量语法创建一个字符串，并赋值给message变量，这时变量的值与一

个普通的字符串无异

如果想在字符串中包含反引号，只需使用反斜杠'转义即可

ES6的模板字面量使多行字符串更易创建，因为它不需要特殊的语法，只需在想要的位置直接换 行即可，此处的换行会同步出现在结果中

let str = 'Hello

World';

console.log(str);

//Hello

//World

console.log(typeof str);//string

console.log(str.length);//12

在反引号之内的所有空白符都是字符串的一部分，因此需要特别留意缩进

模板字面量看上去仅仅是普通JS字符串的升级版，但二者之间真正的区别在于模板字面量的变量 占位符。变量占位符允许将任何有效的JS表达式嵌入到模板字面量中，并将其结果输出为字符串 的一部分

变量占位符由起始的$(与结束的}来界定，之间允许放入任意的JS表达式。最简单的变量占位 符允许将本地变量直接嵌入到结果字符串中

let name = "xiejie";

console.log('Hello,${name}');

//Hello,xiejie

占位符$(name}会访问本地变量name，并将其值插入到message字符串中。message变量会 立即保留该占位符的结果

既然占位符是JS表达式，那么可替换的就不仅仅是简单的变量名。可以轻易嵌入运算符、函数调 用等

let count = 10,price = 0.25;

console.log('${count} items cost $${(count*price).toFixed(2)}');

//10 items cost $2.50

3-6 symbol 类型

ES5中包含5种原始类型：字符串、数字、布尔值、null和undefined。ES6引入了第6种原始类 型:symbol

ES5的对象属性名都是字符串，很容易造成属性名冲突。比如，使用了一个他人提供的对象，想 为这个对象添加新的方法，新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证 每个属性的名字都是独一无二的，这样就从根本上防止了属性名冲突。这就是ES6引入symb。l的 原因。