JavaScript 入门基础 之 练气

标识符

也是对js中的变量、函数、对象得名称。其由字母、数字、下划线、美元符号构成，但单词不能用数字开头，写法上用驼峰命名法为好，也就是首个单词的首字母用小写，其余单词的首字母大写，这样既美观大方，也符合ECMAScript规范，利己并对其他开发者友好。

区分大小写：ECMAScript 中一切都区分大小写。无论是变量、函数名还是操作符，都区分大小写。换句话说，变量 test 和变量 Test 是两个不同的变量。类似地，typeof 不能作为函数名，因为它是一个关键字。但 Typeof 是一个完全有效的函数名。

JS注释：单行用双斜杠开头——/... /；多行用 /* ... */。

• ECMAScript 5 增加了严格模式（strict mode）的概念：

严格模式是一种不同的 JavaScript 解析和执行模型，ECMAScript 3 的一些不规范写法在这种模式下会被处理，对于不安全的活动将抛出错误。要对整个脚本启用严格模式，在脚本开头加上这一行：

```js

"use strict";

```

虽然看起来像个没有赋值给任何变量的字符串，但它其实是一个预处理指令。任何支持的 JavaScript引擎看到它都会切换到严格模式。选择这种语法形式的目的是不破坏 ECMAScript 3 语法。也可以单独指定一个函数在严格模式下执行，只要把这个预处理指令放到函数体开头即可：

```js

function doSomething() {

 "use strict";

 // 函数体

}

```

语句

ECMAScript 中的语句以分号结尾。省略分号意味着由解析器确定语句在哪里结尾，如下面的例子所示：

var a = 2  // 没有分号也有效，但不推荐

var b = 3; // 加分号有效，推荐

即使语句末尾的分号不是必需的，也应该加上。记着加分号有助于防止省略造成的问题，比如可以避免输入内容不完整。此外，加分号也便于开发者通过删除空行来压缩代码（如果没有结尾的分号，只删除空行，则会导致语法错误）。加分号也有助于在某些情况下提升性能，因为解析器会尝试在合适的位置补上分号以纠正语法错误。

代码块由一个左花括号  {  标识开始，一个右花括号  }  标识结束：

if (test) {

 test = false;

 console.log(test);

}

if 之类的控制语句只在执行多条语句时要求必须有代码块。不过，最佳实践是始终在控制语句中使用代码块，即使要执行的只有一条语句，如下例所示：

// 有效，但容易导致错误，应该避免

if (test)

 console.log(test);

// 推荐

if (test) {

 console.log(test);

}

在控制语句中使用代码块可以让内容更清晰，在需要修改代码时也可以减少出错的可能性。

关键字与保留字

关键字/词，是编程语言中，包括JS中特定的单词，他们都有各自独特的作用，所以他们不能用作变量名，函数名等，否则有可能会发生错误。

break   do   in   typeof   case   else   instanceof   var   catch   export   new   void 

class   extends   return   while   const   finally   super   with   continue   for   switch   

yield   debugger   function   this   default   if   throw   delete   import   try  enum

严格模式下保留：

implements package public 

interface protected static 

let private 

模块代码中保留：

await

输出语句

常用的有，用于检测代码的值等在控制台输出的——console.log（）；单纯弹出框——alert（）；能输入值的弹出框——prompt（）；可以在网页上显示的——document.write（）。

变量

含义：用来描述世界中物质的元素是变化着的，所以需要用某个物件来象征这个真实的元素，而象征这个元素的物件就是所谓变量。

变量的本质：在计算机内存中开辟的一块空间。

在JS中用var（variable）来声明一个变量，它可以存储任意类型的数据，其声明格式为——var 变量名，变量名可以任意写，但要遵守命名规范、尽量起的通俗易懂、因地制宜。

声明变量并给其赋值，我们叫做变量的初始化，比如——var power = 9；也可以只写一个var，后面跟写多个变量名，中间用逗号分割，比如——var power,hero = 9,Spring。如此这般~

因为程序通常自上而下循序执行，所以重复定义变量的话，后面的会替换掉前面的。

未声明变量：也就是假如只写了一个单词，没有给值，就把他输出，那么浏览器执行时会报错，比如这样：

