首页 > 代码库 > js语法概述
js语法概述
# 语法概述
## JavaScript的引入方式
1. 直接在`script`标签内部书写代码
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
console.log(‘hello, world‘);
</script>
</head>
<body>
</body>
</html>
```
2. 通过`script`标签的`src`属性，引入外部的JavaScript文件
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="http://www.mamicode.com/index.js"></script>
</body>
</html>
```
## 数据类型
在JavaScript中一种有5种原始类型
- 数值类型(`number`)
- 字符串类型(`string`)
- 布尔值类型(`boolean`)
- null
- undefined
## 变量的命名规则
命名规则：
- 第一个字符可以是任意Unicode大小写字母，以及美元符号($)和下划线(_)。
- 第二个字符及后面的字符，还可以用数字。
- 不能使用保留字作为变量名
##### *JavaScript保留字*
`abstract`
`boolean` `break` `byte`
`case` `catch` `char` `class` `const` `continue`
`debugger` `default` `delete` `do` `double`
`else` `enum` `export` `extends`
`false` `final` `finally` `float` `for` `function`
`goto`
`if` `implements` `import` `in` `instanceof` `int` `interface`
`long`
`native` `new` `null`
`package` `private` `protected` `public`
`return`
`short` `static` `super` `switch` `synchronized`
`this` `throw` `throws` `transient` `true` `try` `typeof`
`var` `void` `volatile`
`while` `with`
*example*
#### 合法的命名规则
`arg0`
`_tmp`
`$elem`
`π`
#### 不合法的命名规则
`1a`
`23`
`***`
`a+b`
`-d`
`var`
`return`
## 操作符
ECMA-262描述了一组用于操作数据值的操作符，包括算术操作符(如加号和减号)、位操作符、关系操作符和相等操作符。
#### 一元操作符
1. 递增和递减操作符(`++` `--`)
2. 一元加和减操作符
###### 对非数值应用一元加操作符时，该操作符会把这个数值强制转换成数值类型
#### 算术操作符
`+` `-` `*` `/` `%`
#### 逻辑操作符
不同类型的值转换成布尔值
##### 对象 => `true`
##### 空字符串 => `false`
##### 非空字符串 => `true`
##### 数值0 => `false`
##### 任意非0数值(包括`Infinity`) => `true`
##### `null` => `false`
##### `NaN` => `false`
##### `undefined` => `false`
1. 逻辑非(`!`)
###### 逻辑非运算符有一个叹号(`!`)表示，可以用于JS中任何值。无论这个值是什么数据类型，该操作符都会返回一个布尔值。
###### 操作不同类型值的返回值
###### 1. 如果该值是一个对象，返回`false`
###### 2. 如果该值是一个空字符串，返回`true`
###### 3. 如果该值是一个非空字符串，返回`false`
###### 4. 如果该值是一个数值`0`，返回`true`
###### 5. 如果该值是任意非`0`数值(包括`Infinity`)，返回`false`
###### 6. 如果该值是`null`，返回`true`
###### 7. 如果该值是`NaN`，返回`true`
###### 8. 如果该值是`undefined`，返回`true`
2. 逻辑与(`&&`)
###### 逻辑与有两个和号(`&&`)表示，有两个操作数，可以操作JS中的任意两个值。当两个数据值都是布尔值的时候，该操作符会返回布尔值。如果有一个数值不是布尔值，那么则不一定会返回布尔值。
###### 但有一个数据值不是布尔值的时候，它的返回结果遵循以下规则：
###### 1. 如果第一个操作数是对象，则返回第二个操作数
###### 2. 如果第二个操作数是对象，则只有在第一个操作数的求值结果为`true`的情况下才会返回该对象
###### 3. 如果两个操作数都是对象，那么会返回第二个操作数
###### 4. 如果有一个操作数是`null`，那么返回`null`
###### 5. 如果有一个操作数是`NaN`，那么返回`NaN`
###### 6. 如果有一个操作数是`undefined`，那么返回`undefined`
3. 逻辑或(`||`)
###### 逻辑或操作符有两个竖线符号(`||`)，有两个操作数，可以操作JS中的任意两个值。
###### 如果两个操作数都是布尔值，只有在两个操作数都为`false`的时候才会返回`false`，否则返回`true`。
###### 如果有一个操作数不是布尔值，则遵循以下规则：
###### 1. 如果第一个操作数是对象，则返回第一个操作数
###### 2. 如果第一个操作数的求值结果为`false`，则返回第二个操作数
###### 3. 如果两个数都是对象，则返回第一个操作数
###### 4. 如果两个操作数都是`null`，则返回`null`
###### 5. 如果两个操作数都是`NaN`，则返回`NaN`
###### 6. 如果两个操作数都是`undefined`，则返回`undefined`
4. 短路操作
###### 在`与`操作符(`&&`)和`或`操作符(`||`)中，如果第一个操作数就已经能确定最终返回的结果，那么就不会去计算第二个操作数了
## 关系操作符
小于(`<`)、大于(`>`)、小于等于(`<=`)、大于等于(`>=`)这几个关系操作符用于对两个值进行比较，比较的规则与我们在上数学课上所学的一样。这几个操作符都会返回一个布尔值。
## 相等操作符
相等操作符(`==`)、不相等操作符(`!=`)、全等操作符(`===`)、不全等操作符(`!==`)
#### 相等和不相等 => 先转换类型再比较
#### 全等和不全等 => 仅比较而不转换类型
## 赋值操作符
简单的赋值操作符由等于号(`=`)表示，起作用就是把右侧的值赋给左侧的变量。
## 条件操作符(三目运算符)
`boolean_expression ? true_value : false_value`
## 运算符的优先级
| 运算符 | 描述 |
| ---------------------------------------- | -------------------------- |
| `++` `--` `-` `+` `~` `!` `delete` `new` `typeof` `void` | 一元运算符、返回数据类型、对象创建、未定义值 |
| `*` `/` `%` | 乘法、除法、取模 |
| `+` `-` `+` | 加法、减法、字符串连接 |
| `<<` `>>` `>>>` | 移位 |
| `<` `<=` `>` `>=` `instanceof` | 小于、小于等于、大于、大于等于、instanceof |
| `==` `!=` `===` `!==` | 等于、不等于、严格相等、非严格相等 |
| `&&` | 逻辑与 |
| `\|\|` | 逻辑或 |
| `?:` | 条件 |
| `=` | 赋值、运算赋值 |
下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。
## 代码注释
源码中被JavaScript引擎忽略的部分就叫做注释，它的作用是对代码进行解释。Javascript提供两种注释：一种是单行注释，用 `//` 起头；另一种是多行注释，放在 `/*` 和 `*/` 之间。
```javascript
// 单行注释
/*
*
* 多行注释
*
**/
```
js语法概述