【-前端攻城师之JS基础】01JS基础语法

1.js编写位置

• 可以将js代码编写到标签的onclick属性中，当点击按钮时，代码会执行

• 可以将代码编写到超链接的href属性中，当点击超链接时，会执行代码

• 你也点我一下

• Hello 请点我一下

但这种方法耦合度高，不推荐使用

• 可以将js代码编写到script标签中

• 可以将代码编写到外部js文件中，然后通过script标签引入

  • 写到外部的js文件可以在不同的页面同时引用。也可以利用浏览器的缓存机制
  • script标签一旦引用了外部的js文件，就不能在内部编写代码了，即使写了 浏览器也会忽略。如果需要则可以再创建一个script标签用于编写内部代码

2.字面量和变量

字面量都是一些不可改变的量，可以直接使用，但是我们一般都不会直接使用，而是通过变量描述和保存字面量

声明变量

var a=1;

3.标识符

字母数字下划线美元符号，但不能以数字开头

 不能是JS的关键字和保留字

一般采用驼峰命名法
JS底层保存标识符的原理是unicode编码 也就是utf-8,所以理论上很多字符都能作为标识	符 例如中文汉字

4.数据类型

在ES5中一共有六种数据类型, 五种基本类型一种引用类型

String

• 在JS中字符串需要用双引号或单引号引起来
• 双引号不能嵌套，只能单引号和双引号混合使用
• 如果非要在双引号里面嵌套一个双引号，则需要使用转义字符
• 在字符串中我们可以使用反斜杠\进行转义
• (\)表示斜杠 (')表示单引号 (")表示双引号 (\n) (\t)

Number

• 在JS中所有数值都是Number类型，包括整数和浮点数

• Number有最大值 Number.MAX_VALUE 大小是1.7976931348623157e+308

如果使用Number的数字超过了最大值，则会返回一个Infinity
Infinity关键字表示正无穷 或-Infinity关键字表示负无穷
使用typeof 检查Infinity也会返回number

• 可以使用 typeof 运算符来检查数据的类型

  语法：typeof 变量名

  检查字符串时会返回string,检查数值型时会返回number

• NAN是一个特殊的数字(非法数字) 表示not a number

  检查NAN的类型时，返回的是number

• Number有最小值 Number.MIN_VALUE 大小是5e-324 大于0的最小 小数

• 使用JS进行浮点运算时 存在着精度不准确的问题

Null

Null数据类型只有一个null值

null这个值专门用来表示一个空的对象

使用typeof检查一个null值时 得到的是Object

Undefined

Undefined数据类型也只有一个值 那就是undefined

当声明了一个变量而没有赋值时，它的值就是undefined

使用typeof 检查数据类型得到的是Undefined

如果使用一个连声明都没有的对象，浏览器会报错

Boolean

true或false

Object

5.类型强制转换

将其他数据类型转换成String类型

• 方法一：调用被转换数据toString()方法

  var a=123; a=a.toString();

  但是Null和Undefined数据类型不适用toString()方法

• 方法二：调用String()函数 将a转换成字符串

  var a=123 a=String(a);

  Null和Undefined数据类型都适用String()函数

  对于Number和Boolean本质上也是调用toString()方法，

  而对于null直接转成“null” undefined直接转成“undefined”

使用Boolean()函数 将其他类型转换成boolean

• ​ 数字转Boolean 除了0和NAN其他都是true

• ​ 字符串转Boolean除了空串其他都是true

• ​ null和undefined都是false

• 对象转都是true

  Boolean()函数的原理是进行两次非运算

将字符串型数字转换成数字，只需要在字符串前添加加号

6.运算符

1.逻辑运算符

&& || ! (与或非)

对于非布尔值的逻辑运算，会先将其转换为布尔值，然后再运算，最后返回原值

• 与运算 ：如果第一个值为true,则返回第二个原值

  ​ 如果第一个值为false,则直接返回第一个原值

• 或运算：如果第一个值为true,则直接返回第一个值

  ​ 如果第一个值为false,则直接返回第二个值

2.关系运算符

【数值之间的比较，很简单】

【数值和非数值的比较，会进行强制转换，先将非数值转换成数值，再进行比较】

【字符串和字符串比较，不会先转换成数值，而是比较字符串的unicode编码，比较字符编码时，一位一位比较，逐位比较

两个字符串型数字进行比较时，可能会得到不可预期的结果，因此我们不介意这么做，而应该用类型转换，将其中一个字符串型数字转换成数字

【如果两个不同类型的值进行相等比较，则先会转换成相同类型，再进行比较，！=运算符原理类似】

【NAN不和任何值相等，可以通过isNaN（）函数来判断一个值是否是NaN】

【===全等运算符，不会自动做类型转换，“123”===123返回false】

【！==不全等运算符，不会自动做类型转换，“123”！==123返回true】

3.条件运算符

条件 ? 语句1 ：语句2

条件运算符在执行时，先对条件表达式进行求值，如果为true则执行返回第一个语句的结果，如果为false，则执行返回第二个语句的结果

返回a,b之间的最大值：a>b ? a :b

如果条件表达式的值不是布尔值，则会转换成布尔值

4.运算符优先级

逻辑运算符 not and or 优先级依次降低

如果不确定优先级，可以使用括号先算该变优先级

7.unicode编码在网页中的使用

在js中使用: 在字符串中使用转义字符输入unicode编码，“\u+16进制数”

在html中使用unicode编码：&nbsp；&加#10进制数加 ;分号

8.代码块

{

语句1；

语句2；

}

一个花括号中的语句我们称为代码块，在代码的最后面不需要写分号，在ES5中花括号除了分组，没有其他任何的功能，因此代码块内部的内容，在外部是完全可见的

9.选择和循环结构

• if else if …( 需要多少个else if )就写多少个 else

  • 当该语句执行时，会从上到下依次执行，如果值为true就执行当前语句，如果为false就继续执行下一条语句，如果都不成立，就执行else的语句

  • 该语句中只有一个代码块会执行，一旦这个代码块执行了，就直接结束if

• prompt（）函数可以弹出一个提示框，该提示框带有文本输入框

  函数的参数会作为提示框的提示内容展示给用户

  用户在文本输入框输入的内容会作为函数的返回值，可以定义一个变量接受此返回值

• for循环中的三个部分可以省略，也可以写在外部

• 如果for循环中不写任何的表达式，只写两个分号，就是个死循环