ReferenceError是引用错误的意思；a是变量名；1.html：11:10表明错误出现在编辑器第10行左右。

注：在JS中，在变量名前未加var或let是合理的，它也因此而变成全局变量，但为了不必要的麻烦和损失，亟需添加

数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。 数据类型的区分是一种系统资源分配优化的方案。

数据类型可以用 typeof 判断。

在JS中无需像C语言，JAVA之类专门定义变量的数据类型，而是使用var关键字声明之后，在赋值之时会自动判定当前值的数据类型。JS 变量的数据类型可以动态变化，相同的变量可以使用赋值不同类型的数据：

var power = 99; // 数字类型
power = '99';  // 字符串类型

数据类型的分两大类：

• 基本数据类型（又叫简单数据类型、值类型 ）：有数字（Number），字符串（String），布尔（Boolean），对空（Null），未定义（Undefined）
• 引用数据类型（又叫复杂数据类型）：有对象（Object）。在ES6中，引用数据类型还有函数（function），对象包含了：数组（Array），时间（Date），数学（Math），正则

数字类型Number

其分为整数，小数（又名浮点数）；取值范围上如若超出了JS所表示的范围，那这个数字便会转换为Infinty（无穷值）以及-Infinty（负无穷小）；

在其中有个特殊的存在叫NaN，意思是“不是数字”，（Not a Number），用于表示本来要返回数字的操作失败了（而不是抛出错误）。比如，用 0 除任意数字在其他语言中通常都会导致错误，从而中止代码执行。

• 任何涉及 NaN 的操作始终返回 NaN（如 NaN/10），在连续多步计算时这可能是个问题。

• NaN 不等于包括 NaN 在内的任何值。例如，下面的比较操作会返回 false：、

// NaN也是JS中唯一一个不等于自身的值，判断某个值不能直接与NaN比较
console.log(NaN == NaN); // false 
console.log(NaN == 2);   // false 

为此，ECMAScript 提供了 isNaN()函数。该函数接收一个参数，可以是任意数据类型，然后判断这个参数是否“不是数字”。

把一个值传给 isNaN()后，该函数会尝试把它转换为数字。某些非数字的值可以直接转换成数字，如字符串"10"或布尔值。任何不能转换为数字的值都会导致这个函数返回true。举例如下：

console.log(isNaN(NaN)); // true 
console.log(isNaN(10)); // false，10 是数字
console.log(isNaN("10")); // false，可以转换为数字 10 
console.log(isNaN("blue")); // true，不可以转换为数字
console.log(isNaN(true)); // false，可以转换为数字 1 

字符串类型String

字符串需用成对的单引号、双引号或者反引号来包裹，如果涉及到引号嵌套，可以成对互相嵌套，若是有英文中单引号，则需要用转义字符；

转义字符	解释说明
\n	换行符，n 是 newline 的意思
\\	斜杠 \
\'	' 单引号
\''	” 双引号
\t	tab 缩进
\b	空格 ，b 是 blank 的意思

布尔类型Boolean

它只有两种情况，ture（真）；false（假）；若是代表数字的话分别对应1和0。

未定义类型Undefined

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。 典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

空类型Null

Null 类型同样只有一个值，即特殊值 null。逻辑上讲，null 值表示一个空对象指针，这也是给typeof 传一个 null 会返回"object"的原因：

null表示"没有对象"，即该处不应该有值。典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。

（2） 作为对象原型链的终点。

（3）查找标签的时候，没找到，也会返回null。

对象类型Object

对象涉及到了JS的方方面面，它里面的属性和值是无序的，对象通过 new 操作符后跟对象类型的名称来创建。开发者可以通过创建 Object 类型的实例来创建自己的对象，然后再给对象添加属性和方法。

常用的对象的类型：Object、Array、String、Date、Math、RegExp。

字面量:用于表示固定值的符号,比如：int a = 4;4就是字面量。var j = 'power',power就是字面量。

数据类型的转换

转换为数字类型 =>

Number（）：

• 布尔值，true 转换为 1，false 转换为 0。

• 数字，直接返回。

• null，返回 0。

• undefined，返回 NaN。

• 字符串，应用以下规则：

  • 如果字符串包含数字字符，包括数字字符前面带加、减号的情况，则转换为一个十进制数字。因此，Number("1")返回 1，Number("123")返回 123，Number("011")返回 11（忽略前面的零）。

  • 如果字符串包含有效的浮点值格式如"1.1"，则会转换为相应的浮点值（同样，忽略前面的零）。

  • 如果字符串包含有效的十六进制格式如"0xf"，则会转换为与该十六进制值对应的十进制整数字。

  • 如果是空字符串（不包含字符），则返回 0。

  • 如果字符串包含除上述情况之外的其他字符，则返回 NaN。

console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(12));//12
console.log(Number(null));//0
console.log(Number(undefined));//NaN
console.log(Number('22'));//22
console.log(Number('22.3'));22.3
console.log(Number(''));//0 注意这个是空字符串
console.log(Number(' '));//0  注意这个是空格字符串
console.log(Number('1a'));//NaN
console.log(Number('hello world'));//NaN

parseint（）:专注于字符串中是否含有数字

字符串最前面的空格会被忽略，从第一个非空格字符开始转换。如果第一个字符不是数字字符、加号或减号，parseInt()立即返回 NaN。这意味着空字符串也会返回 NaN（这一点跟 Number()不一样，它返回 0）。

如果第一个字符是数字字符、加号或减号，则继续依次检测每个字符，直到字符串末尾，或碰到非数字字符。比如，"1234blue"会被转换为 1234，因为"blue"会被完全忽略。类似地，"22.5"会被转换为 22，因为小数点不是有效的整数字符。

console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(12));//12
console.log(Number(null));//0
console.log(Number(undefined));//NaN
console.log(Number('22'));//22
console.log(Number('22.3'));22.3
console.log(Number(''));//0 注意这个是空字符串
console.log(Number(' '));//0  注意这个是空格字符串
console.log(Number('1a'));//NaN
console.log(Number('hello world'));//NaN

parsefloat（）

parseFloat()函数的工作方式跟 parseInt()函数类似，都是从位置 0 开始检测每个字符。同样，它也是解析到字符串末尾或者解析到一个无效的浮点数字字符为止。这意味着第一次出现的小数点是有效的，但第二次出现的小数点就无效了，此时字符串的剩余字符都会被忽略。因此，"22.34.5"将转换成 22.34。

console.log(parseInt("1234blue"));//1234
console.log(parseInt(""));//NaN
console.log(parseInt("22.5"));//22
console.log(parseInt("a1234blue"));//NaN
console.log(parseFloat("22.34.5"));//22.34

隐式转换：在很多情况下，我们得到的数字可能并非是数字类型的，而是字符串，因此可以将这个需要成为数字的变量  -  *  /  转为数字类型。

• 数字使用运算符 + - * /与布尔类型进行运算时，true转为1，false转为0

var res = '12';
console.log(res - 1);//11
console.log(res * 1);//12
console.log(res / 1);//12

var res = '12.5';
console.log(res - 1);//11.5
console.log(res * 1);//12.5
console.log(res / 1);//12.5

console.log(6 + true);//7
console.log(6 - true);//5
console.log(6 * true);//6
console.log(6 / true);//6
console.log('6' - true);//5
console.log('6' * true);//6
console.log('6' / true);//6

//如果是包含非数字的字符串会计算结果为NaN
var res = '12.5a';
console.log(res - 1);//NaN
console.log(res * 1);//NaN
console.log(res / 1);//NaN

转换为字符串类型 =>

to String（）

null 和 undefined 值没有 toString()方法。

var num = 12;
var isOpen = true;
console.log(num.toString());// '12'
console.log(isOpen.toString());// 'true'

String（）

如果你不确定一个值是不是 null 或 undefined，可以使用 String()转型函数，它始终会返回表示相应类型值的字符串。String()函数遵循如下规则。

• 如果值有 toString()方法，则调用该方法（不传参数）并返回结果。

• 如果值是 null，返回"null"。

• 如果值是 undefined，返回"undefined"。

var num = 12;
var isOpen = true;
console.log(String(num));// '12'
console.log(String(isOpen));// 'true'
console.log(String(null));// 'null'
console.log(String(undefined));// 'undefined'

tostring（）与string（）两者的区别：

• 大多值都有toString()方法，null和undefined是没有的

• 任何值都可以使用String()方法，如果是 null 返回值是 "null",如果是undefined 返回值是"undefined"；

var res1 = null;
var res2 = undefined;
console.log(String(res1)); // 'null'
console.log(String(res2));// 'undefined'
console.log(res1.toString());// 直接报错，无法使用 TypeError: Cannot read properties of null (reading 'toString')
console.log(res2.toString());// 直接报错，无法使用 TypeError: Cannot read properties of undefined (reading 'toString')

转换为布尔类型 =>

Boolean()转型函数可以在任意类型的数据上调用，而且始终返回一个布尔值。什么值能转换为 true或 false 的规则取决于数据类型和实际的值。

• 空的字符串、数字0、NaN、null(空)、undefined都是false，其他都为true

console.log(Boolean('')); // false
console.log(Boolean(' ')); // true
console.log(Boolean('hello')); // true
console.log(Boolean(0)); // false
console.log(Boolean(6)); // true
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

字符串的拼接

字符串拼接只有 + 运算

字符串拼接支持 +运算，但是不支持 - * /，数字与字符串相减、相乘、相除时最终会转化为数字

console.log( '2' - 1 / 2); //1.5
console.log( '2' * 2);//4
console.log( '2' / 2);//1

表达式开头为字符串

字符串在 + 运算表达式的最前面，直接进行拼接，就像是把多个变量的值粘起来一样。

var a = 'hello' + '你好'; // 'hello你好'

// 字符串可以和数字直接拼接，最终转化为字符串
// 隐式转换: 2 转换为 '2'
var a = '你好' + 2 + '3' + '她好';// '你好23她好'

// 数字与字符串相加，会自动转化为字符串，变成字符串类型  
// 相当于 '1' + '0.5';
var b = '1' + 1 / 2; // '10.5'

// 布尔类型与字符串相加，转化为字符串
var d = '1' + true; // '1true'
var d = '1' + false;// '1false'

表达式开头不为字符串

+ 运算表达的最前面不为字符串，并且表达式中有多个 + 运算，可能会产生加法运算。

var a1 = 10, a2 = 20, a3 = true, str = 'hello';
var res = a1 + a2 + str; //'30hello'
var res = a1 + str + a2; //'10hello20'
var res = str + a1 + a2; //'hello1020'


var res = a1 + a2 + + a3 + str; //'31hello'
var res = a1 + a2 + str + a3; //'30hellotrue'
var res = a1 + str + a2 + a3; //'10hello20true'
var res = str + a1 + a2 + a3; //'hello1020true'

var res = a3 + str;//truehello


var a1 = 10;
var a2 = "20";
var a3 = a1 + a2;

console.log(a1 + a3 - a1);
console.log(a1 - true + a2 + false);
console.log(a1 - a2 + "a3");
console.log(a3 == a3 - a1 + true * "10");

字符串拼接的原理是：运算的过程中从左到右的顺序，比如 a1 + a2 + str + a3 先计算a1+a2 得到的结果30，然后计算30+str，得到的结果30hello，再计算'30hello'+a3，最终得到 '30hellotrue'。

渗透练习

• 从键盘输入小明的语数外成绩，输出 小明的总分是

• 定义三个变量，从键盘输入值给他们，然后使用alert()顺序输出他们，保留三位小数

• 定义常量PI=3.1415926，从键盘输入 半径 r；输出圆的面积（保留2位小数）

• 从键盘获取 圆的半径r， 圆柱高h，定义一个圆周率常量 PI = 3.1415926 ，求出圆柱的体积（保留三位小数）

• 从键盘获取 圆的半径r， 圆柱高h，定义一个圆周率常量 PI = 3.1415926 ，求出圆周长，园面积，圆柱体积 取小数点后两位 有文字说明，例如：圆周长 = xxx.xx

• 从键盘输入一个四位数的正整数，输出他的个，十，百，千位上的数字